diff --git a/projects/js-packages/components/.eslintrc.cjs b/projects/js-packages/components/.eslintrc.cjs
index 9915662c613ee..17efe12ad9b08 100644
--- a/projects/js-packages/components/.eslintrc.cjs
+++ b/projects/js-packages/components/.eslintrc.cjs
@@ -5,8 +5,7 @@ module.exports = {
'@wordpress/i18n-text-domain': [
'error',
{
- // @todo: Change this to something not "jetpack".
- allowedTextDomain: 'jetpack',
+ allowedTextDomain: 'jetpack-components',
},
],
},
diff --git a/projects/js-packages/components/changelog/fix-js-package-textdomains b/projects/js-packages/components/changelog/fix-js-package-textdomains
new file mode 100644
index 0000000000000..54ff0aca3f685
--- /dev/null
+++ b/projects/js-packages/components/changelog/fix-js-package-textdomains
@@ -0,0 +1,4 @@
+Significance: major
+Type: changed
+
+Changed text domain from 'jetpack' to 'jetpack-components'.
diff --git a/projects/js-packages/components/components/action-button/index.jsx b/projects/js-packages/components/components/action-button/index.jsx
index 42d366eaf2fa0..176a94c101df7 100644
--- a/projects/js-packages/components/components/action-button/index.jsx
+++ b/projects/js-packages/components/components/action-button/index.jsx
@@ -30,7 +30,7 @@ const ActionButton = props => {
loadingText,
isDisabled,
displayError = false,
- errorMessage = __( 'An error occurred. Please try again.', 'jetpack' ),
+ errorMessage = __( 'An error occurred. Please try again.', 'jetpack-components' ),
customClass,
} = props;
diff --git a/projects/js-packages/components/components/action-popover/index.tsx b/projects/js-packages/components/components/action-popover/index.tsx
index 3a86fa4db2b79..b9031f3b46583 100644
--- a/projects/js-packages/components/components/action-popover/index.tsx
+++ b/projects/js-packages/components/components/action-popover/index.tsx
@@ -54,7 +54,7 @@ const ActionPopover = ( {
if ( showSteps ) {
stepsText = sprintf(
/* translators: 1 Current step, 2 Total steps */
- __( '%1$d of %2$d', 'jetpack' ),
+ __( '%1$d of %2$d', 'jetpack-components' ),
step,
totalSteps
);
diff --git a/projects/js-packages/components/components/admin-page/index.tsx b/projects/js-packages/components/components/admin-page/index.tsx
index 8ce477b8d9d21..4e072a791748e 100644
--- a/projects/js-packages/components/components/admin-page/index.tsx
+++ b/projects/js-packages/components/components/admin-page/index.tsx
@@ -18,7 +18,7 @@ import type React from 'react';
*/
const AdminPage: React.FC< AdminPageProps > = ( {
children,
- moduleName = __( 'Jetpack', 'jetpack' ),
+ moduleName = __( 'Jetpack', 'jetpack-components' ),
moduleNameHref,
showHeader = true,
showFooter = true,
diff --git a/projects/js-packages/components/components/automattic-byline-logo/index.tsx b/projects/js-packages/components/components/automattic-byline-logo/index.tsx
index caff7fa9ef853..1b1f7a8b92fe8 100644
--- a/projects/js-packages/components/components/automattic-byline-logo/index.tsx
+++ b/projects/js-packages/components/components/automattic-byline-logo/index.tsx
@@ -10,7 +10,7 @@ import { AutomatticBylineLogoProps } from './types';
* @return {React.ReactNode} AutomatticBylineLogo component.
*/
const AutomatticBylineLogo: React.FC< AutomatticBylineLogoProps > = ( {
- title = __( 'An Automattic Airline', 'jetpack' ),
+ title = __( 'An Automattic Airline', 'jetpack-components' ),
height = 7,
className,
...otherProps
diff --git a/projects/js-packages/components/components/boost-score-bar/index.tsx b/projects/js-packages/components/components/boost-score-bar/index.tsx
index 8bfffec036a70..6bf0119947226 100644
--- a/projects/js-packages/components/components/boost-score-bar/index.tsx
+++ b/projects/js-packages/components/components/boost-score-bar/index.tsx
@@ -20,8 +20,8 @@ export const BoostScoreBar: FunctionComponent< BoostScoreBarProps > = ( {
}
const prevScoreOffset = ( prevScore / score ) * 100;
- const desktopIconLabel = __( 'Desktop score', 'jetpack' );
- const mobileIconLabel = __( 'Mobile score', 'jetpack' );
+ const desktopIconLabel = __( 'Desktop score', 'jetpack-components' );
+ const mobileIconLabel = __( 'Mobile score', 'jetpack-components' );
const getIcon = () => {
if ( scoreBarType === 'desktop' ) {
diff --git a/projects/js-packages/components/components/boost-score-graph/tooltip.tsx b/projects/js-packages/components/components/boost-score-graph/tooltip.tsx
index dad28ece27a57..8acde43d1ee7d 100644
--- a/projects/js-packages/components/components/boost-score-graph/tooltip.tsx
+++ b/projects/js-packages/components/components/boost-score-graph/tooltip.tsx
@@ -31,69 +31,79 @@ export const Tooltip: FunctionComponent = ( { period }: { period: Period } ) =>
{ date }
-
{ __( 'Overall score', 'jetpack' ) }
+
+ { __( 'Overall score', 'jetpack-components' ) }
+
{ scoreLetter }
-
{ __( 'Desktop score', 'jetpack' ) }
+
+ { __( 'Desktop score', 'jetpack-components' ) }
+
{
/* translators: %d is the score */
- sprintf( __( '%d / 100', 'jetpack' ), desktop_overall_score )
+ sprintf( __( '%d / 100', 'jetpack-components' ), desktop_overall_score )
}
{ typeof desktop_lcp === 'number' && (
- { __( 'Largest Contentful Paint', 'jetpack' ) }
+ { __( 'Largest Contentful Paint', 'jetpack-components' ) }
{ sprintf( '%0.2fs', desktop_lcp ) }
) }
{ typeof desktop_tbt === 'number' && (
-
{ __( 'Total Blocking Time', 'jetpack' ) }
+
+ { __( 'Total Blocking Time', 'jetpack-components' ) }
+
{ sprintf( '%0.2fs', desktop_tbt ) }
) }
{ typeof desktop_cls === 'number' && (
- { __( 'Cumulative Layout Shift', 'jetpack' ) }
+ { __( 'Cumulative Layout Shift', 'jetpack-components' ) }
{ sprintf( '%0.2f', desktop_cls ) }
) }
-
{ __( 'Mobile score', 'jetpack' ) }
+
+ { __( 'Mobile score', 'jetpack-components' ) }
+
{
/* translators: %d is the score */
- sprintf( __( '%d / 100', 'jetpack' ), mobile_overall_score )
+ sprintf( __( '%d / 100', 'jetpack-components' ), mobile_overall_score )
}
{ typeof mobile_lcp === 'number' && (
- { __( 'Largest Contentful Paint', 'jetpack' ) }
+ { __( 'Largest Contentful Paint', 'jetpack-components' ) }
{ sprintf( '%0.2fs', mobile_lcp ) }
) }
{ typeof mobile_tbt === 'number' && (
-
{ __( 'Total Blocking Time', 'jetpack' ) }
+
+ { __( 'Total Blocking Time', 'jetpack-components' ) }
+
{ sprintf( '%0.2fs', mobile_tbt ) }
) }
{ typeof mobile_cls === 'number' && (
- { __( 'Cumulative Layout Shift', 'jetpack' ) }
+ { __( 'Cumulative Layout Shift', 'jetpack-components' ) }
{ sprintf( '%0.2f', mobile_cls ) }
diff --git a/projects/js-packages/components/components/boost-score-graph/uplot-line-chart.tsx b/projects/js-packages/components/components/boost-score-graph/uplot-line-chart.tsx
index 86908cb4137b5..315762d4fb4fa 100644
--- a/projects/js-packages/components/components/boost-score-graph/uplot-line-chart.tsx
+++ b/projects/js-packages/components/components/boost-score-graph/uplot-line-chart.tsx
@@ -151,7 +151,7 @@ export default function UplotLineChart( { range, periods, annotations = [] }: Up
},
series: [
{
- label: __( 'Date', 'jetpack' ),
+ label: __( 'Date', 'jetpack-components' ),
value: ( self: uPlot, rawValue: number ) => {
// outputs legend content - value available when mouse is hovering the chart
if ( ! rawValue ) {
@@ -161,8 +161,8 @@ export default function UplotLineChart( { range, periods, annotations = [] }: Up
return date.toLocaleDateString( getUserLocale() );
},
},
- createSerieInfo( __( 'Desktop', 'jetpack' ), lastDesktopScore ),
- createSerieInfo( __( 'Mobile', 'jetpack' ), lastMobileScore ),
+ createSerieInfo( __( 'Desktop', 'jetpack-components' ), lastDesktopScore ),
+ createSerieInfo( __( 'Mobile', 'jetpack-components' ), lastMobileScore ),
],
scales: {
x: {
diff --git a/projects/js-packages/components/components/button/index.tsx b/projects/js-packages/components/components/button/index.tsx
index d7f0e608c5a81..8b5b9a7b74db7 100644
--- a/projects/js-packages/components/components/button/index.tsx
+++ b/projects/js-packages/components/components/button/index.tsx
@@ -55,7 +55,7 @@ const Button = forwardRef< HTMLInputElement, ButtonProps >( ( props, ref ) => {
{
/* translators: accessibility text */
- __( '(opens in a new tab)', 'jetpack' )
+ __( '(opens in a new tab)', 'jetpack-components' )
}
>
diff --git a/projects/js-packages/components/components/copy-to-clipboard/index.tsx b/projects/js-packages/components/components/copy-to-clipboard/index.tsx
index 96b7209958551..dcc09baa5fb3c 100644
--- a/projects/js-packages/components/components/copy-to-clipboard/index.tsx
+++ b/projects/js-packages/components/components/copy-to-clipboard/index.tsx
@@ -47,10 +47,10 @@ export const CopyToClipboard: React.FC< CopyToClipboardProps > = ( {
icon = hasCopied ?
:
;
}
- const defaultLabel = __( 'Copy to clipboard', 'jetpack' );
+ const defaultLabel = __( 'Copy to clipboard', 'jetpack-components' );
if ( 'icon' !== buttonStyle ) {
- label = hasCopied ? __( 'Copied!', 'jetpack' ) : defaultLabel;
+ label = hasCopied ? __( 'Copied!', 'jetpack-components' ) : defaultLabel;
}
return (
diff --git a/projects/js-packages/components/components/gridicon/index.tsx b/projects/js-packages/components/components/gridicon/index.tsx
index a7ac1de035563..ee5ac19d3f915 100644
--- a/projects/js-packages/components/components/gridicon/index.tsx
+++ b/projects/js-packages/components/components/gridicon/index.tsx
@@ -48,45 +48,45 @@ class Gridicon extends Component< GridiconProps > {
default:
return '';
case 'gridicons-audio':
- return __( 'Has audio.', 'jetpack' );
+ return __( 'Has audio.', 'jetpack-components' );
case 'gridicons-arrow-left':
- return __( 'Arrow left', 'jetpack' );
+ return __( 'Arrow left', 'jetpack-components' );
case 'gridicons-arrow-right':
- return __( 'Arrow right', 'jetpack' );
+ return __( 'Arrow right', 'jetpack-components' );
case 'gridicons-calendar':
- return __( 'Is an event.', 'jetpack' );
+ return __( 'Is an event.', 'jetpack-components' );
case 'gridicons-cart':
- return __( 'Is a product.', 'jetpack' );
+ return __( 'Is a product.', 'jetpack-components' );
case 'chevron-down':
- return __( 'Show filters', 'jetpack' );
+ return __( 'Show filters', 'jetpack-components' );
case 'gridicons-comment':
- return __( 'Matching comment.', 'jetpack' );
+ return __( 'Matching comment.', 'jetpack-components' );
case 'gridicons-cross':
- return __( 'Close.', 'jetpack' );
+ return __( 'Close.', 'jetpack-components' );
case 'gridicons-filter':
- return __( 'Toggle search filters.', 'jetpack' );
+ return __( 'Toggle search filters.', 'jetpack-components' );
case 'gridicons-folder':
- return __( 'Category', 'jetpack' );
+ return __( 'Category', 'jetpack-components' );
case 'gridicons-help-outline':
- return __( 'Help', 'jetpack' );
+ return __( 'Help', 'jetpack-components' );
case 'gridicons-info':
case 'gridicons-info-outline':
- return __( 'Information.', 'jetpack' );
+ return __( 'Information.', 'jetpack-components' );
case 'gridicons-image-multiple':
- return __( 'Has multiple images.', 'jetpack' );
+ return __( 'Has multiple images.', 'jetpack-components' );
case 'gridicons-image':
- return __( 'Has an image.', 'jetpack' );
+ return __( 'Has an image.', 'jetpack-components' );
case 'gridicons-page':
- return __( 'Page', 'jetpack' );
+ return __( 'Page', 'jetpack-components' );
case 'gridicons-post':
- return __( 'Post', 'jetpack' );
+ return __( 'Post', 'jetpack-components' );
case 'gridicons-jetpack-search':
case 'gridicons-search':
- return __( 'Magnifying Glass', 'jetpack' );
+ return __( 'Magnifying Glass', 'jetpack-components' );
case 'gridicons-tag':
- return __( 'Tag', 'jetpack' );
+ return __( 'Tag', 'jetpack-components' );
case 'gridicons-video':
- return __( 'Has a video.', 'jetpack' );
+ return __( 'Has a video.', 'jetpack-components' );
}
}
diff --git a/projects/js-packages/components/components/indeterminate-progress-bar/index.tsx b/projects/js-packages/components/components/indeterminate-progress-bar/index.tsx
index 2ac01bbba8f3b..c6d666b547902 100644
--- a/projects/js-packages/components/components/indeterminate-progress-bar/index.tsx
+++ b/projects/js-packages/components/components/indeterminate-progress-bar/index.tsx
@@ -20,7 +20,7 @@ const IndeterminateProgressBar: React.FC< IndeterminateProgressBarProps > = ( {
return (
);
};
diff --git a/projects/js-packages/components/components/jetpack-footer/index.tsx b/projects/js-packages/components/components/jetpack-footer/index.tsx
index fa08c416eefdf..9fe15ada5241c 100644
--- a/projects/js-packages/components/components/jetpack-footer/index.tsx
+++ b/projects/js-packages/components/components/jetpack-footer/index.tsx
@@ -22,7 +22,7 @@ const ExternalIcon: React.FC = () => (
{
/* translators: accessibility text */
- __( '(opens in a new tab)', 'jetpack' )
+ __( '(opens in a new tab)', 'jetpack-components' )
}
>
@@ -35,7 +35,7 @@ const ExternalIcon: React.FC = () => (
* @return {React.ReactNode} JetpackFooter component.
*/
const JetpackFooter: React.FC< JetpackFooterProps > = ( {
- moduleName = __( 'Jetpack', 'jetpack' ),
+ moduleName = __( 'Jetpack', 'jetpack-components' ),
className,
moduleNameHref = 'https://jetpack.com',
menu,
@@ -69,8 +69,8 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
let items: JetpackFooterMenuItem[] = [
{
- label: _x( 'About', 'Link to learn more about Jetpack.', 'jetpack' ),
- title: __( 'About Jetpack', 'jetpack' ),
+ label: _x( 'About', 'Link to learn more about Jetpack.', 'jetpack-components' ),
+ title: __( 'About Jetpack', 'jetpack-components' ),
href: areAdminLinksEnabled
? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
: getRedirectUrl( 'jetpack-about' ),
@@ -78,8 +78,8 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
onClick: onAboutClick,
},
{
- label: _x( 'Privacy', 'Shorthand for Privacy Policy.', 'jetpack' ),
- title: __( "Automattic's Privacy Policy", 'jetpack' ),
+ label: _x( 'Privacy', 'Shorthand for Privacy Policy.', 'jetpack-components' ),
+ title: __( "Automattic's Privacy Policy", 'jetpack-components' ),
href: areAdminLinksEnabled
? new URL( 'admin.php?page=jetpack#/privacy', siteAdminUrl ).href
: getRedirectUrl( 'a8c-privacy' ),
@@ -87,8 +87,8 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
onClick: onPrivacyClick,
},
{
- label: _x( 'Terms', 'Shorthand for Terms of Service.', 'jetpack' ),
- title: __( 'WordPress.com Terms of Service', 'jetpack' ),
+ label: _x( 'Terms', 'Shorthand for Terms of Service.', 'jetpack-components' ),
+ title: __( 'WordPress.com Terms of Service', 'jetpack-components' ),
href: getRedirectUrl( 'wpcom-tos' ),
target: '_blank',
onClick: onTermsClick,
@@ -117,7 +117,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
},
className
) }
- aria-label={ __( 'Jetpack', 'jetpack' ) }
+ aria-label={ __( 'Jetpack', 'jetpack-components' ) }
{ ...otherProps }
>
@@ -160,7 +160,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( {
? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href
: getRedirectUrl( 'a8c-about' )
}
- aria-label={ __( 'An Automattic Airline', 'jetpack' ) }
+ aria-label={ __( 'An Automattic Airline', 'jetpack-components' ) }
>
diff --git a/projects/js-packages/components/components/jetpack-logo/index.tsx b/projects/js-packages/components/components/jetpack-logo/index.tsx
index d802ce6bf268f..99bf6ebfa0d32 100644
--- a/projects/js-packages/components/components/jetpack-logo/index.tsx
+++ b/projects/js-packages/components/components/jetpack-logo/index.tsx
@@ -25,7 +25,7 @@ const JetpackLogo: React.FC< JetpackLogoProps > = ( {
// role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
role="img"
>
- { __( 'Jetpack Logo', 'jetpack' ) }
+ { __( 'Jetpack Logo', 'jetpack-components' ) }
= ( {
// role="img" is required to prevent VoiceOver on Safari reading the content of the SVG
role="img"
>
- { __( 'Jetpack Protect Logo', 'jetpack' ) }
+ { __( 'Jetpack Protect Logo', 'jetpack-components' ) }
= ( {
aria-labelledby="jetpack-logo-title"
{ ...otherProps }
>
- { __( 'Jetpack Search Logo', 'jetpack' ) }
+ { __( 'Jetpack Search Logo', 'jetpack-components' ) }
{ showText && (
<>
= ( {
{ ...otherProps }
>
- { __( 'VaultPress Backup Logo', 'jetpack' ) }
+ { __( 'VaultPress Backup Logo', 'jetpack-components' ) }
= ( {
height={ height }
{ ...otherProps }
>
- { __( 'VideoPress Logo', 'jetpack' ) }
+
+ { __( 'VideoPress Logo', 'jetpack-components' ) }
+
{ showText ? (
<>
{
*/
const PricingCard: React.FC< PricingCardProps > = ( {
currencyCode = 'USD',
- priceDetails = __( '/month, paid yearly', 'jetpack' ),
+ priceDetails = __( '/month, paid yearly', 'jetpack-components' ),
...props
} ) => {
const currencyObjectBefore = getCurrencyObject( props.priceBefore, currencyCode );
@@ -44,7 +44,7 @@ const PricingCard: React.FC< PricingCardProps > = ( {
src={ props.icon }
alt={ sprintf(
/* translators: placeholder is a product name */
- __( 'Icon for the product %s', 'jetpack' ),
+ __( 'Icon for the product %s', 'jetpack-components' ),
props.title
) }
/>
diff --git a/projects/js-packages/components/components/pricing-table/index.tsx b/projects/js-packages/components/components/pricing-table/index.tsx
index 6a4459362194d..8ef38c9c32408 100644
--- a/projects/js-packages/components/components/pricing-table/index.tsx
+++ b/projects/js-packages/components/components/pricing-table/index.tsx
@@ -22,9 +22,9 @@ import {
PricingTableItemProps,
} from './types';
-const INCLUDED_TEXT = __( 'Included', 'jetpack' );
-const NOT_INCLUDED_TEXT = __( 'Not included', 'jetpack' );
-const COMING_SOON_TEXT = __( 'Coming soon', 'jetpack' );
+const INCLUDED_TEXT = __( 'Included', 'jetpack-components' );
+const NOT_INCLUDED_TEXT = __( 'Not included', 'jetpack-components' );
+const COMING_SOON_TEXT = __( 'Coming soon', 'jetpack-components' );
const PricingTableContext = createContext( undefined );
@@ -33,7 +33,7 @@ const getItemLabels = ( isComingSoon, isIncluded, featureNameLabel ) => {
return {
lg: COMING_SOON_TEXT,
// translators: Name of the current feature
- default: sprintf( __( '%s coming soon', 'jetpack' ), featureNameLabel ),
+ default: sprintf( __( '%s coming soon', 'jetpack-components' ), featureNameLabel ),
};
}
@@ -43,7 +43,7 @@ const getItemLabels = ( isComingSoon, isIncluded, featureNameLabel ) => {
? featureNameLabel
: sprintf(
/* translators: Name of the current feature */
- __( '%s not included', 'jetpack' ),
+ __( '%s not included', 'jetpack-components' ),
featureNameLabel
),
};
@@ -186,7 +186,7 @@ const PricingTable: React.FC< PricingTableProps > = ( {
{ __(
'Reduced pricing is a limited offer for the first year and renews at regular price.',
- 'jetpack'
+ 'jetpack-components'
) }
) }
diff --git a/projects/js-packages/components/components/product-offer/index.tsx b/projects/js-packages/components/components/product-offer/index.tsx
index 86744cd0ea22d..1f4818abd6585 100644
--- a/projects/js-packages/components/components/product-offer/index.tsx
+++ b/projects/js-packages/components/components/product-offer/index.tsx
@@ -43,7 +43,7 @@ const ProductOffer: React.FC< ProductOfferProps > = ( {
const defautlButtonText = sprintf(
/* translators: placeholder is product name. */
- __( 'Add %s', 'jetpack' ),
+ __( 'Add %s', 'jetpack-components' ),
title
);
@@ -79,7 +79,7 @@ const ProductOffer: React.FC< ProductOfferProps > = ( {
) }
- { isFree && { __( 'Free', 'jetpack' ) }
}
+ { isFree && { __( 'Free', 'jetpack-components' ) }
}
{ error }
@@ -103,7 +103,7 @@ const ProductOffer: React.FC< ProductOfferProps > = ( {
{ isBundle && hasRequiredPlan && (
- { __( 'Active on your site', 'jetpack' ) }
+ { __( 'Active on your site', 'jetpack-components' ) }
) }
diff --git a/projects/js-packages/components/components/product-offer/product-offer-header.tsx b/projects/js-packages/components/components/product-offer/product-offer-header.tsx
index 141e315578de2..d4b24ff240245 100644
--- a/projects/js-packages/components/components/product-offer/product-offer-header.tsx
+++ b/projects/js-packages/components/components/product-offer/product-offer-header.tsx
@@ -12,7 +12,7 @@ import type React from 'react';
* @return {React.ReactNode} ProductOfferHeader react component.
*/
export const ProductOfferHeader: React.FC< ProductOfferHeaderProps > = ( {
- title = __( 'Popular upgrade', 'jetpack' ),
+ title = __( 'Popular upgrade', 'jetpack-components' ),
} ) => {
return (
diff --git a/projects/js-packages/components/components/product-price/index.tsx b/projects/js-packages/components/components/product-price/index.tsx
index edfbf6a6fa0ff..52c44c509aab3 100644
--- a/projects/js-packages/components/components/product-price/index.tsx
+++ b/projects/js-packages/components/components/product-price/index.tsx
@@ -25,7 +25,7 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
showNotOffPrice = true,
hideDiscountLabel = true,
promoLabel = '',
- legend = __( '/month, paid yearly', 'jetpack' ),
+ legend = __( '/month, paid yearly', 'jetpack-components' ),
isNotConvenientPrice = false,
hidePriceFraction = false,
children,
@@ -43,7 +43,7 @@ const ProductPrice: React.FC< ProductPriceProps > = ( {
const showDiscountLabel = ! hideDiscountLabel && discount && discount > 0;
- const discountElt = showDiscountLabel ? discount + __( '% off', 'jetpack' ) : null;
+ const discountElt = showDiscountLabel ? discount + __( '% off', 'jetpack-components' ) : null;
return (
<>
diff --git a/projects/js-packages/components/components/record-meter-bar/index.tsx b/projects/js-packages/components/components/record-meter-bar/index.tsx
index 8bf072645a6af..48174a326f753 100644
--- a/projects/js-packages/components/components/record-meter-bar/index.tsx
+++ b/projects/js-packages/components/components/record-meter-bar/index.tsx
@@ -139,11 +139,11 @@ const RecordMeterBar: React.FC< RecordMeterBarProps > = ( {