@automattic/jetpack-components 0.72.4 → 0.72.6

package/CHANGELOG.md

@@ -2,6 +2,24 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.72.6] - 2025-05-05
+### Changed
+- Update package dependencies. [#43320] [#43326]
+
+### Fixed
+- JS Packages: Decrease CSS priority of global styles to prevent them from applying within the editor. [#43035]
+- Linting: Address final rules in WordPress Stylelint config. [#43296]
+- Linting: Do additional stylesheet cleanup. [#43247]
+
+## [0.72.5] - 2025-04-28
+### Changed
+- Connection: Mark external links as external. [#43152]
+
+### Fixed
+- Code: Use modern font MIME types for inline fonts. [#43227]
+- Linting: Fix more Stylelint violations. [#43213]
+- My Jetpack: Fix TypeScript type checking and the corresponding errors. [#43205]
+
 ## [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]
@@ -1367,6 +1385,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.72.6]: https://github.com/Automattic/jetpack-components/compare/0.72.5...0.72.6
+[0.72.5]: https://github.com/Automattic/jetpack-components/compare/0.72.4...0.72.5
 [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

package/build/components/terms-of-service/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
@@ -43,5 +44,5 @@ const TermsOfServiceTextOnly = () => createInterpolateElement(__('By continuing
     tosLink: _jsx(Link, { slug: "wpcom-tos" }),
     shareDetailsLink: _jsx(Link, { slug: "jetpack-support-what-data-does-jetpack-sync" }),
 });
-const Link = ({ slug, children }) => (_jsx("a", { className: "terms-of-service__link", href: getRedirectUrl(slug), rel: "noopener noreferrer", target: "_blank", children: children }));
+const Link = ({ slug, children }) => (_jsx(ExternalLink, { className: "terms-of-service__link", href: getRedirectUrl(slug), children: children }));
 export default TermsOfService;

package/build/components/text/types.d.ts

@@ -39,6 +39,7 @@ export type TextProps = {
     component?: React.FC<{
         [prop: string]: unknown;
     }> | React.ElementType;
+    style?: React.CSSProperties;
 };
 export type H3Props = TextProps & {
     /** Font weight: 'bold' (default) | 'regular'. */

package/build/tools/get-site-admin-url/index.d.ts

@@ -1,6 +1,8 @@
 /**
  * Returns the site admin URL.
  *
+ * @deprecated use `getAdminUrl` from `@automattic/jetpack-script-data` instead.
+ *
  * @return {?string} The site admin URL or null if not available.
  */
-export default function getSiteAdminUrl(): string;
+export default function getSiteAdminUrl(): any;

package/build/tools/get-site-admin-url/index.js

@@ -2,12 +2,16 @@ import { getScriptData } from '@automattic/jetpack-script-data';
 /**
  * Returns the site admin URL.
  *
+ * @deprecated use `getAdminUrl` from `@automattic/jetpack-script-data` instead.
+ *
  * @return {?string} The site admin URL or null if not available.
  */
 export default function getSiteAdminUrl() {
     return (getScriptData()?.site?.admin_url ||
         window.Initial_State?.adminUrl ||
         window.Jetpack_Editor_Initial_State?.adminUrl ||
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Not using @ts-expect-error because myJetpackInitialState is typed in "my-jetpack" package and that doesn't expect this error
+        // @ts-ignore The usage of myJetpackInitialState is not typed inside this generic package. We should get rid of it in the future.
         window?.myJetpackInitialState?.adminUrl ||
         null);
 }

package/build/tools/jp-redirect/index.js

@@ -21,6 +21,8 @@ export default function getRedirectUrl(source, args = {}) {
     const queryVars = {};
     let calypsoEnv;
     if (typeof window !== 'undefined') {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Not using @ts-expect-error because JP_CONNECTION_INITIAL_STATE is typed in the "connection" package and that doesn't expect this error
+        // @ts-ignore The usage of JP_CONNECTION_INITIAL_STATE is not typed inside this generic package. We should get rid of it in the future.
         calypsoEnv = window?.JP_CONNECTION_INITIAL_STATE?.calypsoEnv;
     }
     if (source.search('https://') === 0) {

package/components/action-button/style.module.scss

@@ -2,7 +2,7 @@
 	color: var( --jp-red );
 	line-height: 25px;
 	padding-left: 25px;
-	background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIwQzE2LjQxODMgMjAgMjAgMTYuNDE4MyAyMCAxMkMyMCA3LjU4MTcyIDE2LjQxODMgNCAxMiA0QzcuNTgxNzIgNCA0IDcuNTgxNzIgNCAxMkM0IDE2LjQxODMgNy41ODE3MiAyMCAxMiAyMFoiIHN0cm9rZT0iI0Q2MzYzOSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHBhdGggZD0iTTEzIDdIMTFWMTNIMTNWN1oiIGZpbGw9IiNENjM2MzkiLz4KPHBhdGggZD0iTTEzIDE1SDExVjE3SDEzVjE1WiIgZmlsbD0iI0Q2MzYzOSIvPgo8L3N2Zz4K") no-repeat 0 0;
+	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIwQzE2LjQxODMgMjAgMjAgMTYuNDE4MyAyMCAxMkMyMCA3LjU4MTcyIDE2LjQxODMgNCAxMiA0QzcuNTgxNzIgNCA0IDcuNTgxNzIgNCAxMkM0IDE2LjQxODMgNy41ODE3MiAyMCAxMiAyMFoiIHN0cm9rZT0iI0Q2MzYzOSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHBhdGggZD0iTTEzIDdIMTFWMTNIMTNWN1oiIGZpbGw9IiNENjM2MzkiLz4KPHBhdGggZD0iTTEzIDE1SDExVjE3SDEzVjE1WiIgZmlsbD0iI0Q2MzYzOSIvPgo8L3N2Zz4K) no-repeat 0 0;
 }
 
 .button {

package/components/boost-score-graph/style-annotation.scss

@@ -12,7 +12,6 @@ $white: #fff;
 
 	&__line {
 		position: absolute;
-		width: 10px;
 		height: 100%;
 		transform: translateX(-50%);
 		pointer-events: all;
@@ -65,7 +64,7 @@ $white: #fff;
 		border-radius: 4px;
 		font-size: 14px;
 		position: absolute;
-		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 		text-align: center;
 		transform: translateX(-50%);
 		z-index: 2;

package/components/boost-score-graph/style-tooltip.scss

@@ -21,13 +21,12 @@ $white: #fff;
 .jb-score-tooltip {
     background-color: $black;
     color: $white;
-    width: fit-content;
     padding: 16px 24px;
     border-radius: 4px;
     font-size: 14px;
     width: 20em;
     position: relative;
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     display: none;
 
     .visible &, &:hover {
@@ -44,6 +43,7 @@ $white: #fff;
     &__date {
         font-size: 1em;
         font-weight: 600;
+        // stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
         line-height: 1.6em;
     }
 
@@ -70,4 +70,4 @@ $white: #fff;
         left: 50%;
         transform: translateX(-50%);
     }
-}
+}

package/components/button/style.module.scss

@@ -53,7 +53,7 @@
 		}
 
 		// With Spinner
-		& > :global(.components-spinner) {
+		> :global(.components-spinner) {
 			height: 20px;
 		}
 	}
@@ -197,12 +197,12 @@
 			justify-content: center;
 		}
 
-		& > *:not(:global(.components-spinner)) {
+		> *:not(:global(.components-spinner)) {
 			visibility: hidden;
 		}
 
 		// Spinner
-		& > :global(.components-spinner) {
+		> :global(.components-spinner) {
 			margin: 0;
 			position: absolute;
 		}

package/components/contextual-upgrade-trigger/style.module.scss

@@ -35,11 +35,11 @@
 	&:focus-within,
 	&:hover {
 
-		& .icon {
+		.icon {
 			transform: translateX( calc( var( --spacing-base ) * 2 ) );
 		}
 
-		& .cta {
+		.cta {
 			text-decoration: underline;
 			text-decoration-thickness: 2px;
 		}
@@ -74,4 +74,4 @@
 
 .description {
 	display: inline;
-}
+}

package/components/decorative-card/style.scss

@@ -30,7 +30,8 @@
 			left: 24px;
 			width: 38px;
 			height: 8px;
-			background-image: url('data:image/svg+xml;uf8,<svg width="38" height="8" viewBox="0 0 38 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7C1 7 2.37087 1 6.89831 1C11.4257 1 14.3709 7 18.8983 7C23.4257 7 26.7777 1 31.3051 1C35.912 1 37 7 37 7" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>');
+			// stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
+			background-image: url('data:image/svg+xml,<svg width="38" height="8" viewBox="0 0 38 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7C1 7 2.37087 1 6.89831 1C11.4257 1 14.3709 7 18.8983 7C23.4257 7 26.7777 1 31.3051 1C35.912 1 37 7 37 7" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>');
 		}
 	}
 
@@ -61,7 +62,8 @@
 		background-repeat: no-repeat;
 
 		&--unlink {
-			background-image: url('data:image/svg+xml;uf8,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>')
+			// stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
+			background-image: url('data:image/svg+xml,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>')
 		}
 	}
 

package/components/diff-viewer/styles.module.scss

@@ -33,19 +33,19 @@
 	flex-grow: 1;
 	overflow-x: visible;
 
-	& div,
-	& del,
-	& ins {
+	div,
+	del,
+	ins {
 		padding: 0 var( --spacing-base ); // 0px | 8px
 		text-decoration: none;
 	}
 
-	& del {
+	del {
 		background-color: var( --jp-red-0 );
 		color: var( --jp-red-60 );
 	}
 
-	& ins {
+	ins {
 		background-color: var( --jp-green-5 );
 		color: var( --jp-green-60 );
 	}

package/components/dot-pager/style.scss

@@ -23,7 +23,7 @@
 	display: flex;
 	justify-content: center;
 	position: absolute;
-	bottom: 0px;
+	bottom: 0;
 	left: 0;
 	right: 0;
 	z-index: 1;
@@ -50,6 +50,11 @@
 
 .dot-pager__control-choose-page {
 	cursor: pointer;
+	border-radius: 50%;
+	width: 6px;
+	height: 6px;
+	padding: 0;
+	background-color: var(--jp-white-off);
 
 	&:disabled {
 		cursor: default;
@@ -58,14 +63,6 @@
 	&:focus-visible {
 		box-shadow: 0 0 0 2px var(--jp-gray-90);
 	}
-}
-
-.dot-pager__control-choose-page {
-	border-radius: 50%;
-	width: 6px;
-	height: 6px;
-	padding: 0px;
-	background-color: var(--jp-white-off);
 
 	&:hover {
 		background-color: var(--jp-gray-20);
@@ -76,9 +73,6 @@
 	}
 }
 
-.dot-pager {
-
-	&__button {
-		margin-right: 10px;
-	}
+.dot-pager__button {
+	margin-right: 10px;
 }

package/components/icon-tooltip/style.scss

@@ -9,15 +9,23 @@ $arrow-color: var( --jp-gray );
 
 // Namespace to avoid overriding global styles
 .icon-tooltip-helper {
+	// POPOVER_HELPER_WIDTH
+	width: 124px;
+	height: 18px;
+	position: absolute;
+	top: 0;
+	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
+	left: -53px;
+	pointer-events: none;
 
 	/*
 	* Fix arrow placement - section start
 	*/
-	.components-popover:not([data-y-axis=middle])[data-x-axis=left] .components-popover__content {
+	.components-popover:not([data-y-axis="middle"])[data-x-axis="left"] .components-popover__content {
 		margin-right: -62px;
 	}
 
-	.components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content {
+	.components-popover:not([data-y-axis="middle"])[data-x-axis="right"] .components-popover__content {
 		margin-left: -62px;	
 	}
 
@@ -28,27 +36,27 @@ $arrow-color: var( --jp-gray );
 	/*
 	* Fix arrow position for legacy position option - section start
 	*/
-	.components-popover[data-y-axis=bottom] .components-popover__content {
+	.components-popover[data-y-axis="bottom"] .components-popover__content {
 		top: 2px !important;
 	}
 
-	.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::before {
+	.components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::before {
 		top: -6px !important;
 	}
 
-	.components-popover:not(.is-without-arrow)[data-y-axis=bottom]::after {
+	.components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::after {
 		top: -4px !important;
 	}
 
-	.components-popover[data-y-axis=top] .components-popover__content {
+	.components-popover[data-y-axis="top"] .components-popover__content {
 		bottom: 10px !important;
 	}
 
-	.components-popover:not(.is-without-arrow)[data-y-axis=top]::before {
+	.components-popover:not(.is-without-arrow)[data-y-axis="top"]::before {
 		bottom: 3px;
 	}
 
-	.components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
+	.components-popover:not(.is-without-arrow)[data-y-axis="top"]::after {
 		bottom: 4px;
 	}
 
@@ -71,17 +79,6 @@ $arrow-color: var( --jp-gray );
 	}
 }
 
-.icon-tooltip-helper {
-	// POPOVER_HELPER_WIDTH
-	width: 124px;
-	height: 18px;
-	position: absolute;
-	top: 0;
-	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
-	left: -53px;
-	pointer-events: none;
-}
-
 .icon-tooltip-container {
 	// Recover events
 	pointer-events: all;

package/components/icons/style.module.scss

@@ -24,10 +24,6 @@
 		}
 	}
 
-	&.instagram {
-		fill: var( --color-instagram );
-	}
-
 	&.twitter {
 		fill: var( --color-twitter );
 	}

package/components/jetpack-footer/style.scss

@@ -15,7 +15,7 @@
 		text-decoration: none;
 
 		&:any-link,
-		&[role=button] {
+		&[role="button"] {
 			color: inherit;
 		}
 
@@ -78,13 +78,13 @@
 }
 
 .jp-dashboard-footer__accessible-external-link {
-	border: 0px;
+	border: 0;
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
     height: 1px;
     margin: -1px;
     overflow: hidden;
-    padding: 0px;
+    padding: 0;
     position: absolute;
     width: 1px;
     overflow-wrap: normal;

package/components/notice/style.module.scss

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

package/components/popover/style.scss

@@ -3,7 +3,7 @@
 	max-width: calc( 100% - 32px );
 	padding: 16px;
 	background-color: #fff;
-	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 4px 8px 0 rgba(0, 0, 0, 0.03);
 	border: 1px solid rgba(220, 220, 222, 1);
 	border-radius: 4px;
 	text-align: center;
@@ -19,7 +19,8 @@
 
 	&__body p {
 		font-weight: 400;
+		// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
 		line-height: 1.6em;
 		font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	}
-}
+}

package/components/pricing-card/style.scss

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

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

@@ -38,7 +38,7 @@
 				right: 0;
 				bottom: 0;
 				z-index: -1;
-				box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.05);
+				box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
 			}
 		}
 	}

package/components/split-button/style.module.scss

@@ -9,11 +9,11 @@
 		height: 100%;
 	}
 
-    & > .button:first-child {
+    > .button:first-child {
         border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
     }
 
-    & > :global(.components-dropdown) > .button {
+    > :global(.components-dropdown) > .button {
         border-radius: 0 var(--jp-border-radius) var(--jp-border-radius) 0;
     }
 }
@@ -23,4 +23,4 @@
 	border-radius: var(--jp-border-radius);
 	height: var(--actions-size);
 	line-height: var(--actions-size);
-}
+}

package/components/stat-card/style.module.scss

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

package/components/terms-of-service/index.tsx

@@ -1,3 +1,4 @@
+import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
@@ -92,14 +93,9 @@ const TermsOfServiceTextOnly = () =>
 	);
 
 const Link: React.FC< { slug: string; children?: React.ReactNode } > = ( { slug, children } ) => (
-	<a
-		className="terms-of-service__link"
-		href={ getRedirectUrl( slug ) }
-		rel="noopener noreferrer"
-		target="_blank"
-	>
+	<ExternalLink className="terms-of-service__link" href={ getRedirectUrl( slug ) }>
 		{ children }
-	</a>
+	</ExternalLink>
 );
 
 export default TermsOfService;

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

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

package/components/text/types.ts

@@ -39,6 +39,7 @@ export type TextProps = {
 	children: React.ReactNode;
 	/** Force an specific tag (span, div) or use a custom component that will receive className and children */
 	component?: React.FC< { [ prop: string ]: unknown } > | React.ElementType;
+	style?: React.CSSProperties;
 };
 
 export type H3Props = TextProps & {

package/components/theme-provider/globals.module.scss

@@ -1,7 +1,7 @@
 /* DO NOT USE THIS TO OVERRIDE STYLES */
 .global {
 
-	& * {
+	:where(&) * {
 		box-sizing: border-box;
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.72.4",
+	"version": "0.72.6",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -15,32 +15,32 @@
 	},
 	"dependencies": {
 		"@automattic/format-currency": "1.0.1",
-		"@automattic/jetpack-boost-score-api": "^0.1.63",
-		"@automattic/jetpack-api": "^0.20.1",
-		"@automattic/jetpack-script-data": "^0.4.0",
+		"@automattic/jetpack-boost-score-api": "^0.1.64",
+		"@automattic/jetpack-api": "^0.20.2",
+		"@automattic/jetpack-script-data": "^0.4.1",
 		"@babel/runtime": "^7",
-		"@wordpress/browserslist-config": "6.21.0",
-		"@wordpress/components": "29.7.0",
-		"@wordpress/compose": "7.21.0",
-		"@wordpress/data": "10.21.0",
-		"@wordpress/date": "5.21.0",
-		"@wordpress/element": "6.21.0",
-		"@wordpress/i18n": "5.21.0",
-		"@wordpress/icons": "10.21.0",
-		"@wordpress/notices": "5.21.0",
+		"@wordpress/browserslist-config": "6.22.0",
+		"@wordpress/components": "29.8.0",
+		"@wordpress/compose": "7.22.0",
+		"@wordpress/data": "10.22.0",
+		"@wordpress/date": "5.22.0",
+		"@wordpress/element": "6.22.0",
+		"@wordpress/i18n": "5.22.0",
+		"@wordpress/icons": "10.22.0",
+		"@wordpress/notices": "5.22.0",
 		"clsx": "2.1.1",
 		"prop-types": "^15.7.2",
 		"qrcode.react": "4.2.0",
 		"react-slider": "2.0.5",
-		"social-logos": "^3.1.20",
+		"social-logos": "^3.1.21",
 		"uplot": "1.6.31",
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.7.1",
+		"@automattic/jetpack-base-styles": "^0.7.3",
 		"@babel/core": "7.26.10",
 		"@babel/preset-react": "7.26.3",
-		"@jest/globals": "29.4.3",
+		"@jest/globals": "29.7.0",
 		"@storybook/addon-actions": "8.6.7",
 		"@storybook/blocks": "8.6.7",
 		"@storybook/react": "8.6.7",

package/tools/get-site-admin-url/index.ts

@@ -3,6 +3,8 @@ import { getScriptData } from '@automattic/jetpack-script-data';
 /**
  * Returns the site admin URL.
  *
+ * @deprecated use `getAdminUrl` from `@automattic/jetpack-script-data` instead.
+ *
  * @return {?string} The site admin URL or null if not available.
  */
 export default function getSiteAdminUrl() {
@@ -10,6 +12,8 @@ export default function getSiteAdminUrl() {
 		getScriptData()?.site?.admin_url ||
 		window.Initial_State?.adminUrl ||
 		window.Jetpack_Editor_Initial_State?.adminUrl ||
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Not using @ts-expect-error because myJetpackInitialState is typed in "my-jetpack" package and that doesn't expect this error
+		// @ts-ignore The usage of myJetpackInitialState is not typed inside this generic package. We should get rid of it in the future.
 		window?.myJetpackInitialState?.adminUrl ||
 		null
 	);

package/tools/jp-redirect/index.ts

@@ -25,6 +25,8 @@ export default function getRedirectUrl( source: string, args: GetRedirectUrlArgs
 
 	let calypsoEnv;
 	if ( typeof window !== 'undefined' ) {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Not using @ts-expect-error because JP_CONNECTION_INITIAL_STATE is typed in the "connection" package and that doesn't expect this error
+		// @ts-ignore The usage of JP_CONNECTION_INITIAL_STATE is not typed inside this generic package. We should get rid of it in the future.
 		calypsoEnv = window?.JP_CONNECTION_INITIAL_STATE?.calypsoEnv;
 	}