@automattic/jetpack-components 1.1.12 → 1.1.14

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.1.14] - 2025-07-21
+### Changed
+- Update package dependencies. [#44356]
+
+## [1.1.13] - 2025-07-10
+### Changed
+- Update package dependencies. [#44219]
+
 ## [1.1.12] - 2025-07-08
 ### Changed
 - Update dependencies.
@@ -1473,6 +1481,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.1.14]: https://github.com/Automattic/jetpack-components/compare/1.1.13...1.1.14
+[1.1.13]: https://github.com/Automattic/jetpack-components/compare/1.1.12...1.1.13
 [1.1.12]: https://github.com/Automattic/jetpack-components/compare/1.1.11...1.1.12
 [1.1.11]: https://github.com/Automattic/jetpack-components/compare/1.1.10...1.1.11
 [1.1.10]: https://github.com/Automattic/jetpack-components/compare/1.1.9...1.1.10

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

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

package/components/action-popover/styles.module.scss

@@ -1,13 +1,13 @@
 .wrapper {
 	width: 304px;
 	min-height: 230px;
-	padding: calc( var( --spacing-base ) * 3 ); // 24px;
+	padding: calc(var(--spacing-base) * 3); // 24px;
 	display: flex;
 	flex-direction: column;
 
 	.header {
 		display: flex;
-		margin-bottom: calc( var( --spacing-base ) * 2 ); // 16px
+		margin-bottom: calc(var(--spacing-base) * 2); // 16px
 		justify-content: space-between;
 
 		.title {
@@ -15,11 +15,11 @@
 		}
 	
 		.close-button {
-			height: calc( var( --spacing-base ) * 3 ); // 24px
-			width: calc( var( --spacing-base ) * 3 ); // 24px
+			height: calc(var(--spacing-base) * 3); // 24px
+			width: calc(var(--spacing-base) * 3); // 24px
 			min-width: unset;
-			color: var( --jp-gray-90 );
-			background-color: var( --jp-white );
+			color: var(--jp-gray-90);
+			background-color: var(--jp-white);
 			flex-shrink: 0;
 
 			&:hover:not(:focus) {
@@ -29,17 +29,17 @@
 	}
 
 	.footer {
-		height: calc( var( --spacing-base ) * 6 ); // 48px
-		margin-top: calc( var( --spacing-base ) * 2 ); // 16px
+		height: calc(var(--spacing-base) * 6); // 48px
+		margin-top: calc(var(--spacing-base) * 2); // 16px
 		display: flex;
 		justify-content: flex-end;
 		align-items: flex-end;
 		flex-grow: 1;
 
 		.steps {
-			color: var( --jp-gray-60 );
+			color: var(--jp-gray-60);
 			flex-grow: 1;
-			margin-bottom: var( --spacing-base );
+			margin-bottom: var(--spacing-base);
 		}
 
 		.action-button {

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

@@ -25,4 +25,4 @@
 		cursor: pointer;
 		color: #fff;
 	}
-}
+}

package/components/admin-section/hero/style.module.scss

@@ -1,4 +1,4 @@
 .section-hero {
 	padding-top: 1px; // prevent margin collapse for interior sections
-	background: var( --jp-white-off );
+	background: var(--jp-white-off);
 }

package/components/alert/style.module.scss

@@ -1,47 +1,47 @@
 .container {
 	display: flex;
-	font-size: var( --font-body );
-	line-height: calc( var( --spacing-base ) * 3 );
-	min-height: calc( var( --spacing-base ) * 3 );
+	font-size: var(--font-body);
+	line-height: calc(var(--spacing-base) * 3);
+	min-height: calc(var(--spacing-base) * 3);
 	align-items: center;
-	margin: calc( var( --spacing-base ) * 2 ) 0;
+	margin: calc(var(--spacing-base) * 2) 0;
 }
 
 .icon-wrapper {
-	margin-right: calc( var( --spacing-base ) / 2 );
-	width: calc( var( --spacing-base ) * 3 );
-	height: calc( var( --spacing-base ) * 3 );
+	margin-right: calc(var(--spacing-base) / 2);
+	width: calc(var(--spacing-base) * 3);
+	height: calc(var(--spacing-base) * 3);
 	align-self: flex-start;
 }
 
 .is-error {
-	color: var( --jp-red );
+	color: var(--jp-red);
 
 	.icon {
-		fill: var( --jp-red );
+		fill: var(--jp-red);
 	}
 }
 
 .is-warning {
-	color: var( --jp-yellow-40 );
+	color: var(--jp-yellow-40);
 
 	.icon {
-		fill: var( --jp-yellow-40 );
+		fill: var(--jp-yellow-40);
 	}
 }
 
 .is-info {
-	color: var( --jp-blue-40 );
+	color: var(--jp-blue-40);
 
 	.icon {
-		fill: var( --jp-blue-40 );
+		fill: var(--jp-blue-40);
 	}
 }
 
 .is-success {
-	color: var( --jp-green );
+	color: var(--jp-green);
 
 	.icon {
-		fill: var( --jp-green );
+		fill: var(--jp-green);
 	}
-}
+}

package/components/badge/style.module.scss

@@ -13,12 +13,12 @@
 		color: var(--jp-green-50);
 	}
 
-    &.is-warning {
+	&.is-warning {
 		background-color: var(--jp-yellow-5);
 		color: var(--jp-yellow-60);
 	}
 
-    &.is-danger {
+	&.is-danger {
 		background-color: var(--jp-red-5);
 		color: var(--jp-red-70);
 	}

package/components/boost-score-bar/style.scss

@@ -83,7 +83,7 @@ $no_boost_score_size: 28px;
 
 		@media (min-width: 768px) {
 			width: calc(100% + #{math.div($bar-height, 2)});
-			margin-left: math.div(-$bar_height, 2) ;
+			margin-left: math.div(-$bar_height, 2);
 		}
 	}
 
@@ -167,7 +167,7 @@ $no_boost_score_size: 28px;
 		}
 	}
 
-  	&__no_boost_score:hover &__no_boost_score_tooltip {
+	&__no_boost_score:hover &__no_boost_score_tooltip {
 		display: block;
 	}
 
@@ -186,4 +186,4 @@ $no_boost_score_size: 28px;
 	.fill-bad {
 		background-color: var(--jp-red-50);
 	}
-}
+}

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

