@automattic/jetpack-components 2.2.0 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [3.0.0] - 2026-09-08
+### Changed
+- Update package dependencies. [#51701]
+
+### Removed
+- Remove the deprecated Chip component in favor of Badge from @wordpress/ui. [#51927]
+- Remove unused components. [#51976]
+
+### Fixed
+- Admin page: Fix the page overlapping the admin menu in right-to-left languages. [#51963]
+
+## [2.3.0] - 2026-09-01
+### Added
+- Upsell Banner: Add an optional dismiss button. [#51441]
+
+### Changed
+- Update package dependencies. [#51303] [#51802]
+
 ## [2.2.0] - 2026-08-19
 ### Added
 - Gravatar: pick a stable Color Studio background color per email for initials identity avatars via bg_color [#50578]
@@ -1905,6 +1923,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[3.0.0]: https://github.com/Automattic/jetpack-components/compare/2.3.0...3.0.0
+[2.3.0]: https://github.com/Automattic/jetpack-components/compare/2.2.0...2.3.0
 [2.2.0]: https://github.com/Automattic/jetpack-components/compare/2.1.1...2.2.0
 [2.1.1]: https://github.com/Automattic/jetpack-components/compare/2.1.0...2.1.1
 [2.1.0]: https://github.com/Automattic/jetpack-components/compare/2.0.1...2.1.0

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

@@ -1,4 +1,4 @@
-declare function ActionButton(props: any): import("react/jsx-runtime").JSX.Element;
+declare function ActionButton(props: any): import("react").JSX.Element;
 declare namespace ActionButton {
     var propTypes: {
         /** The button label. */

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

@@ -2,5 +2,5 @@
  * Types
  */
 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;
+declare const ActionPopover: ({ hideCloseButton, title, children, step, totalSteps, buttonContent, buttonDisabled, buttonHref, buttonExternalLink, offset, onClose, onClick, ...otherPopoverProps }: ActionPopoverProps) => import("react").JSX.Element;
 export default ActionPopover;

package/build/components/admin-page/style.module.scss

@@ -1,8 +1,8 @@
 .admin-page {
-	margin-left: -20px; // to neutralize the padding of #wpcontent.
+	margin-inline-start: -20px; // to neutralize the padding of #wpcontent.
 
 	@media (max-width: 782px) {
-		margin-left: -10px; // to neutralize the padding of #wpcontent.
+		margin-inline-start: -10px; // to neutralize the padding of #wpcontent.
 	}
 
 	&.background {
@@ -104,7 +104,7 @@
 	// line-height: 1.6666;` — see https://github.com/WordPress/WordPress/blob/trunk/wp-content/plugins/hello.php
 	// We override only the bits that need to differ from those defaults.
 	float: none;
-	text-align: right;
+	text-align: end;
 	background: var(--wpds-color-background-surface-neutral-strong, #fff);
 	font-style: italic;
 	color: var(--wpds-color-foreground-content-neutral-weak, #87a6bc);

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

@@ -23,5 +23,5 @@ interface UplotChartProps {
  * @param {Annotation[]}                           props.annotations - The annotations to display in the chart.
  * @return {ReactElement} The JSX element representing the UplotLineChart component.
  */
-export default function UplotLineChart({ range, periods, annotations }: UplotChartProps): import("react/jsx-runtime").JSX.Element;
+export default function UplotLineChart({ range, periods, annotations }: UplotChartProps): import("react").JSX.Element;
 export {};

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

@@ -20,5 +20,5 @@ export interface DecorativeCardProps extends Omit<ComponentProps<'div'>, 'childr
  * @param {DecorativeCardProps} props - The properties.
  * @return {import('react').ReactNode} - The DecorativeCard component.
  */
-declare function DecorativeCard({ format, icon, imageUrl, className, ...rest }: DecorativeCardProps): import("react/jsx-runtime").JSX.Element;
+declare function DecorativeCard({ format, icon, imageUrl, className, ...rest }: DecorativeCardProps): import("react").JSX.Element;
 export default DecorativeCard;

package/build/components/details-viewer/index.d.ts

@@ -7,5 +7,5 @@
  */
 declare const DetailsViewer: ({ details }: {
     details: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DetailsViewer;

package/build/components/diff-viewer/index.d.ts

@@ -1,4 +1,4 @@
 export declare const DiffViewer: ({ diff }: {
     diff: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DiffViewer;

package/build/components/dot-pager/index.d.ts

@@ -10,5 +10,5 @@ type DotPagerProps = {
     tracksPrefix?: string;
     tracksFn?: (eventName: string, data?: Record<string, unknown>) => void;
 };
-declare const DotPager: ({ hasDynamicHeight, children, className, onPageSelected, isClickEnabled, rotateTime, tracksPrefix, tracksFn, ...props }: DotPagerProps) => import("react/jsx-runtime").JSX.Element;
+declare const DotPager: ({ hasDynamicHeight, children, className, onPageSelected, isClickEnabled, rotateTime, tracksPrefix, tracksFn, ...props }: DotPagerProps) => import("react").JSX.Element;
 export default DotPager;

package/build/components/global-notices/global-notices.d.ts

@@ -8,4 +8,4 @@ export type GlobalNoticesProps = {
  *
  * @return {import('react').ReactNode} The rendered notices list.
  */
-export declare function GlobalNotices({ maxVisibleNotices }: GlobalNoticesProps): import("react/jsx-runtime").JSX.Element;
+export declare function GlobalNotices({ maxVisibleNotices }: GlobalNoticesProps): import("react").JSX.Element;

package/build/components/loading-placeholder/index.d.ts

@@ -4,5 +4,5 @@ declare const LoadingPlaceholder: ({ children, width, height, className, }: {
     width?: number | string;
     height?: number;
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default LoadingPlaceholder;

package/build/components/marked-lines/index.d.ts

@@ -1,4 +1,4 @@
 declare const MarkedLines: ({ context }: {
     context: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default MarkedLines;

package/build/components/navigator-modal/footer.d.ts

@@ -12,4 +12,4 @@ export type FooterProps = React.HTMLAttributes<HTMLDivElement> & {
  *
  * @return The rendered footer.
  */
-export declare function Footer({ children, actions, isScreenLocked, className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Footer({ children, actions, isScreenLocked, className, ...props }: FooterProps): import("react").JSX.Element;

package/build/components/navigator-modal/header.d.ts

@@ -26,4 +26,4 @@ export type HeaderProps = {
  *
  * @return component
  */
-export declare function Header({ icon, title, isScreenLocked, onGoBack: onGoBackProp, onClose: onCloseProp, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ icon, title, isScreenLocked, onGoBack: onGoBackProp, onClose: onCloseProp, }: HeaderProps): import("react").JSX.Element;

package/build/components/navigator-modal/index.d.ts

@@ -11,7 +11,7 @@ type NavigatorModalProps = Omit<ModalProps, 'onRequestClose'> & TNavigatorModalC
  *
  * @return Component
  */
-declare function NavigatorModalMain({ children, className, initialPath, onClose, isDismissible, ...props }: NavigatorModalProps): import("react/jsx-runtime").JSX.Element;
+declare function NavigatorModalMain({ children, className, initialPath, onClose, isDismissible, ...props }: NavigatorModalProps): import("react").JSX.Element;
 export declare const NavigatorModal: typeof NavigatorModalMain & {
     Screen: typeof Screen & {
         displayName: string;

package/build/components/navigator-modal/screen.d.ts

@@ -42,4 +42,4 @@ export type ScreenProps = Omit<React.ComponentProps<typeof Navigator.Screen>, 'c
  *
  * @return The rendered screen.
  */
-export declare function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, onGoBack, onClose, footerContent, footerActions, children, content, ...props }: ScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare function Screen({ path, className, title, sidebar, headerIcon, isScreenLocked, onGoBack, onClose, footerContent, footerActions, children, content, ...props }: ScreenProps): import("react").JSX.Element;

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

@@ -5,5 +5,5 @@ import { StatCardProps } from './types.ts';
  * @param {StatCardProps} props - Component props.
  * @return {ReactNode} - StatCard react component.
  */
-declare const StatCard: ({ className, hideValue, icon, label, value, variant, }: StatCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatCard: ({ className, hideValue, icon, label, value, variant, }: StatCardProps) => import("react").JSX.Element;
 export default StatCard;

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

@@ -8,5 +8,5 @@ export declare const Swipeable: ({ hasDynamicHeight, children, currentPage, onPa
     isClickEnabled: any;
     onPageSelect: any;
     pageClassName: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Swipeable;

package/build/components/upsell-banner/index.d.ts

@@ -6,6 +6,7 @@ import './style.scss';
  *
  * - The primary CTA is the second button, at the right position.
  * - The secondary CTA is the first button, at the left position.
+ * - Passing `onDismiss` renders a close button in the top corner of the banner.
  *
  * @param {UpsellBannerProps} props - Component props.
  * @return {ReactNode} - UpsellBanner component.

package/build/components/upsell-banner/index.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
 import Button from '../button/index.js';
 import './style.scss';
 /**
@@ -8,13 +10,17 @@ import './style.scss';
  *
  * - The primary CTA is the second button, at the right position.
  * - The secondary CTA is the first button, at the left position.
+ * - Passing `onDismiss` renders a close button in the top corner of the banner.
  *
  * @param {UpsellBannerProps} props - Component props.
  * @return {ReactNode} - UpsellBanner component.
  */
 const UpsellBanner = props => {
-    const { icon, title, description, primaryCtaLabel, primaryCtaURL, primaryCtaIsExternalLink, primaryCtaOnClick, secondaryCtaLabel, secondaryCtaURL, secondaryCtaIsExternalLink, secondaryCtaOnClick, } = props;
-    return (_jsx(Card, { isRounded: true, size: "large", children: _jsxs(CardBody, { className: "upsell-banner", size: "large", children: [icon && (_jsx("div", { className: "upsell-banner--icon", children: _jsx("img", { src: icon, alt: "" }) })), _jsxs("div", { className: "upsell-banner--content", children: [_jsxs("div", { className: "upsell-banner--content-info", children: [_jsx("h3", { children: title }), _jsx("p", { children: createInterpolateElement(description, {
+    const { icon, title, description, primaryCtaLabel, primaryCtaURL, primaryCtaIsExternalLink, primaryCtaOnClick, secondaryCtaLabel, secondaryCtaURL, secondaryCtaIsExternalLink, secondaryCtaOnClick, onDismiss, dismissLabel, } = props;
+    return (_jsx(Card, { isRounded: true, size: "large", children: _jsxs(CardBody, { className: "upsell-banner", size: "large", children: [onDismiss && (_jsx(Button, { className: "upsell-banner--dismiss", variant: "tertiary", size: "small", icon: close, iconSize: 16, 
+                    // Button wraps its children in a span, so the tooltip an icon-only
+                    // WPButton would show on its own has to be asked for explicitly.
+                    showTooltip: true, label: dismissLabel || __('Dismiss', 'jetpack-components'), onClick: onDismiss })), icon && (_jsx("div", { className: "upsell-banner--icon", children: _jsx("img", { src: icon, alt: "" }) })), _jsxs("div", { className: "upsell-banner--content", children: [_jsxs("div", { className: "upsell-banner--content-info", children: [_jsx("h3", { children: title }), _jsx("p", { children: createInterpolateElement(description, {
                                         br: _jsx("br", {}),
                                     }) })] }), _jsxs("div", { className: "upsell-banner--content-cta", children: [secondaryCtaLabel && secondaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button secondary", href: secondaryCtaURL, onClick: secondaryCtaOnClick ?? undefined, isExternalLink: secondaryCtaIsExternalLink, children: secondaryCtaLabel })), primaryCtaLabel && primaryCtaURL && (_jsx(Button, { className: "upsell-banner--content-cta-button primary", href: primaryCtaURL, onClick: primaryCtaOnClick ?? undefined, isExternalLink: primaryCtaIsExternalLink, children: primaryCtaLabel }))] })] })] }) }));
 };

package/build/components/upsell-banner/style.scss

@@ -5,6 +5,7 @@
 .upsell-banner {
 	display: flex;
 	flex-direction: column;
+	position: relative;
 
 	background: rgb(249, 249, 246);
 	background: linear-gradient(133deg, rgb(206, 217, 242) 0%, rgb(249, 249, 246) 10%, rgb(249, 249, 246) 80%, rgb(245, 230, 179) 100%);
@@ -18,6 +19,13 @@
 		padding: 36px;
 	}
 
+	.upsell-banner--dismiss.components-button {
+		position: absolute;
+		inset-block-start: 8px;
+		inset-inline-end: 8px;
+		color: var(--jp-gray-60);
+	}
+
 	.upsell-banner--icon {
 		display: flex;
 		align-items: flex-start;

package/build/components/upsell-banner/types.d.ts

@@ -10,4 +10,8 @@ export type UpsellBannerProps = {
     secondaryCtaURL?: string;
     secondaryCtaIsExternalLink?: boolean;
     secondaryCtaOnClick?: () => void;
+    /** Renders a dismiss button in the top corner of the banner when provided. */
+    onDismiss?: () => void;
+    /** Accessible label for the dismiss button. Defaults to "Dismiss". */
+    dismissLabel?: string;
 };

package/build/index.d.ts

@@ -1,8 +1,5 @@
 export { default as JetpackLogo } from './components/jetpack-logo/index.tsx';
-export { default as JetpackSearchLogo } from './components/jetpack-search-logo/index.tsx';
-export { default as JetpackProtectLogo } from './components/jetpack-protect-logo/index.tsx';
 export { default as JetpackVaultPressBackupLogo } from './components/jetpack-vaultpress-backup-logo/index.tsx';
-export { default as JetpackVideoPressLogo } from './components/jetpack-videopress-logo/index.tsx';
 export { default as getRedirectUrl } from './tools/jp-redirect/index.ts';
 export { default as getProductCheckoutUrl } from './tools/get-product-checkout-url/index.ts';
 export { isFirstMonthTrial } from './tools/pricing-utils/index.ts';
@@ -24,38 +21,29 @@ export { default as Testimonials } from './components/testimonials/index.tsx';
 export { default as Container } from './components/layout/container/index.tsx';
 export { default as CopyToClipboard } from './components/copy-to-clipboard/index.tsx';
 export * from './components/icons/index.tsx';
-export { default as SplitButton } from './components/split-button/index.tsx';
 export { default as ThemeProvider } from './components/theme-provider/index.tsx';
 export { default as Text, H2, H3, Title } from './components/text/index.tsx';
-export { default as ToggleControl } from './components/toggle-control/index.tsx';
 export { default as NumberControl } from './components/number-control/index.tsx';
 export { default as QRCode } from './components/qr-code/index.tsx';
 export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.tsx';
 export { default as TermsOfService } from './components/terms-of-service/index.tsx';
-export { default as Chip } from './components/chip/index.tsx';
 export { default as PricingTable, PricingTableColumn, PricingTableHeader, PricingTableItem, } from './components/pricing-table/index.tsx';
 export { default as BoostScoreBar } from './components/boost-score-bar/index.tsx';
 export { default as BoostScoreGraph } from './components/boost-score-graph/index.tsx';
 export { default as ProductPrice } from './components/product-price/index.tsx';
-export { default as ProductOffer, IconsCard } from './components/product-offer/index.tsx';
-export { default as Dialog } from './components/dialog/index.tsx';
 export { default as DotPager } from './components/dot-pager/index.tsx';
 export { default as DonutMeter } from './components/donut-meter/index.tsx';
 export { default as RecordMeterBar } from './components/record-meter-bar/index.tsx';
-export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.tsx';
-export { default as Alert } from './components/alert/index.tsx';
 export { default as Notice } from './components/notice/index.tsx';
 export { default as Popover } from './components/popover/index.tsx';
-export { default as Status } from './components/status/index.tsx';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.tsx';
 export { default as ActionPopover } from './components/action-popover/index.tsx';
 export { default as ZendeskChat } from './components/zendesk-chat/index.tsx';
 export { default as ProgressBar } from './components/progress-bar/index.tsx';
 export { default as UpsellBanner } from './components/upsell-banner/index.tsx';
 export { getUserLocale, cleanLocale } from './lib/locale/index.ts';
-export { default as RadioControl } from './components/radio-control/index.tsx';
 export { default as StatCard } from './components/stat-card/index.tsx';
 export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';

package/build/index.js

@@ -13,10 +13,7 @@ You should have received a copy of the GNU General Public License
 along with this program; if not, see <https://www.gnu.org/licenses/>.
 */
 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';
@@ -37,37 +34,28 @@ export { default as Testimonials } from './components/testimonials/index.js';
 export { default as Container } from './components/layout/container/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 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 QRCode } from './components/qr-code/index.js';
 export { default as Button } from './components/button/index.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/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 DotPager } from './components/dot-pager/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';

package/components/admin-page/style.module.scss

@@ -1,8 +1,8 @@
 .admin-page {
-	margin-left: -20px; // to neutralize the padding of #wpcontent.
+	margin-inline-start: -20px; // to neutralize the padding of #wpcontent.
 
 	@media (max-width: 782px) {
-		margin-left: -10px; // to neutralize the padding of #wpcontent.
+		margin-inline-start: -10px; // to neutralize the padding of #wpcontent.
 	}
 
 	&.background {
@@ -104,7 +104,7 @@
 	// line-height: 1.6666;` — see https://github.com/WordPress/WordPress/blob/trunk/wp-content/plugins/hello.php
 	// We override only the bits that need to differ from those defaults.
 	float: none;
-	text-align: right;
+	text-align: end;
 	background: var(--wpds-color-background-surface-neutral-strong, #fff);
 	font-style: italic;
 	color: var(--wpds-color-foreground-content-neutral-weak, #87a6bc);

package/components/upsell-banner/index.tsx

@@ -1,5 +1,7 @@
 import { Card, CardBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { close } from '@wordpress/icons';
 import Button from '../button/index.tsx';
 import { UpsellBannerProps } from './types.ts';
 import type { FC, ReactNode } from 'react';
@@ -11,6 +13,7 @@ import './style.scss';
  *
  * - The primary CTA is the second button, at the right position.
  * - The secondary CTA is the first button, at the left position.
+ * - Passing `onDismiss` renders a close button in the top corner of the banner.
  *
  * @param {UpsellBannerProps} props - Component props.
  * @return {ReactNode} - UpsellBanner component.
@@ -28,11 +31,27 @@ const UpsellBanner: FC< UpsellBannerProps > = props => {
 		secondaryCtaURL,
 		secondaryCtaIsExternalLink,
 		secondaryCtaOnClick,
+		onDismiss,
+		dismissLabel,
 	} = props;
 
 	return (
 		<Card isRounded={ true } size="large">
 			<CardBody className="upsell-banner" size="large">
+				{ onDismiss && (
+					<Button
+						className="upsell-banner--dismiss"
+						variant="tertiary"
+						size="small"
+						icon={ close }
+						iconSize={ 16 }
+						// Button wraps its children in a span, so the tooltip an icon-only
+						// WPButton would show on its own has to be asked for explicitly.
+						showTooltip={ true }
+						label={ dismissLabel || __( 'Dismiss', 'jetpack-components' ) }
+						onClick={ onDismiss }
+					/>
+				) }
 				{ icon && (
 					<div className="upsell-banner--icon">
 						<img src={ icon } alt="" />

package/components/upsell-banner/style.scss

@@ -5,6 +5,7 @@
 .upsell-banner {
 	display: flex;
 	flex-direction: column;
+	position: relative;
 
 	background: rgb(249, 249, 246);
 	background: linear-gradient(133deg, rgb(206, 217, 242) 0%, rgb(249, 249, 246) 10%, rgb(249, 249, 246) 80%, rgb(245, 230, 179) 100%);
@@ -18,6 +19,13 @@
 		padding: 36px;
 	}
 
+	.upsell-banner--dismiss.components-button {
+		position: absolute;
+		inset-block-start: 8px;
+		inset-inline-end: 8px;
+		color: var(--jp-gray-60);
+	}
+
 	.upsell-banner--icon {
 		display: flex;
 		align-items: flex-start;

package/components/upsell-banner/types.ts

@@ -10,4 +10,8 @@ export type UpsellBannerProps = {
 	secondaryCtaURL?: string;
 	secondaryCtaIsExternalLink?: boolean;
 	secondaryCtaOnClick?: () => void;
+	/** Renders a dismiss button in the top corner of the banner when provided. */
+	onDismiss?: () => void;
+	/** Accessible label for the dismiss button. Defaults to "Dismiss". */
+	dismissLabel?: string;
 };

package/index.ts

@@ -14,10 +14,7 @@ along with this program; if not, see <https://www.gnu.org/licenses/>.
 */
 
 export { default as JetpackLogo } from './components/jetpack-logo/index.tsx';
-export { default as JetpackSearchLogo } from './components/jetpack-search-logo/index.tsx';
-export { default as JetpackProtectLogo } from './components/jetpack-protect-logo/index.tsx';
 export { default as JetpackVaultPressBackupLogo } from './components/jetpack-vaultpress-backup-logo/index.tsx';
-export { default as JetpackVideoPressLogo } from './components/jetpack-videopress-logo/index.tsx';
 export { default as getRedirectUrl } from './tools/jp-redirect/index.ts';
 export { default as getProductCheckoutUrl } from './tools/get-product-checkout-url/index.ts';
 export { isFirstMonthTrial } from './tools/pricing-utils/index.ts';
@@ -39,17 +36,14 @@ export { default as Testimonials } from './components/testimonials/index.tsx';
 export { default as Container } from './components/layout/container/index.tsx';
 export { default as CopyToClipboard } from './components/copy-to-clipboard/index.tsx';
 export * from './components/icons/index.tsx';
-export { default as SplitButton } from './components/split-button/index.tsx';
 export { default as ThemeProvider } from './components/theme-provider/index.tsx';
 export { default as Text, H2, H3, Title } from './components/text/index.tsx';
-export { default as ToggleControl } from './components/toggle-control/index.tsx';
 export { default as NumberControl } from './components/number-control/index.tsx';
 export { default as QRCode } from './components/qr-code/index.tsx';
 export { default as Button } from './components/button/index.tsx';
 export type { ButtonProps } from './components/button/types.ts';
 export { default as LoadingPlaceholder } from './components/loading-placeholder/index.tsx';
 export { default as TermsOfService } from './components/terms-of-service/index.tsx';
-export { default as Chip } from './components/chip/index.tsx';
 export {
 	default as PricingTable,
 	PricingTableColumn,
@@ -59,23 +53,17 @@ export {
 export { default as BoostScoreBar } from './components/boost-score-bar/index.tsx';
 export { default as BoostScoreGraph } from './components/boost-score-graph/index.tsx';
 export { default as ProductPrice } from './components/product-price/index.tsx';
-export { default as ProductOffer, IconsCard } from './components/product-offer/index.tsx';
-export { default as Dialog } from './components/dialog/index.tsx';
 export { default as DotPager } from './components/dot-pager/index.tsx';
 export { default as DonutMeter } from './components/donut-meter/index.tsx';
 export { default as RecordMeterBar } from './components/record-meter-bar/index.tsx';
-export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.tsx';
-export { default as Alert } from './components/alert/index.tsx';
 export { default as Notice } from './components/notice/index.tsx';
 export { default as Popover } from './components/popover/index.tsx';
-export { default as Status } from './components/status/index.tsx';
 export { default as IndeterminateProgressBar } from './components/indeterminate-progress-bar/index.tsx';
 export { default as ActionPopover } from './components/action-popover/index.tsx';
 export { default as ZendeskChat } from './components/zendesk-chat/index.tsx';
 export { default as ProgressBar } from './components/progress-bar/index.tsx';
 export { default as UpsellBanner } from './components/upsell-banner/index.tsx';
 export { getUserLocale, cleanLocale } from './lib/locale/index.ts';
-export { default as RadioControl } from './components/radio-control/index.tsx';
 export { default as StatCard } from './components/stat-card/index.tsx';
 export { default as DiffViewer } from './components/diff-viewer/index.tsx';
 export { default as MarkedLines } from './components/marked-lines/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "2.2.0",
+	"version": "3.0.0",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -73,34 +73,34 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.32",
-		"@automattic/jetpack-boost-score-api": "^1.0.55",
+		"@automattic/jetpack-api": "^1.0.33",
+		"@automattic/jetpack-boost-score-api": "^1.0.57",
 		"@automattic/jetpack-script-data": "^0.6.6",
-		"@automattic/number-formatters": "^1.2.7",
+		"@automattic/number-formatters": "^1.2.8",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
-		"@wordpress/admin-ui": "2.7.0",
-		"@wordpress/browserslist-config": "6.51.0",
-		"@wordpress/components": "37.0.0",
-		"@wordpress/compose": "8.4.0",
-		"@wordpress/data": "10.51.0",
-		"@wordpress/date": "5.51.0",
-		"@wordpress/element": "8.3.0",
-		"@wordpress/i18n": "6.24.0",
-		"@wordpress/icons": "15.3.0",
-		"@wordpress/notices": "5.51.0",
-		"@wordpress/theme": "1.1.0",
-		"@wordpress/ui": "0.19.0",
+		"@wordpress/admin-ui": "2.9.0",
+		"@wordpress/browserslist-config": "6.54.0",
+		"@wordpress/components": "40.0.0",
+		"@wordpress/compose": "8.7.0",
+		"@wordpress/data": "10.54.0",
+		"@wordpress/date": "5.54.0",
+		"@wordpress/element": "8.6.0",
+		"@wordpress/i18n": "6.27.0",
+		"@wordpress/icons": "15.5.0",
+		"@wordpress/notices": "5.54.0",
+		"@wordpress/theme": "2.0.0",
+		"@wordpress/ui": "0.21.0",
 		"clsx": "2.1.1",
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
-		"social-logos": "^3.3.18",
+		"social-logos": "^3.3.19",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.10",
+		"@automattic/jetpack-base-styles": "^1.2.11",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.4.1",
 		"@storybook/addon-docs": "10.4.6",
@@ -109,7 +109,7 @@
 		"@testing-library/react": "16.3.2",
 		"@testing-library/user-event": "14.6.1",
 		"@types/jest": "30.0.0",
-		"@types/react": "18.3.28",
+		"@types/react": "18.3.31",
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"jest": "30.4.2",

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

@@ -1,23 +0,0 @@
-import type { ReactNode, FC } from 'react';
-type AlertProps = {
-    /** The severity of the alert. */
-    level: 'error' | 'warning' | 'info' | 'success';
-    /** Show/Hide icon */
-    showIcon?: boolean;
-    /** Children to be rendered inside the alert. */
-    children: ReactNode;
-    /** Wrapper class name */
-    className?: string;
-};
-/**
- * Alert component
- *
- * @param {object}    props           - The component properties.
- * @param {string}    props.level     - The alert level: error, warning, info, success.
- * @param {boolean}   props.showIcon  - Whether to show the alert icon.
- * @param {string}    props.className - The wrapper class name.
- * @param {Component} props.children  - The alert content.
- * @return {ReactElement}             The `Alert` component.
- */
-declare const Alert: FC<AlertProps>;
-export default Alert;