From 4b9672a804e487fc548fd10c0c6e57f760d9cad1 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Fri, 17 Oct 2025 10:17:58 +0100
Subject: [PATCH 01/14] build: update design system react to 1.7.0

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index a1236ca00..240b3a09a 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
     "@raspberrypifoundation/design-system-core": "^1.6.0",
-    "@raspberrypifoundation/design-system-react": "^1.6.0",
+    "@raspberrypifoundation/design-system-react": "^1.7.0",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/yarn.lock b/yarn.lock
index ce20e60f2..fb05df4d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2925,9 +2925,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "@raspberrypifoundation/design-system-react@npm:1.6.0"
+"@raspberrypifoundation/design-system-react@npm:^1.7.0":
+  version: 1.7.1
+  resolution: "@raspberrypifoundation/design-system-react@npm:1.7.1"
   dependencies:
     classnames: ^2.3.2
     material-symbols: ^0.14.5
@@ -2937,7 +2937,7 @@ __metadata:
     react-router-dom: ^6.24.0
   peerDependencies:
     react-router-dom: ^6.24.0
-  checksum: 6bb6341f90d3c4fa569817813de7a1a9e69a23c12ca2cf0f20d47b9d0954771e237bda27eedba93b91a0d1d81fca32e155415ddc902947630711b38583f97ac5
+  checksum: 507e75c5ab1e297c66221f3f21eaf0b7a757d82f383a51d7195e80886dcf0f6361905755187cbd0c3b1fdd9ad8fa87441c1550b44ee9384f690b8cbeb7e702cc
   languageName: node
   linkType: hard
 
@@ -2960,7 +2960,7 @@ __metadata:
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
     "@raspberrypifoundation/design-system-core": ^1.6.0
-    "@raspberrypifoundation/design-system-react": ^1.6.0
+    "@raspberrypifoundation/design-system-react": ^1.7.0
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1

From 63dbd43940783db89f7021bf90de6b1fe08ae72d Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Fri, 17 Oct 2025 10:53:08 +0100
Subject: [PATCH 02/14] build: update design system react to 2.0.0

- 2.0.0 uses vite and packages core, so that dep can removed.
- Link to core style does however need to be added to the app, following the update guide for the design system.
- TextEncoder/TextDecoder was not set up in jest and this was causing some design system component to fail tests.
---
 package.json                               |   3 +-
 src/assets/stylesheets/ExternalStyles.scss |   2 +-
 src/utils/setupTests.js                    |   5 +
 yarn.lock                                  | 114 +++++++++++----------
 4 files changed, 69 insertions(+), 55 deletions(-)

diff --git a/package.json b/package.json
index 240b3a09a..135269be4 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-core": "^1.6.0",
-    "@raspberrypifoundation/design-system-react": "^1.7.0",
+    "@raspberrypifoundation/design-system-react": "2.0.0",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss
index 923ebe18d..d41a856af 100644
--- a/src/assets/stylesheets/ExternalStyles.scss
+++ b/src/assets/stylesheets/ExternalStyles.scss
@@ -2,6 +2,6 @@
 @use "../../../node_modules/react-toggle/style.css";
 @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";
 @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
-@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/alert.scss";
 @use "../../../node_modules/material-symbols/sharp.scss";
 @use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle;
+@forward "@raspberrypifoundation/design-system-react/scss/design-system-core";
diff --git a/src/utils/setupTests.js b/src/utils/setupTests.js
index 201443727..0d001b4d4 100644
--- a/src/utils/setupTests.js
+++ b/src/utils/setupTests.js
@@ -6,6 +6,11 @@ import "@testing-library/jest-dom";
 import "jest-canvas-mock";
 import PyodideWorker from "../components/Editor/Runners/PythonRunner/PyodideRunner/PyodideWorker.mock.js";
 
+// Polyfill TextEncoder/TextDecoder for Jest environment
+// Required by @raspberrypifoundation/design-system-react components
+import { TextEncoder, TextDecoder } from "util";
+Object.assign(global, { TextDecoder, TextEncoder });
+
 /* global globalThis */
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
diff --git a/yarn.lock b/yarn.lock
index fb05df4d3..f5de80942 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2916,28 +2916,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-core@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "@raspberrypifoundation/design-system-core@npm:1.6.0"
+"@raspberrypifoundation/design-system-core@npm:^2.0.0":
+  version: 2.4.0
+  resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0"
   dependencies:
     classnames: ^2.3.2