@@ -73,4 +73,4 @@ $white: #fff;
 			color: $white !important;
 		}
 	}
-}
+}

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

@@ -3,71 +3,72 @@ $black: #101517;
 $white: #fff;
 
 .jb-score-tooltips-container {
-    width: 100%;
-    position: relative;
-    pointer-events: none;
+	width: 100%;
+	position: relative;
+	pointer-events: none;
 
 }
 
 .jb-score-tooltip-react-root {
-    position: absolute;
-    bottom: -20px;
-    translate: -50% calc( 100% - 20px );
-    z-index: 1000;
-    pointer-events: auto;
-    user-select: text;
+	position: absolute;
+	bottom: -20px;
+	translate: -50% calc(100% - 20px);
+	z-index: 1000;
+	pointer-events: auto;
+	user-select: text;
 }
 
 .jb-score-tooltip {
-    background-color: $black;
-    color: $white;
-    padding: 16px 24px;
-    border-radius: 4px;
-    font-size: 14px;
-    width: 20em;
-    position: relative;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    display: none;
+	background-color: $black;
+	color: $white;
+	padding: 16px 24px;
+	border-radius: 4px;
+	font-size: 14px;
+	width: 20em;
+	position: relative;
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+	display: none;
 
-    .visible &, &:hover {
-        display: block;
-    }
+	.visible &,
+	&:hover {
+		display: block;
+	}
 
-    hr {
-        border-top: 1px solid $grey;
-        border-bottom: none;
-        border-left: none;
-        border-right: none;
-    }
+	hr {
+		border-top: 1px solid $grey;
+		border-bottom: none;
+		border-left: none;
+		border-right: none;
+	}
 
-    &__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;
-    }
+	&__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;
+	}
 
