diff --git a/.changeset/honest-tomatoes-type.md b/.changeset/honest-tomatoes-type.md
new file mode 100644
index 00000000..42359242
--- /dev/null
+++ b/.changeset/honest-tomatoes-type.md
@@ -0,0 +1,9 @@
+---
+'@guardian/braze-components': major
+---
+
+- Bumps `@guardian/source-react-components` to [`v22.1.0`](https://github.com/guardian/csnx/releases/tag/%40guardian%2Fsource-react-components%4022.1.0)
+- Bumps `@guardian/source-react-components-development-kitchen` to [`v19.0.0`](https://github.com/guardian/csnx/releases/tag/%40guardian%2Fsource-react-components-development-kitchen%4019.0.0)
+
+This is a major change [as per our recommendations](https://github.com/guardian/recommendations/blob/main/npm-packages.md#changes-to-peerdependencies-ranges-are-breaking), and consumers should
+ensure that they provide a compatible version of the package.
diff --git a/package.json b/package.json
index 80c68427..339374d8 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,8 @@
"@guardian/libs": "^16.0.0",
"@guardian/node-riffraff-artifact": "^0.3.2",
"@guardian/source-foundations": "^14.1.2",
- "@guardian/source-react-components": "^18.0.0",
- "@guardian/source-react-components-development-kitchen": "^16.0.0",
+ "@guardian/source-react-components": "22.1.0",
+ "@guardian/source-react-components-development-kitchen": "19.0.0",
"@rollup/plugin-alias": "^3.1.1",
"@rollup/plugin-babel": "^5.1.0",
"@rollup/plugin-commonjs": "^14.0.0",
@@ -102,8 +102,8 @@
"@emotion/react": "^11.1.2",
"@guardian/libs": "^16.0.0",
"@guardian/source-foundations": "^14.1.2",
- "@guardian/source-react-components": "^18.0.0",
- "@guardian/source-react-components-development-kitchen": "^16.0.0",
+ "@guardian/source-react-components": "^22.1.0",
+ "@guardian/source-react-components-development-kitchen": "^19.0.0",
"react": "17.0.2 || 18.2.0"
},
"np": {
diff --git a/src/AppBanner/index.tsx b/src/AppBanner/index.tsx
index d675ae57..1bca6507 100644
--- a/src/AppBanner/index.tsx
+++ b/src/AppBanner/index.tsx
@@ -1,7 +1,6 @@
import React, { useState, ReactElement } from 'react';
import { css } from '@emotion/react';
-import { ThemeProvider } from '@emotion/react';
-import { Button, buttonThemeReaderRevenueBrandAlt } from '@guardian/source-react-components';
+import { Button, themeButtonReaderRevenueBrandAlt } from '@guardian/source-react-components';
import { space, from, until } from '@guardian/source-foundations';
import type { TrackClick } from '../utils/tracking';
@@ -22,7 +21,7 @@ export type BrazeMessageProps = {
imageUrl?: string;
};
-import type { ButtonTheme } from '@guardian/source-react-components';
+import type { ThemeButton } from '@guardian/source-react-components';
export type Props = {
brazeMessageProps: BrazeMessageProps;
@@ -46,18 +45,14 @@ export const AppBanner = (props: Props): ReactElement | null => {
// This is to keep button colors the same as before
// https://github.com/guardian/braze-components/pull/123
// Probably should be removed later
- const overrridenReaderRevenueTheme: { button: ButtonTheme } = {
- button: {
- ...buttonThemeReaderRevenueBrandAlt.button,
- backgroundPrimary: 'rgb(51, 51, 51)',
- backgroundPrimaryHover: 'black',
- },
+ const overrridenReaderRevenueTheme: Partial