-  checksum: 3eda17c4068e752daf070b6cbce9630b1b51997b911a4753b73f2c3726a40ec6bfba1b751380a4ad6f51e3e2e8e9cac66a7709343a7de9c5c8b074b409742a26
+  checksum: 8db6b71f0675849617ad18e70a35b8faa99a3cb3d4b7dbde15a250de1ca971f09ffeb0d7e4fe6d6cf1645890d6ffe0ca795967e0371e665775de9ff27e5bc4c6
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:^1.7.0":
-  version: 1.7.1
-  resolution: "@raspberrypifoundation/design-system-react@npm:1.7.1"
+"@raspberrypifoundation/design-system-react@npm:2.0.0":
+  version: 2.0.0
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.0.0"
   dependencies:
-    classnames: ^2.3.2
-    material-symbols: ^0.14.5
-    prop-types: ^15.8.1
-    react: ^18.2.0
-    react-dom: ^18.2.0
-    react-router-dom: ^6.24.0
+    "@raspberrypifoundation/design-system-core": ^2.0.0
+    classnames: ^2.5.1
+    material-symbols: ^0.27.2
+    react: ^18.3.1
+    react-dom: ^18.3.1
+    react-router-dom: ^7.0.2
   peerDependencies:
     react-router-dom: ^6.24.0
-  checksum: 507e75c5ab1e297c66221f3f21eaf0b7a757d82f383a51d7195e80886dcf0f6361905755187cbd0c3b1fdd9ad8fa87441c1550b44ee9384f690b8cbeb7e702cc
+  checksum: 912a1076f592f9fa9256401b208f860bf3c18e52341d807b5e4c0273ff15793939729d7e2504316073173fcfb6cbf6c4ba5485fe2695178d7e30df54249acbe8
   languageName: node
   linkType: hard
 
@@ -2959,8 +2959,7 @@ __metadata:
     "@juggle/resize-observer": ^3.3.1
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
-    "@raspberrypifoundation/design-system-core": ^1.6.0
-    "@raspberrypifoundation/design-system-react": ^1.7.0
+    "@raspberrypifoundation/design-system-react": 2.0.0
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1
@@ -3301,13 +3300,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@remix-run/router@npm:1.21.0":
-  version: 1.21.0
-  resolution: "@remix-run/router@npm:1.21.0"
-  checksum: d9477a7772053ad0ffcf03385cfb1a54e56f8a56d1f9f5062de3b1dfcbd019dd73282a00a5a72aa55c120771110982448c165c1405d64540aaef13051a8e45cc
-  languageName: node
-  linkType: hard
-
 "@replit/codemirror-indentation-markers@npm:^6.1.0":
   version: 6.5.3
   resolution: "@replit/codemirror-indentation-markers@npm:6.5.3"
@@ -6598,7 +6590,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2":
+"classnames@npm:^2.2.1, classnames@npm:^2.2.5, classnames@npm:^2.3.2, classnames@npm:^2.5.1":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
   checksum: da424a8a6f3a96a2e87d01a432ba19315503294ac7e025f9fece656db6b6a0f7b5003bb1fbb51cbb0d9624d964f1b9bb35a51c73af9b2434c7b292c42231c1e5
@@ -7105,6 +7097,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "cookie@npm:1.0.2"
+  checksum: 2c5a6214147ffa7135ce41860c781de17e93128689b0d080d3116468274b3593b607bcd462ac210d3a61f081db3d3b09ae106e18d60b1f529580e95cf2db8a55
+  languageName: node
+  linkType: hard
+
 "copy-descriptor@npm:^0.1.0":
   version: 0.1.1
   resolution: "copy-descriptor@npm:0.1.1"