-    &__row {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        margin: 0.9em 0;
+	&__row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin: 0.9em 0;
 
-        &--secondary {
-            color: $grey;
-            margin-left: 1em;
-        }
-    }
+		&--secondary {
+			color: $grey;
+			margin-left: 1em;
+		}
+	}
 
-    &__pointer {
-        width: 0;
-        height: 0;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-bottom: 8px solid $black;
-        position: absolute;
-        top: -7px;
-        left: 50%;
-        transform: translateX(-50%);
-    }
+	&__pointer {
+		width: 0;
+		height: 0;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		border-bottom: 8px solid $black;
+		position: absolute;
+		top: -7px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
 }

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

@@ -1,22 +1,22 @@
 .jb-score-graph {
-    height: 300px;
+	height: 300px;
 
-    &__placeholder {
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
+	&__placeholder {
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
 
-        svg {
-            object-position: right bottom;
-            object-fit: cover;
-            height: 100%;
-            width: 100%;
-        }
-    }
+		svg {
+			object-position: right bottom;
+			object-fit: cover;
+			height: 100%;
+			width: 100%;
+		}
+	}
 
 }
 
 .boost-uplot-container {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-}
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}

package/components/button/style.module.scss

@@ -11,9 +11,9 @@
 
 	// Icon Button
 	&.is-icon-button {
-		padding: var( --spacing-base );
-		width: calc( var( --spacing-base ) * 5 );
-		height: calc( var( --spacing-base ) * 5 );
+		padding: var(--spacing-base);
+		width: calc(var(--spacing-base) * 5);
+		height: calc(var(--spacing-base) * 5);
 
 		> svg:first-child {
 			margin: 0;
@@ -21,10 +21,10 @@
 		}
 
 		&.small {
-			padding: calc( var( --spacing-base ) / 2 );
-			width: calc( var( --spacing-base ) * 4 );
-			min-width: calc( var( --spacing-base ) * 4 );
-			height: calc( var( --spacing-base ) * 4 );	
+			padding: calc(var(--spacing-base) / 2);
+			width: calc(var(--spacing-base) * 4);
+			min-width: calc(var(--spacing-base) * 4);
+			height: calc(var(--spacing-base) * 4);
 		}
 	}
 
@@ -33,11 +33,11 @@
 		height: auto;
 		font-size: var(--font-body);
 		line-height: 24px;
-		padding: var(--spacing-base) calc( var(--spacing-base) * 3); // 8px - 24px
+		padding: var(--spacing-base) calc(var(--spacing-base) * 3); // 8px - 24px
 
 		// With icon
 		&.icon {
-			padding: var(--spacing-base) calc( var(--spacing-base) * 2); // 8px - 16px
+			padding: var(--spacing-base) calc(var(--spacing-base) * 2); // 8px - 16px
 		}
 	}
 
@@ -46,10 +46,10 @@
 		height: auto;
 		font-size: var(--font-body-extra-small);
 		line-height: 20px;
-		padding: calc( var(--spacing-base) / 2 ) var(--spacing-base); // 4px - 8px
+		padding: calc(var(--spacing-base) / 2) var(--spacing-base); // 4px - 8px
 
 		&.icon > svg:first-child {
-			margin-right: calc( var(--spacing-base) / 2 ); // 4px
+			margin-right: calc(var(--spacing-base) / 2); // 4px
 		}
 
 		// With Spinner
@@ -210,5 +210,5 @@
 }
 
 .external-icon {
-	margin-left: calc( var(--spacing-base) / 2 ); // 4px
+	margin-left: calc(var(--spacing-base) / 2); // 4px
 }

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

