@automattic/jetpack-components 0.66.0 → 0.67.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.67.0] - 2025-02-17
+### Added
+- Use full import paths with JS extensions. [#41524]
+
+## [0.66.1] - 2025-02-11
+### Changed
+- Internal updates.
+
 ## [0.66.0] - 2025-02-05
 ### Added
 - jetpack-components: Export the getRedirectUrl function with subpath [#41078]
@@ -1282,6 +1290,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.67.0]: https://github.com/Automattic/jetpack-components/compare/0.66.1...0.67.0
+[0.66.1]: https://github.com/Automattic/jetpack-components/compare/0.66.0...0.66.1
 [0.66.0]: https://github.com/Automattic/jetpack-components/compare/0.65.5...0.66.0
 [0.65.5]: https://github.com/Automattic/jetpack-components/compare/0.65.4...0.65.5
 [0.65.4]: https://github.com/Automattic/jetpack-components/compare/0.65.3...0.65.4

package/components/action-button/index.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import React from 'react';
-import Button from '../button';
+import Button from '../button/index.js';
 import styles from './style.module.scss';
 
 /**

package/components/action-popover/index.tsx

@@ -4,18 +4,18 @@
 import { Popover } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
-import Button from '../button';
-import useBreakpointMatch from '../layout/use-breakpoint-match';
-import Text from '../text';
+import Button from '../button/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import Text from '../text/index.js';
 /**
  * Internal dependencies
  */
-import ThemeProvider from '../theme-provider';
+import ThemeProvider from '../theme-provider/index.js';
 import styles from './styles.module.scss';
 /**
  * Types
  */
-import { ActionPopoverProps } from './types';
+import { ActionPopoverProps } from './types.js';
 import type React from 'react';
 
 const ActionPopover = ( {

package/components/admin-page/index.tsx

@@ -2,12 +2,12 @@ import restApi from '@automattic/jetpack-api';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useEffect, useCallback } from 'react';
-import JetpackFooter from '../jetpack-footer';
-import JetpackLogo from '../jetpack-logo';
-import Col from '../layout/col';
-import Container from '../layout/container';
+import JetpackFooter from '../jetpack-footer/index.js';
+import JetpackLogo from '../jetpack-logo/index.js';
+import Col from '../layout/col/index.js';
+import Container from '../layout/container/index.js';
 import styles from './style.module.scss';
-import type { AdminPageProps } from './types';
+import type { AdminPageProps } from './types.js';
 import type React from 'react';
 
 /**

package/components/admin-page/types.ts

@@ -1,4 +1,4 @@
-import type { JetpackFooterMenuItem } from '../jetpack-footer/types';
+import type { JetpackFooterMenuItem } from '../jetpack-footer/types.js';
 
 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';
+import type { AdminSectionBaseProps } from '../types.js';
 
 /**
  * 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';
+import type { AdminSectionBaseProps } from '../types.js';
 
 /**
  * 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';
+import { AutomatticBylineLogoProps } from './types.js';
 
 /**
  * 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';
-import type { BoostScoreBarProps } from './types';
+import Gridicon from '../gridicon/index.js';
+import type { BoostScoreBarProps } from './types.js';
 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 '.';
+import { Annotation } from './index.js';
 
 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';
-import Background from './background';
-import UplotLineChart from './uplot-line-chart';
+import Text from '../text/index.js';
+import Background from './background.js';
+import UplotLineChart from './uplot-line-chart.js';
 import './style.scss';
 
 export interface Period {

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 '.';
+import { Period } from './index.js';
 
 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';
-import { Period } from '.';
+import { Tooltip } from './tooltip.js';
+import { Period } from './index.js';
 
 /**
  * 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';
-import numberFormat from '../number-format';
-import { annotationsPlugin } from './annotations-plugin';
-import { dayHighlightPlugin } from './day-highlight-plugin';
-import getDateFormat from './get-date-format';
-import { tooltipsPlugin } from './tooltips-plugin';
-import { useBoostScoreTransform } from './use-boost-score-transform';
-import useResize from './use-resize';
-import { type Annotation, Period } from '.';
+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 './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';
+import { Period } from './index.js';
 
 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';
+import type { ButtonProps } from './types.js';
 
 /**
  * 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';
-import Text from '../text';
+import IconTooltip from '../icon-tooltip/index.js';
+import Text from '../text/index.js';
 import styles from './style.module.scss';
-import { CutBaseProps } from './types';
+import { CutBaseProps } from './types.js';
 import type React from 'react';
 
 const ContextualUpgradeTrigger: React.FC< CutBaseProps > = ( {

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';
-import { ClipboardIcon, CheckmarkIcon } from '../icons';
-import { CopyToClipboardProps } from './types';
+import Button from '../button/index.js';
+import { ClipboardIcon, CheckmarkIcon } from '../icons/index.js';
+import { CopyToClipboardProps } from './types.js';
 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';
+import { ButtonProps } from '../button/types.js';
 
 export type CopyToClipboardProps = ButtonProps & {
 	buttonStyle?: 'icon' | 'text' | 'icon-text';

package/components/decorative-card/index.tsx

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

package/components/dialog/index.tsx

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

package/components/diff-viewer/index.tsx

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

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';
+import { useGlobalNotices } from './use-global-notices.js';
 
 export type GlobalNoticesProps = {
 	maxVisibleNotices?: number;

package/components/global-notices/index.ts

@@ -1,3 +1,3 @@
-export * from './global-notices';
-export * from './use-global-notices';
+export * from './global-notices.js';
+export * from './use-global-notices.js';
 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';
+import { GridiconProps } from './types.js';
 
 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';
-import Gridicon from '../gridicon/index';
-import { IconTooltipProps, Placement, Position } from './types';
+import Button from '../button/index.js';
+import Gridicon from '../gridicon/index.js';
+import { IconTooltipProps, Placement, Position } from './types.js';
 
 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';
+import { BaseIconProps } from './types.js';
 import type React from 'react';
 
 /**

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';
+import { IndeterminateProgressBarProps } from './types.js';
 import type React from 'react';
 
 /**

package/components/jetpack-footer/index.tsx

@@ -3,14 +3,14 @@ import { __, _x } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import clsx from 'clsx';
 import React from 'react';
-import { getRedirectUrl } from '../..';
-import { STORE_ID as CONNECTION_STORE_ID } from '../../../../js-packages/connection/state/store';
-import getSiteAdminUrl from '../../tools/get-site-admin-url';
-import AutomatticBylineLogo from '../automattic-byline-logo';
+import { STORE_ID as CONNECTION_STORE_ID } from '../../../../js-packages/connection/state/store.jsx';
+import { getRedirectUrl } from '../../index.js';
+import getSiteAdminUrl from '../../tools/get-site-admin-url/index.js';
+import AutomatticBylineLogo from '../automattic-byline-logo/index.js';
 import './style.scss';
-import JetpackLogo from '../jetpack-logo';
-import useBreakpointMatch from '../layout/use-breakpoint-match';
-import type { JetpackFooterProps, JetpackFooterMenuItem } from './types';
+import JetpackLogo from '../jetpack-logo/index.js';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.js';
 
 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';
+import { JetpackLogoProps } from './types.js';
 
 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';
+import { JetpackProtectLogoProps } from './types.js';
 
 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';
+import { JetpackSearchLogoProps } from './types.js';
 
 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';
+import { JetpackLogoProps } from './types.js';
 
 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';
+import { JetpackLogoProps } from './types.js';
 
 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';
+import { ColProps } from '../types.js';
 import styles from './style.module.scss';
 import type React from 'react';
 

package/components/layout/container/index.tsx

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

package/components/notice/style.module.scss

@@ -19,13 +19,14 @@
 }
 
 .close-button {
-	width: calc( var( --spacing-base ) * 3 );
-	height: calc( var( --spacing-base ) * 3 );
-
+	padding: 0;
 	background-color: transparent;
 	border: none;
 	cursor: pointer;
 	outline: none;
+	svg {
+		display: block;
+	}
 }
 
 // Mobile layout differences.

package/components/number-format/index.ts

@@ -1,4 +1,4 @@
-import { getUserLocale } from '../../lib/locale';
+import { getUserLocale } from '../../lib/locale/index.js';
 
 /**
  * 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 from 'react-slider';
-import { NumberSliderProps } from './types';
+import { NumberSliderProps } from './types.js';
 import './style.scss';
 
 /**

package/components/pricing-card/index.tsx

@@ -2,9 +2,9 @@ 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';
-import type { PricingCardProps } from './types';
-import type { CurrencyObject } from '@automattic/format-currency/src/types';
+import TermsOfService from '../terms-of-service/index.js';
+import type { PricingCardProps } from './types.js';
+import type { CurrencyObject } from '@automattic/format-currency/src/types.js';
 import type React from 'react';
 
 import './style.scss';

package/components/pricing-table/index.tsx

@@ -10,17 +10,17 @@ import React, {
 	ReactElement,
 	CSSProperties,
 } from 'react';
-import IconTooltip from '../icon-tooltip';
-import useBreakpointMatch from '../layout/use-breakpoint-match';
-import TermsOfService from '../terms-of-service';
-import Text from '../text';
+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';
 import {
 	PricingTableProps,
 	PricingTableColumnProps,
 	PricingTableHeaderProps,
 	PricingTableItemProps,
-} from './types';
+} from './types.js';
 
 const INCLUDED_TEXT = __( 'Included', 'jetpack-components' );
 const NOT_INCLUDED_TEXT = __( 'Not included', 'jetpack-components' );

package/components/pricing-table/types.ts

@@ -1,4 +1,4 @@
-import type { Placement } from '../icon-tooltip/types';
+import type { Placement } from '../icon-tooltip/types.js';
 
 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';
+import { getIconBySlug } from '../icons/index.js';
 import styles from './style.module.scss';
-import { IconsCardProps } from './types';
+import { IconsCardProps } from './types.js';
 
 /**
  * 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';
-import Button from '../button/index';
-import { CheckmarkIcon } from '../icons/index';
-import ProductPrice from '../product-price/index';
-import Text, { H3, Title } from '../text/index';
-import { IconsCard } from './icons-card';
-import { ProductOfferHeader } from './product-offer-header';
+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 styles from './style.module.scss';
-import { ProductOfferProps } from './types';
+import { ProductOfferProps } from './types.js';
 import type React from 'react';
 
 /**
@@ -112,4 +112,4 @@ const ProductOffer: React.FC< ProductOfferProps > = ( {
 };
 
 export default ProductOffer;
-export * from './icons-card';
+export * from './icons-card.js';

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';
+import Text from '../text/index.js';
 import styles from './style.module.scss';
-import { ProductOfferHeaderProps } from './types';
+import { ProductOfferHeaderProps } from './types.js';
 import type React from 'react';
 
 /**

package/components/product-offer/types.ts

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

package/components/product-price/index.tsx

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

package/components/product-price/price.tsx

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

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';
+import { ProgressBarProps } from './types.js';
 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';
+import numberFormat from '../number-format/index.js';
 
 import './style.scss';
 

package/components/split-button/index.tsx

@@ -1,6 +1,6 @@
 import { ButtonGroup, Button, DropdownMenu } from '@wordpress/components';
 import styles from './style.module.scss';
-import { SplitButtonProps } from './types';
+import { SplitButtonProps } from './types.js';
 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';
-import Text from '../text';
+import numberFormat from '../number-format/index.js';
+import Text from '../text/index.js';
 import styles from './style.module.scss';
-import { StatCardProps } from './types';
+import { StatCardProps } from './types.js';
 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';
+import Text from '../text/index.js';
 import styles from './style.module.scss';
 
 interface StatusProps {

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';
-import Text from '../text';
-import type { TermsOfServiceProps } from './types';
+import { getRedirectUrl } from '../../../components/index.js';
+import Text from '../text/index.js';
+import type { TermsOfServiceProps } from './types.js';
 import './styles.scss';
 
 const TermsOfService: React.FC< TermsOfServiceProps > = ( {

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

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

package/components/testimonials/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback } from '@wordpress/element';
-import Gridicon from '../gridicon';
-import { Testimonial } from './testimonial';
-import { TestimonialsType } from './types';
+import Gridicon from '../gridicon/index.js';
+import { Testimonial } from './testimonial.js';
+import { TestimonialsType } from './types.js';
 
 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';
+import type { TestimonialType } from './types.js';
 
 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';
+import { BOX_MODEL_VALUES, VARIANTS_MAPPING } from './constants.js';
 import styles from './style.module.scss';
-import type { H3Props, TextProps, TitleProps } from './types';
+import type { H3Props, TextProps, TitleProps } from './types.js';
 
 /**
  * Text component.
@@ -87,4 +87,4 @@ export const Title: React.FC< TitleProps > = ( {
 	</Text>
 );
 
-export * from './constants';
+export * from './constants.js';

package/components/text/types.ts

@@ -1,4 +1,4 @@
-import { VARIANTS_MAPPING } from './constants';
+import { VARIANTS_MAPPING } from './constants.js';
 import type React from 'react';
 
 export type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;

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';
+import { ThemeInstance, ThemeProviderProps } from './types.js';
 
 export const typography = {
 	// Headline

package/components/threat-modal/fixer-state-notice.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import styles from './styles.module.scss';
-import ThreatNotice from './threat-notice';
+import ThreatNotice from './threat-notice.js';
 
 /**
  * FixerStateNotice component

package/components/threat-modal/index.tsx

@@ -1,10 +1,11 @@
 import { type Threat } from '@automattic/jetpack-scan';
 import { Modal } from '@wordpress/components';
 import { createContext } from 'react';
-import Text from '../text';
-import ThreatSeverityBadge from '../threat-severity-badge';
+import Text from '../text/index.js';
+import ThreatSeverityBadge from '../threat-severity-badge/index.js';
 import styles from './styles.module.scss';
-import ThreatFixConfirmation from './threat-fix-confirmation';
+import ThreatFixConfirmation from './threat-fix-confirmation.js';
+
 interface ThreatModalContextType {
 	closeModal: () => void;
 	threat: Threat;

package/components/threat-modal/threat-actions.tsx

@@ -2,9 +2,9 @@ import { getFixerState, getDetailedFixerAction } from '@automattic/jetpack-scan'
 import { __ } from '@wordpress/i18n';
 import { useCallback, useContext, useMemo } from 'react';
 import { Button } from '@automattic/jetpack-components';
-import FixerStateNotice from './fixer-state-notice';
+import FixerStateNotice from './fixer-state-notice.js';
 import styles from './styles.module.scss';
-import { ThreatModalContext } from '.';
+import { ThreatModalContext } from './index.js';
 
 /**
  * ThreatActions component

package/components/threat-modal/threat-fix-confirmation.tsx

@@ -1,11 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import { useContext } from 'react';
-import ThreatActions from './threat-actions';
-import ThreatFixDetails from './threat-fix-details';
-import ThreatNotice from './threat-notice';
-import ThreatSummary from './threat-summary';
-import ThreatTechnicalDetails from './threat-technical-details';
-import { ThreatModalContext } from '.';
+import ThreatActions from './threat-actions.js';
+import ThreatFixDetails from './threat-fix-details.js';
+import ThreatNotice from './threat-notice.js';
+import ThreatSummary from './threat-summary.js';
+import ThreatTechnicalDetails from './threat-technical-details.js';
+import { ThreatModalContext } from './index.js';
 
 /**
  * ThreatFixConfirmation component

package/components/threat-modal/threat-fix-details.tsx

@@ -1,10 +1,10 @@
 import { getFixerDescription } from '@automattic/jetpack-scan';
 import { __, sprintf } from '@wordpress/i18n';
 import React, { useMemo, useContext } from 'react';
-import ContextualUpgradeTrigger from '../contextual-upgrade-trigger';
-import Text from '../text';
+import ContextualUpgradeTrigger from '../contextual-upgrade-trigger/index.js';
+import Text from '../text/index.js';
 import styles from './styles.module.scss';
-import { ThreatModalContext } from '.';
+import { ThreatModalContext } from './index.js';
 
 /**
  * ThreatFixDetails component

package/components/threat-modal/threat-notice.tsx

@@ -4,7 +4,7 @@ import { Icon, warning } from '@wordpress/icons';
 import { useContext } from 'react';
 import { Text, Button } from '@automattic/jetpack-components';
 import styles from './styles.module.scss';
-import { ThreatModalContext } from '.';
+import { ThreatModalContext } from './index.js';
 
 /**
  * ThreatNotice component

package/components/threat-modal/threat-summary.tsx

@@ -1,9 +1,9 @@
 import { __ } from '@wordpress/i18n';
 import { useContext } from 'react';
 import { Button } from '@automattic/jetpack-components';
-import Text from '../text';
+import Text from '../text/index.js';
 import styles from './styles.module.scss';
-import { ThreatModalContext } from '.';
+import { ThreatModalContext } from './index.js';
 
 /**
  * ThreatSummary component

package/components/threat-modal/threat-technical-details.tsx

@@ -2,10 +2,10 @@ import { __ } from '@wordpress/i18n';
 import { chevronDown, chevronUp, Icon } from '@wordpress/icons';
 import { useState, useCallback, useContext } from 'react';
 import { Text, Button } from '@automattic/jetpack-components';
-import DiffViewer from '../diff-viewer';
-import MarkedLines from '../marked-lines';
+import DiffViewer from '../diff-viewer/index.js';
+import MarkedLines from '../marked-lines/index.js';
 import styles from './styles.module.scss';
-import { ThreatModalContext } from '.';
+import { ThreatModalContext } from './index.js';
 
 /**
  * ThreatTechnicalDetails component

package/components/threat-severity-badge/index.tsx

@@ -1,5 +1,5 @@
 import { _x } from '@wordpress/i18n';
-import Badge from '../badge';
+import Badge from '../badge/index.js';
 
 const ThreatSeverityBadge = ( { severity } ) => {
 	if ( severity >= 5 ) {

package/components/threats-data-views/index.tsx

@@ -15,9 +15,9 @@ import { dateI18n } from '@wordpress/date';
 import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/icons';
 import { useCallback, useMemo, useState } from 'react';
-import Badge from '../badge';
-import ThreatFixerButton from '../threat-fixer-button';
-import ThreatSeverityBadge from '../threat-severity-badge';
+import Badge from '../badge/index.js';
+import ThreatFixerButton from '../threat-fixer-button/index.js';
+import ThreatSeverityBadge from '../threat-severity-badge/index.js';
 import {
 	THREAT_ACTION_FIX,
 	THREAT_ACTION_IGNORE,
@@ -38,9 +38,9 @@ import {
 	THREAT_ICONS,
 	THREAT_STATUSES,
 	THREAT_TYPES,
-} from './constants';
+} from './constants.js';
 import styles from './styles.module.scss';
-import ThreatsStatusToggleGroupControl from './threats-status-toggle-group-control';
+import ThreatsStatusToggleGroupControl from './threats-status-toggle-group-control.js';
 
 /**
  * DataViews component for displaying security threats.

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';
+import { UpsellBannerProps } from './types.js';
 
 import './style.scss';
 

package/components/zendesk-chat/index.tsx

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

package/index.ts

@@ -14,75 +14,75 @@ along with this program; if not, write to the Free Software
 Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 */
 
-export { default as JetpackLogo } from './components/jetpack-logo';
-export { default as JetpackSearchLogo } from './components/jetpack-search-logo';
-export { default as JetpackProtectLogo } from './components/jetpack-protect-logo';
-export { default as JetpackVaultPressBackupLogo } from './components/jetpack-vaultpress-backup-logo';
-export { default as JetpackVideoPressLogo } from './components/jetpack-videopress-logo';
-export { default as getRedirectUrl } from './tools/jp-redirect';
-export { default as getProductCheckoutUrl } from './tools/get-product-checkout-url';
-export { isFirstMonthTrial } from './tools/pricing-utils';
-export { default as AutomatticBylineLogo } from './components/automattic-byline-logo';
-export { default as AutomatticIconLogo } from './components/automattic-icon-logo';
-export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo';
-export { default as JetpackFooter } from './components/jetpack-footer';
-export { default as Spinner } from './components/spinner';
-export { default as Gridicon } from './components/gridicon';
-export { default as IconTooltip } from './components/icon-tooltip';
-export { default as ActionButton } from './components/action-button';
-export { default as PricingCard } from './components/pricing-card';
-export { default as NumberSlider } from './components/number-slider';
-export { default as AdminSection } from './components/admin-section/basic';
-export { default as AdminSectionHero } from './components/admin-section/hero';
-export { default as AdminPage } from './components/admin-page';
-export { default as DecorativeCard } from './components/decorative-card';
-export { default as Col } from './components/layout/col';
-export { default as Testimonials } from './components/testimonials';
-export { default as Container } from './components/layout/container';
-export { default as useBreakpointMatch } from './components/layout/use-breakpoint-match';
-export { default as CopyToClipboard } from './components/copy-to-clipboard';
-export * from './components/icons';
-export { default as SplitButton } from './components/split-button';
-export { default as ThemeProvider } from './components/theme-provider';
-export { default as ThreatFixerButton } from './components/threat-fixer-button';
-export { default as ThreatSeverityBadge } from './components/threat-severity-badge';
-export { default as ThreatsDataViews } from './components/threats-data-views';
-export { default as Text, H2, H3, Title } from './components/text';
-export { default as ToggleControl } from './components/toggle-control';
-export { default as NumberControl } from './components/number-control';
-export { default as numberFormat } from './components/number-format';
-export { default as QRCode } from './components/qr-code';
-export { default as Button } from './components/button';
-export type { ButtonProps } from './components/button/types';
-export { default as LoadingPlaceholder } from './components/loading-placeholder';
-export { default as TermsOfService } from './components/terms-of-service';
-export { default as Chip } from './components/chip';
+export { default as JetpackLogo } from './components/jetpack-logo/index.js';
+export { default as JetpackSearchLogo } from './components/jetpack-search-logo/index.js';
+export { default as JetpackProtectLogo } from './components/jetpack-protect-logo/index.js';
+export { default as JetpackVaultPressBackupLogo } from './components/jetpack-vaultpress-backup-logo/index.js';
+export { default as JetpackVideoPressLogo } from './components/jetpack-videopress-logo/index.js';
+export { default as getRedirectUrl } from './tools/jp-redirect/index.js';
+export { default as getProductCheckoutUrl } from './tools/get-product-checkout-url/index.js';
+export { isFirstMonthTrial } from './tools/pricing-utils/index.js';
+export { default as AutomatticBylineLogo } from './components/automattic-byline-logo/index.js';
+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';
+export { default as Spinner } from './components/spinner/index.js';
+export { default as Gridicon } from './components/gridicon/index.js';
+export { default as IconTooltip } from './components/icon-tooltip/index.js';
+export { default as ActionButton } from './components/action-button/index.js';
+export { default as PricingCard } from './components/pricing-card/index.js';
+export { default as NumberSlider } from './components/number-slider/index.js';
+export { default as AdminSection } from './components/admin-section/basic/index.js';
+export { default as AdminSectionHero } from './components/admin-section/hero/index.js';
+export { default as AdminPage } from './components/admin-page/index.js';
+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';
+export { default as ThemeProvider } from './components/theme-provider/index.js';
+export { default as ThreatFixerButton } from './components/threat-fixer-button/index.js';
+export { default as ThreatSeverityBadge } from './components/threat-severity-badge/index.js';
+export { default as ThreatsDataViews } from './components/threats-data-views/index.js';
+export { default as Text, H2, H3, Title } from './components/text/index.js';
+export { default as ToggleControl } from './components/toggle-control/index.js';
+export { default as NumberControl } from './components/number-control/index.js';
+export { default as numberFormat } from './components/number-format/index.js';
+export { default as QRCode } from './components/qr-code/index.js';
+export { default as Button } from './components/button/index.js';
+export type { ButtonProps } from './components/button/types.js';
+export { default as LoadingPlaceholder } from './components/loading-placeholder/index.js';
+export { default as TermsOfService } from './components/terms-of-service/index.js';
+export { default as Chip } from './components/chip/index.js';
 export {
 	default as PricingTable,
 	PricingTableColumn,
 	PricingTableHeader,
 	PricingTableItem,
-} from './components/pricing-table';
-export { default as BoostScoreBar } from './components/boost-score-bar';
-export { default as BoostScoreGraph } from './components/boost-score-graph';
-export { default as ProductPrice } from './components/product-price';
-export { default as ProductOffer, IconsCard } from './components/product-offer';
-export { default as Dialog } from './components/dialog';
-export { default as DonutMeter } from './components/donut-meter';
-export { default as RecordMeterBar } from './components/record-meter-bar';
-export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger';
-export { default as Alert } from './components/alert';
-export { default as Notice } from './components/notice';
-export { default as Popover } from './components/popover';
-export { default as Status } from './components/status';
-export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar';
-export { default as ActionPopover } from './components/action-popover';
-export { default as ZendeskChat } from './components/zendesk-chat';
-export { default as ProgressBar } from './components/progress-bar';
-export { default as UpsellBanner } from './components/upsell-banner';
-export { getUserLocale, cleanLocale } from './lib/locale';
-export { default as RadioControl } from './components/radio-control';
-export { default as StatCard } from './components/stat-card';
-export { default as DiffViewer } from './components/diff-viewer';
-export { default as MarkedLines } from './components/marked-lines';
-export * from './components/global-notices';
+} from './components/pricing-table/index.js';
+export { default as BoostScoreBar } from './components/boost-score-bar/index.js';
+export { default as BoostScoreGraph } from './components/boost-score-graph/index.js';
+export { default as ProductPrice } from './components/product-price/index.js';
+export { default as ProductOffer, IconsCard } from './components/product-offer/index.js';
+export { default as Dialog } from './components/dialog/index.js';
+export { default as DonutMeter } from './components/donut-meter/index.js';
+export { default as RecordMeterBar } from './components/record-meter-bar/index.js';
+export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.js';
+export { default as Alert } from './components/alert/index.js';
+export { default as Notice } from './components/notice/index.js';
+export { default as Popover } from './components/popover/index.js';
+export { default as Status } from './components/status/index.js';
+export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.js';
+export { default as ActionPopover } from './components/action-popover/index.js';
+export { default as ZendeskChat } from './components/zendesk-chat/index.js';
+export { default as ProgressBar } from './components/progress-bar/index.js';
+export { default as UpsellBanner } from './components/upsell-banner/index.js';
+export { getUserLocale, cleanLocale } from './lib/locale/index.js';
+export { default as RadioControl } from './components/radio-control/index.js';
+export { default as StatCard } from './components/stat-card/index.js';
+export { default as DiffViewer } from './components/diff-viewer/index.js';
+export { default as MarkedLines } from './components/marked-lines/index.js';
+export * from './components/global-notices/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.66.0",
+	"version": "0.67.0",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,7 +15,7 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.55",
+		"@automattic/jetpack-boost-score-api": "^0.1.56",
 		"@automattic/jetpack-api": "^0.18.0",
 		"@automattic/jetpack-scan": "^0.5.6",
 		"@babel/runtime": "^7",

package/tools/pricing-utils/index.ts

@@ -1,4 +1,4 @@
-import { IntroOffer } from './types';
+import { IntroOffer } from './types.js';
 
 /**
  * Returns whether an Introductory Offer is a first month trial