@@ -14033,13 +14032,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"material-symbols@npm:^0.14.5":
-  version: 0.14.7
-  resolution: "material-symbols@npm:0.14.7"
-  checksum: 191dea0145eadabd3122b891b965d8568793c3f53a540186a30b459948a8a0c00938642dcca3c4fcca483b08d7480d02722c6de10caeeeae30437306a79f64b6
-  languageName: node
-  linkType: hard
-
 "material-symbols@npm:^0.27.0":
   version: 0.27.0
   resolution: "material-symbols@npm:0.27.0"
@@ -14047,6 +14039,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"material-symbols@npm:^0.27.2":
+  version: 0.27.2
+  resolution: "material-symbols@npm:0.27.2"
+  checksum: c1572d86aa69b355dd273ba1a9bea06f09310451a3384e846f6282240097215e8713bc3918a08e0d786be1c0d8405ca15d2bfc0817385fc2ce6f6d747e041344
+  languageName: node
+  linkType: hard
+
 "math-intrinsics@npm:^1.1.0":
   version: 1.1.0
   resolution: "math-intrinsics@npm:1.1.0"
@@ -16987,7 +16986,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.1.0, react-dom@npm:^18.2.0":
+"react-dom@npm:^18.1.0, react-dom@npm:^18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -17186,19 +17185,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^6.24.0":
-  version: 6.28.0
-  resolution: "react-router-dom@npm:6.28.0"
-  dependencies:
-    "@remix-run/router": 1.21.0
-    react-router: 6.28.0
-  peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: 0cf4658a92bc66f50ec9d8518c36aa5a402bcadce71fb624ed6f900d73a29ea87ff904a4f2c42279107e75e80cc08c6192563fadcc5d4e642e6d476e38e83b21
-  languageName: node
-  linkType: hard
-
 "react-router-dom@npm:^6.7.0":
   version: 6.27.0
   resolution: "react-router-dom@npm:6.27.0"
@@ -17212,6 +17198,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:^7.0.2":
+  version: 7.9.4
+  resolution: "react-router-dom@npm:7.9.4"
+  dependencies:
+    react-router: 7.9.4
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 56d7c10ce8c26d88fd92afb55d90f737ddee0ccd9715105444a62d31687a06f1b0b22c4a6047a4b896cf5f97d297b1036bedece65646b126c40b3e107d19a9a0
+  languageName: node
+  linkType: hard
+
 "react-router@npm:6.27.0":
   version: 6.27.0
   resolution: "react-router@npm:6.27.0"
@@ -17223,14 +17221,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router@npm:6.28.0":
-  version: 6.28.0
-  resolution: "react-router@npm:6.28.0"
+"react-router@npm:7.9.4":
+  version: 7.9.4
+  resolution: "react-router@npm:7.9.4"
   dependencies:
-    "@remix-run/router": 1.21.0
+    cookie: ^1.0.1
+    set-cookie-parser: ^2.6.0
   peerDependencies:
-    react: ">=16.8"
-  checksum: 23246ca957b5c2bc8d6f9a81fee2df2ce4fc3feca3ec27c2fd85999568fc1299a4e8273e4ab70b6f3acd43a1fb45e0c93cb01ef77e68c9f9e1f7e4f42a1419ea
+    react: ">=18"
+    react-dom: ">=18"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: 2a33bc2203f5fe1fd24858d246c5590c4920a429490986e36af19de0580c7a162fbfb0c675bc2be2ee535d965e08f8e9d28009ee9ddf9df2b7a236e6e2dc8a33
   languageName: node
   linkType: hard
 
@@ -17316,7 +17319,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.1.0, react@npm:^18.2.0":
+"react@npm:^18.1.0, react@npm:^18.3.1":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -18532,6 +18535,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-cookie-parser@npm:^2.6.0":
+  version: 2.7.1
+  resolution: "set-cookie-parser@npm:2.7.1"
+  checksum: 2ef8b351094712f8f7df6d63ed4b10350b24a5b515772690e7dec227df85fcef5bc451c7765f484fd9f36694ece5438d1456407d017f237d0d3351d7dbbd3587
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"

