@automattic/jetpack-components 1.12.14 → 1.12.17

package/components/icons/style.module.scss

@@ -13,11 +13,11 @@
 	fill: gb.$gray-700;
 
 	&.bluesky {
-		fill: var(--color-bluesky);
+		fill: var(--jetpack-social-logo-color-bluesky);
 	}
 
 	&.facebook {
-		fill: var(--color-facebook);
+		fill: var(--jetpack-social-logo-color-facebook);
 		// Add some specificity to override the border-radius on Jetpack settings page
 		&:global(.social-logo) {
 			border-radius: 50%;
@@ -25,27 +25,27 @@
 	}
 
 	&.twitter {
-		fill: var(--color-twitter);
+		fill: var(--jetpack-social-logo-color-twitter);
 	}
 
 	&.linkedin {
-		fill: var(--color-linkedin);
+		fill: var(--jetpack-social-logo-color-linkedin);
 	}
 
 	&.tumblr {
-		fill: var(--color-tumblr);
+		fill: var(--jetpack-social-logo-color-tumblr);
 	}
 
 	&.google {
-		fill: var(--color-gplus);
+		fill: var(--jetpack-social-logo-color-google-plus);
 	}
 
 	&.mastodon {
-		fill: var(--color-mastodon);
+		fill: var(--jetpack-social-logo-color-mastodon);
 	}
 
 	&.nextdoor {
-		fill: var(--color-nextdoor);
+		fill: var(--jetpack-social-logo-color-nextdoor);
 		// Add some specificity to override the border-radius on Jetpack settings page
 		&:global(.social-logo) {
 			border-radius: 50%;
@@ -53,15 +53,15 @@
 	}
 
 	&.instagram {
-		fill: var(--color-instagram);
+		fill: var(--jetpack-social-logo-color-instagram);
 	}
 
 	&.whatsapp {
-		fill: var(--color-whatsapp);
+		fill: var(--jetpack-social-logo-color-whatsapp);
 	}
 
 	&.threads {
-		fill: var(--color-threads);
+		fill: var(--jetpack-social-logo-color-threads);
 
 		&:global(.social-logo) {
 			border-radius: 40%;
@@ -69,7 +69,7 @@
 	}
 
 	&.x {
-		fill: var(--color-x);
+		fill: var(--jetpack-social-logo-color-x);
 	}
 }
 

package/components/jetpack-footer/style.scss

@@ -7,12 +7,13 @@
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	padding: var(--wpds-dimension-padding-xl) var(--wpds-dimension-padding-2xl);
 	width: 100%;
+	display: flex;
 
 	.jetpack-footer__menu-item {
 
 		&:any-link,
 		&[role="button"] {
-			color: var(--wpds-color-fg-interactive-neutral-weak);
+			color: var(--wpds-color-foreground-interactive-neutral-weak);
 			cursor: pointer;
 			text-decoration: none;
 		}
@@ -44,6 +45,6 @@ a.jetpack-footer__a8c {
 	}
 
 	svg {
-		fill: var(--wpds-color-fg-interactive-neutral-weak);
+		fill: var(--wpds-color-foreground-interactive-neutral-weak);
 	}
 }

package/components/pricing-table/index.tsx

@@ -59,8 +59,8 @@ export const PricingTableItem: FC< PricingTableItemProps > = ( {
 	tooltipTitle,
 	tooltipClassName = '',
 } ) => {
-	const isLg = useViewportMatch( 'large' );
-	const item = useContext( PricingTableContext )[ index ];
+	const { items, isLg } = useContext( PricingTableContext );
+	const item = items[ index ];
 	const isExplicitlyEmpty = label === '';
 	const showTick = isComingSoon || isIncluded;
 
@@ -157,11 +157,12 @@ const PricingTable: FC< PricingTableProps > = ( {
 	items,
 	children,
 	showIntroOfferDisclaimer = false,
+	breakpoint = 'large',
 } ) => {
-	const isLg = useViewportMatch( 'large' );
+	const isLg = useViewportMatch( breakpoint );
 
 	return (
-		<PricingTableContext.Provider value={ items }>
+		<PricingTableContext.Provider value={ { items, isLg } }>
 			<div
 				className={ clsx( styles.container, { [ styles[ 'is-viewport-large' ] ]: isLg } ) }
 				style={

package/components/pricing-table/styles.module.scss

@@ -1,5 +1,3 @@
-@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
-
 .container {
 	--padding: calc(var(--spacing-base) * 4);
 	--padding-horizontal: calc(var(--spacing-base) * 3);
@@ -98,11 +96,7 @@
 			background-image: url(./gradient.svg);
 			background-repeat: no-repeat;
 			background-size: 450px;
-			background-position-x: center;
-
-			@media (max-width: gb.$break-large) {
-				background-position-x: right;
-			}
+			background-position-x: right;
 		}
 
 		> :last-child {

package/components/pricing-table/types.ts

@@ -31,6 +31,15 @@ export type PricingTableProps = {
 	 * Whether to show the intro offer disclaimer text with the ToS.
 	 */
 	showIntroOfferDisclaimer?: boolean;
+
+	/**
+	 * Viewport breakpoint at or above which the table renders as columns
+	 * (below it, offers stack into blocks). Defaults to 'large' (960px).
+	 * Interstitials hosting 3 offers can pass 'xlarge' (1080px) to stack
+	 * earlier and avoid cramped columns. Accepts any `@wordpress/compose`
+	 * viewport-match breakpoint name.
+	 */
+	breakpoint?: 'mobile' | 'small' | 'medium' | 'large' | 'xlarge' | 'wide' | 'huge' | 'xhuge';
 };
 
 export type PricingTableColumnProps = {

package/components/status/index.tsx

@@ -13,7 +13,7 @@ export interface StatusProps {
 /**
  * Status component.
  *
- * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-fg-content-success-weak)` for `active`, `--wpds-color-fg-content-error-weak` for `error`, `--wpds-color-fg-content-neutral-weak` for `inactive`, `--wpds-color-fg-content-warning-weak` for `action`, `--wpds-color-fg-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
+ * @deprecated Inline the equivalent JSX using `Text` from `@wordpress/ui` and a small color-coded indicator span. The wrapper renders a flex container at `body-sm` size with `font-weight: 600` and a `0.666em` round indicator coloured by status using WPDS design tokens (`var(--wpds-color-foreground-content-success-weak)` for `active`, `--wpds-color-foreground-content-error-weak` for `error`, `--wpds-color-foreground-content-neutral-weak` for `inactive`, `--wpds-color-foreground-content-warning-weak` for `action`, `--wpds-color-foreground-content-info-weak` for `initializing`). Include a fallback hex for surfaces that don't load `@wordpress/theme/design-tokens.css` (e.g. the legacy Jetpack settings dashboard).
  *
  * @param {StatusProps} props           - The component properties.
  * @param {string}      props.className - Optional className forwarded to the outer element.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.12.14",
+	"version": "1.12.17",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {
@@ -73,35 +73,35 @@
 	],
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-api": "^1.0.31",
-		"@automattic/jetpack-boost-score-api": "^1.0.52",
-		"@automattic/jetpack-script-data": "^0.6.5",
-		"@automattic/number-formatters": "^1.2.5",
+		"@automattic/jetpack-api": "^1.0.32",
+		"@automattic/jetpack-boost-score-api": "^1.0.55",
+		"@automattic/jetpack-script-data": "^0.6.6",
+		"@automattic/number-formatters": "^1.2.7",
 		"@babel/runtime": "^7",
 		"@gravatar-com/hovercards": "0.16.0",
-		"@wordpress/admin-ui": "2.1.0",
-		"@wordpress/browserslist-config": "6.50.0",
-		"@wordpress/components": "36.1.0",
-		"@wordpress/compose": "8.3.0",
-		"@wordpress/data": "10.50.0",
-		"@wordpress/date": "5.50.0",
-		"@wordpress/element": "8.2.0",
-		"@wordpress/i18n": "6.23.0",
-		"@wordpress/icons": "13.1.0",
-		"@wordpress/notices": "5.50.0",
-		"@wordpress/theme": "0.15.1",
-		"@wordpress/ui": "0.13.0",
+		"@wordpress/admin-ui": "2.5.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.1.0",
+		"@wordpress/notices": "5.51.0",
+		"@wordpress/theme": "0.17.0",
+		"@wordpress/ui": "0.17.0",
 		"clsx": "2.1.1",
 		"js-sha256": "0.11.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.3.16",
+		"social-logos": "^3.3.18",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^1.2.8",
+		"@automattic/jetpack-base-styles": "^1.2.10",
 		"@babel/core": "7.29.7",
 		"@jest/globals": "30.4.1",
 		"@storybook/addon-docs": "10.4.6",
@@ -113,14 +113,14 @@
 		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
 		"@types/react-slider": "1.3.6",
-		"@typescript/native-preview": "7.0.0-dev.20260225.1",
+		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"jest": "30.4.2",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"require-from-string": "2.0.2",
 		"storybook": "10.4.6",
 		"ts-dedent": "2.2.0",
-		"typescript": "5.9.3",
+		"typescript": "6.0.3",
 		"webpack": "5.107.2",
 		"webpack-cli": "6.0.1"
 	},