@@ -1,11 +1,11 @@
 .cut {
-	border: 2px solid var( --jp-green-40 );
-	border-radius: var( --jp-border-radius );
-	padding: calc( var( --spacing-base ) * 2 ) calc( var( --spacing-base ) * 3 );
+	border: 2px solid var(--jp-green-40);
+	border-radius: var(--jp-border-radius);
+	padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	gap: calc( var( --spacing-base ) * 3 );
+	gap: calc(var(--spacing-base) * 3);
 	text-align: left;
 	background: none;
 	width: 100%;
@@ -29,14 +29,14 @@
 	}
 
 	&:focus-within {
-		border-color: var( --jp-black );
+		border-color: var(--jp-black);
 	}
 
 	&:focus-within,
 	&:hover {
 
 		.icon {
-			transform: translateX( calc( var( --spacing-base ) * 2 ) );
+			transform: translateX(calc(var(--spacing-base) * 2));
 		}
 
 		.cta {
@@ -56,13 +56,13 @@
 }
 
 .icon {
-	fill: var( --jp-green-40 );
+	fill: var(--jp-green-40);
 	transition: transform 0.1s ease-out;
 	pointer-events: none;
 }
 
 .iconContainer {
-	margin: 0 0 0 calc( var( --spacing-base ) / 3);
+	margin: 0 0 0 calc(var(--spacing-base) / 3);
 	display: inline;
 	vertical-align: middle;
 	

package/components/decorative-card/style.scss

@@ -4,7 +4,7 @@
 	display: flex;
 	border-radius: 8px;
 	overflow: hidden;
-	box-shadow: 0 0 15px var( --jp-gray );
+	box-shadow: 0 0 15px var(--jp-gray);
 	position: relative;
 	width: 360px;
 	max-width: 100%;
@@ -18,7 +18,7 @@
 	}
 
 	&__image {
-		background: var( --jp-gray );
+		background: var(--jp-gray);
 		background-size: cover;
 		position: relative;
 
@@ -57,7 +57,7 @@
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate( -50%, -50% );
+		transform: translate(-50%, -50%);
 		background-position: center, center;
 		background-repeat: no-repeat;
 

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

@@ -1,18 +1,18 @@
 .details-viewer {
 	padding: 0;
-	background-color: var( --jp-gray-0 );
+	background-color: var(--jp-gray-0);
 	font-family: monospace;
 	display: flex;
 	flex-direction: column;
 	overflow-x: auto;
-	margin-bottom: var( --spacing-base ); // 8px
+	margin-bottom: var(--spacing-base); // 8px
 }
 
 .details-viewer__item {
 	display: flex;
 	flex-direction: row;
-	padding: calc( var( --spacing-base ) / 2 ); // 4px
-	border-bottom: 1px solid var( --jp-gray-10 );
+	padding: calc(var(--spacing-base) / 2); // 4px
+	border-bottom: 1px solid var(--jp-gray-10);
 
 	&:last-child {
 		border-bottom: none;
@@ -21,8 +21,8 @@
 
 .details-viewer__key {
 	font-weight: 700;
-	padding-right: var( --spacing-base ); // 8px
-	color: var( --jp-gray-80 );
+	padding-right: var(--spacing-base); // 8px
+	color: var(--jp-gray-80);
 	min-width: 120px;
 }
 

package/components/dialog/style.module.scss

@@ -1,9 +1,9 @@
 .one-section-style {
 	--product-card-shadow: rgb(0 0 0 / 3%);
-	background-color: var( --jp-white );
-	border: 1px solid var( --jp-gray );
-	border-radius: var( --jp-border-radius );
-	box-shadow: 0 2px 6px var( --product-card-shadow ), 0 1px 2px var( --product-card-shadow );
+	background-color: var(--jp-white);
+	border: 1px solid var(--jp-gray);
+	border-radius: var(--jp-border-radius);
+	box-shadow: 0 2px 6px var(--product-card-shadow), 0 1px 2px var(--product-card-shadow);
 }
 
 .primary,
@@ -26,6 +26,6 @@
 .is-viewport-small {
 	// Add spacing between primary and secondary in "sm" viewport size
 	.primary {
-		margin-bottom: calc( var( --spacing-base ) * 3 );
+		margin-bottom: calc(var(--spacing-base) * 3);
 	}
 }

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

@@ -1,16 +1,16 @@
 .diff-viewer {
-	font-size: var( --font-body );
+	font-size: var(--font-body);
 	line-height: 1.5;
 }
 
 .diff-viewer__filename {
-	padding: calc( var( --spacing-base ) / 2 ) var( --spacing-base ); // 4px | 8px
-	background-color: var( --jp-gray-10 );
+	padding: calc(var(--spacing-base) / 2) var(--spacing-base); // 4px | 8px
+	background-color: var(--jp-gray-10);
 	font-weight: 600;
 }
 
 .diff-viewer__file {
-	background-color: var( --jp-gray-0 );
+	background-color: var(--jp-gray-0);
 	display: flex;
 	font-family: "Courier 10 Pitch", Courier, monospace;
 	flex-direction: row;
@@ -19,12 +19,12 @@
 }
 
 .diff-viewer__line-numbers {
-	padding: 0 var( --spacing-base ); // 0px | 8px
+	padding: 0 var(--spacing-base); // 0px | 8px
 	display: flex;
 	flex-direction: column;
 	text-align: right;
-	background-color: var( --jp-gray-10 );
-	color: var( --jp-gray-50 );
+	background-color: var(--jp-gray-10);
+	color: var(--jp-gray-50);
 }
 
 .diff-viewer__lines {
@@ -36,17 +36,17 @@
 	div,
 	del,
 	ins {
-		padding: 0 var( --spacing-base ); // 0px | 8px
+		padding: 0 var(--spacing-base); // 0px | 8px
 		text-decoration: none;
 	}
 
 	del {
-		background-color: var( --jp-red-0 );
-		color: var( --jp-red-60 );
+		background-color: var(--jp-red-0);
+		color: var(--jp-red-60);
 	}
 
 	ins {
-		background-color: var( --jp-green-5 );
-		color: var( --jp-green-60 );
+		background-color: var(--jp-green-5);
+		color: var(--jp-green-60);
 	}
 }

package/components/donut-meter/style.scss

@@ -1,14 +1,14 @@
 .donut-meter {
 
-  .donut-meter-segment {
-    stroke: var(--jp-green);
-  }
+	.donut-meter-segment {
+		stroke: var(--jp-green);
+	}
 
-  &.is-warning .donut-meter-segment {
-    stroke: var(--jp-yellow-10);
-  }
+	&.is-warning .donut-meter-segment {
+		stroke: var(--jp-yellow-10);
+	}
 
-  &.is-danger .donut-meter-segment {
-    stroke: var(--jp-red);
-  }
+	&.is-danger .donut-meter-segment {
+		stroke: var(--jp-red);
+	}
 }

package/components/gridicon/style.scss

@@ -3,14 +3,14 @@
 	display: inline-block;
 
 	&.needs-offset g {
-		transform: translate( 1px, 1px ); /* translates to .5px because it's in a child element */
+		transform: translate(1px, 1px); /* translates to .5px because it's in a child element */
 	}
 
 	&.needs-offset-x g {
-		transform: translate( 1px, 0 ); /* only nudges horizontally */
+		transform: translate(1px, 0); /* only nudges horizontally */
 	}
 
 	&.needs-offset-y g {
-		transform: translate( 0, 1px ); /* only nudges vertically */
+		transform: translate(0, 1px); /* only nudges vertically */
 	}
 }