From b7d593aa06179257ba33d68f897630169a4a0637 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Fri, 17 Oct 2025 10:54:55 +0100
Subject: [PATCH 03/14] build: update design system react to 2.1.0

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 135269be4..0f94d44eb 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-react": "2.0.0",
+    "@raspberrypifoundation/design-system-react": "2.1.0",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/yarn.lock b/yarn.lock
index f5de80942..6c13319ab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2925,9 +2925,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:2.0.0":
-  version: 2.0.0
-  resolution: "@raspberrypifoundation/design-system-react@npm:2.0.0"
+"@raspberrypifoundation/design-system-react@npm:2.1.0":
+  version: 2.1.0
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.1.0"
   dependencies:
     "@raspberrypifoundation/design-system-core": ^2.0.0
     classnames: ^2.5.1
@@ -2937,7 +2937,7 @@ __metadata:
     react-router-dom: ^7.0.2
   peerDependencies:
     react-router-dom: ^6.24.0
-  checksum: 912a1076f592f9fa9256401b208f860bf3c18e52341d807b5e4c0273ff15793939729d7e2504316073173fcfb6cbf6c4ba5485fe2695178d7e30df54249acbe8
+  checksum: a45991c08dd6e2d23a028be1bc6b9616496a64c1aa5ba95d821f85aaf120c784d06a8e0c3c6559ad4dd8c3dc734f3a77780e5e340d1b9afb8b49d943dfe75826
   languageName: node
   linkType: hard
 
@@ -2959,7 +2959,7 @@ __metadata:
     "@juggle/resize-observer": ^3.3.1
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
-    "@raspberrypifoundation/design-system-react": 2.0.0
+    "@raspberrypifoundation/design-system-react": 2.1.0
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1

From e4a59b9db0580547eaa89fe49e49f4247aac87cd Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Fri, 17 Oct 2025 11:01:27 +0100
Subject: [PATCH 04/14] build: update design system react to 2.2.0

- No buttons using href prop so no changes needed
---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 0f94d44eb..1740b6210 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-react": "2.1.0",
+    "@raspberrypifoundation/design-system-react": "2.2.0",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/yarn.lock b/yarn.lock
index 6c13319ab..b47483c19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2925,9 +2925,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:2.1.0":
-  version: 2.1.0
-  resolution: "@raspberrypifoundation/design-system-react@npm:2.1.0"
+"@raspberrypifoundation/design-system-react@npm:2.2.0":
+  version: 2.2.0
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.2.0"
   dependencies:
     "@raspberrypifoundation/design-system-core": ^2.0.0
     classnames: ^2.5.1
@@ -2937,7 +2937,7 @@ __metadata:
     react-router-dom: ^7.0.2
   peerDependencies:
     react-router-dom: ^6.24.0
-  checksum: a45991c08dd6e2d23a028be1bc6b9616496a64c1aa5ba95d821f85aaf120c784d06a8e0c3c6559ad4dd8c3dc734f3a77780e5e340d1b9afb8b49d943dfe75826
+  checksum: b3d45d964deeaf6ab297416a1099a62747cbb7ab8ca90b1e900141bf7694f551198d7edf605fc029a6f25350d94db41765c1fd454af5eaeb9ef442bb26c224d3
   languageName: node
   linkType: hard
 
@@ -2959,7 +2959,7 @@ __metadata:
     "@juggle/resize-observer": ^3.3.1
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
-    "@raspberrypifoundation/design-system-react": 2.1.0
+    "@raspberrypifoundation/design-system-react": 2.2.0
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1

From 652d0221084673d2feb172afcc00f35e4f8f46c6 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Fri, 17 Oct 2025 11:02:15 +0100
Subject: [PATCH 05/14] build: update design system react to 2.3.0

---
 package.json |  2 +-
 yarn.lock    | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 1740b6210..91f0f2fdf 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-react": "2.2.0",
+    "@raspberrypifoundation/design-system-react": "2.3.0",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/yarn.lock b/yarn.lock
index b47483c19..09395573f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2916,7 +2916,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-core@npm:^2.0.0":
+"@raspberrypifoundation/design-system-core@npm:^2.3.0":
   version: 2.4.0
   resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0"
   dependencies:
@@ -2925,11 +2925,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:2.2.0":
-  version: 2.2.0
-  resolution: "@raspberrypifoundation/design-system-react@npm:2.2.0"
+"@raspberrypifoundation/design-system-react@npm:2.3.0":
+  version: 2.3.0
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.3.0"
   dependencies:
