@automattic/jetpack-components 0.72.3 → 0.72.4

package/CHANGELOG.md

@@ -2,9 +2,18 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.72.4] - 2025-04-14
+### Changed
+- Adjust relative imports in TypeScript sources to use correct extensions after enabling TypeScript's new `rewriteRelativeImportExtensions` option. [#42990]
+
+### Fixed
+- Linting: Update stylesheets to use WordPress rules for fonts and colors. [#42920] [#42928]
+- Linting: Format SCSS imports consistently. [#43018]
+- Linting: Use double colon notation for pseudo-element selectors. [#43019]
+
 ## [0.72.3] - 2025-04-07
 ### Changed
-- Code: First pass of style coding standards. [#42734]
+- Linting: First pass of style coding standards. [#42734]
 
 ### Fixed
 - Fix TypeScript type checking in the monorepo. [#42817]
@@ -1358,6 +1367,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.72.4]: https://github.com/Automattic/jetpack-components/compare/0.72.3...0.72.4
 [0.72.3]: https://github.com/Automattic/jetpack-components/compare/0.72.2...0.72.3
 [0.72.2]: https://github.com/Automattic/jetpack-components/compare/0.72.1...0.72.2
 [0.72.1]: https://github.com/Automattic/jetpack-components/compare/0.72.0...0.72.1

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

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

package/build/components/action-popover/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * Types
  */
-import { ActionPopoverProps } from './types.js';
+import { ActionPopoverProps } from './types.ts';
 declare const ActionPopover: ({ hideCloseButton, title, children, step, totalSteps, buttonContent, buttonDisabled, buttonHref, buttonExternalLink, offset, onClose, onClick, ...otherPopoverProps }: ActionPopoverProps) => import("react/jsx-runtime").JSX.Element;
 export default ActionPopover;

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

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

package/build/components/admin-page/index.d.ts

@@ -1,4 +1,4 @@
-import type { AdminPageProps } from './types.js';
+import type { AdminPageProps } from './types.ts';
 import type React from 'react';
 /**
  * This is the base structure for any admin page. It comes with Header and Footer.

package/build/components/admin-page/index.js

@@ -3,10 +3,10 @@ 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/index.js';
-import JetpackLogo from '../jetpack-logo/index.js';
-import Col from '../layout/col/index.js';
-import Container from '../layout/container/index.js';
+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';
 /**
  * This is the base structure for any admin page. It comes with Header and Footer.

package/build/components/admin-page/types.d.ts

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

package/build/components/admin-section/basic/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-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/build/components/admin-section/hero/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-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/build/components/automattic-byline-logo/index.d.ts

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

package/build/components/boost-score-bar/index.d.ts

@@ -1,4 +1,4 @@
-import type { BoostScoreBarProps } from './types.js';
+import type { BoostScoreBarProps } from './types.ts';
 import type { FunctionComponent } from 'react';
 import './style.scss';
 export declare const BoostScoreBar: FunctionComponent<BoostScoreBarProps>;

package/build/components/boost-score-bar/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import Gridicon from '../gridicon/index.js';
+import Gridicon from "../gridicon/index.js";
 import './style.scss';
 export const BoostScoreBar = ({ score, isLoading, showPrevScores, active, prevScore = 0, scoreBarType, noBoostScoreTooltip, }) => {
     if (!active) {

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

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

package/build/components/boost-score-graph/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Text from '../text/index.js';
-import Background from './background.js';
-import UplotLineChart from './uplot-line-chart.js';
+import Text from "../text/index.js";
+import Background from "./background.js";
+import UplotLineChart from "./uplot-line-chart.js";
 import './style.scss';
 /**
  * BoostScoreGraph component composed by the chart and the legend.

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

@@ -1,5 +1,5 @@
 import uPlot from 'uplot';
-import { Period } from './index.js';
+import { Period } from './index.tsx';
 /**
  * Custom tooltips plugin for uPlot.
  *

package/build/components/boost-score-graph/tooltips-plugin.js

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom/client';
-import { Tooltip } from './tooltip.js';
+import { Tooltip } from "./tooltip.js";
 /**
  * Custom tooltips plugin for uPlot.
  *

package/build/components/boost-score-graph/uplot-line-chart.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import uPlot from 'uplot';
-import { type Annotation, Period } from './index.js';
+import { type Annotation, Period } from './index.tsx';
 import './style-uplot.scss';
 interface UplotChartProps {
     periods: Period[];

package/build/components/boost-score-graph/uplot-line-chart.js

@@ -3,14 +3,14 @@ import { __ } from '@wordpress/i18n';
 import { 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 { 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 './style-uplot.scss';
 const DEFAULT_DIMENSIONS = {
     height: 300,

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ButtonProps } from './types.js';
+import type { ButtonProps } from './types.ts';
 /**
  * Button component
  *

package/build/components/contextual-upgrade-trigger/index.d.ts

@@ -1,4 +1,4 @@
-import { CutBaseProps } from './types.js';
+import { CutBaseProps } from './types.ts';
 import type React from 'react';
 declare const ContextualUpgradeTrigger: React.FC<CutBaseProps>;
 export default ContextualUpgradeTrigger;

package/build/components/contextual-upgrade-trigger/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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.js";
+import Text from "../text/index.js";
 import styles from './style.module.scss';
 const ContextualUpgradeTrigger = ({ description, cta, onClick, href, openInNewTab = false, className, tooltipText = '', }) => {
     const Tag = href !== undefined ? 'a' : 'button';

package/build/components/copy-to-clipboard/index.d.ts

@@ -1,4 +1,4 @@
-import { CopyToClipboardProps } from './types.js';
+import { CopyToClipboardProps } from './types.ts';
 import type React from 'react';
 export declare const CopyToClipboard: React.FC<CopyToClipboardProps>;
 export default CopyToClipboard;

package/build/components/copy-to-clipboard/index.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 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 Button from "../button/index.js";
+import { ClipboardIcon, CheckmarkIcon } from "../icons/index.js";
 export const CopyToClipboard = ({ buttonStyle = 'icon', textToCopy, onCopy, ...buttonProps }) => {
     const [hasCopied, setHasCopied] = useState(false);
     const copyTimer = useRef();

package/build/components/copy-to-clipboard/types.d.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';
     textToCopy: string | (() => string);

package/build/components/decorative-card/index.d.ts

@@ -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/build/components/dialog/index.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import Col from '../layout/col/index.js';
-import Container from '../layout/container/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import Col from "../layout/col/index.js";
+import Container from "../layout/container/index.js";
+import useBreakpointMatch from "../layout/use-breakpoint-match/index.js";
 import styles from './style.module.scss';
 /**
  * Dialog component.

package/build/components/diff-viewer/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
-import parseFilename from './parse-filename.js';
-import parsePatch from './parse-patch.js';
+import parseFilename from "./parse-filename.js";
+import parsePatch from "./parse-patch.js";
 import styles from './styles.module.scss';
 const filename = ({ oldFileName, newFileName, }) => {
     const { prev, next } = parseFilename(oldFileName, newFileName);

package/build/components/dot-pager/index.js

@@ -3,7 +3,7 @@ import { Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { Children, useState, useEffect, useCallback, useMemo } from 'react';
-import { Swipeable } from '../swipeable/index.js';
+import { Swipeable } from "../swipeable/index.js";
 import './style.scss';
 const Controls = ({ currentPage, numberOfPages, setCurrentPage, tracksPrefix, tracksFn, }) => {
     // Create a map of memoized handlers for each page

package/build/components/global-notices/global-notices.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SnackbarList } from '@wordpress/components';
 import styles from './styles.module.scss';
-import { useGlobalNotices } from './use-global-notices.js';
+import { useGlobalNotices } from "./use-global-notices.js";
 /**
  * Renders the global notices.
  *

package/build/components/global-notices/index.d.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/build/components/global-notices/index.js

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

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

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import './style.scss';
-import { GridiconProps } from './types.js';
+import { GridiconProps } from './types.ts';
 declare class Gridicon extends Component<GridiconProps> {
     static defaultProps: {
         'aria-hidden': string;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconTooltipProps } from './types.js';
+import { IconTooltipProps } from './types.ts';
 import './style.scss';
 /**
  * Generate Icon Tooltip

package/build/components/icon-tooltip/index.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover } from '@wordpress/components';
 import clsx from 'clsx';
 import { useCallback, useState } from 'react';
-import Button from '../button/index.js';
-import Gridicon from '../gridicon/index.js';
+import Button from "../button/index.js";
+import Gridicon from "../gridicon/index.js";
 import './style.scss';
 const placementsToPositions = (placement) => {
     const mapping = {

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

@@ -1,5 +1,5 @@
 import { SocialLogo } from 'social-logos';
-import { BaseIconProps } from './types.js';
+import { BaseIconProps } from './types.ts';
 import type React from 'react';
 export declare const AntiSpamIcon: React.FC<BaseIconProps>;
 export declare const BackupIcon: React.FC<BaseIconProps>;

package/build/components/indeterminate-progress-bar/index.d.ts

@@ -1,4 +1,4 @@
-import { IndeterminateProgressBarProps } from './types.js';
+import { IndeterminateProgressBarProps } from './types.ts';
 import type React from 'react';
 /**
  * Indeterminate Progress Bar component

package/build/components/jetpack-footer/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import './style.scss';
-import type { JetpackFooterProps } from './types.js';
+import type { JetpackFooterProps } from './types.ts';
 /**
  * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
  *

package/build/components/jetpack-footer/index.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { __, _x } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import clsx from 'clsx';
-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.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/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
+import JetpackLogo from "../jetpack-logo/index.js";
+import useBreakpointMatch from "../layout/use-breakpoint-match/index.js";
 const JetpackIcon = () => (_jsx(JetpackLogo, { logoColor: "#000", showText: false, height: 16, "aria-hidden": "true" }));
 const ExternalIcon = () => (_jsxs(_Fragment, { children: [_jsx(Icon, { icon: external, size: 16 }), _jsx("span", { className: "jp-dashboard-footer__accessible-external-link", children: 
             /* translators: accessibility text */

package/build/components/jetpack-logo/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { JetpackLogoProps } from './types.js';
+import { JetpackLogoProps } from './types.ts';
 declare const JetpackLogo: React.FC<JetpackLogoProps>;
 export default JetpackLogo;

package/build/components/jetpack-protect-logo/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { JetpackProtectLogoProps } from './types.js';
+import { JetpackProtectLogoProps } from './types.ts';
 declare const JetpackProtectLogo: React.FC<JetpackProtectLogoProps>;
 export default JetpackProtectLogo;

package/build/components/jetpack-search-logo/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { JetpackSearchLogoProps } from './types.js';
+import { JetpackSearchLogoProps } from './types.ts';
 declare const JetpackSearchLogo: React.FC<JetpackSearchLogoProps>;
 export default JetpackSearchLogo;

package/build/components/jetpack-vaultpress-backup-logo/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { JetpackLogoProps } from './types.js';
+import { JetpackLogoProps } from './types.ts';
 declare const JetpackVaultPressBackupLogo: React.FC<JetpackLogoProps>;
 export default JetpackVaultPressBackupLogo;

package/build/components/jetpack-videopress-logo/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { JetpackLogoProps } from './types.js';
+import { JetpackLogoProps } from './types.tsx';
 declare const JetpackVideoPressLogo: React.FC<JetpackLogoProps>;
 export default JetpackVideoPressLogo;

package/build/components/layout/col/index.d.ts

@@ -1,4 +1,4 @@
-import { ColProps } from '../types.js';
+import { ColProps } from '../types.ts';
 import type React from 'react';
 /**
  * The basic Col component.

package/build/components/layout/container/index.d.ts

@@ -1,4 +1,4 @@
-import { ContainerProps } from '../types.js';
+import { ContainerProps } from '../types.ts';
 import type React from 'react';
 declare const _default: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
 export default _default;

package/build/components/number-format/index.js

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

package/build/components/number-slider/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NumberSliderProps } from './types.js';
+import { NumberSliderProps } from './types.ts';
 import './style.scss';
 /**
  * Generate Number Slider

package/build/components/pricing-card/index.d.ts

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

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

@@ -3,7 +3,7 @@ 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 TermsOfService from "../terms-of-service/index.js";
 import './style.scss';
 /**
  * Whether or not to display a price's decimal part in the UI.

package/build/components/pricing-table/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PricingTableProps, PricingTableColumnProps, PricingTableHeaderProps, PricingTableItemProps } from './types.js';
+import { PricingTableProps, PricingTableColumnProps, PricingTableHeaderProps, PricingTableItemProps } from './types.ts';
 export declare const PricingTableItem: React.FC<PricingTableItemProps>;
 export declare const PricingTableHeader: React.FC<PricingTableHeaderProps>;
 export declare const PricingTableColumn: React.FC<PricingTableColumnProps>;

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

@@ -3,10 +3,10 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Icon, check, closeSmall } from '@wordpress/icons';
 import clsx from 'clsx';
 import { createContext, useContext, Children, cloneElement, } from 'react';
-import IconTooltip from '../icon-tooltip/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
-import TermsOfService from '../terms-of-service/index.js';
-import Text from '../text/index.js';
+import 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';
 const INCLUDED_TEXT = __('Included', 'jetpack-components');
 const NOT_INCLUDED_TEXT = __('Not included', 'jetpack-components');

package/build/components/pricing-table/types.d.ts

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

package/build/components/product-offer/icons-card.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconsCardProps } from './types.js';
+import { IconsCardProps } from './types.ts';
 /**
  * Icons composition for a bundle product,
  * based on the list of supported products.

package/build/components/product-offer/icons-card.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon, plus } from '@wordpress/icons';
 import { Fragment } from 'react';
-import { getIconBySlug } from '../icons/index.js';
+import { getIconBySlug } from "../icons/index.js";
 import styles from './style.module.scss';
 /**
  * Icons composition for a bundle product,

package/build/components/product-offer/index.d.ts

@@ -1,4 +1,4 @@
-import { ProductOfferProps } from './types.js';
+import { ProductOfferProps } from './types.ts';
 import type React from 'react';
 /**
  * Product Detail component.
@@ -8,4 +8,4 @@ import type React from 'react';
  */
 declare const ProductOffer: React.FC<ProductOfferProps>;
 export default ProductOffer;
-export * from './icons-card.js';
+export * from './icons-card.tsx';

package/build/components/product-offer/index.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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.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';
 /**
  * Product Detail component.
@@ -28,4 +28,4 @@ const ProductOffer = ({ addProductUrl, buttonDisclaimer, buttonText = '', classN
         }), children: [isBundle && _jsx(ProductOfferHeader, {}), _jsxs("div", { className: styles['card-container'], children: [_jsx(IconsCard, { icon: icon, products: supportedProducts?.length ? supportedProducts : [slug], size: 32 }), _jsx(H3, { children: title }), subTitle && _jsx(Title, { mb: 3, children: subTitle }), description && _jsx(Text, { mb: 3, children: description }), _jsx("ul", { className: styles.features, children: features.map((feature, id) => (_jsxs(Text, { component: "li", variant: "body", children: [_jsx(Icon, { icon: check, size: 24, className: styles.check }), feature] }, `feature-${id}`))) }), needsPurchase && (_jsx(ProductPrice, { price: price, offPrice: offPrice, currency: currency })), isFree && _jsx(H3, { children: __('Free', 'jetpack-components') }), _jsx(Alert, { level: "error", showIcon: !!error, children: error }), buttonDisclaimer, (!isBundle || (isBundle && !hasRequiredPlan)) && (_jsx(Button, { onClick: addProductUrl ? null : onAdd, isLoading: isLoading, disabled: isLoading, variant: isLoading || !isBundle ? 'primary' : 'secondary', className: styles['add-button'], ...(addProductUrl ? { href: addProductUrl } : {}), children: buttonText || defautlButtonText })), isBundle && hasRequiredPlan && (_jsxs("div", { className: styles['product-has-required-plan'], children: [_jsx(CheckmarkIcon, { size: 36 }), _jsx(Text, { children: __('Active on your site', 'jetpack-components') })] }))] })] }));
 };
 export default ProductOffer;
-export * from './icons-card.js';
+export * from "./icons-card.js";

package/build/components/product-offer/product-offer-header.d.ts

@@ -1,4 +1,4 @@
-import { ProductOfferHeaderProps } from './types.js';
+import { ProductOfferHeaderProps } from './types.ts';
 import type React from 'react';
 /**
  * Product Detail Card Header component.

package/build/components/product-offer/product-offer-header.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { __ } from '@wordpress/i18n';
 import { Icon, starFilled as star } from '@wordpress/icons';
-import Text from '../text/index.js';
+import Text from "../text/index.js";
 import styles from './style.module.scss';
 /**
  * Product Detail Card Header component.