@automattic/jetpack-components 0.72.3 → 0.72.5

package/components/action-button/index.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
  * Internal dependencies
  */
 import React from 'react';
-import Button from '../button/index.js';
+import Button from '../button/index.tsx';
 import styles from './style.module.scss';
 
 /**

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/action-popover/index.tsx

@@ -4,18 +4,18 @@
 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.tsx';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
+import Text from '../text/index.tsx';
 /**
  * Internal dependencies
  */
-import ThemeProvider from '../theme-provider/index.js';
+import ThemeProvider from '../theme-provider/index.tsx';
 import styles from './styles.module.scss';
 /**
  * Types
  */
-import { ActionPopoverProps } from './types.js';
+import { ActionPopoverProps } from './types.ts';
 import type React from 'react';
 
 const ActionPopover = ( {

package/components/admin-page/index.tsx

@@ -2,12 +2,12 @@ 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.tsx';
+import JetpackLogo from '../jetpack-logo/index.tsx';
+import Col from '../layout/col/index.tsx';
+import Container from '../layout/container/index.tsx';
 import styles from './style.module.scss';
-import type { AdminPageProps } from './types.js';
+import type { AdminPageProps } from './types.ts';
 import type React from 'react';
 
 /**

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

@@ -21,8 +21,8 @@
 		letter-spacing: 0.2em;
 		text-shadow: none;
 		font-size: 9px;
-		font-weight: bold;
+		font-weight: 700;
 		cursor: pointer;
-		color: #ffffff;
+		color: #fff;
 	}
 }

package/components/admin-page/types.ts

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

package/components/admin-section/basic/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.module.scss';
-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/components/admin-section/hero/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './style.module.scss';
-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/components/automattic-byline-logo/index.tsx

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

package/components/boost-score-bar/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
-import Gridicon from '../gridicon/index.js';
-import type { BoostScoreBarProps } from './types.js';
+import Gridicon from '../gridicon/index.tsx';
+import type { BoostScoreBarProps } from './types.ts';
 import type { FunctionComponent } from 'react';
 
 import './style.scss';

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

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

package/components/boost-score-graph/index.tsx

@@ -1,7 +1,7 @@
 import React, { type FunctionComponent } from 'react';
-import Text from '../text/index.js';
-import Background from './background.js';
-import UplotLineChart from './uplot-line-chart.js';
+import Text from '../text/index.tsx';
+import Background from './background.tsx';
+import UplotLineChart from './uplot-line-chart.tsx';
 import './style.scss';
 
 export interface Period {

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

@@ -1,5 +1,5 @@
 $black: #101517;
-$white: #ffffff;
+$white: #fff;
 
 .jb-graph-annotations {
 	pointer-events: none;
@@ -12,7 +12,6 @@ $white: #ffffff;
 
 	&__line {
 		position: absolute;
-		width: 10px;
 		height: 100%;
 		transform: translateX(-50%);
 		pointer-events: all;
@@ -65,7 +64,7 @@ $white: #ffffff;
 		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

@@ -1,6 +1,6 @@
 $grey: #8e8e8e;
 $black: #101517;
-$white: #ffffff;
+$white: #fff;
 
 .jb-score-tooltips-container {
     width: 100%;
@@ -21,13 +21,12 @@ $white: #ffffff;
 .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 {

package/components/boost-score-graph/tooltip.tsx

@@ -3,7 +3,7 @@ import { dateI18n } from '@wordpress/date';
 import { __, sprintf } from '@wordpress/i18n';
 import { type FunctionComponent } from 'react';
 import './style-tooltip.scss';
-import { Period } from './index.js';
+import { Period } from './index.tsx';
 
 export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) => {
 	if ( ! period || ! period.dimensions || ! period.timestamp ) {

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

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom/client';
 import uPlot from 'uplot';
-import { Tooltip } from './tooltip.js';
-import { Period } from './index.js';
+import { Period } from './index.tsx';
+import { Tooltip } from './tooltip.tsx';
 
 /**
  * Custom tooltips plugin for uPlot.

package/components/boost-score-graph/uplot-line-chart.tsx

@@ -2,15 +2,15 @@ import { __ } from '@wordpress/i18n';
 import React, { 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 { type Annotation, Period } from './index.js';
+import { getUserLocale } from '../../lib/locale/index.ts';
+import numberFormat from '../number-format/index.ts';
+import { annotationsPlugin } from './annotations-plugin.ts';
+import { dayHighlightPlugin } from './day-highlight-plugin.ts';
+import getDateFormat from './get-date-format.ts';
+import { type Annotation, Period } from './index.tsx';
+import { tooltipsPlugin } from './tooltips-plugin.ts';
+import { useBoostScoreTransform } from './use-boost-score-transform.ts';
+import useResize from './use-resize.ts';
 import './style-uplot.scss';
 
 const DEFAULT_DIMENSIONS = {

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

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

package/components/button/index.tsx

@@ -10,7 +10,7 @@ import React, { forwardRef } from 'react';
  * Internal dependencies
  */
 import styles from './style.module.scss';
-import type { ButtonProps } from './types.js';
+import type { ButtonProps } from './types.ts';
 
 /**
  * Button component

package/components/contextual-upgrade-trigger/index.tsx

@@ -1,9 +1,9 @@
 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.tsx';
+import Text from '../text/index.tsx';
 import styles from './style.module.scss';
-import { CutBaseProps } from './types.js';
+import { CutBaseProps } from './types.ts';
 import type React from 'react';
 
 const ContextualUpgradeTrigger: React.FC< CutBaseProps > = ( {

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

@@ -47,12 +47,12 @@
 
 	// Overwrite styles in Text component
 	.cta {
-		font-weight: bold;
+		font-weight: 700;
 	}
 }
 
 .cta {
-	font-weight: bold;
+	font-weight: 700;
 }
 
 .icon {

package/components/copy-to-clipboard/index.tsx

@@ -1,9 +1,9 @@
 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 { CopyToClipboardProps } from './types.js';
+import Button from '../button/index.tsx';
+import { ClipboardIcon, CheckmarkIcon } from '../icons/index.tsx';
+import { CopyToClipboardProps } from './types.ts';
 import type React from 'react';
 
 export const CopyToClipboard: React.FC< CopyToClipboardProps > = ( {

package/components/copy-to-clipboard/types.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';

package/components/decorative-card/index.tsx

@@ -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/components/decorative-card/style.scss

@@ -22,7 +22,7 @@
 		background-size: cover;
 		position: relative;
 
-		&:before {
+		&::before {
 			content: '';
 			display: block;
 			position: absolute;
@@ -30,12 +30,13 @@
 			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>');
 		}
 	}
 
 	&__content {
-		background: #FFFFFF;
+		background: #FFF;
 		padding: 2rem;
 	}
 
@@ -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>')
 		}
 	}
 
@@ -85,7 +87,7 @@
 			top: calc(100% + 16px);
 		}
 
-		&:after {
+		&::after {
 			top: calc(100% + 32px);
 			width: 75%;
 		}

package/components/dialog/index.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React from 'react';
-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.tsx';
+import Container from '../layout/container/index.tsx';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
 import styles from './style.module.scss';
 
 type DialogProps = {

package/components/diff-viewer/index.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
-import parseFilename from './parse-filename.js';
-import parsePatch from './parse-patch.js';
+import parseFilename from './parse-filename.ts';
+import parsePatch from './parse-patch.ts';
 import styles from './styles.module.scss';
 
 const filename = ( {

package/components/dot-pager/index.tsx

@@ -2,7 +2,7 @@ import { Button } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React, { Children, useState, useEffect, ReactNode, useCallback, useMemo } from 'react';
-import { Swipeable } from '../swipeable/index.js';
+import { Swipeable } from '../swipeable/index.tsx';
 
 import './style.scss';
 

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;
@@ -64,7 +64,7 @@
 	border-radius: 50%;
 	width: 6px;
 	height: 6px;
-	padding: 0px;
+	padding: 0;
 	background-color: var(--jp-white-off);
 
 	&:hover {

package/components/global-notices/global-notices.tsx

@@ -1,6 +1,6 @@
 import { SnackbarList } from '@wordpress/components';
 import styles from './styles.module.scss';
-import { useGlobalNotices } from './use-global-notices.js';
+import { useGlobalNotices } from './use-global-notices.ts';
 
 export type GlobalNoticesProps = {
 	maxVisibleNotices?: number;

package/components/global-notices/index.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/components/gridicon/index.tsx

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { Component } from 'react';
 import './style.scss';
-import { GridiconProps } from './types.js';
+import { GridiconProps } from './types.ts';
 
 class Gridicon extends Component< GridiconProps > {
 	static defaultProps = {

package/components/icon-tooltip/index.tsx

@@ -1,9 +1,9 @@
 import { Popover } from '@wordpress/components';
 import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
-import Button from '../button/index.js';
-import Gridicon from '../gridicon/index.js';
-import { IconTooltipProps, Placement, Position } from './types.js';
+import Button from '../button/index.tsx';
+import Gridicon from '../gridicon/index.tsx';
+import { IconTooltipProps, Placement, Position } from './types.ts';
 
 import './style.scss';
 

package/components/icon-tooltip/style.scss

@@ -13,11 +13,11 @@ $arrow-color: var( --jp-gray );
 	/*
 	* 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 +28,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;
 	}
 

package/components/icons/index.tsx

@@ -2,7 +2,7 @@ import { Path, SVG, G, Polygon } from '@wordpress/components';
 import clsx from 'clsx';
 import { SocialLogo } from 'social-logos';
 import styles from './style.module.scss';
-import { BaseIconProps } from './types.js';
+import { BaseIconProps } from './types.ts';
 import type React from 'react';
 
 /**

package/components/icons/style.module.scss

@@ -1,7 +1,7 @@
 @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
 
 .star-icon {
-	fill: black;
+	fill: #000;
 }
 
 .jetpack,

package/components/indeterminate-progress-bar/index.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import styles from './style.module.scss';
-import { IndeterminateProgressBarProps } from './types.js';
+import { IndeterminateProgressBarProps } from './types.ts';
 import type React from 'react';
 
 /**

package/components/jetpack-footer/index.tsx

@@ -2,13 +2,13 @@ import { __, _x } from '@wordpress/i18n';
 import { Icon, external } from '@wordpress/icons';
 import clsx from 'clsx';
 import React from 'react';
-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.ts';
+import getSiteAdminUrl from '../../tools/get-site-admin-url/index.ts';
+import AutomatticBylineLogo from '../automattic-byline-logo/index.tsx';
 import './style.scss';
-import JetpackLogo from '../jetpack-logo/index.js';
-import useBreakpointMatch from '../layout/use-breakpoint-match/index.js';
-import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.js';
+import JetpackLogo from '../jetpack-logo/index.tsx';
+import useBreakpointMatch from '../layout/use-breakpoint-match/index.ts';
+import type { JetpackFooterProps, JetpackFooterMenuItem } from './types.ts';
 
 const JetpackIcon: React.FC = () => (
 	<JetpackLogo logoColor="#000" showText={ false } height={ 16 } aria-hidden="true" />

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/jetpack-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { JetpackLogoProps } from './types.js';
+import { JetpackLogoProps } from './types.ts';
 
 const JetpackLogo: React.FC< JetpackLogoProps > = ( {
 	logoColor = '#069e08',

package/components/jetpack-protect-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { JetpackProtectLogoProps } from './types.js';
+import { JetpackProtectLogoProps } from './types.ts';
 
 const JetpackProtectLogo: React.FC< JetpackProtectLogoProps > = ( {
 	logoColor = '#069e08',

package/components/jetpack-search-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { JetpackSearchLogoProps } from './types.js';
+import { JetpackSearchLogoProps } from './types.ts';
 
 const JetpackSearchLogo: React.FC< JetpackSearchLogoProps > = ( {
 	logoColor = '#069e08',

package/components/jetpack-vaultpress-backup-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { JetpackLogoProps } from './types.js';
+import { JetpackLogoProps } from './types.ts';
 
 const JetpackVaultPressBackupLogo: React.FC< JetpackLogoProps > = ( {
 	showText = true,

package/components/jetpack-videopress-logo/index.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import React from 'react';
-import { JetpackLogoProps } from './types.js';
+import { JetpackLogoProps } from './types.tsx';
 
 const JetpackVideoPressLogo: React.FC< JetpackLogoProps > = ( {
 	showText = true,