-    "@raspberrypifoundation/design-system-core": ^2.0.0
+    "@raspberrypifoundation/design-system-core": ^2.3.0
     classnames: ^2.5.1
     material-symbols: ^0.27.2
     react: ^18.3.1
@@ -2937,7 +2937,7 @@ __metadata:
     react-router-dom: ^7.0.2
   peerDependencies:
     react-router-dom: ^6.24.0
-  checksum: b3d45d964deeaf6ab297416a1099a62747cbb7ab8ca90b1e900141bf7694f551198d7edf605fc029a6f25350d94db41765c1fd454af5eaeb9ef442bb26c224d3
+  checksum: e1c5a18fa18622f487d716d47e0a08e5b17010d8d70ff7094592f5145c09a08ddc8824b44a33b8d2587a4e901cbf281200a32c9f7d8830550efd12ed92a667e6
   languageName: node
   linkType: hard
 
@@ -2959,7 +2959,7 @@ __metadata:
     "@juggle/resize-observer": ^3.3.1
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
-    "@raspberrypifoundation/design-system-react": 2.2.0
+    "@raspberrypifoundation/design-system-react": 2.3.0
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1

From 881752062ff2268c4227ca187916bf4b8d0a446d Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Fri, 17 Oct 2025 11:03:49 +0100
Subject: [PATCH 06/14] build: update design system react to 2.4.2

---
 package.json |  2 +-
 yarn.lock    | 22 +++++++---------------
 2 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 91f0f2fdf..62654998e 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-react": "2.3.0",
+    "@raspberrypifoundation/design-system-react": "2.4.1",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/yarn.lock b/yarn.lock
index 09395573f..b5c6602a8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2916,7 +2916,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-core@npm:^2.3.0":
+"@raspberrypifoundation/design-system-core@npm:^2.3.1":
   version: 2.4.0
   resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0"
   dependencies:
@@ -2925,19 +2925,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:2.3.0":
-  version: 2.3.0
-  resolution: "@raspberrypifoundation/design-system-react@npm:2.3.0"
+"@raspberrypifoundation/design-system-react@npm:2.4.1":
+  version: 2.4.1
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.4.1"
   dependencies:
-    "@raspberrypifoundation/design-system-core": ^2.3.0
+    "@raspberrypifoundation/design-system-core": ^2.3.1
     classnames: ^2.5.1
-    material-symbols: ^0.27.2
     react: ^18.3.1
     react-dom: ^18.3.1
     react-router-dom: ^7.0.2
   peerDependencies:
     react-router-dom: ^6.24.0
-  checksum: e1c5a18fa18622f487d716d47e0a08e5b17010d8d70ff7094592f5145c09a08ddc8824b44a33b8d2587a4e901cbf281200a32c9f7d8830550efd12ed92a667e6
+  checksum: 1ced3ade672e811e5ea897204bf8492a0d05701f619164bc79db48194324c694798ffd639a7e155bc41487928c45bf7085187f9fdfdc49c5995bec99ed19d7c1
   languageName: node
   linkType: hard
 
@@ -2959,7 +2958,7 @@ __metadata:
     "@juggle/resize-observer": ^3.3.1
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
-    "@raspberrypifoundation/design-system-react": 2.3.0
+    "@raspberrypifoundation/design-system-react": 2.4.1
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1
@@ -14039,13 +14038,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"material-symbols@npm:^0.27.2":
-  version: 0.27.2
-  resolution: "material-symbols@npm:0.27.2"
-  checksum: c1572d86aa69b355dd273ba1a9bea06f09310451a3384e846f6282240097215e8713bc3918a08e0d786be1c0d8405ca15d2bfc0817385fc2ce6f6d747e041344
-  languageName: node
-  linkType: hard
-
 "math-intrinsics@npm:^1.1.0":
   version: 1.1.0
   resolution: "math-intrinsics@npm:1.1.0"

From 96507efaae8e17d3b485a9a4b723aacedadfb3a5 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Fri, 17 Oct 2025 11:04:39 +0100
Subject: [PATCH 07/14] build: update design system react to 2.5.0

---
 package.json |  2 +-
 yarn.lock    | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 62654998e..8f5565c33 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-react": "2.4.1",
