diff --git a/client/components/mma/accountoverview/ProductCard.tsx b/client/components/mma/accountoverview/ProductCard.tsx
index 6986cbfe7..20ee62796 100644
--- a/client/components/mma/accountoverview/ProductCard.tsx
+++ b/client/components/mma/accountoverview/ProductCard.tsx
@@ -1,10 +1,10 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { palette, textSans } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
 	SvgInfoRound,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { InfoSummary } from '@guardian/source-react-components-development-kitchen';
 import { useNavigate } from 'react-router';
@@ -352,27 +352,23 @@ export const ProductCard = ({
 								</Button>
 							)}
 							{showSwitchButton && (
-								<ThemeProvider
-									theme={buttonThemeReaderRevenueBrand}
+								<Button
+									theme={themeButtonReaderRevenueBrand}
+									size="small"
+									cssOverrides={css`
+										justify-content: center;
+									`}
+									onClick={() =>
+										navigate(`/switch`, {
+											state: {
+												productDetail: productDetail,
+												user: user,
+											},
+										})
+									}
 								>
-									<Button
-										size="small"
-										cssOverrides={css`
-											justify-content: center;
-										`}
-										onClick={() =>
-											navigate(`/switch`, {
-												state: {
-													productDetail:
-														productDetail,
-													user: user,
-												},
-											})
-										}
-									>
-										Change to all-access digital
-									</Button>
-								</ThemeProvider>
+									Change to all-access digital
+								</Button>
 							)}
 						</div>
 					</div>