+    "@raspberrypifoundation/design-system-react": "2.5.0",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/yarn.lock b/yarn.lock
index b5c6602a8..8eefefd12 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2925,9 +2925,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:2.4.1":
-  version: 2.4.1
-  resolution: "@raspberrypifoundation/design-system-react@npm:2.4.1"
+"@raspberrypifoundation/design-system-react@npm:2.5.0":
+  version: 2.5.0
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.5.0"
   dependencies:
     "@raspberrypifoundation/design-system-core": ^2.3.1
     classnames: ^2.5.1
@@ -2936,7 +2936,7 @@ __metadata:
     react-router-dom: ^7.0.2
   peerDependencies:
     react-router-dom: ^6.24.0
-  checksum: 1ced3ade672e811e5ea897204bf8492a0d05701f619164bc79db48194324c694798ffd639a7e155bc41487928c45bf7085187f9fdfdc49c5995bec99ed19d7c1
+  checksum: 7d2baf79ece3b22e7c5300180240c7db0901ba11d9f5f471b3bf0332ddceae0f18989e23118c9caa2dad0a64e7798d292fec7ff8a77324c0c9bbd0bdc9ffe01a
   languageName: node
   linkType: hard
 
@@ -2958,7 +2958,7 @@ __metadata:
     "@juggle/resize-observer": ^3.3.1
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
-    "@raspberrypifoundation/design-system-react": 2.4.1
+    "@raspberrypifoundation/design-system-react": 2.5.0
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1

From 0da9ed7bd3edc57fdf366655ac31fd23cf2d9b45 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Fri, 17 Oct 2025 11:05:44 +0100
Subject: [PATCH 08/14] build: update design system react to 2.6.2

---
 package.json |  2 +-
 yarn.lock    | 63 +++++++++-------------------------------------------
 2 files changed, 11 insertions(+), 54 deletions(-)

diff --git a/package.json b/package.json
index 8f5565c33..2928709cb 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-react": "2.5.0",
+    "@raspberrypifoundation/design-system-react": "2.6.2",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/yarn.lock b/yarn.lock
index 8eefefd12..3c3b89fbd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2916,7 +2916,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-core@npm:^2.3.1":
+"@raspberrypifoundation/design-system-core@npm:^2.4.0":
   version: 2.4.0
   resolution: "@raspberrypifoundation/design-system-core@npm:2.4.0"
   dependencies:
@@ -2925,18 +2925,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:2.5.0":
-  version: 2.5.0
-  resolution: "@raspberrypifoundation/design-system-react@npm:2.5.0"
+"@raspberrypifoundation/design-system-react@npm:2.6.2":
+  version: 2.6.2
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.6.2"
   dependencies:
-    "@raspberrypifoundation/design-system-core": ^2.3.1
+    "@raspberrypifoundation/design-system-core": ^2.4.0
     classnames: ^2.5.1
+  peerDependencies:
     react: ^18.3.1
     react-dom: ^18.3.1
-    react-router-dom: ^7.0.2
-  peerDependencies:
     react-router-dom: ^6.24.0
-  checksum: 7d2baf79ece3b22e7c5300180240c7db0901ba11d9f5f471b3bf0332ddceae0f18989e23118c9caa2dad0a64e7798d292fec7ff8a77324c0c9bbd0bdc9ffe01a
+  checksum: a2b1bf4780ec84ce369dbd456d118d68a5cd72018709fcb19558d873b883aef2505037c8d4929c04c8064108e009a57a749d7a88fa83265472c3f554e7efdb65
   languageName: node
   linkType: hard
 
@@ -2958,7 +2957,7 @@ __metadata:
     "@juggle/resize-observer": ^3.3.1
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
-    "@raspberrypifoundation/design-system-react": 2.5.0
+    "@raspberrypifoundation/design-system-react": 2.6.2
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1
@@ -7096,13 +7095,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cookie@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "cookie@npm:1.0.2"
-  checksum: 2c5a6214147ffa7135ce41860c781de17e93128689b0d080d3116468274b3593b607bcd462ac210d3a61f081db3d3b09ae106e18d60b1f529580e95cf2db8a55
-  languageName: node
-  linkType: hard
-
 "copy-descriptor@npm:^0.1.0":
   version: 0.1.1
   resolution: "copy-descriptor@npm:0.1.1"
@@ -16978,7 +16970,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.1.0, react-dom@npm:^18.3.1":
+"react-dom@npm:^18.1.0":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
   dependencies:
@@ -17190,18 +17182,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router-dom@npm:^7.0.2":
-  version: 7.9.4
-  resolution: "react-router-dom@npm:7.9.4"
-  dependencies:
-    react-router: 7.9.4
-  peerDependencies:
-    react: ">=18"
-    react-dom: ">=18"
-  checksum: 56d7c10ce8c26d88fd92afb55d90f737ddee0ccd9715105444a62d31687a06f1b0b22c4a6047a4b896cf5f97d297b1036bedece65646b126c40b3e107d19a9a0
-  languageName: node
-  linkType: hard
-
 "react-router@npm:6.27.0":
   version: 6.27.0
   resolution: "react-router@npm:6.27.0"
@@ -17213,22 +17193,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-router@npm:7.9.4":
-  version: 7.9.4
-  resolution: "react-router@npm:7.9.4"
-  dependencies:
-    cookie: ^1.0.1
-    set-cookie-parser: ^2.6.0
-  peerDependencies:
-    react: ">=18"
-    react-dom: ">=18"
-  peerDependenciesMeta:
-    react-dom:
-      optional: true
-  checksum: 2a33bc2203f5fe1fd24858d246c5590c4920a429490986e36af19de0580c7a162fbfb0c675bc2be2ee535d965e08f8e9d28009ee9ddf9df2b7a236e6e2dc8a33
-  languageName: node
-  linkType: hard
-
 "react-shallow-renderer@npm:^16.13.1":
   version: 16.15.0
   resolution: "react-shallow-renderer@npm:16.15.0"
@@ -17311,7 +17275,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.1.0, react@npm:^18.3.1":
+"react@npm:^18.1.0":
   version: 18.3.1
   resolution: "react@npm:18.3.1"
   dependencies:
@@ -18527,13 +18491,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-cookie-parser@npm:^2.6.0":
-  version: 2.7.1
-  resolution: "set-cookie-parser@npm:2.7.1"
-  checksum: 2ef8b351094712f8f7df6d63ed4b10350b24a5b515772690e7dec227df85fcef5bc451c7765f484fd9f36694ece5438d1456407d017f237d0d3351d7dbbd3587
-  languageName: node
-  linkType: hard
-
 "set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"

From 6c8987cb60edc31e8ae7d637e3f0d6e347ad8963 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Fri, 17 Oct 2025 16:36:02 +0100
Subject: [PATCH 09/14] fix: add material symbols font to web component page

---
 src/web-component.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/web-component.html b/src/web-component.html
index 178c7c623..899e5999c 100644
--- a/src/web-component.html
+++ b/src/web-component.html
@@ -29,6 +29,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <title>Editor Web component</title>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
   </head>
   <body>
     <p id="results"></p>
@@ -52,7 +56,7 @@
           "download",
           "settings",
           "info",
-        ]),
+        ])
       );
 
       // Pre-set the code attribute with an empty string.
@@ -89,7 +93,7 @@
       runButton.appendChild(runButtonText);
       runButton.onclick = (event) => {
         webComp.rerunCode();
-      }
+      };
       body.append(runButton);
     });
   </script>

From 67dd1e9f2f75cec8f0836a9b229b56e23892e571 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Wed, 29 Oct 2025 09:47:17 +0000
Subject: [PATCH 10/14] docs: update changelog

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 13993c525..a0fc610cc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Changed
 
 - Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257)