@@ -385,7 +381,7 @@ export const ProductCard = ({
 							</h4>
 							<div>
 								<dl css={keyValueCss}>
-									<dt>{atob('TFBQRlJFRTZHTFRY')}</dt>
+									<dt>{window.atob('TFBQRlJFRTZHTFRY')}</dt>
 									<dd>
 										gives you 6 free tickets each year (1
 										per event)
@@ -394,7 +390,7 @@ export const ProductCard = ({
 							</div>
 							<div>
 								<dl css={keyValueCss}>
-									<dt>{atob('TFBQMjAyR0xUWA==')}</dt>
+									<dt>{window.atob('TFBQMjAyR0xUWA==')}</dt>
 									<dd>
 										gives you 20% off an extra 2 tickets per
 										event
diff --git a/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx b/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx
index 0a80087e4..f14c3b565 100644
--- a/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx
+++ b/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx
@@ -1,14 +1,14 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { palette, space, textSans, until } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	ChoiceCard,
 	ChoiceCardGroup,
 	InlineError,
 	Link,
 	SvgInfoRound,
 	TextInput,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { useEffect, useState } from 'react';
 import type { PaidSubscriptionPlan } from '../../../../../shared/productResponse';
@@ -323,17 +323,14 @@ export const SupporterPlusUpdateAmountForm = (
 								buttonContainerCss,
 							]}
 						>
-							<ThemeProvider
-								theme={buttonThemeReaderRevenueBrand}
+							<Button
+								theme={themeButtonReaderRevenueBrand}
+								cssOverrides={buttonCentredCss}
+								onClick={changeAmountClick}
+								size="small"
 							>
-								<Button
-									cssOverrides={buttonCentredCss}
-									onClick={changeAmountClick}
-									size="small"
-								>
-									Change amount
-								</Button>
-							</ThemeProvider>
+								Change amount
+							</Button>
 						</section>
 						<div
 							css={css`
diff --git a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubThankYouOffer.tsx b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubThankYouOffer.tsx
index 36b50be3b..b347c6dab 100644
--- a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubThankYouOffer.tsx
+++ b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubThankYouOffer.tsx
@@ -1,10 +1,10 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { from, headline, space, textSans } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
 	SvgTickRound,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { ErrorSummary } from '@guardian/source-react-components-development-kitchen';
 import { useContext, useEffect, useState } from 'react';
@@ -103,15 +103,14 @@ const DiscountOffer = ({
 			</ul>
 		</div>
 		<div css={buttonContainerCss}>
-			<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-				<Button
-					cssOverrides={buttonCentredCss}
-					onClick={handleDiscountOfferClick}
-					isLoading={isDiscountLoading}
-				>
-					Keep support with discount
-				</Button>
-			</ThemeProvider>
+			<Button
+				theme={themeButtonReaderRevenueBrand}
+				cssOverrides={buttonCentredCss}
+				onClick={handleDiscountOfferClick}
+				isLoading={isDiscountLoading}
+			>
+				Keep support with discount
+			</Button>
 		</div>
 		{hasDiscountFailed && (
 			<ErrorSummary
diff --git a/client/components/mma/cancel/cancellationSaves/membership/MembershipSwitch.tsx b/client/components/mma/cancel/cancellationSaves/membership/MembershipSwitch.tsx
index 4d46b5fe4..a35cc29df 100644
--- a/client/components/mma/cancel/cancellationSaves/membership/MembershipSwitch.tsx
+++ b/client/components/mma/cancel/cancellationSaves/membership/MembershipSwitch.tsx
@@ -1,11 +1,11 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { palette, space, textSans } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
 	SvgClock,
 	SvgCreditCard,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { ErrorSummary } from '@guardian/source-react-components-development-kitchen';
 import { useContext, useEffect, useState } from 'react';
@@ -307,15 +307,14 @@ export const MembershipSwitch = () => {
 			)}
 
 			<section css={[sectionSpacing, stackedButtonLayoutCss]}>
-				<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-					<Button
-						cssOverrides={[buttonCentredCss, wideButtonCss]}
-						isLoading={isSwitching}
-						onClick={confirmSwitch}
-					>
-						Confirm change
-					</Button>
-				</ThemeProvider>
+				<Button
+					theme={themeButtonReaderRevenueBrand}
+					cssOverrides={[buttonCentredCss, wideButtonCss]}
+					isLoading={isSwitching}
+					onClick={confirmSwitch}
+				>
+					Confirm change
+				</Button>
 				<Button
 					priority="tertiary"
 					cssOverrides={[buttonCentredCss, buttonMutedCss]}
diff --git a/client/components/mma/cancel/cancellationSaves/membership/SaveOptions.tsx b/client/components/mma/cancel/cancellationSaves/membership/SaveOptions.tsx
index 117802cd0..a32ac90b9 100644
--- a/client/components/mma/cancel/cancellationSaves/membership/SaveOptions.tsx
+++ b/client/components/mma/cancel/cancellationSaves/membership/SaveOptions.tsx
@@ -1,4 +1,4 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import {
 	from,
 	palette,
@@ -8,8 +8,8 @@ import {
 } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { useContext } from 'react';
 import { Navigate, useLocation, useNavigate } from 'react-router';
@@ -150,18 +150,15 @@ export const SaveOptions = () => {
 							benefits={benefitsConfiguration['membership']}
 						/>
 						<section css={[cardSectionCss, buttonContainerCss]}>
-							<ThemeProvider
-								theme={buttonThemeReaderRevenueBrand}
+							<Button
+								theme={themeButtonReaderRevenueBrand}
+								cssOverrides={buttonCentredCss}
+								size="small"
+								onClick={() => navigate('../thank-you')}
 							>
-								<Button
-									cssOverrides={buttonCentredCss}
-									size="small"
-									onClick={() => navigate('../thank-you')}
-								>
-									Keep my Membership for {newPriceDisplay}/
-									{billingPeriod}
-								</Button>
-							</ThemeProvider>
+								Keep my Membership for {newPriceDisplay}/
+								{billingPeriod}
+							</Button>
 						</section>
 					</Card.Section>
 				</Card>
@@ -194,21 +191,18 @@ export const SaveOptions = () => {
 							benefits={benefitsConfiguration['contributions']}
 						/>
 						<section css={[cardSectionCss, buttonContainerCss]}>
-							<ThemeProvider
-								theme={buttonThemeReaderRevenueBrand}
+							<Button
+								theme={themeButtonReaderRevenueBrand}
+								cssOverrides={buttonCentredCss}
+								size="small"
+								onClick={() =>
+									navigate('../switch-offer', {
+										state: { ...routerState },
+									})
+								}
 							>
-								<Button
-									cssOverrides={buttonCentredCss}
-									size="small"
-									onClick={() =>
-										navigate('../switch-offer', {
-											state: { ...routerState },
-										})
-									}
-								>
-									Become a recurring contributor
-								</Button>
-							</ThemeProvider>
+								Become a recurring contributor
+							</Button>
 						</section>
 					</Card.Section>
 				</Card>
diff --git a/client/components/mma/paymentUpdate/PaymentDetailUpdateConfirmation.tsx b/client/components/mma/paymentUpdate/PaymentDetailUpdateConfirmation.tsx
index 52dc9deea..6f2c412b6 100644
--- a/client/components/mma/paymentUpdate/PaymentDetailUpdateConfirmation.tsx
+++ b/client/components/mma/paymentUpdate/PaymentDetailUpdateConfirmation.tsx
@@ -1,4 +1,4 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import {
 	from,
 	headline,
@@ -9,8 +9,8 @@ import {
 } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	LinkButton,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { InfoSummary } from '@guardian/source-react-components-development-kitchen';
 import { useContext } from 'react';
@@ -388,14 +388,13 @@ export const PaymentMethodUpdated = ({
 			<span> You are helping to support independent journalism.</span>
 			<div css={{ marginTop: `${space[9]}px` }}>
 				{isFromApp ? (
-					<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-						<LinkButton
-							href="x-gu://mma/payment-update?success"
-							cssOverrides={buttonCentredCss}
-						>
-							Return to the app
-						</LinkButton>
-					</ThemeProvider>
+					<LinkButton
+						theme={themeButtonReaderRevenueBrand}
+						href="x-gu://mma/payment-update?success"
+						cssOverrides={buttonCentredCss}
+					>
+						Return to the app
+					</LinkButton>
 				) : (
 					<MMALinkButton
 						to="/"
diff --git a/client/components/mma/switch/complete/SwitchComplete.tsx b/client/components/mma/switch/complete/SwitchComplete.tsx
index 6ea7e7dff..44d450085 100644
--- a/client/components/mma/switch/complete/SwitchComplete.tsx
+++ b/client/components/mma/switch/complete/SwitchComplete.tsx
@@ -1,4 +1,4 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import {
 	from,
 	headline,
@@ -8,12 +8,12 @@ import {
 	until,
 } from '@guardian/source-foundations';
 import {
-	buttonThemeReaderRevenueBrand,
 	LinkButton,
 	Stack,
 	SvgCalendar,
 	SvgClock,
 	SvgEnvelope,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { useContext } from 'react';
 import { Navigate, useLocation } from 'react-router';
@@ -161,14 +161,13 @@ const AppThankYouBanner = (props: {
 			</h2>
 			<p css={thankYouBannerSubheadingCss}>One last step ...</p>
 			<div css={thankYouBannerButtonCss}>
-				<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-					<LinkButton
-						href="x-gu://mma/success"
-						cssOverrides={buttonCentredCss}
-					>
-						Activate full app access now
-					</LinkButton>
-				</ThemeProvider>
+				<LinkButton
+					theme={themeButtonReaderRevenueBrand}
+					href="x-gu://mma/success"
+					cssOverrides={buttonCentredCss}
+				>
+					Activate full app access now
+				</LinkButton>
 			</div>
 			<p css={thankYouBannerCopyCss}>
 				If you don’t complete this step, you may be unable to access the
diff --git a/client/components/mma/switch/options/SwitchOptions.tsx b/client/components/mma/switch/options/SwitchOptions.tsx
index 1bba5c567..5649a6ef6 100644
--- a/client/components/mma/switch/options/SwitchOptions.tsx
+++ b/client/components/mma/switch/options/SwitchOptions.tsx
@@ -1,9 +1,9 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { palette, space, textSans, until } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { ErrorSummary } from '@guardian/source-react-components-development-kitchen';
 import { useContext, useEffect, useRef, useState } from 'react';
@@ -259,21 +259,20 @@ export const SwitchOptions = () => {
 				css={[buttonContainerCss, buttonIsStuck && buttonStuckCss]}
 				ref={buttonContainerRef}
 			>
-				<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-					<Button
-						size="small"
-						cssOverrides={buttonCentredCss}
-						onClick={() =>
-							navigate('review', {
-								state: routerState,
-							})
-						}
-					>
-						{isAboveThreshold
-							? 'Add extras'
-							: `Upgrade to ${mainPlan.currency}${threshold} per ${mainPlan.billingPeriod}`}
-					</Button>
-				</ThemeProvider>
+				<Button
+					theme={themeButtonReaderRevenueBrand}
+					size="small"
+					cssOverrides={buttonCentredCss}
+					onClick={() =>
+						navigate('review', {
+							state: routerState,
+						})
+					}
+				>
+					{isAboveThreshold
+						? 'Add extras'
+						: `Upgrade to ${mainPlan.currency}${threshold} per ${mainPlan.billingPeriod}`}
+				</Button>
 			</section>
 
 			<section>
diff --git a/client/components/mma/switch/review/SwitchReview.tsx b/client/components/mma/switch/review/SwitchReview.tsx
index 6030a212e..eec2ddf4e 100644
--- a/client/components/mma/switch/review/SwitchReview.tsx
+++ b/client/components/mma/switch/review/SwitchReview.tsx
@@ -1,11 +1,11 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { from, palette, space, textSans } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
 	SvgClock,
 	SvgCreditCard,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { useContext, useState } from 'react';
 import { Navigate, useLocation, useNavigate } from 'react-router';
@@ -296,20 +296,19 @@ export const SwitchReview = () => {
 				</Stack>
 			</section>
 			<section css={buttonLayoutCss}>
-				<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-					<Button
-						isLoading={isSwitching}
-						cssOverrides={buttonCentredCss}
-						onClick={() =>
-							confirmSwitch(
-								previewResponse.amountPayableToday,
-								previewResponse.checkChargeAmountBeforeUpdate,
-							)
-						}
-					>
-						Confirm {isAboveThreshold ? 'change' : 'upgrade'}
-					</Button>
-				</ThemeProvider>
+				<Button
+					theme={themeButtonReaderRevenueBrand}
+					isLoading={isSwitching}
+					cssOverrides={buttonCentredCss}
+					onClick={() =>
+						confirmSwitch(
+							previewResponse.amountPayableToday,
+							previewResponse.checkChargeAmountBeforeUpdate,
+						)
+					}
+				>
+					Confirm {isAboveThreshold ? 'change' : 'upgrade'}
+				</Button>
 				<Button
 					priority="tertiary"
 					cssOverrides={[buttonCentredCss, buttonMutedCss]}
diff --git a/client/components/mma/upgrade/ConfirmForm.tsx b/client/components/mma/upgrade/ConfirmForm.tsx
index 19965aa7c..8bc569459 100644
--- a/client/components/mma/upgrade/ConfirmForm.tsx
+++ b/client/components/mma/upgrade/ConfirmForm.tsx
@@ -1,4 +1,4 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import {
 	from,
 	palette,
@@ -8,11 +8,11 @@ import {
 } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
 	SvgClock,
 	SvgCreditCard,
 	SvgReload,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { ToggleSwitch } from '@guardian/source-react-components-development-kitchen';
 import type { Dispatch, SetStateAction } from 'react';
@@ -408,16 +408,15 @@ export const ConfirmForm = ({
 				/>
 			)}
 			<section css={buttonContainerCss}>
-				<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-					<Button
-						cssOverrides={buttonCentredCss}
-						onClick={confirmOnClick}
-						isLoading={isConfirmationLoading}
-					>
-						Confirm {increaseText} to {currencySymbol}
-						{formatAmount(chosenAmount)}/{mainPlan.billingPeriod}
-					</Button>
-				</ThemeProvider>
+				<Button
+					theme={themeButtonReaderRevenueBrand}
+					cssOverrides={buttonCentredCss}
+					onClick={confirmOnClick}
+					isLoading={isConfirmationLoading}
+				>
+					Confirm {increaseText} to {currencySymbol}
+					{formatAmount(chosenAmount)}/{mainPlan.billingPeriod}
+				</Button>
 			</section>
 			{confirmationError && (
 				<section id="upgradeSupportErrorMessage">
diff --git a/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx b/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx
index f735e124f..8a9466614 100644
--- a/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx
+++ b/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx
@@ -1,12 +1,12 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { space } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	ChoiceCard,
 	ChoiceCardGroup,
 	Stack,
 	TextInput,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import type { Dispatch, SetStateAction } from 'react';
 import { useContext, useEffect, useState } from 'react';
@@ -235,21 +235,18 @@ export const UpgradeSupportAmountForm = ({
 						!errorMessage &&
 						!!chosenAmount && (
 							<section css={buttonContainerCss}>
-								<ThemeProvider
-									theme={buttonThemeReaderRevenueBrand}
+								<Button
+									theme={themeButtonReaderRevenueBrand}
+									cssOverrides={buttonCentredCss}
+									onClick={() => {
+										setContinuedToConfirmation(true);
+										scrollToConfirmChange();
+									}}
 								>
-									<Button
-										cssOverrides={buttonCentredCss}
-										onClick={() => {
-											setContinuedToConfirmation(true);
-											scrollToConfirmChange();
-										}}
-									>
-										Continue with {currencySymbol}
-										{formatAmount(chosenAmount)}/
-										{mainPlan.billingPeriod}
-									</Button>
-								</ThemeProvider>
+									Continue with {currencySymbol}
+									{formatAmount(chosenAmount)}/
+									{mainPlan.billingPeriod}
+								</Button>
 							</section>
 						)}
 				</Stack>
diff --git a/client/components/shared/SupportTheGuardianButton.tsx b/client/components/shared/SupportTheGuardianButton.tsx
index 6a9d42b3a..5935fbb13 100644
--- a/client/components/shared/SupportTheGuardianButton.tsx
+++ b/client/components/shared/SupportTheGuardianButton.tsx
@@ -1,11 +1,10 @@
 import url from 'url';
-import { ThemeProvider } from '@emotion/react';
 import {
-	buttonThemeDefault,
-	buttonThemeReaderRevenueBrand,
-	buttonThemeReaderRevenueBrandAlt,
 	LinkButton,
 	SvgArrowRightStraight,
+	themeButton,
+	themeButtonReaderRevenueBrand,
+	themeButtonReaderRevenueBrandAlt,
 } from '@guardian/source-react-components';
 import { conf } from '../../../server/config';
 import { trackEvent } from '../../utilities/analytics';
@@ -56,31 +55,30 @@ export const SupportTheGuardianButton = (
 	props: SupportTheGuardianButtonProps,
 ) => {
 	const mapThemes = {
-		default: buttonThemeDefault,
-		brand: buttonThemeReaderRevenueBrand,
-		brandAlt: buttonThemeReaderRevenueBrandAlt,
+		default: themeButton,
+		brand: themeButtonReaderRevenueBrand,
+		brandAlt: themeButtonReaderRevenueBrandAlt,
 	};
 
 	const theme = mapThemes[props.theme ?? 'default'];
 
 	return (
-		<ThemeProvider theme={theme}>
-			<LinkButton
-				href={buildSupportHref(props)}
-				icon={<SvgArrowRightStraight />}
-				iconSide="right"
-				nudgeIcon={true}
-				size={props.size}
-				onClick={() => {
-					trackEvent({
-						eventCategory: 'href',
-						eventAction: 'support_the_guardian',
-						eventLabel: 'support_from_' + props.supportReferer,
-					});
-				}}
-			>
-				{props.alternateButtonText || 'Support the Guardian'}
-			</LinkButton>
-		</ThemeProvider>
+		<LinkButton
+			theme={theme}
+			href={buildSupportHref(props)}
+			icon={<SvgArrowRightStraight />}
+			iconSide="right"
+			nudgeIcon={true}
+			size={props.size}
+			onClick={() => {
+				trackEvent({
+					eventCategory: 'href',
+					eventAction: 'support_the_guardian',
+					eventLabel: 'support_from_' + props.supportReferer,
+				});
+			}}
+		>
+			{props.alternateButtonText || 'Support the Guardian'}
+		</LinkButton>
 	);
 };
diff --git a/package.json b/package.json
index ee4575f87..6359fa4a1 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "@emotion/jest": "11.9.1",
     "@guardian/eslint-config-typescript": "9.0.2",
     "@guardian/eslint-plugin-source-foundations": "17.0.1",
-    "@guardian/eslint-plugin-source-react-components": "21.0.1",
+    "@guardian/eslint-plugin-source-react-components": "25.0.0",
     "@guardian/node-riffraff-artifact": "0.2.2",
     "@guardian/prettier": "1.0.0",
     "@guardian/tsconfig": "0.1.6",
@@ -150,7 +150,7 @@
     "@guardian/commercial": "17.9.0",
     "@guardian/libs": "16.1.0",
     "@guardian/source-foundations": "13.2.0",
-    "@guardian/source-react-components": "16.0.1",
+    "@guardian/source-react-components": "25.0.0",
     "@guardian/source-react-components-development-kitchen": "14.0.2",
     "@okta/jwt-verifier": "3.0.1",
     "@sentry/browser": "5.22.3",
diff --git a/yarn.lock b/yarn.lock
index 3e897c719..69e0e2a60 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2978,13 +2978,13 @@
     "@typescript-eslint/parser" "6.18.0"
     eslint-plugin-import "2.29.1"
 
-"@guardian/eslint-plugin-source-react-components@21.0.1":
-  version "21.0.1"
-  resolved "https://registry.yarnpkg.com/@guardian/eslint-plugin-source-react-components/-/eslint-plugin-source-react-components-21.0.1.tgz#d709a9a559e3b68aae0a8de67414266316707840"
-  integrity sha512-erMqLMhgGbzJAjViZMNtE8DjrpJuRurreBBeuttbaxrIE3eKX2p3QTYJKxE0fqAyIRhTCV3/M+sil9RTifN1Xw==
+"@guardian/eslint-plugin-source-react-components@25.0.0":
+  version "24.0.1"
+  resolved "https://registry.yarnpkg.com/@guardian/eslint-plugin-source-react-components/-/eslint-plugin-source-react-components-24.0.1.tgz#e70ce2b8e249bb6790d10be2e3c91223a6c802d1"
+  integrity sha512-2opgruOKoCp1tAW2vdhl+UpHq2osoN4DAQqrtNsWUCqXtdqAxsXLM9jWqwUzTY68EjFoqg3whxJrbFYWByILCQ==
   dependencies:
-    "@typescript-eslint/eslint-plugin" "6.18.0"
-    "@typescript-eslint/parser" "6.18.0"
+    "@typescript-eslint/eslint-plugin" "6.21.0"
+    "@typescript-eslint/parser" "6.21.0"
 
 "@guardian/libs@16.1.0":
   version "16.1.0"
@@ -3055,10 +3055,10 @@
   resolved "https://registry.yarnpkg.com/@guardian/source-react-components-development-kitchen/-/source-react-components-development-kitchen-14.0.2.tgz#c8bab2cf21717b5c857dad075bca8a12112c0b13"
   integrity sha512-F5nDwRuekC9ZUSEy+FdXMnke/q/rYi4Mple2t1rv6d61oHsOnnGxReQtfPYyVnYv5zGYo8phlOtLGstSQg3DRQ==
 
-"@guardian/source-react-components@16.0.1":
-  version "16.0.1"
-  resolved "https://registry.yarnpkg.com/@guardian/source-react-components/-/source-react-components-16.0.1.tgz#24d4c4081e6a293a101b3217b598fccf151b04bd"
-  integrity sha512-M/zrs+G5NqykicECNf803B9815tVkPfazwmYsGfrDdKGptBmLhcofGlpC/MGdKiJ9lTlOQBieUyZ2y6i2mBJyQ==
+"@guardian/source-react-components@25.0.0":
+  version "25.0.0"
+  resolved "https://registry.yarnpkg.com/@guardian/source-react-components/-/source-react-components-25.0.0.tgz#c4c8ac53b92a7ed4ebde6823c8f7d80151f8375a"
+  integrity sha512-9llnT6DUiLmdhklciMO75SBC9DbBqLw+jBWxhu60J+uAyw7B2WqG9Bmk8wPBCSrRe4hNvsosJyVMI+KiRb48Bw==
 
 "@guardian/tsconfig@0.1.6":
   version "0.1.6"
@@ -5575,6 +5575,23 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/eslint-plugin@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz#30830c1ca81fd5f3c2714e524c4303e0194f9cd3"
+  integrity sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==
+  dependencies:
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "6.21.0"
+    "@typescript-eslint/type-utils" "6.21.0"
+    "@typescript-eslint/utils" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/parser@6.18.0":
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.18.0.tgz#d494161d64832e869f0a6acc6000a2cdff858383"
@@ -5586,6 +5603,17 @@
     "@typescript-eslint/visitor-keys" "6.18.0"
     debug "^4.3.4"
 
+"@typescript-eslint/parser@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.21.0.tgz#af8fcf66feee2edc86bc5d1cf45e33b0630bf35b"
+  integrity sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "6.21.0"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/typescript-estree" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+
 "@typescript-eslint/scope-manager@5.60.0":
   version "5.60.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.60.0.tgz#ae511967b4bd84f1d5e179bb2c82857334941c1c"
@@ -5602,6 +5630,14 @@
     "@typescript-eslint/types" "6.18.0"
     "@typescript-eslint/visitor-keys" "6.18.0"
 
+"@typescript-eslint/scope-manager@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
+  integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+
 "@typescript-eslint/type-utils@6.18.0":
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.18.0.tgz#a492da599da5c38c70aa9ff9bfb473961b8ae663"
@@ -5612,6 +5648,16 @@
     debug "^4.3.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/type-utils@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz#6473281cfed4dacabe8004e8521cee0bd9d4c01e"
+  integrity sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "6.21.0"
+    "@typescript-eslint/utils" "6.21.0"
+    debug "^4.3.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/types@5.60.0":
   version "5.60.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.60.0.tgz#3179962b28b4790de70e2344465ec97582ce2558"
@@ -5622,6 +5668,11 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.18.0.tgz#ffce610a1540c17cf7d8ecf2bb34b8b0e2e77101"
   integrity sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==
 
+"@typescript-eslint/types@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
+  integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
+
 "@typescript-eslint/typescript-estree@5.60.0":
   version "5.60.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.0.tgz#4ddf1a81d32a850de66642d9b3ad1e3254fb1600"
@@ -5649,6 +5700,20 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
+"@typescript-eslint/typescript-estree@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
+  integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/visitor-keys" "6.21.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "9.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
 "@typescript-eslint/utils@6.18.0":
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.18.0.tgz#4d07c9c08f84b9939a1aca7aef98c8f378936142"
@@ -5662,6 +5727,19 @@
     "@typescript-eslint/typescript-estree" "6.18.0"
     semver "^7.5.4"
 
+"@typescript-eslint/utils@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.21.0.tgz#4714e7a6b39e773c1c8e97ec587f520840cd8134"
+  integrity sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.4.0"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "6.21.0"
+    "@typescript-eslint/types" "6.21.0"
+    "@typescript-eslint/typescript-estree" "6.21.0"
+    semver "^7.5.4"
+
 "@typescript-eslint/utils@^5.10.0":
   version "5.60.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.60.0.tgz#4667c5aece82f9d4f24a667602f0f300864b554c"
@@ -5692,6 +5770,14 @@
     "@typescript-eslint/types" "6.18.0"
     eslint-visitor-keys "^3.4.1"
 
+"@typescript-eslint/visitor-keys@6.21.0":
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
+  integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
+  dependencies:
+    "@typescript-eslint/types" "6.21.0"
+    eslint-visitor-keys "^3.4.1"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"