+- Updated Design System react to v2.6.2 (#1261)
+
+## Added
+
+- Material symbols font to web component preview page since the Design System depends on this (#1261)
 
 ## [0.33.0] - 2025-10-15
 

From 12a87c56a1c920737902cf35281e924cc1fab9c8 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Wed, 29 Oct 2025 09:51:34 +0000
Subject: [PATCH 11/14] refactor: change order of style imports

---
 src/assets/stylesheets/ExternalStyles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss
index d41a856af..9b4f218a8 100644
--- a/src/assets/stylesheets/ExternalStyles.scss
+++ b/src/assets/stylesheets/ExternalStyles.scss
@@ -1,7 +1,7 @@
+@forward "@raspberrypifoundation/design-system-react/scss/design-system-core";
 @use "../../../node_modules/react-tabs/style/react-tabs.css";
 @use "../../../node_modules/react-toggle/style.css";
 @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";
 @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
 @use "../../../node_modules/material-symbols/sharp.scss";
 @use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle;
-@forward "@raspberrypifoundation/design-system-react/scss/design-system-core";

From 6733a17365555bd2512d25443bf41ea20a915626 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Thu, 30 Oct 2025 09:25:21 +0000
Subject: [PATCH 12/14] build: update package.json to allow allow patch and
 minor version updates of the Design System React

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2928709cb..bea982dc6 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-react": "2.6.2",
+    "@raspberrypifoundation/design-system-react": "^2.6.2",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",

From 08c821ac9c69877feddc27ba44287d5831bc6cb1 Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Thu, 30 Oct 2025 09:26:08 +0000
Subject: [PATCH 13/14] fix: changelog heading level error

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d5c02daeb..12d5e71d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257)
 - Updated Design System react to v2.6.2 (#1261)
 
-## Added
+### Added
 
 - Material symbols font to web component preview page since the Design System depends on this (#1261)
 

From 3ad56b5f4fb39aaf87d0eaca7b1bdaa94070476d Mon Sep 17 00:00:00 2001
From: Max Elkins <max.elkins@raspberrypi.org>
Date: Thu, 30 Oct 2025 09:39:36 +0000
Subject: [PATCH 14/14] build: update design system react to 2.7.0

Also use `^` in package.json and update lock file accordingly
---
 package.json |  2 +-
 yarn.lock    | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index bea982dc6..ac09c63b5 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@juggle/resize-observer": "^3.3.1",
     "@lezer/highlight": "^1.0.0",
-    "@raspberrypifoundation/design-system-react": "^2.6.2",
+    "@raspberrypifoundation/design-system-react": "^2.7.0",
     "@react-three/drei": "9.114.3",
     "@react-three/fiber": "^8.0.13",
     "@reduxjs/toolkit": "^1.6.2",
diff --git a/yarn.lock b/yarn.lock
index 3c3b89fbd..296305fca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2925,17 +2925,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@raspberrypifoundation/design-system-react@npm:2.6.2":
-  version: 2.6.2
-  resolution: "@raspberrypifoundation/design-system-react@npm:2.6.2"
+"@raspberrypifoundation/design-system-react@npm:^2.7.0":
+  version: 2.7.0
+  resolution: "@raspberrypifoundation/design-system-react@npm:2.7.0"
   dependencies:
     "@raspberrypifoundation/design-system-core": ^2.4.0
     classnames: ^2.5.1
   peerDependencies:
-    react: ^18.3.1
-    react-dom: ^18.3.1
+    react: ">=18.0.0 <20.0.0"
+    react-dom: ">=18.0.0 <20.0.0"
     react-router-dom: ^6.24.0
-  checksum: a2b1bf4780ec84ce369dbd456d118d68a5cd72018709fcb19558d873b883aef2505037c8d4929c04c8064108e009a57a749d7a88fa83265472c3f554e7efdb65
+  peerDependenciesMeta:
+    react:
+      optional: false
+    react-dom:
+      optional: false
+  checksum: 992974bfd88e8d470488e62bb67690e3740a85d1c2249b07302f17063791a06f6185048a5fc8f7a07043128d6698015bdc2f27060e581c60872b68816ac2da02
   languageName: node
   linkType: hard
 
@@ -2957,7 +2962,7 @@ __metadata:
     "@juggle/resize-observer": ^3.3.1
     "@lezer/highlight": ^1.0.0
     "@pmmmwh/react-refresh-webpack-plugin": 0.4.3
-    "@raspberrypifoundation/design-system-react": 2.6.2
+    "@raspberrypifoundation/design-system-react": ^2.7.0
     "@react-three/drei": 9.114.3
     "@react-three/fiber": ^8.0.13
     "@react-three/test-renderer": 8.2.1