From d43fe8a8e2359671eeb62b47f98a1bc342d37a90 Mon Sep 17 00:00:00 2001
From: Jamie Benstead <jamie.benstead@gmail.com>
Date: Wed, 11 Mar 2026 14:19:10 +0000
Subject: [PATCH 01/23] Move styles over to InternalStyles

---
 src/assets/stylesheets/InternalStyles.scss | 139 +++++++++++++++++----
 src/assets/stylesheets/index.scss          | 111 ----------------
 2 files changed, 116 insertions(+), 134 deletions(-)

diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index 923d89be9..87e1f334c 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -100,7 +100,7 @@ svg {
 }
 
 button:focus-visible {
-  outline: 2px solid $rpf-black;
+  outline: 2px solid var(--rpf-black);
 }
 
 //override for a pesky teal icon
@@ -113,33 +113,126 @@ button:focus-visible {
 }
 
 .--light {
-  --editor-color-layer-1: #{$rpf-teal-100};
-  --editor-color-layer-2: #{$rpf-white};
-  --editor-color-layer-3: #{$rpf-white};
-  --editor-color-outline: #{$rpf-grey-150};
+  --editor-color-layer-1: var(--rpf-teal-100);
+  --editor-color-layer-2: var(--rpf-white);
+  --editor-color-layer-3: var(--rpf-white);
+  --editor-color-outline: var(--rpf-grey-150);
+
   //theme change to match WC navy colors
-  --editor-color-theme: #{$rpf-navy-800};
-  --editor-color-theme-secondary: #{$rpf-teal-900};
-  --editor-color-theme-tertiary: #{$rpf-teal-100};
-  --editor-color-text: #{$rpf-text-primary};
-  --editor-color-text-secondary: #{$rpf-text-secondary};
-  --editor-color-tab-background: #{$rpf-off-white};
+  --editor-color-theme: var(--rpf-navy-800);
+  --editor-color-theme-secondary: var(--rpf-teal-900);
+  --editor-color-theme-tertiary: var(--rpf-teal-100);
+  --editor-color-text: var(--rpf-text-primary);
+  --editor-color-text-secondary: var(--rpf-text-secondary);
+  --editor-color-tab-background: var(--rpf-off-white);
+
+  --rpf-files-list-item-active: var(--rpf-teal-secondary-tertiary-active);
+  --rpf-files-list-item-hover: var(--rpf-teal-secondary-tertiary-hover);
+  --rpf-tab-button-hover: var(--rpf-grey-100);
+  --rpf-tab-button-background: inherit;
+  --rpf-tab-border-bottom-selected: var(--rpf-teal-900);
+
+  // Sidebar  
+  --sidebar-border: var(--rpf-grey-150);
+  --sidebar-background: var(--rpf-white);
+  --sidebar-background-selected: var(--rpf-off-white);
+  --sidebar-panel-background: var(--rpf-white);
+  --sidebar-option-hover: var(--rpf-grey-100);
+  --sidebar-option-selected-icon: var(--rpf-black);
+  --sidebar-option-selected-border: var(--editor-color-theme);
+  --sidebar-option-selected-background: var(--editor-color-theme-tertiary);
+  --sidebar-option-selected-background-hover: var(--rpf-teal-200);
+
+  .btn,
+  .rpf-button {
+    --rpf-button-primary-background-color: var(--rpf-teal-800);
+    --rpf-button-primary-background-color-focus: var(--rpf-teal-800);
+    --rpf-button-primary-background-color-hover: var(--rpf-teal-900);
+    --rpf-button-primary-background-color-active: var(--rpf-teal-600);
+    --rpf-button-primary-background-color-disabled: var(--rpf-teal-200);
+    --rpf-button-primary-color-disabled: var(--rpf-grey-600);
+    --rpf-button-primary-text-color: var(--rpf-black);
+
+    --rpf-button-secondary-background-color: var(--rpf-teal-800);
+    --rpf-button-secondary-background-color-focus: var(--rpf-brand-raspberry);
+    --rpf-button-secondary-background-color-hover: var(--rpf-teal-100);
+    --rpf-button-secondary-border-color-hover: var(--rpf-teal-900);
+    --rpf-button-secondary-background-color-active: var(--rpf-teal-900);
+    --rpf-button-secondary-background-color-disabled: var(--rpf-grey-50);
+    --rpf-button-secondary-text-color: var(--rpf-black);
+
+    --rpf-button-tertiary-text-color-hover: var(--rpf-grey-600);
+
+    --rpf-button-tertiary-danger-text-color: var(--rpf-alert-error);
+    --rpf-button-tertiary-danger-background-color-hover: rgba(0, 0, 0, 0.03);
+    --rpf-button-tertiary-danger-background-color-active: rgba(0, 0, 0, 0.05);
+
+    .rpf-button--secondary {
+      border-color: var(--rpf-teal-800);
+    }
+  }
 }
 
 .--dark {
-  --editor-color-layer-1: #{$rpf-grey-850};
-  --editor-color-layer-2: #{$rpf-white};
-  --editor-color-layer-3: #{$rpf-grey-700};
-  --editor-color-outline: #{$rpf-grey-600};
-  --editor-color-theme: #{$rpf-navy-800};
-  --editor-color-theme-secondary: #{$rpf-teal-400};
-  --editor-color-theme-tertiary: #{$rpf-teal-900};
-  --editor-color-text: #{$rpf-white};
-  --editor-color-text-secondary: #{$rpf-text-secondary-darkmode};
-  --rpf-button-secondary-text-color: #{$rpf-white};
-  --editor-color-tab-background: #{$rpf-grey-700};
+  --editor-color-layer-1: var(--rpf-grey-850);
+  --editor-color-layer-2: var(--rpf-grey-800);
+  --editor-color-layer-3: var(--rpf-grey-700);
+  --editor-color-outline: var(--rpf-grey-600);
+
+  --editor-color-theme: var(--rpf-navy-800);
+  --editor-color-theme-secondary: var(--rpf-teal-400);
+  --editor-color-theme-tertiary: var(--rpf-teal-900);
+  --editor-color-text: var(--rpf-white);
+  --editor-color-text-secondary: var(--rpf-text-secondary-darkmode);
+
+  --rpf-files-list-item-active: var(--rpf-grey-secondary-tertiary-active);
+  --rpf-files-list-item-hover: var(--rpf-grey-secondary-tertiary-hover);
+  --rpf-tab-button-hover: var(--rpf-grey-900);
+  --rpf-tab-button-background: var(--rpf-grey-800);
+  --rpf-tab-border-bottom-selected: var(--rpf-teal-800);
+
+  // Sidebar
+  --sidebar-border: var(--rpf-grey-600);
+  --sidebar-background: var(--rpf-grey-800);
+  --sidebar-background-selected: var(--rpf-grey-800);
+  --sidebar-panel-background: var(--rpf-grey-700);
+  --sidebar-option-hover: var(--rpf-grey-600);
+  --sidebar-option-selected-icon: var(--rpf-white);
+  --sidebar-option-selected-border: var(--editor-color-theme);
+  --sidebar-option-selected-background: var(--editor-color-theme-tertiary);
+  --sidebar-option-selected-background-hover: var(--rpf-teal-800);
+
+  --rpf-button-secondary-text-color: var(--rpf-white);
+  --editor-color-tab-background: var(--rpf-grey-700);
+
+  .btn,
+  .rpf-button {
+    --rpf-button-primary-background-color: var(--rpf-teal-400);
+    --rpf-button-primary-background-color-focus: var(--rpf-teal-400);
+    --rpf-button-primary-background-color-active: var(--rpf-teal-200);
+    --rpf-button-primary-background-color-disabled: var(--rpf-grey-200);
+    --rpf-button-primary-color-disabled: var(--rpf-grey-700);
+    --rpf-button-primary-color-disabled-focus: var(--rpf-teal-400);
+    --rpf-button-primary-background-color-hover: var(--rpf-teal-600);
+
+    --rpf-button-secondary-background-color: var(--rpf-grey-800);
+    --rpf-button-secondary-background-color-active: var(--rpf-teal-200);
+    --rpf-button-secondary-color-disabled-background: var(--rpf-grey-700);
+    --rpf-button-secondary-background-color-hover: var(--rpf-grey-600);
+    --rpf-button-secondary-border-color-hover: var(--rpf-teal-400);
+    --rpf-button-secondary-color-disabled: var(--rpf-grey-100);
+    --rpf-button-secondary-color: var(--rpf-white);
+    --rpf-button-secondary-text-color: var(--rpf-white);
+
+    --rpf-button-tertiary-text-color-hover: var(--rpf-grey-200);
+
+    --rpf-button-tertiary-danger-text-color: var(--rpf-red-600);
+    --rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1);
+    --rpf-button-tertiary-danger-background-color-active: rgba(255, 255, 255, 0.15);
+  }
 
   .rpf-button--secondary {
-    border-color: $rpf-navy-800;
+    border-color: var(--rpf-teal-400);
   }
 }
+
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 9bb77108e..df5841995 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -26,117 +26,6 @@ code {
   min-block-size: 100dvh;
 }
 
-.--light, #wc.--light {
-  --editor-color-layer-1: #{$rpf-teal-100};
-  --editor-color-layer-2: #{$rpf-black};
-  --editor-color-layer-3: #{$rpf-white};
-  --editor-color-outline: #{$rpf-grey-150};
-  --editor-color-theme: #{$rpf-teal-800};
-  --editor-color-theme-secondary: #{$rpf-teal-900};
-  --editor-color-theme-tertiary: #{$rpf-teal-100};
-  --editor-color-text: #{$rpf-text-primary};
-  --editor-color-text-secondary: #{$rpf-text-secondary};
-  --rpf-files-list-item-active: #{$rpf-teal-secondary-tertiary-active};
-  --rpf-files-list-item-hover: #{$rpf-teal-secondary-tertiary-hover};
-  --rpf-tab-button-hover: var(--rpf-grey-100);
-  --rpf-tab-button-background: inherit;
-  --rpf-tab-border-bottom-selected: var(--rpf-teal-900);
-  --sidebar-border: var(--rpf-grey-150);
-  --sidebar-background: var(--rpf-white);
-  --sidebar-background-selected: var(--rpf-off-white);
-  --sidebar-panel-background: var(--rpf-white);
-  --sidebar-option-hover: var(--rpf-grey-100);
-  --sidebar-option-selected-icon: var(--rpf-black);
-  --sidebar-option-selected-border: var(--editor-color-theme);
-  --sidebar-option-selected-background: var(--editor-color-theme-tertiary);
-  --sidebar-option-selected-background-hover: var(--rpf-teal-200);
-}
-
-.--dark, #wc.--dark {
-  --editor-color-layer-1: #{$rpf-grey-850};
-  --editor-color-layer-2: #{$rpf-grey-800};
-  --editor-color-layer-3: #{$rpf-grey-700};
-  --editor-color-outline: #{$rpf-grey-600};
-  --editor-color-theme: #{$rpf-teal-400};
-  --editor-color-theme-secondary: #{$rpf-teal-400};
-  --editor-color-theme-tertiary: #{$rpf-teal-900};
-  --editor-color-text: #{$rpf-white};
-  --editor-color-text-secondary: #{$rpf-text-secondary-darkmode};
-  --rpf-files-list-item-active: #{$rpf-grey-secondary-tertiary-active};
-  --rpf-files-list-item-hover: #{$rpf-grey-secondary-tertiary-hover};
-  --rpf-tab-button-hover: var(--rpf-grey-900);
-  --rpf-tab-button-background: var(--rpf-grey-800);
-  --rpf-tab-border-bottom-selected: var(--rpf-teal-800);
-  --sidebar-border: var(--rpf-grey-600);
-  --sidebar-background: var(--rpf-grey-800);
-  --sidebar-background-selected: var(--rpf-grey-800);
-  --sidebar-panel-background: var(--rpf-grey-700);
-  --sidebar-option-hover: var(--rpf-grey-600);
-  --sidebar-option-selected-icon: var(--rpf-white);
-  --sidebar-option-selected-border: var(--editor-color-theme);
-  --sidebar-option-selected-background: var(--editor-color-theme-tertiary);
-  --sidebar-option-selected-background-hover: var(--rpf-teal-800);
-
-  .btn,
-  .rpf-button {
-    --rpf-button-primary-background-color: var(--rpf-teal-400);
-    --rpf-button-primary-background-color-focus: var(--rpf-teal-400);
-    --rpf-button-primary-background-color-active: var(--rpf-teal-200);
-    --rpf-button-primary-background-color-disabled: var(--rpf-grey-200);
-    --rpf-button-primary-color-disabled: var(--rpf-grey-700);
-    --rpf-button-primary-color-disabled-focus: var(--rpf-teal-400);
-    --rpf-button-primary-background-color-hover: var(--rpf-teal-600);
-
-    --rpf-button-secondary-background-color: var(--rpf-grey-800);
-    --rpf-button-secondary-background-color-active: var(--rpf-teal-200);
-    --rpf-button-secondary-color-disabled-background: var(--rpf-grey-700);
-    --rpf-button-secondary-background-color-hover: var(--rpf-grey-600);
-    --rpf-button-secondary-border-color-hover: var(--rpf-teal-400);
-    --rpf-button-secondary-color-disabled: var(--rpf-grey-100);
-    --rpf-button-secondary-color: var(--rpf-white);
-    --rpf-button-secondary-text-color: var(--rpf-white);
-
-    --rpf-button-tertiary-text-color-hover: var(--rpf-grey-200);
-
-    --rpf-button-tertiary-danger-text-color: var(--rpf-red-600);
-    --rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1);
-    --rpf-button-tertiary-danger-background-color-active: rgba(255, 255, 255, 0.15);
-  }
-
-  .rpf-button--secondary {
-    border-color: var(--rpf-teal-400);
-  }
-}
-
-.btn,
-.rpf-button {
-  --rpf-button-primary-background-color: var(--rpf-teal-800);
-  --rpf-button-primary-background-color-focus: var(--rpf-teal-800);
-  --rpf-button-primary-background-color-hover: var(--rpf-teal-900);
-  --rpf-button-primary-background-color-active: var(--rpf-teal-600);
-  --rpf-button-primary-background-color-disabled: var(--rpf-teal-200);
-  --rpf-button-primary-color-disabled: var(--rpf-grey-600);
-  --rpf-button-primary-text-color: var(--rpf-black);
-
-  --rpf-button-secondary-background-color: var(--rpf-teal-800);
-  --rpf-button-secondary-background-color-focus: $rpf-brand-raspberry; // scss var?
-  --rpf-button-secondary-background-color-hover: var(--rpf-teal-100);
-  --rpf-button-secondary-border-color-hover: var(--rpf-teal-900);
-  --rpf-button-secondary-background-color-active: var(--rpf-teal-900);
-  --rpf-button-secondary-background-color-disabled: var(--rpf-grey-50); // might not exist
-  --rpf-button-secondary-text-color: var(--rpf-black);
-
-  --rpf-button-tertiary-text-color-hover: var(--rpf-grey-600);
-
-  --rpf-button-tertiary-danger-text-color: var(--rpf-alert-error);
-  --rpf-button-tertiary-danger-background-color-hover: rgba(0, 0, 0, 0.03);
-  --rpf-button-tertiary-danger-background-color-active: rgba(0, 0, 0, 0.05);
-
-  .rpf-button--secondary {
-    border-color: var(--rpf-teal-800);
-  }
-}
-
 .select-buttons__tick--selected {
   --rpf-select-buttons-tick-color: var(--rpf-black);
 }

From a77ba3d4e7ec7841f0ef0e29166f327fff6ad340 Mon Sep 17 00:00:00 2001
From: Jamie Benstead <jamie.benstead@gmail.com>
Date: Fri, 13 Mar 2026 14:05:10 +0000
Subject: [PATCH 02/23] Update style colours

---
 .../stylesheets/DesignSystemButton.scss       |   6 +-
 src/assets/stylesheets/InternalStyles.scss    | 119 +++++++++---------
 src/assets/stylesheets/index.scss             | 107 ++++++++--------
 src/containers/WebComponentLoader.jsx         |   7 +-
 4 files changed, 118 insertions(+), 121 deletions(-)

diff --git a/src/assets/stylesheets/DesignSystemButton.scss b/src/assets/stylesheets/DesignSystemButton.scss
index c66fe1f08..b980bb875 100644
--- a/src/assets/stylesheets/DesignSystemButton.scss
+++ b/src/assets/stylesheets/DesignSystemButton.scss
@@ -113,11 +113,7 @@
 
 .--light * {
   .rpf-button--secondary {
-    span {
-      color: $rpf-text-primary;
-    }
-
-    &::before {
+     &::before {
       background-color: rgba($rpf-white, 1);
     }
 
diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index 87e1f334c..eb1b9a927 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -43,6 +43,8 @@
 
 @use "./settings/fonts" as fonts;
 
+// Default styles
+
 :host {
   font-size: 1.6rem;
 }
@@ -103,7 +105,7 @@ button:focus-visible {
   outline: 2px solid var(--rpf-black);
 }
 
-//override for a pesky teal icon
+//override for a pesky navy icon
 .select-buttons__tick--selected {
   svg {
     path {
@@ -113,126 +115,125 @@ button:focus-visible {
 }
 
 .--light {
+  // Theme colours
   --editor-color-layer-1: var(--rpf-teal-100);
   --editor-color-layer-2: var(--rpf-white);
   --editor-color-layer-3: var(--rpf-white);
   --editor-color-outline: var(--rpf-grey-150);
-
-  //theme change to match WC navy colors
   --editor-color-theme: var(--rpf-navy-800);
-  --editor-color-theme-secondary: var(--rpf-teal-900);
-  --editor-color-theme-tertiary: var(--rpf-teal-100);
+  --editor-color-theme-secondary: var(--rpf-navy-900);
+  --editor-color-theme-tertiary: var(--rpf-navy-100);
   --editor-color-text: var(--rpf-text-primary);
   --editor-color-text-secondary: var(--rpf-text-secondary);
   --editor-color-tab-background: var(--rpf-off-white);
 
-  --rpf-files-list-item-active: var(--rpf-teal-secondary-tertiary-active);
-  --rpf-files-list-item-hover: var(--rpf-teal-secondary-tertiary-hover);
+  --rpf-files-list-item-active: var(--rpf-navy-secondary-tertiary-active);
+  --rpf-files-list-item-hover: var(--rpf-navy-secondary-tertiary-hover);
   --rpf-tab-button-hover: var(--rpf-grey-100);
   --rpf-tab-button-background: inherit;
-  --rpf-tab-border-bottom-selected: var(--rpf-teal-900);
+  --rpf-tab-border-bottom-selected: var(--editor-color-theme-secondary);
 
   // Sidebar  
-  --sidebar-border: var(--rpf-grey-150);
+  --sidebar-border: var(--editor-color-outline);
   --sidebar-background: var(--rpf-white);
   --sidebar-background-selected: var(--rpf-off-white);
   --sidebar-panel-background: var(--rpf-white);
   --sidebar-option-hover: var(--rpf-grey-100);
   --sidebar-option-selected-icon: var(--rpf-black);
-  --sidebar-option-selected-border: var(--editor-color-theme);
+  --sidebar-option-selected-border: var(--editor-color-theme-secondary);
   --sidebar-option-selected-background: var(--editor-color-theme-tertiary);
-  --sidebar-option-selected-background-hover: var(--rpf-teal-200);
+  --sidebar-option-selected-background-hover: var(--rpf-navy-200);
 
   .btn,
   .rpf-button {
-    --rpf-button-primary-background-color: var(--rpf-teal-800);
-    --rpf-button-primary-background-color-focus: var(--rpf-teal-800);
-    --rpf-button-primary-background-color-hover: var(--rpf-teal-900);
-    --rpf-button-primary-background-color-active: var(--rpf-teal-600);
-    --rpf-button-primary-background-color-disabled: var(--rpf-teal-200);
+    // Primary button
+    --rpf-button-primary-background-color: var(--editor-color-theme);
+    --rpf-button-primary-background-color-focus: var(--editor-color-theme);
+    --rpf-button-primary-background-color-hover: var(--editor-color-theme-secondary);
+    --rpf-button-primary-background-color-active: var(--rpf-navy-600);
+    --rpf-button-primary-background-color-disabled: var(--rpf-navy-200);
     --rpf-button-primary-color-disabled: var(--rpf-grey-600);
-    --rpf-button-primary-text-color: var(--rpf-black);
+    --rpf-button-primary-text-color: var(--rpf-white);
 
-    --rpf-button-secondary-background-color: var(--rpf-teal-800);
+    // Secondary button
+    --rpf-button-secondary-background-color: var(--editor-color-theme);
     --rpf-button-secondary-background-color-focus: var(--rpf-brand-raspberry);
-    --rpf-button-secondary-background-color-hover: var(--rpf-teal-100);
-    --rpf-button-secondary-border-color-hover: var(--rpf-teal-900);
-    --rpf-button-secondary-background-color-active: var(--rpf-teal-900);
+    --rpf-button-secondary-background-color-hover: var( --editor-color-theme-tertiary);
+    --rpf-button-secondary-border-color: var(--editor-color-theme);
+    --rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
+    --rpf-button-secondary-background-color-active: var(--editor-color-theme-secondary);
     --rpf-button-secondary-background-color-disabled: var(--rpf-grey-50);
-    --rpf-button-secondary-text-color: var(--rpf-black);
+    --rpf-button-secondary-text-color: var(--editor-color-theme);
 
+    // Tertiary button
     --rpf-button-tertiary-text-color-hover: var(--rpf-grey-600);
-
     --rpf-button-tertiary-danger-text-color: var(--rpf-alert-error);
     --rpf-button-tertiary-danger-background-color-hover: rgba(0, 0, 0, 0.03);
     --rpf-button-tertiary-danger-background-color-active: rgba(0, 0, 0, 0.05);
-
-    .rpf-button--secondary {
-      border-color: var(--rpf-teal-800);
-    }
   }
 }
 
 .--dark {
+  // Theme colours
   --editor-color-layer-1: var(--rpf-grey-850);
   --editor-color-layer-2: var(--rpf-grey-800);
   --editor-color-layer-3: var(--rpf-grey-700);
   --editor-color-outline: var(--rpf-grey-600);
-
-  --editor-color-theme: var(--rpf-navy-800);
-  --editor-color-theme-secondary: var(--rpf-teal-400);
-  --editor-color-theme-tertiary: var(--rpf-teal-900);
+  --editor-color-theme: var(--rpf-navy-400);
+  --editor-color-theme-secondary: var(--rpf-navy-400);
+  --editor-color-theme-tertiary: var(--rpf-navy-900);
   --editor-color-text: var(--rpf-white);
   --editor-color-text-secondary: var(--rpf-text-secondary-darkmode);
 
   --rpf-files-list-item-active: var(--rpf-grey-secondary-tertiary-active);
   --rpf-files-list-item-hover: var(--rpf-grey-secondary-tertiary-hover);
   --rpf-tab-button-hover: var(--rpf-grey-900);
-  --rpf-tab-button-background: var(--rpf-grey-800);
-  --rpf-tab-border-bottom-selected: var(--rpf-teal-800);
+  --rpf-tab-button-background: var(--editor-color-layer-2);
+  --rpf-tab-border-bottom-selected: var(--editor-color-theme);
 
   // Sidebar
-  --sidebar-border: var(--rpf-grey-600);
-  --sidebar-background: var(--rpf-grey-800);
-  --sidebar-background-selected: var(--rpf-grey-800);
-  --sidebar-panel-background: var(--rpf-grey-700);
-  --sidebar-option-hover: var(--rpf-grey-600);
+  --sidebar-border: var(--editor-color-outline);
+  --sidebar-background: var(--editor-color-layer-2);
+  --sidebar-background-selected: var(--editor-color-layer-2);
+  --sidebar-panel-background: var(--editor-color-layer-3);
+  --sidebar-option-hover: var(--editor-color-outline);
   --sidebar-option-selected-icon: var(--rpf-white);
   --sidebar-option-selected-border: var(--editor-color-theme);
   --sidebar-option-selected-background: var(--editor-color-theme-tertiary);
-  --sidebar-option-selected-background-hover: var(--rpf-teal-800);
-
-  --rpf-button-secondary-text-color: var(--rpf-white);
-  --editor-color-tab-background: var(--rpf-grey-700);
+  --sidebar-option-selected-background-hover: var(--rpf-navy-800);
 
+  --editor-color-tab-background: var(--editor-color-layer-3);
+  
+  // Buttons
   .btn,
   .rpf-button {
-    --rpf-button-primary-background-color: var(--rpf-teal-400);
-    --rpf-button-primary-background-color-focus: var(--rpf-teal-400);
-    --rpf-button-primary-background-color-active: var(--rpf-teal-200);
+    // Primary button
+    --rpf-button-primary-text-color: var(--rpf-black);
+    --rpf-button-primary-background-color: var(--editor-color-theme);
+    --rpf-button-primary-background-color-focus: var(--editor-color-theme);
+    --rpf-button-primary-background-color-active: var(--rpf-navy-200);
     --rpf-button-primary-background-color-disabled: var(--rpf-grey-200);
-    --rpf-button-primary-color-disabled: var(--rpf-grey-700);
-    --rpf-button-primary-color-disabled-focus: var(--rpf-teal-400);
-    --rpf-button-primary-background-color-hover: var(--rpf-teal-600);
-
-    --rpf-button-secondary-background-color: var(--rpf-grey-800);
-    --rpf-button-secondary-background-color-active: var(--rpf-teal-200);
-    --rpf-button-secondary-color-disabled-background: var(--rpf-grey-700);
-    --rpf-button-secondary-background-color-hover: var(--rpf-grey-600);
-    --rpf-button-secondary-border-color-hover: var(--rpf-teal-400);
+    --rpf-button-primary-color-disabled: var(--editor-color-layer-3);
+    --rpf-button-primary-color-disabled-focus: var(--editor-color-theme);
+    --rpf-button-primary-background-color-hover: var(--rpf-navy-600);
+    
+    // Secondary button
+    --rpf-button-secondary-text-color: var(--rpf-white);
+    --rpf-button-secondary-background-color: var(--editor-color-layer-2);
+    --rpf-button-secondary-background-color-active: var(--rpf-navy-200);
+    --rpf-button-secondary-color-disabled-background: var(--editor-color-layer-3);
+    --rpf-button-secondary-background-color-hover: var(--editor-color-outline);
+    --rpf-button-secondary-border-color: var(--editor-color-theme);
+    --rpf-button-secondary-border-color-hover: var(--editor-color-theme);
     --rpf-button-secondary-color-disabled: var(--rpf-grey-100);
     --rpf-button-secondary-color: var(--rpf-white);
     --rpf-button-secondary-text-color: var(--rpf-white);
 
+    // Tertiary button
     --rpf-button-tertiary-text-color-hover: var(--rpf-grey-200);
-
     --rpf-button-tertiary-danger-text-color: var(--rpf-red-600);
     --rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1);
     --rpf-button-tertiary-danger-background-color-active: rgba(255, 255, 255, 0.15);
   }
-
-  .rpf-button--secondary {
-    border-color: var(--rpf-teal-400);
-  }
 }
 
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index df5841995..7325c983d 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -1,62 +1,57 @@
-@use "./rpf_design_system/colours" as *;
-@use "./rpf_design_system/spacing" as *;
-@use "./settings/fonts" as fonts;
-
-html,
-body {
-  margin: 0;
-}
-
-:root {
-  --editor-font-family-sans-serif: fonts.$font-family-sans-serif;
-  --editor-font-family-monospace: fonts.$font-family-monospace;
-}
-
-body {
-  font-family: var(--editor-font-family-sans-serif);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: var(--editor-font-family-monospace);
-}
-
-#app {
-  min-block-size: 100dvh;
-}
-
-.select-buttons__tick--selected {
-  --rpf-select-buttons-tick-color: var(--rpf-black);
-}
-
-.modal-overlay {
-  --rpf-input-active-border: var(--editor-color-theme);
-}
-
-.project-wrapper {
-  --project-wrapper-grid-gap: #{$space-0-5};
-}
-
-.proj-editor-wrapper {
-  --project-editor-wrapper-grid-gap: #{$space-1};
-}
-
-.project-instructions {
-  pre {
-    --code-block-scrollbar-color: auto;
-    --code-background-color: #{$rpf-grey-700};
-    --code-text-color: #{$rpf-white};
+#wc.--use-editor-styles.--light {
+  --editor-color-theme: var(--rpf-teal-800);
+  --editor-color-theme-secondary: var(--rpf-teal-900);
+  --editor-color-theme-tertiary: var(--rpf-teal-100);
+
+  --rpf-files-list-item-active: var(--rpf-teal-secondary-tertiary-active);
+  --rpf-files-list-item-hover: var(--rpf-teal-secondary-tertiary-hover);
+  --rpf-tab-border-bottom-selected: var(--editor-color-theme-secondary);
+  --sidebar-option-selected-background-hover: var(--rpf-teal-200);
+
+  .btn,
+  .rpf-button {
+    --rpf-button-primary-background-color: var(--editor-color-theme);
+    --rpf-button-primary-background-color-focus: var(--editor-color-theme);
+    --rpf-button-primary-background-color-hover: var(--editor-color-theme-secondary);
+    --rpf-button-primary-background-color-active: var(--rpf-teal-600);
+    --rpf-button-primary-background-color-disabled: var(--rpf-teal-200);
+    --rpf-button-primary-text-color: var(--rpf-black);
+
+    --rpf-button-secondary-background-color: var(--editor-color-theme);
+    --rpf-button-secondary-background-color-hover: var(--editor-color-theme-tertiary);
+    --rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
+    --rpf-button-secondary-background-color-active: var(--editor-color-theme-secondary);
+    --rpf-button-secondary-text-color: var(--rpf-black);
   }
 
-  .line-highlight {
-    --code-block-line-highlight-color: #{$rpf-white};
+  .rpf-button--secondary {
+    border-color: var(--editor-color-theme);
   }
 }
 
-.btn--tertiary {
-  &:hover,
-  .btn-outer:hover & {
-    --tertiary-btn-hover-color: inherit;
+#wc.--use-editor-styles.--dark {
+  --editor-color-theme: var(--rpf-teal-800);
+  --editor-color-theme-secondary: var(--rpf-teal-400);
+  --editor-color-theme-tertiary: var(--rpf-teal-900);
+
+  --rpf-tab-border-bottom-selected: var(--editor-color-theme);
+  --sidebar-option-selected-background-hover: var(--rpf-teal-950);
+
+  .btn,
+  .rpf-button {
+    --rpf-button-primary-background-color: var(--editor-color-theme-secondary);
+    --rpf-button-primary-background-color-focus: var(--editor-color-theme-secondary);
+    --rpf-button-primary-background-color-active: var(--rpf-teal-200);
+    --rpf-button-primary-color-disabled-focus: var(--editor-color-theme-secondary);
+    --rpf-button-primary-background-color-hover: var(--rpf-teal-600);
+    --rpf-button-primary-text-color: var(--rpf-black);
+    
+    --rpf-button-secondary-background-color-active: var(--rpf-teal-200);
+    --rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
+    --rpf-button-primary-text-color: var(--rpf-black);
   }
-}
+
+  .rpf-button--secondary {
+    border-color: var(--editor-color-theme-secondary);
+  }
+}
\ No newline at end of file
diff --git a/src/containers/WebComponentLoader.jsx b/src/containers/WebComponentLoader.jsx
index f468a97bd..188d235df 100644
--- a/src/containers/WebComponentLoader.jsx
+++ b/src/containers/WebComponentLoader.jsx
@@ -220,7 +220,12 @@ const WebComponentLoader = (props) => {
         {hostStyles && <style>{hostStyles}</style>}
         <Style>
           {internalStyles.toString()}
-          <div id="wc" className={`--${cookies.theme || themeDefault}`}>
+          <div
+            id="wc"
+            className={`--${cookies.theme || themeDefault}${
+              useEditorStyles ? " --use-editor-styles" : ""
+            }`}
+          >
             <ToastContainer
               enableMultiContainer
               containerId="top-center"

From 5aa13d794037bd82956900cd3cccffa55bb818b7 Mon Sep 17 00:00:00 2001
From: Jamie Benstead <jamie.benstead@gmail.com>
Date: Fri, 13 Mar 2026 14:08:11 +0000
Subject: [PATCH 03/23] Add tests around useEditorStyles being applied

---
 src/containers/WebComponentLoader.test.js | 46 +++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/src/containers/WebComponentLoader.test.js b/src/containers/WebComponentLoader.test.js
index 569806db3..7a7599238 100644
--- a/src/containers/WebComponentLoader.test.js
+++ b/src/containers/WebComponentLoader.test.js
@@ -335,6 +335,52 @@ describe("When no user is in state", () => {
       );
       expect(editorStyles).not.toBeNull();
     });
+
+    test("Adds editor override marker class when useEditorStyles is true", () => {
+      const { container } = render(
+        <Provider store={store}>
+          <CookiesProvider cookies={cookies}>
+            <WebComponentLoader
+              code={code}
+              identifier={identifier}
+              senseHatAlwaysEnabled={true}
+              instructions={instructions}
+              authKey={authKey}
+              theme="light"
+              useEditorStyles={true}
+            />
+          </CookiesProvider>
+        </Provider>,
+      );
+
+      expect(container.querySelector("#wc")).toHaveClass(
+        "--light",
+        "--use-editor-styles",
+      );
+    });
+
+    test("Does not add editor override marker class when useEditorStyles is false", () => {
+      const { container } = render(
+        <Provider store={store}>
+          <CookiesProvider cookies={cookies}>
+            <WebComponentLoader
+              code={code}
+              identifier={identifier}
+              senseHatAlwaysEnabled={true}
+              instructions={instructions}
+              authKey={authKey}
+              theme="dark"
+              useEditorStyles={false}
+            />
+          </CookiesProvider>
+        </Provider>,
+      );
+
+      expect(container.querySelector("#wc")).toHaveClass("--dark");
+      expect(container.querySelector("#wc")).not.toHaveClass(
+        "--use-editor-styles",
+      );
+    });
   });
 
   describe("with assetsIdentifier set", () => {

From 3d580d9418a6107fa234ea100345fd88df878f04 Mon Sep 17 00:00:00 2001
From: Jamie Benstead <jamie.benstead@gmail.com>
Date: Fri, 13 Mar 2026 14:46:53 +0000
Subject: [PATCH 04/23] Remove space

---
 src/assets/stylesheets/InternalStyles.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index eb1b9a927..cafccdf64 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -133,7 +133,7 @@ button:focus-visible {
   --rpf-tab-button-background: inherit;
   --rpf-tab-border-bottom-selected: var(--editor-color-theme-secondary);
 
-  // Sidebar  
+  // Sidebar
   --sidebar-border: var(--editor-color-outline);
   --sidebar-background: var(--rpf-white);
   --sidebar-background-selected: var(--rpf-off-white);
@@ -158,7 +158,7 @@ button:focus-visible {
     // Secondary button
     --rpf-button-secondary-background-color: var(--editor-color-theme);
     --rpf-button-secondary-background-color-focus: var(--rpf-brand-raspberry);
-    --rpf-button-secondary-background-color-hover: var( --editor-color-theme-tertiary);
+    --rpf-button-secondary-background-color-hover: var(--editor-color-theme-tertiary);
     --rpf-button-secondary-border-color: var(--editor-color-theme);
     --rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
     --rpf-button-secondary-background-color-active: var(--editor-color-theme-secondary);
@@ -203,7 +203,7 @@ button:focus-visible {
   --sidebar-option-selected-background-hover: var(--rpf-navy-800);
 
   --editor-color-tab-background: var(--editor-color-layer-3);
-  
+
   // Buttons
   .btn,
   .rpf-button {
@@ -216,7 +216,7 @@ button:focus-visible {
     --rpf-button-primary-color-disabled: var(--editor-color-layer-3);
     --rpf-button-primary-color-disabled-focus: var(--editor-color-theme);
     --rpf-button-primary-background-color-hover: var(--rpf-navy-600);
-    
+
     // Secondary button
     --rpf-button-secondary-text-color: var(--rpf-white);
     --rpf-button-secondary-background-color: var(--editor-color-layer-2);

From f21ec99ce7f322ca82156235fa816d8b1c9b1eb5 Mon Sep 17 00:00:00 2001
From: Jamie Benstead <jamie.benstead@gmail.com>
Date: Fri, 13 Mar 2026 14:47:23 +0000
Subject: [PATCH 05/23] Remove duplicate

---
 src/assets/stylesheets/InternalStyles.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index cafccdf64..9aaf674f0 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -227,7 +227,6 @@ button:focus-visible {
     --rpf-button-secondary-border-color-hover: var(--editor-color-theme);
     --rpf-button-secondary-color-disabled: var(--rpf-grey-100);
     --rpf-button-secondary-color: var(--rpf-white);
-    --rpf-button-secondary-text-color: var(--rpf-white);
 
     // Tertiary button
     --rpf-button-tertiary-text-color-hover: var(--rpf-grey-200);

From 1eaa80fe7179d3f8a19878a99410f839a4ee4c36 Mon Sep 17 00:00:00 2001
From: Jamie Benstead <jamie.benstead@gmail.com>
Date: Fri, 13 Mar 2026 14:48:01 +0000
Subject: [PATCH 06/23] Remove duplicate

---
 src/assets/stylesheets/index.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 7325c983d..a0cacdc74 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -45,13 +45,12 @@
     --rpf-button-primary-color-disabled-focus: var(--editor-color-theme-secondary);
     --rpf-button-primary-background-color-hover: var(--rpf-teal-600);
     --rpf-button-primary-text-color: var(--rpf-black);
-    
+
     --rpf-button-secondary-background-color-active: var(--rpf-teal-200);
     --rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
-    --rpf-button-primary-text-color: var(--rpf-black);
   }
 
   .rpf-button--secondary {
     border-color: var(--editor-color-theme-secondary);
   }
-}
\ No newline at end of file
+}

From 85e43d974d3f416b5b2304c06b900092be350add Mon Sep 17 00:00:00 2001
From: Jamie Benstead <jamie.benstead@gmail.com>
Date: Fri, 13 Mar 2026 14:49:08 +0000
Subject: [PATCH 07/23] Tidy up

---
 src/assets/stylesheets/index.scss | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index a0cacdc74..0b66db029 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -19,14 +19,11 @@
 
     --rpf-button-secondary-background-color: var(--editor-color-theme);
     --rpf-button-secondary-background-color-hover: var(--editor-color-theme-tertiary);
+    --rpf-button-secondary-border-color: var(--editor-color-theme);
     --rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
     --rpf-button-secondary-background-color-active: var(--editor-color-theme-secondary);
     --rpf-button-secondary-text-color: var(--rpf-black);
   }
-
-  .rpf-button--secondary {
-    border-color: var(--editor-color-theme);
-  }
 }
 
 #wc.--use-editor-styles.--dark {
@@ -43,14 +40,11 @@
     --rpf-button-primary-background-color-focus: var(--editor-color-theme-secondary);
     --rpf-button-primary-background-color-active: var(--rpf-teal-200);
     --rpf-button-primary-color-disabled-focus: var(--editor-color-theme-secondary);
+    --rpf-button-primary-background-color: var(--editor-color-theme-secondary);
     --rpf-button-primary-background-color-hover: var(--rpf-teal-600);
     --rpf-button-primary-text-color: var(--rpf-black);
 
     --rpf-button-secondary-background-color-active: var(--rpf-teal-200);
     --rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
   }
-
-  .rpf-button--secondary {
-    border-color: var(--editor-color-theme-secondary);
-  }
 }

From d1c7bfbd4bf0e53cd011b6cca166ede6c9879a04 Mon Sep 17 00:00:00 2001
From: Raspberry Pi Translations Bot
 <36728703+raspberrypitranslationsbot@users.noreply.github.com>
Date: Tue, 10 Mar 2026 15:40:33 +0000
Subject: [PATCH 08/23] New translations en.json (French)

---
 public/translations/fr-FR.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/translations/fr-FR.json b/public/translations/fr-FR.json
index 8ba6688ae..44feecaaf 100644
--- a/public/translations/fr-FR.json
+++ b/public/translations/fr-FR.json
@@ -110,6 +110,7 @@
     "removeInstructions": "Supprimer les instructions",
     "nextStep": "Prochaine étape",
     "previousStep": "Étape précédente",
+    "stepCounter": "{{currentStep}} of {{totalSteps}}",
     "projectSteps": "Instructions du projet",
     "edit": "Modifier",
     "view": "Voir",

From f24b15dc91be1b0818f45a156bc4d116c61b2cf1 Mon Sep 17 00:00:00 2001
From: Raspberry Pi Translations Bot
 <36728703+raspberrypitranslationsbot@users.noreply.github.com>
Date: Tue, 10 Mar 2026 15:40:34 +0000
Subject: [PATCH 09/23] New translations en.json (Greek)

---
 public/translations/el-GR.json | 311 +++++++++++++++++++++++++++++++++
 1 file changed, 311 insertions(+)
 create mode 100644 public/translations/el-GR.json

diff --git a/public/translations/el-GR.json b/public/translations/el-GR.json
new file mode 100644
index 000000000..4b2139d48
--- /dev/null
+++ b/public/translations/el-GR.json
@@ -0,0 +1,311 @@
+{
+  "modal": {
+    "close": "Κλείσιμο",
+    "error": {
+      "error": "Σφάλμα",
+      "heading": "Παρουσιάστηκε σφάλμα",
+      "externalLink": {
+        "message": "Δυστυχώς, οι σύνδεσμοι προς εξωτερικές ιστοσελίδες δεν είναι διαθέσιμοι στον Επεξεργαστή."
+      }
+    }
+  },
+  "editorPanel": {
+    "ariaLabel": "πεδίο εισαγωγής κειμένου στον επεξεργαστή",
+    "characterLimitError": "Σφάλμα: Έχεις συμπληρώσει το όριο χαρακτήρων",
+    "viewOnly": "Μόνο προβολή",
+    "close": "κλείσιμο",
+    "characterLimitExplanation_one": "Τα αρχεία στον επεξεργαστή περιορίζονται σε {{count}} χαρακτήρα",
+    "characterLimitExplanation_other": "Τα αρχεία στον επεξεργαστή περιορίζονται σε {{count}} χαρακτήρες"
+  },
+  "filePanel": {
+    "errors": {
+      "reservedFileName": "Το όνομα αρχείου {{fileName}} είναι δεσμευμένο. Επίλεξε ένα διαφορετικό όνομα.",
+      "containsSpaces": "Τα ονόματα των αρχείων δεν πρέπει να περιέχουν κενά.",
+      "generalError": "Σφάλμα",
+      "notUnique": "Τα ονόματα αρχείων πρέπει να είναι μοναδικά.",
+      "or": "ή",
+      "unsupportedExtension": "Τα ονόματα αρχείων πρέπει να τελειώνουν σε {{allowedExtensions}}."
+    },
+    "files": "Αρχεία έργου",
+    "images": "Συλλογή εικόνων",
+    "newFileButton": "Προσθήκη αρχείου",
+    "newFileModal": {
+      "cancel": "Ακύρωση",
+      "heading": "Πρόσθεσε ένα νέο αρχείο στο έργο σου",
+      "helpText": "Να θυμάσαι να προσθέτεις την επέκταση του αρχείου στο τέλος του ονόματος του αρχείου σου, για παράδειγμα, {{examples}}",
+      "helpTextExample": {
+        "html": "file.html', 'file.css' ή 'file.js'",
+        "python": "'file.py'"
+      },
+      "inputLabel": "Ονόμασε το αρχείο σου",
+      "addFile": "Προσθήκη αρχείου"
+    },
+    "renameFileModal": {
+      "cancel": "Ακύρωση",
+      "heading": "Μετονομασία αρχείου",
+      "inputLabel": "Ονόμασε το αρχείο σου",
+      "save": "Αποθήκευση"
+    },
+    "fileMenu": {
+      "label": "Άνοιγμα μενού αρχείων",
+      "renameItem": "Μετονομασία αρχείου"
+    }
+  },
+  "downloadPanel": {
+    "heading": "Αποθήκευση και λήψη",
+    "logInTitle": "Συνδέσου για να αποθηκεύσεις την πρόοδό σου",
+    "logInHint": "Με έναν λογαριασμό Raspberry Pi μπορείς να αποθηκεύσεις τον κώδικά σου και την πρόοδο των βημάτων του έργου σου.",
+    "logInButton": "Συνδέσου για αποθήκευση",
+    "signUpButton": "Εγγραφή",
+    "downloadHint": "Κατεβάστε τα αρχεία του έργου σας, ώστε να μπορείτε να τα χρησιμοποιήσετε εκτός σύνδεσης και σε διαφορετικό πρόγραμμα επεξεργασίας κώδικα.",
+    "downloadButton": "Λήψη έργου"
+  },
+  "footer": {
+    "accessibility": "Προσβασιμότητα",
+    "charityNameAndNumber": "Raspberry Pi Foundation - καταχωρημένο φιλανθρωπικό ίδρυμα στο ΗΒ με Αρ. 1129409",
+    "cookies": "Cookies",
+    "privacy": "Προστασία προσωπικών δεδομένων",
+    "safeguarding": "Προστασία"
+  },
+  "projectName": {
+    "label": "Όνομα έργου",
+    "newProject": "Νέο Έργο"
+  },
+  "header": {
+    "download": "Λήψη",
+    "downloadFileNameDefault": "το {{project_type}} έργο μου",
+    "editorLogoAltText": "Λογότυπο του επεξεργαστή",
+    "projects": "Τα έργα σου",
+    "renameProject": "Επεξεργασία ονόματος έργου",
+    "renameSave": "Αποθήκευση ονόματος έργου",
+    "save": "Αποθήκευση",
+    "loginToSave": "Συνδέσου για αποθήκευση",
+    "settings": "Ρυθμίσεις"
+  },
+  "imagePanel": {
+    "gallery": "Συλλογή εικόνων"
+  },
+  "infoPanel": {
+    "info": "Πληροφορίες"
+  },
+  "instructionsPanel": {
+    "demoInstructions": {
+      "title": "Πώς λειτουργούν οι οδηγίες",
+      "enablingInstructions": "Ενεργοποίηση οδηγιών",
+      "visible": "Οποιοδήποτε κείμενο γραφτεί εδώ θα είναι ορατό στους μαθητές στην πλαϊνή μπάρα.",
+      "writingInstructions": "Οδηγίες γραφής",
+      "markdown": "Γράψτε τις οδηγίες σας χρησιμοποιώντας [Markdown](https://www.markdownguide.org/).",
+      "whatYouCanDo": "Τι μπορείς να κάνεις",
+      "lists": "Λίστες",
+      "bulletPoints": "Κουκκίδες",
+      "numberedSteps": "Αριθμημένα βήματα"
+    },
+    "emptyState": {
+      "addInstructions": "Προσθήκη οδηγιών",
+      "edits": "Όπως και ο κώδικας του έργου, οι μαθητές δε θα βλέπουν τυχόν αλλαγές που κάνετε στις οδηγίες αφού έχουν αποθηκεύσει τη δική τους έκδοση του έργου.",
+      "location": "Αυτές οι οδηγίες θα εμφανίζονται στους μαθητές στην πλαϊνή μπάρα του έργου τους και θα είναι διαθέσιμες μόνο για προβολή.",
+      "markdown": "Οι οδηγίες είναι γραμμένες σε <0>Markdown</0>.",
+      "purpose": "Μπορείτε να προσθέσετε οδηγίες στο έργο σας για να καθοδηγήσετε τους μαθητές."
+    },
+    "removeInstructions": "Αφαίρεση οδηγιών",
+    "nextStep": "Επόμενο βήμα",
+    "previousStep": "Προηγούμενο βήμα",
+    "stepCounter": "{{currentStep}} of {{totalSteps}}",
+    "projectSteps": "Οδηγίες έργου",
+    "edit": "Επεξεργασία",
+    "view": "Προβολή",
+    "removeInstructionsModal": {
+      "removeInstructions": "Αφαίρεση οδηγιών",
+      "close": "Κλείσιμο",
+      "heading": "Να αφαιρεθούν οι οδηγίες του έργου;",
+      "removeInstuctionsWarning": "Πρόκειται να αφαιρεθούν οι οδηγίες από το έργο.",
+      "resultRemovingInstructions": "Ως αποτέλεσμα της κατάργησης αυτών των οδηγιών:",
+      "instructionsWillBeDeleted": "Το περιεχόμενο των οδηγιών θα διαγραφεί.",
+      "studentsWorkingProjectNotRecievedInstructions": "Οι μαθητές που θα ξεκινήσουν να δουλεύουν σε αυτό το έργο δε θα λάβουν οδηγίες.",
+      "studentsStartedWillSeeInstructions": "Οι μαθητές που έχουν ήδη ξεκινήσει να δουλεύουν σε αυτό το έργο θα μπορούν να βλέπουν τις οδηγίες όπως ήταν όταν ξεκίνησαν."
+    }
+  },
+  "projectsPanel": {
+    "projects": "Έργα",
+    "yourProjectsButton": "Μετάβαση στα έργα σου",
+    "projectTypeLabel": "Τύπος έργου"
+  },
+  "settingsPanel": {
+    "info": "Ρυθμίσεις"
+  },
+  "input": {
+    "comment": {
+      "py5": "Py5: λειτουργία ως εισαγόμενο αρχείο"
+    }
+  },
+  "mobile": {
+    "code": "Κώδικας",
+    "menu": "Μενού",
+    "output": "Έξοδος",
+    "preview": "Προεπισκόπηση",
+    "steps": "Βήματα"
+  },
+  "modals": {
+    "close": "Κλείσιμο"
+  },
+  "notifications": {
+    "close": "κλείσιμο",
+    "loginPrompt": "Για να αποθηκεύσεις αυτό το έργο και να έχεις πρόσβαση σε αυτό αργότερα, μην ξεχάσεις να συνδεθείς ή να εγγραφείς!",
+    "projectRemixed": "Το τροποποιημένο έργο σου έχει αποθηκευτεί.",
+    "projectRenamed": "Μετονόμασες το έργο σου.",
+    "projectSaved": "Το έργο σου έχει αποθηκευτεί",
+    "savePrompt": "Αποθήκευσε αυτό το έργο για να έχεις πρόσβαση σε αυτό αργότερα στην ενότητα \"Τα έργα σου\"."
+  },
+  "output": {
+    "errors": {
+      "interrupted": "Η εκτέλεση διακόπηκε"
+    },
+    "newTab": "Προεπισκόπηση σε νέα καρτέλα",
+    "preview": "προεπισκόπηση",
+    "senseHat": {
+      "controls": {
+        "colour": "χρώμα",
+        "humidity": "υγρασία",
+        "motion": "κίνηση",
+        "motionSensorOptions": {
+          "no": "Όχι",
+          "yes": "Ναι"
+        },
+        "name": "Πίνακας Ελέγχου Διαστημικού Σταθμού",
+        "pressure": "πίεση",
+        "temperature": "θερμοκρασία",
+        "timer": "χρονοδιακόπτης"
+      },
+      "model": {
+        "pitch": "κλίση (γέρνει μπρος-πίσω)",
+        "roll": "κύλιση (γέρνει αριστερά-δεξιά)",
+        "yaw": "εκτροπή (στρίβει αριστερά-δεξιά)"
+      }
+    },
+    "textOutput": "Έξοδος κειμένου",
+    "visualOutput": "Οπτική έξοδος"
+  },
+  "outputViewToggle": {
+    "buttonTabLabel": "Προβολή με καρτέλες",
+    "buttonTabTitle": "Προβολή με καρτέλες",
+    "buttonSplitLabel": "Διαιρεμένη προβολή",
+    "buttonSplitTitle": "Διαιρεμένη προβολή"
+  },
+  "project": {
+    "accessDeniedWithAuthModal": {
+      "embedded": {
+        "text": "Επισκέψου την ιστοσελίδα Έργα για ενδιαφέρουσες ιδέες."
+      },
+      "heading": "Δεν έχεις πρόσβαση σε αυτό το έργο",
+      "newProject": "Δημιουργία νέου έργου",
+      "projectsSiteLinkText": "Εξερεύνηση ιστοσελίδας Έργων",
+      "text": "Επισκέψου την ιστοσελίδα Έργα για ενδιαφέρουσες ιδέες ή ξεκίνα να γράφεις κώδικα σε ένα νέο έργο."
+    },
+    "loading": "Φόρτωση",
+    "notFoundModal": {
+      "embedded": {
+        "text": "Επισκέψου την ιστοσελίδα Έργα για ενδιαφέρουσες ιδέες"
+      },
+      "heading": "Αυτό το έργο δεν υπάρχει",
+      "newProject": "Δημιουργία νέου έργου",
+      "projectsSiteLinkText": "Εξερεύνηση ιστοσελίδας Έργων",
+      "text": "Ξεκίνα να γράφεις κώδικα σε ένα νέο έργο ή επισκέψου την ιστοσελίδα Έργα για ενδιαφέρουσες ιδέες."
+    },
+    "untitled": "Έργο χωρίς τίτλο"
+  },
+  "projectHeader": {
+    "subTitle": "Πρόγραμμα Επεξεργασίας Κώδικα",
+    "title": "Τα έργα σου",
+    "text": "Επίλεξε ένα έργο για να συνεχίσεις να γράφεις τον κώδικα, να το δεις, ή να το επεξεργαστείς."
+  },
+  "projectList": {
+    "delete": "Διαγραφή",
+    "deleteLabel": "Διαγραφή έργου",
+    "empty": "Δεν έχουν δημιουργηθεί έργα ακόμη",
+    "label": "Άνοιγμα μενού έργων",
+    "loading": "Φόρτωση",
+    "loadingFailed": "Αποτυχία φόρτωσης έργων",
+    "newProject": "Δημιουργία νέου έργου",
+    "pagination": {
+      "first": "Πρώτη σελίδα",
+      "last": "Τελευταία σελίδα",
+      "next": "Επόμενη σελίδα",
+      "previous": "Προηγούμενη Σελίδα",
+      "more": "Εμφάνιση περισσότερων έργων"
+    },
+    "rename": "Μετονομασία",
+    "renameLabel": "Μετονομασία έργου",
+    "renameProjectModal": {
+      "cancel": "Χωρίς αποθήκευση",
+      "heading": "Μετονομασία έργου",
+      "inputLabel": "Άλλαξε το όνομα του έργου σου",
+      "save": "Αποθήκευση"
+    },
+    "updated": "Επεξεργάστηκε",
+    "python_type": "Python",
+    "html_type": "HTML"
+  },
+  "projectTypes": {
+    "html": "HTML/CSS",
+    "python": "Python"
+  },
+  "runButton": {
+    "run": "Run",
+    "stop": "Λήξη",
+    "stopping": "Διακοπή..."
+  },
+  "saveStatus": {
+    "saving": "Αποθήκευση",
+    "saved": "Αποθηκεύτηκε"
+  },
+  "runners": {
+    "HtmlOutput": "Προεπισκόπηση εξόδου HTML"
+  },
+  "sidebar": {
+    "collapse": "Σύμπτυξη πλαϊνής μπάρας",
+    "download": "Λήψη έργου",
+    "expand": "Ανάπτυξη πλαϊνής μπάρας",
+    "file": "Αρχεία έργου",
+    "images": "Συλλογή εικόνων",
+    "settings": "Ρυθμίσεις",
+    "projects": "Έργα",
+    "information": "Πληροφορίες",
+    "information_text": "Το Code Editor είναι ένα εργαλείο που βοηθά τους νέους να μάθουν να γράφουν κώδικα. Έχουμε συμπεριλάβει μόνο συναρτήσεις που είναι απλές και ασφαλείς στη χρήση. Για αυτόν τον λόγο, παραδείγματος χάριν, δεν επιτρέπονται σύνδεσμοι προς άλλες ιστοσελίδες.",
+    "instructions": "Οδηγίες έργου",
+    "feedback": "Ανατροφοδότηση",
+    "help": "Βοήθεια",
+    "privacy": "Προστασία προσωπικών δεδομένων",
+    "cookies": "Cookies",
+    "accessibility": "Προσβασιμότητα",
+    "safeguarding": "Προστασία",
+    "charity": "Raspberry Pi Foundation - καταχωρημένο φιλανθρωπικό ίδρυμα στο ΗΒ με Αρ. 1129409",
+    "settingsMenu": {
+      "heading": "Ρυθμίσεις",
+      "textSize": "Μέγεθος κειμένου",
+      "theme": "Θέμα",
+      "textSizeOptions": {
+        "large": "Μεγάλο",
+        "medium": "Μεσαίο",
+        "small": "Μικρό"
+      },
+      "themeOptions": {
+        "dark": "Σκοτεινό",
+        "light": "Ανοιχτό"
+      }
+    }
+  },
+  "webComponent": {
+    "loading": "Φόρτωση",
+    "failed": "Η φόρτωση απέτυχε"
+  },
+  "newInputPanelButton": {
+    "buttonText": "Προσθήκη επιπλέον πίνακα"
+  },
+  "button": {
+    "yes": "Ναι",
+    "no": "Όχι"
+  },
+  "common": {
+    "or": "ή"
+  }
+}
\ No newline at end of file

From a70e9dad35ad7648c3e72a20d3c97f818080c1a3 Mon Sep 17 00:00:00 2001
From: Raspberry Pi Translations Bot
 <36728703+raspberrypitranslationsbot@users.noreply.github.com>
Date: Tue, 10 Mar 2026 15:40:35 +0000
Subject: [PATCH 10/23] New translations en.json (Japanese)

---
 public/translations/ja-JP.json | 310 +++++++++++++++++++++++++++++++++
 1 file changed, 310 insertions(+)
 create mode 100644 public/translations/ja-JP.json

diff --git a/public/translations/ja-JP.json b/public/translations/ja-JP.json
new file mode 100644
index 000000000..9aa8bb3b1
--- /dev/null
+++ b/public/translations/ja-JP.json
@@ -0,0 +1,310 @@
+{
+  "modal": {
+    "close": "Close",
+    "error": {
+      "error": "Error",
+      "heading": "An error has occurred",
+      "externalLink": {
+        "message": "Unfortunately links to external sites are not available in the Editor."
+      }
+    }
+  },
+  "editorPanel": {
+    "ariaLabel": "editor text input",
+    "characterLimitError": "Error: Character limit reached",
+    "viewOnly": "View only",
+    "close": "close",
+    "characterLimitExplanation_other": "Files in the editor are limited to {{count}} characters"
+  },
+  "filePanel": {
+    "errors": {
+      "reservedFileName": "{{fileName}} is a reserved file name. Please choose a different name.",
+      "containsSpaces": "File names must not contain spaces.",
+      "generalError": "Error",
+      "notUnique": "File names must be unique.",
+      "or": "or",
+      "unsupportedExtension": "File names must end in {{allowedExtensions}}."
+    },
+    "files": "Project files",
+    "images": "Image gallery",
+    "newFileButton": "Add file",
+    "newFileModal": {
+      "cancel": "Cancel",
+      "heading": "Add a new file to your project",
+      "helpText": "Remember to add the file extension at the end of your file name, for example, {{examples}}",
+      "helpTextExample": {
+        "html": "'file.html', 'file.css' or 'file.js'",
+        "python": "'file.py'"
+      },
+      "inputLabel": "Name your file",
+      "addFile": "Add file"
+    },
+    "renameFileModal": {
+      "cancel": "Cancel",
+      "heading": "Rename file",
+      "inputLabel": "Name your file",
+      "save": "Save"
+    },
+    "fileMenu": {
+      "label": "Open file menu",
+      "renameItem": "Rename file"
+    }
+  },
+  "downloadPanel": {
+    "heading": "Save & download",
+    "logInTitle": "Log in to save your progress",
+    "logInHint": "With a Raspberry Pi Account you can save your code and project steps progress.",
+    "logInButton": "Log in to save",
+    "signUpButton": "Sign up",
+    "downloadHint": "Download your project files so you can use them offline and in a different code editor.",
+    "downloadButton": "Download project"
+  },
+  "footer": {
+    "accessibility": "Accessibility",
+    "charityNameAndNumber": "Raspberry Pi Foundation UK registered charity 1129409",
+    "cookies": "Cookies",
+    "privacy": "Privacy",
+    "safeguarding": "Safeguarding"
+  },
+  "projectName": {
+    "label": "Project name",
+    "newProject": "New Project"
+  },
+  "header": {
+    "download": "Download",
+    "downloadFileNameDefault": "my {{project_type}} project",
+    "editorLogoAltText": "Editor logo",
+    "projects": "Your projects",
+    "renameProject": "Edit project name",
+    "renameSave": "Save project name",
+    "save": "Save",
+    "loginToSave": "Log in to save",
+    "settings": "Settings"
+  },
+  "imagePanel": {
+    "gallery": "Image Gallery"
+  },
+  "infoPanel": {
+    "info": "Information"
+  },
+  "instructionsPanel": {
+    "demoInstructions": {
+      "title": "How instructions work",
+      "enablingInstructions": "Enabling instructions",
+      "visible": "Any text written here will be visible to students in the sidebar.",
+      "writingInstructions": "Writing instructions",
+      "markdown": "Write your instructions using [Markdown](https://www.markdownguide.org/).",
+      "whatYouCanDo": "What you can do",
+      "lists": "Lists",
+      "bulletPoints": "Bullet points",
+      "numberedSteps": "Numbered steps"
+    },
+    "emptyState": {
+      "addInstructions": "Add instructions",
+      "edits": "Like project code, students will not see any edits you make to the instructions after they have saved their version of the project.",
+      "location": "These instructions will be shown to students in their project sidebar and will be view-only.",
+      "markdown": "Instructions are written in <0>markdown</0>.",
+      "purpose": "Instructions can be added to your project to guide students."
+    },
+    "removeInstructions": "Remove instructions",
+    "nextStep": "Next step",
+    "previousStep": "Previous step",
+    "stepCounter": "{{currentStep}} of {{totalSteps}}",
+    "projectSteps": "Project instructions",
+    "edit": "Edit",
+    "view": "View",
+    "removeInstructionsModal": {
+      "removeInstructions": "Remove instructions",
+      "close": "Close",
+      "heading": "Remove project instructions?",
+      "removeInstuctionsWarning": "You are about to remove the instructions from the project.",
+      "resultRemovingInstructions": "As a result of removing these instructions:",
+      "instructionsWillBeDeleted": "Instructions content will be deleted.",
+      "studentsWorkingProjectNotRecievedInstructions": "Students who start working on this project will not receive instructions.",
+      "studentsStartedWillSeeInstructions": "Students who have already started working on this project will still be able to see the instructions as they were when they started."
+    }
+  },
+  "projectsPanel": {
+    "projects": "Projects",
+    "yourProjectsButton": "Go to your projects",
+    "projectTypeLabel": "Project type"
+  },
+  "settingsPanel": {
+    "info": "Settings"
+  },
+  "input": {
+    "comment": {
+      "py5": "Py5: imported mode"
+    }
+  },
+  "mobile": {
+    "code": "Code",
+    "menu": "Menu",
+    "output": "Output",
+    "preview": "Preview",
+    "steps": "Steps"
+  },
+  "modals": {
+    "close": "Close"
+  },
+  "notifications": {
+    "close": "close",
+    "loginPrompt": "To save this project and access it later, don't forget to log in or sign up!",
+    "projectRemixed": "Your remixed project has been saved",
+    "projectRenamed": "You have renamed your project.",
+    "projectSaved": "Your project has been saved",
+    "savePrompt": "Save this project to access it later under \"Your projects\"."
+  },
+  "output": {
+    "errors": {
+      "interrupted": "Execution interrupted"
+    },
+    "newTab": "Preview in new tab",
+    "preview": "preview",
+    "senseHat": {
+      "controls": {
+        "colour": "colour",
+        "humidity": "humidity",
+        "motion": "motion",
+        "motionSensorOptions": {
+          "no": "No",
+          "yes": "Yes"
+        },
+        "name": "Space Station Control Panel",
+        "pressure": "pressure",
+        "temperature": "temperature",
+        "timer": "timer"
+      },
+      "model": {
+        "pitch": "pitch",
+        "roll": "roll",
+        "yaw": "yaw"
+      }
+    },
+    "textOutput": "Text output",
+    "visualOutput": "Visual output"
+  },
+  "outputViewToggle": {
+    "buttonTabLabel": "Tabbed view",
+    "buttonTabTitle": "Tabbed view",
+    "buttonSplitLabel": "Split view",
+    "buttonSplitTitle": "Split view"
+  },
+  "project": {
+    "accessDeniedWithAuthModal": {
+      "embedded": {
+        "text": "Visit the Projects site for cool project ideas"
+      },
+      "heading": "You can't access this project",
+      "newProject": "Create a new code project",
+      "projectsSiteLinkText": "Explore Projects site",
+      "text": "Visit the Projects site for cool project ideas or start coding in a new project."
+    },
+    "loading": "Loading",
+    "notFoundModal": {
+      "embedded": {
+        "text": "Visit the Projects site for cool project ideas"
+      },
+      "heading": "This project does not exist",
+      "newProject": "Start new code project",
+      "projectsSiteLinkText": "Explore Projects site",
+      "text": "You can start coding in a new project, or visit the Projects site for cool project ideas."
+    },
+    "untitled": "Untitled project"
+  },
+  "projectHeader": {
+    "subTitle": "Code Editor",
+    "title": "Your projects",
+    "text": "Select a project to continue coding, view, or edit it."
+  },
+  "projectList": {
+    "delete": "Delete",
+    "deleteLabel": "Delete project",
+    "empty": "No projects created yet",
+    "label": "Open project menu",
+    "loading": "Loading",
+    "loadingFailed": "Failed to load projects",
+    "newProject": "Create a new project",
+    "pagination": {
+      "first": "First page",
+      "last": "Last page",
+      "next": "Next page",
+      "previous": "Previous page",
+      "more": "Load more projects"
+    },
+    "rename": "Rename",
+    "renameLabel": "Rename project",
+    "renameProjectModal": {
+      "cancel": "Do not save",
+      "heading": "Rename project",
+      "inputLabel": "Change the name of your project",
+      "save": "Save"
+    },
+    "updated": "Edited",
+    "python_type": "Python",
+    "html_type": "HTML"
+  },
+  "projectTypes": {
+    "html": "HTML/CSS",
+    "python": "Python"
+  },
+  "runButton": {
+    "run": "Run",
+    "stop": "Stop",
+    "stopping": "Stopping..."
+  },
+  "saveStatus": {
+    "saving": "Saving",
+    "saved": "Saved"
+  },
+  "runners": {
+    "HtmlOutput": "HTML Output Preview"
+  },
+  "sidebar": {
+    "collapse": "Collapse sidebar",
+    "download": "Download project",
+    "expand": "Expand sidebar",
+    "file": "Project files",
+    "images": "Image gallery",
+    "settings": "Settings",
+    "projects": "Projects",
+    "information": "Information",
+    "information_text": "Our Code Editor is a tool to help young people learn to code. We have only included functions that are simple and safe to use. That's why, for example, links to other websites are not allowed.",
+    "instructions": "Project instructions",
+    "feedback": "Feedback",
+    "help": "Help",
+    "privacy": "Privacy",
+    "cookies": "Cookies",
+    "accessibility": "Accessibility",
+    "safeguarding": "Safeguarding",
+    "charity": "Raspberry Pi Foundation - UK registered charity 1129409",
+    "settingsMenu": {
+      "heading": "Settings",
+      "textSize": "Text size",
+      "theme": "Theme",
+      "textSizeOptions": {
+        "large": "Large",
+        "medium": "Medium",
+        "small": "Small"
+      },
+      "themeOptions": {
+        "dark": "Dark",
+        "light": "Light"
+      }
+    }
+  },
+  "webComponent": {
+    "loading": "Loading",
+    "failed": "Load failed"
+  },
+  "newInputPanelButton": {
+    "buttonText": "Add another panel"
+  },
+  "button": {
+    "yes": "Yes",
+    "no": "No"
+  },
+  "common": {
+    "or": "or"
+  }
+}
\ No newline at end of file

From 2442e8f25dcd42b0d0a80a35e6de15414e1db7db Mon Sep 17 00:00:00 2001
From: Raspberry Pi Translations Bot
 <36728703+raspberrypitranslationsbot@users.noreply.github.com>
Date: Tue, 10 Mar 2026 15:40:36 +0000
Subject: [PATCH 11/23] New translations en.json (Dutch)

---
 public/translations/nl-NL.json | 311 +++++++++++++++++++++++++++++++++
 1 file changed, 311 insertions(+)
 create mode 100644 public/translations/nl-NL.json

diff --git a/public/translations/nl-NL.json b/public/translations/nl-NL.json
new file mode 100644
index 000000000..b6c7a3b11
--- /dev/null
+++ b/public/translations/nl-NL.json
@@ -0,0 +1,311 @@
+{
+  "modal": {
+    "close": "Afsluiten",
+    "error": {
+      "error": "Fout",
+      "heading": "Er is een fout opgetreden",
+      "externalLink": {
+        "message": "Helaas zijn links naar externe websites niet beschikbaar in de editor."
+      }
+    }
+  },
+  "editorPanel": {
+    "ariaLabel": "tekstinvoer in de editor",
+    "characterLimitError": "Fout: Tekenlimiet bereikt",
+    "viewOnly": "Alleen bekijken",
+    "close": "afsluiten",
+    "characterLimitExplanation_one": "Bestanden in de editor zijn beperkt tot {{count}} teken",
+    "characterLimitExplanation_other": "Bestanden in de editor zijn beperkt tot {{count}} tekens"
+  },
+  "filePanel": {
+    "errors": {
+      "reservedFileName": "{{fileName}} is een gereserveerde bestandsnaam. Kies een andere naam.",
+      "containsSpaces": "Bestandsnamen mogen geen spaties bevatten.",
+      "generalError": "Fout",
+      "notUnique": "Bestandsnamen moeten uniek zijn.",
+      "or": "of",
+      "unsupportedExtension": "Bestandsnamen moeten eindigen op {{allowedExtensions}}."
+    },
+    "files": "Projectbestanden",
+    "images": "Afbeeldingengalerij",
+    "newFileButton": "Bestand toevoegen",
+    "newFileModal": {
+      "cancel": "Annuleren",
+      "heading": "Voeg een nieuw bestand toe aan je project",
+      "helpText": "Vergeet niet de bestandsextensie aan het einde van je bestandsnaam toe te voegen, bijvoorbeeld {{examples}}",
+      "helpTextExample": {
+        "html": "'bestand.html', 'bestand.css' of 'bestand.js'",
+        "python": "'bestand.py'"
+      },
+      "inputLabel": "Geef je bestand een naam",
+      "addFile": "Bestand toevoegen"
+    },
+    "renameFileModal": {
+      "cancel": "Annuleren",
+      "heading": "Bestand hernoemen",
+      "inputLabel": "Geef je bestand een naam",
+      "save": "Opslaan"
+    },
+    "fileMenu": {
+      "label": "Open het bestandsmenu",
+      "renameItem": "Bestand hernoemen"
+    }
+  },
+  "downloadPanel": {
+    "heading": "Opslaan en downloaden",
+    "logInTitle": "Log in om je voortgang op te slaan",
+    "logInHint": "Met een Raspberry Pi-account kun je je code en de voortgang van je projectstappen opslaan.",
+    "logInButton": "Log in om op te slaan",
+    "signUpButton": "Aanmelden",
+    "downloadHint": "Download je projectbestanden zodat je ze offline en in een andere code-editor kunt gebruiken.",
+    "downloadButton": "Project downloaden"
+  },
+  "footer": {
+    "accessibility": "Toegankelijkheid",
+    "charityNameAndNumber": "Raspberry Pi Foundation UK geregistreerde liefdadigheidsinstelling 1129409",
+    "cookies": "Cookies",
+    "privacy": "Privacy",
+    "safeguarding": "Veiligheidsbeleid"
+  },
+  "projectName": {
+    "label": "Projectnaam",
+    "newProject": "Nieuw project"
+  },
+  "header": {
+    "download": "Downloaden",
+    "downloadFileNameDefault": "mijn {{project_type}} project",
+    "editorLogoAltText": "Editor-logo",
+    "projects": "Jouw projecten",
+    "renameProject": "Projectnaam bewerken",
+    "renameSave": "Projectnaam opslaan",
+    "save": "Opslaan",
+    "loginToSave": "Log in om op te slaan",
+    "settings": "Instellingen"
+  },
+  "imagePanel": {
+    "gallery": "Afbeeldingengalerij"
+  },
+  "infoPanel": {
+    "info": "Informatie"
+  },
+  "instructionsPanel": {
+    "demoInstructions": {
+      "title": "Hoe instructies werken",
+      "enablingInstructions": "Instructies inschakelen",
+      "visible": "Alle tekst die hier wordt ingevoerd, is voor studenten zichtbaar in de zijbalk.",
+      "writingInstructions": "Instructies schrijven",
+      "markdown": "Schrijf je instructies met behulp van [Markdown](https://www.markdownguide.org/).",
+      "whatYouCanDo": "Wat je kunt doen",
+      "lists": "Lijsten",
+      "bulletPoints": "Opsommingstekens",
+      "numberedSteps": "Genummerde stappen"
+    },
+    "emptyState": {
+      "addInstructions": "Voeg instructies toe",
+      "edits": "Net als bij projectcode zien studenten geen wijzigingen die je aan de instructies aanbrengt nadat ze hun versie van het project hebben opgeslagen.",
+      "location": "Deze instructies worden aan studenten getoond in de zijbalk van hun project en zijn alleen-lezen.",
+      "markdown": "Instructies zijn geschreven in <0>markdown</0>.",
+      "purpose": "Je kunt instructies aan je project toevoegen om studenten te begeleiden."
+    },
+    "removeInstructions": "Instructies verwijderen",
+    "nextStep": "Volgende stap",
+    "previousStep": "Vorige stap",
+    "stepCounter": "{{currentStep}} of {{totalSteps}}",
+    "projectSteps": "Projectinstructies",
+    "edit": "Bewerken",
+    "view": "Weergave",
+    "removeInstructionsModal": {
+      "removeInstructions": "Instructies verwijderen",
+      "close": "Afsluiten",
+      "heading": "Projectinstructies verwijderen?",
+      "removeInstuctionsWarning": "Je staat op het punt de instructies uit het project te verwijderen.",
+      "resultRemovingInstructions": "Als gevolg van het verwijderen van deze instructies:",
+      "instructionsWillBeDeleted": "Wordt de inhoud van de instructies verwijderd.",
+      "studentsWorkingProjectNotRecievedInstructions": "Ontvangen studenten die aan dit project beginnen, geen instructies.",
+      "studentsStartedWillSeeInstructions": "Kunnen studenten die al aan dit project zijn begonnen, de instructies nog steeds zien zoals ze waren toen ze begonnen."
+    }
+  },
+  "projectsPanel": {
+    "projects": "Projecten",
+    "yourProjectsButton": "Ga naar je projecten",
+    "projectTypeLabel": "Projecttype"
+  },
+  "settingsPanel": {
+    "info": "Instellingen"
+  },
+  "input": {
+    "comment": {
+      "py5": "Py5: geïmporteerde modus"
+    }
+  },
+  "mobile": {
+    "code": "Code",
+    "menu": "Menu",
+    "output": "Uitvoer",
+    "preview": "Voorbeeld",
+    "steps": "Stappen"
+  },
+  "modals": {
+    "close": "Afsluiten"
+  },
+  "notifications": {
+    "close": "afsluiten",
+    "loginPrompt": "Om dit project op te slaan en er later weer toegang toe te krijgen, vergeet niet in te loggen of je aan te melden!",
+    "projectRemixed": "Je geremixte project is opgeslagen",
+    "projectRenamed": "Je hebt je project een andere naam gegeven.",
+    "projectSaved": "Je project is opgeslagen",
+    "savePrompt": "Sla dit project op om het later te kunnen terugvinden onder \"Jouw projecten\"."
+  },
+  "output": {
+    "errors": {
+      "interrupted": "Uitvoering onderbroken"
+    },
+    "newTab": "Voorbeeldweergave in een nieuw tabblad",
+    "preview": "voorbeeld",
+    "senseHat": {
+      "controls": {
+        "colour": "kleur",
+        "humidity": "vochtigheid",
+        "motion": "beweging",
+        "motionSensorOptions": {
+          "no": "Nee",
+          "yes": "Ja"
+        },
+        "name": "Bedieningspaneel van het ruimtestation",
+        "pressure": "druk",
+        "temperature": "temperatuur",
+        "timer": "timer"
+      },
+      "model": {
+        "pitch": "richting",
+        "roll": "rollen",
+        "yaw": "koers"
+      }
+    },
+    "textOutput": "Tekstuitvoer",
+    "visualOutput": "Visuele uitvoer"
+  },
+  "outputViewToggle": {
+    "buttonTabLabel": "Tabbladweergave",
+    "buttonTabTitle": "Tabbladweergave",
+    "buttonSplitLabel": "Gesplitste weergave",
+    "buttonSplitTitle": "Gesplitste weergave"
+  },
+  "project": {
+    "accessDeniedWithAuthModal": {
+      "embedded": {
+        "text": "Bezoek de projectenpagina voor leuke projectideeën"
+      },
+      "heading": "Je hebt geen toegang tot dit project",
+      "newProject": "Maak een nieuw codeerproject",
+      "projectsSiteLinkText": "Verken de projectenwebsite",
+      "text": "Bezoek de projectenwebsiye voor leuke projectideeën of begin direct met programmeren in een nieuw project."
+    },
+    "loading": "Aan het laden",
+    "notFoundModal": {
+      "embedded": {
+        "text": "Bezoek de projectenwebsite voor leuke projectideeën"
+      },
+      "heading": "Dit project bestaat niet",
+      "newProject": "Start een nieuw codeerproject",
+      "projectsSiteLinkText": "Verken de projectenwebsite",
+      "text": "Je kunt beginnen met programmeren in een nieuw project, of de projectenwebsite bezoeken voor leuke projectideeën."
+    },
+    "untitled": "Naamloos project"
+  },
+  "projectHeader": {
+    "subTitle": "Code Editor",
+    "title": "Jouw projecten",
+    "text": "Selecteer een project om verder te coderen, te bekijken of te bewerken."
+  },
+  "projectList": {
+    "delete": "Verwijderen",
+    "deleteLabel": "Project verwijderen",
+    "empty": "Er zijn nog geen projecten aangemaakt",
+    "label": "Projectmenu openen",
+    "loading": "Aan het laden",
+    "loadingFailed": "Projecten laden mislukt",
+    "newProject": "Maak een nieuw project",
+    "pagination": {
+      "first": "Eerste pagina",
+      "last": "Laatste pagina",
+      "next": "Volgende pagina",
+      "previous": "Vorige pagina",
+      "more": "Meer projecten laden"
+    },
+    "rename": "Hernoemen",
+    "renameLabel": "Project hernoemen",
+    "renameProjectModal": {
+      "cancel": "Niet opslaan",
+      "heading": "Project hernoemen",
+      "inputLabel": "Wijzig de naam van jouw project",
+      "save": "Opslaan"
+    },
+    "updated": "Bewerkt",
+    "python_type": "Python",
+    "html_type": "HTML"
+  },
+  "projectTypes": {
+    "html": "HTML/CSS",
+    "python": "Python"
+  },
+  "runButton": {
+    "run": "Uitvoeren",
+    "stop": "Stop",
+    "stopping": "Aan het stoppen..."
+  },
+  "saveStatus": {
+    "saving": "Aan het opslaan",
+    "saved": "Opgeslagen"
+  },
+  "runners": {
+    "HtmlOutput": "HTML-uitvoervoorbeeld"
+  },
+  "sidebar": {
+    "collapse": "Zijbalk inklappen",
+    "download": "Project downloaden",
+    "expand": "Zijbalk uitklappen",
+    "file": "Projectbestanden",
+    "images": "Afbeeldingengalerij",
+    "settings": "Instellingen",
+    "projects": "Projecten",
+    "information": "Informatie",
+    "information_text": "Onze code-editor is een hulpmiddel om jongeren te helpen leren programmeren. We hebben alleen functies opgenomen die eenvoudig en veilig te gebruiken zijn. Daarom zijn links naar andere websites bijvoorbeeld niet toegestaan.",
+    "instructions": "Projectinstructies",
+    "feedback": "Terugkoppeling",
+    "help": "Hulp",
+    "privacy": "Privacy",
+    "cookies": "Cookies",
+    "accessibility": "Toegankelijkheid",
+    "safeguarding": "Veiligheidsbeleid",
+    "charity": "Raspberry Pi Foundation UK geregistreerde liefdadigheidsinstelling 1129409",
+    "settingsMenu": {
+      "heading": "Instellingen",
+      "textSize": "Tekstgrootte",
+      "theme": "Thema",
+      "textSizeOptions": {
+        "large": "Groot",
+        "medium": "Medium",
+        "small": "Klein"
+      },
+      "themeOptions": {
+        "dark": "Donker",
+        "light": "Licht"
+      }
+    }
+  },
+  "webComponent": {
+    "loading": "Aan het laden",
+    "failed": "Laden mislukt"
+  },
+  "newInputPanelButton": {
+    "buttonText": "Voeg nog een paneel toe"
+  },
+  "button": {
+    "yes": "Ja",
+    "no": "Nee"
+  },
+  "common": {
+    "or": "of"
+  }
+}
\ No newline at end of file

From 01621f8066be1fa07197dbd81b86899c06dce924 Mon Sep 17 00:00:00 2001
From: Raspberry Pi Translations Bot
 <36728703+raspberrypitranslationsbot@users.noreply.github.com>
Date: Tue, 10 Mar 2026 15:40:37 +0000
Subject: [PATCH 12/23] New translations en.json (Ukrainian)

---
 public/translations/uk-UA.json | 313 +++++++++++++++++++++++++++++++++
 1 file changed, 313 insertions(+)
 create mode 100644 public/translations/uk-UA.json

diff --git a/public/translations/uk-UA.json b/public/translations/uk-UA.json
new file mode 100644
index 000000000..1c594b826
--- /dev/null
+++ b/public/translations/uk-UA.json
@@ -0,0 +1,313 @@
+{
+  "modal": {
+    "close": "Закрити",
+    "error": {
+      "error": "Помилка",
+      "heading": "Сталася помилка",
+      "externalLink": {
+        "message": "На жаль, посилання на зовнішні сайти недоступні в Редакторі."
+      }
+    }
+  },
+  "editorPanel": {
+    "ariaLabel": "поле для введення тексту",
+    "characterLimitError": "Помилка: досягнуто ліміту символів",
+    "viewOnly": "Лише перегляд",
+    "close": "закрити",
+    "characterLimitExplanation_one": "Файли в редакторі обмежені до {{count}} символа",
+    "characterLimitExplanation_few": "Файли в редакторі обмежені до {{count}} символи",
+    "characterLimitExplanation_many": "Файли в редакторі обмежені до {{count}} символів",
+    "characterLimitExplanation_other": "Файли в редакторі обмежені до {{count}} символів"
+  },
+  "filePanel": {
+    "errors": {
+      "reservedFileName": "{{fileName}} є зарезервованою назвою файлу. Будь ласка, виберіть іншу назву.",
+      "containsSpaces": "Імена файлів не повинні містити пробілів.",
+      "generalError": "Помилка",
+      "notUnique": "Імена файлів мають бути унікальними.",
+      "or": "або",
+      "unsupportedExtension": "Імена файлів мають закінчуватися на {{allowedExtensions}}."
+    },
+    "files": "Файли проєкту",
+    "images": "Галерея зображень",
+    "newFileButton": "Додати файл",
+    "newFileModal": {
+      "cancel": "Скасувати",
+      "heading": "Додайте новий файл до свого проєкту",
+      "helpText": "Не забудьте додати розширення файлу наприкінці назви, наприклад, {{examples}}",
+      "helpTextExample": {
+        "html": "'file.html', 'file.css' або 'file.js'",
+        "python": "'file.py'"
+      },
+      "inputLabel": "Назвіть свій файл",
+      "addFile": "Додати файл"
+    },
+    "renameFileModal": {
+      "cancel": "Скасувати",
+      "heading": "Перейменування файлу",
+      "inputLabel": "Назвіть свій файл",
+      "save": "Зберегти"
+    },
+    "fileMenu": {
+      "label": "Відкрити меню файлу",
+      "renameItem": "Перейменувати файл"
+    }
+  },
+  "downloadPanel": {
+    "heading": "Зберегти й завантажити",
+    "logInTitle": "Увійдіть, щоб зберегти свій прогрес",
+    "logInHint": "З обліковим записом Raspberry Pi ви можете зберігати свій код і етапи виконання проєкту.",
+    "logInButton": "Увійдіть, щоб зберегти",
+    "signUpButton": "Зареєструватися",
+    "downloadHint": "Завантажте свої файли проєкту, щоб їх можна було використовувати офлайн або в іншому редакторі коду.",
+    "downloadButton": "Завантажити проєкт"
+  },
+  "footer": {
+    "accessibility": "Доступність",
+    "charityNameAndNumber": "Raspberry Pi Foundation — благодійна організація, зареєстрована у Великій Британії за номером 1129409",
+    "cookies": "Файли cookie",
+    "privacy": "Конфіденційність",
+    "safeguarding": "Заходи безпеки"
+  },
+  "projectName": {
+    "label": "Назва проєкту",
+    "newProject": "Новий проєкт"
+  },
+  "header": {
+    "download": "Завантажити",
+    "downloadFileNameDefault": "мій проєкт {{project_type}}",
+    "editorLogoAltText": "Логотип Редактора",
+    "projects": "Ваші проєкти",
+    "renameProject": "Редагувати назву проєкту",
+    "renameSave": "Зберегти назву проєкту",
+    "save": "Зберегти",
+    "loginToSave": "Увійдіть, щоб зберегти",
+    "settings": "Налаштування"
+  },
+  "imagePanel": {
+    "gallery": "Галерея зображень"
+  },
+  "infoPanel": {
+    "info": "Інформація"
+  },
+  "instructionsPanel": {
+    "demoInstructions": {
+      "title": "Як працюють інструкції",
+      "enablingInstructions": "Увімкнення інструкцій",
+      "visible": "Учнівство бачитиме у бічній панелі будь-який написаний тут текст.",
+      "writingInstructions": "Написання інструкцій",
+      "markdown": "Використовуйте [Markdown](https://www.markdownguide.org/) для інструкцій.",
+      "whatYouCanDo": "Що ви можете робити",
+      "lists": "Списки",
+      "bulletPoints": "Марковані списки",
+      "numberedSteps": "Нумеровані кроки"
+    },
+    "emptyState": {
+      "addInstructions": "Додати інструкції",
+      "edits": "Як і код проєкту, учні не побачать ніяких змін, які ти внесеш до інструкцій після того, як вони збережуть свою версію проєкту.",
+      "location": "Ці інструкції буде показано учням у бічній панелі їхнього проєкту лише для перегляду.",
+      "markdown": "Інструкції пишуться у <0>markdown</0>.",
+      "purpose": "Інструкції можна додати до свого проєкту, щоб допомогти студентам."
+    },
+    "removeInstructions": "Видалити інструкції",
+    "nextStep": "Наступний крок",
+    "previousStep": "Попередній крок",
+    "stepCounter": "{{currentStep}} of {{totalSteps}}",
+    "projectSteps": "Інструкції до проєкту",
+    "edit": "Редагувати",
+    "view": "Переглянути",
+    "removeInstructionsModal": {
+      "removeInstructions": "Видалити інструкції",
+      "close": "Закрити",
+      "heading": "Видалити інструкції до проєкту?",
+      "removeInstuctionsWarning": "Ви збираєтеся видалити інструкції з проєкту.",
+      "resultRemovingInstructions": "Якщо ви видалите інструкції:",
+      "instructionsWillBeDeleted": "Зміст інструкцій буде видалено.",
+      "studentsWorkingProjectNotRecievedInstructions": "Учні та учениці, що почнуть працювати з цим проєктом, не отримають інструкцій.",
+      "studentsStartedWillSeeInstructions": "Учні й учениці, що вже почали працювати з цим проєктом, все одно зможуть бачити початкові інструкції."
+    }
+  },
+  "projectsPanel": {
+    "projects": "Проєкти",
+    "yourProjectsButton": "Перейти до твоїх проєктів",
+    "projectTypeLabel": "Тип проєкту"
+  },
+  "settingsPanel": {
+    "info": "Налаштування"
+  },
+  "input": {
+    "comment": {
+      "py5": "Py5: імпортований режим"
+    }
+  },
+  "mobile": {
+    "code": "Код",
+    "menu": "Меню",
+    "output": "Вивід",
+    "preview": "Попередній перегляд",
+    "steps": "Кроки"
+  },
+  "modals": {
+    "close": "Закрити"
+  },
+  "notifications": {
+    "close": "закрити",
+    "loginPrompt": "Щоб зберегти цей проєкт і мати доступ до нього пізніше, не забудь увійти або зареєструватися!",
+    "projectRemixed": "Ваш реміксований проєкт збережено",
+    "projectRenamed": "Ви перейменували свій проєкт.",
+    "projectSaved": "Ваш проєкт збережено",
+    "savePrompt": "Збережіть цей проєкт, і він буде доступний у «Ваших проєктах»."
+  },
+  "output": {
+    "errors": {
+      "interrupted": "Виконання перервано"
+    },
+    "newTab": "Попередньо переглянути в новій вкладці",
+    "preview": "перегляд",
+    "senseHat": {
+      "controls": {
+        "colour": "колір",
+        "humidity": "вологість",
+        "motion": "рух",
+        "motionSensorOptions": {
+          "no": "Ні",
+          "yes": "Так"
+        },
+        "name": "Панель керування космічною станцією",
+        "pressure": "тиск",
+        "temperature": "температура",
+        "timer": "таймер"
+      },
+      "model": {
+        "pitch": "тангаж",
+        "roll": "крен",
+        "yaw": "рискання"
+      }
+    },
+    "textOutput": "Вивід тексту",
+    "visualOutput": "Вивід зображення"
+  },
+  "outputViewToggle": {
+    "buttonTabLabel": "Перегляд в окремих вкладках",
+    "buttonTabTitle": "Перегляд в окремих вкладках",
+    "buttonSplitLabel": "Перегляд в одній вкладці",
+    "buttonSplitTitle": "Перегляд в одній вкладці"
+  },
+  "project": {
+    "accessDeniedWithAuthModal": {
+      "embedded": {
+        "text": "Відвідайте наш сайт із проєктами для натхнення"
+      },
+      "heading": "Ви не маєте доступу до цього проєкту",
+      "newProject": "Створити новий проєкт з кодування",
+      "projectsSiteLinkText": "Переглянути сайт із проєктами",
+      "text": "Відвідайте наш сайт із проєктами для натхнення або ж почніть кодувати у новому проєкті."
+    },
+    "loading": "Завантажуємо",
+    "notFoundModal": {
+      "embedded": {
+        "text": "Відвідайте наш сайт із проєктами для натхнення"
+      },
+      "heading": "Цього проєкту не існує",
+      "newProject": "Почати новий проєкт із кодування",
+      "projectsSiteLinkText": "Переглянути сайт із проєктами",
+      "text": "Ви можете почати кодувати у новому проєкті або ж відвідати сайт із проєктами для натхнення."
+    },
+    "untitled": "Проєкт без назви"
+  },
+  "projectHeader": {
+    "subTitle": "Code Editor",
+    "title": "Ваші проєкти",
+    "text": "Виберіть проєкт, щоби кодувати далі, переглянути або редагувати його."
+  },
+  "projectList": {
+    "delete": "Видалити",
+    "deleteLabel": "Видалити проєкт",
+    "empty": "Ще не створено жодного проєкту",
+    "label": "Відкрити меню проєкту",
+    "loading": "Завантажуємо",
+    "loadingFailed": "Не вдалося завантажити проєкти",
+    "newProject": "Створити новий проєкт",
+    "pagination": {
+      "first": "Перша сторінка",
+      "last": "Остання сторінка",
+      "next": "Наступна сторінка",
+      "previous": "Попередня сторінка",
+      "more": "Завантажити більше проєктів"
+    },
+    "rename": "Перейменувати",
+    "renameLabel": "Перейменувати проєкт",
+    "renameProjectModal": {
+      "cancel": "Не зберігати",
+      "heading": "Перейменування проєкту",
+      "inputLabel": "Змініть назву свого проєкту",
+      "save": "Зберегти"
+    },
+    "updated": "Редаговано",
+    "python_type": "Python",
+    "html_type": "HTML"
+  },
+  "projectTypes": {
+    "html": "HTML / CSS",
+    "python": "Python"
+  },
+  "runButton": {
+    "run": "Запустити",
+    "stop": "Зупинити",
+    "stopping": "Зупиняємо..."
+  },
+  "saveStatus": {
+    "saving": "Зберігаємо",
+    "saved": "Збережено"
+  },
+  "runners": {
+    "HtmlOutput": "Попередній перегляд виводу HTML"
+  },
+  "sidebar": {
+    "collapse": "Згорнути бічну панель",
+    "download": "Завантажити проєкт",
+    "expand": "Розгорнути бічну панель",
+    "file": "Файли проєкту",
+    "images": "Галерея зображень",
+    "settings": "Налаштування",
+    "projects": "Проєкти",
+    "information": "Інформація",
+    "information_text": "Наш Code Editor — це інструмент, який допомагає молоді навчитися програмуванню. Ми додали лише ті функції, які прості та безпечні для використання. Тому, наприклад, посилання на інші сайти не дозволені.",
+    "instructions": "Інструкції до проєкту",
+    "feedback": "Зворотний зв’язок",
+    "help": "Довідка",
+    "privacy": "Конфіденційність",
+    "cookies": "Файли cookie",
+    "accessibility": "Доступність",
+    "safeguarding": "Заходи безпеки",
+    "charity": "Raspberry Pi Foundation — благодійна організація, зареєстрована у Великій Британії за номером 1129409",
+    "settingsMenu": {
+      "heading": "Налаштування",
+      "textSize": "Розмір тексту",
+      "theme": "Тема",
+      "textSizeOptions": {
+        "large": "Великий",
+        "medium": "Середній",
+        "small": "Малий"
+      },
+      "themeOptions": {
+        "dark": "Темна",
+        "light": "Світла"
+      }
+    }
+  },
+  "webComponent": {
+    "loading": "Завантажуємо",
+    "failed": "Не вдалося завантажити"
+  },
+  "newInputPanelButton": {
+    "buttonText": "Додати ще одну панель"
+  },
+  "button": {
+    "yes": "Так",
+    "no": "Ні"
+  },
+  "common": {
+    "or": "або"
+  }
+}
\ No newline at end of file

From 7d6152a2b43aed22cce837f9ade26ffa938609a6 Mon Sep 17 00:00:00 2001
From: Raspberry Pi Translations Bot
 <36728703+raspberrypitranslationsbot@users.noreply.github.com>
Date: Tue, 10 Mar 2026 15:40:39 +0000
Subject: [PATCH 13/23] New translations en.json (English, United States)

---
 public/translations/en-US.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/translations/en-US.json b/public/translations/en-US.json
index 38e23bfab..199108f8c 100644
--- a/public/translations/en-US.json
+++ b/public/translations/en-US.json
@@ -110,6 +110,7 @@
     "removeInstructions": "Remove instructions",
     "nextStep": "Next step",
     "previousStep": "Previous step",
+    "stepCounter": "{{currentStep}} of {{totalSteps}}",
     "projectSteps": "Project instructions",
     "edit": "Edit",
     "view": "View",

From fa4d3750d92c3b7087dbc8c35643ff8dd15f2a5b Mon Sep 17 00:00:00 2001
From: Raspberry Pi Translations Bot
 <36728703+raspberrypitranslationsbot@users.noreply.github.com>
Date: Tue, 10 Mar 2026 15:40:40 +0000
Subject: [PATCH 14/23] New translations en.json (Spanish, Latin America)

---
 public/translations/es-LA.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/translations/es-LA.json b/public/translations/es-LA.json
index ff0c60fdf..976bb5e3b 100644
--- a/public/translations/es-LA.json
+++ b/public/translations/es-LA.json
@@ -110,6 +110,7 @@
     "removeInstructions": "Eliminar las instrucciones",
     "nextStep": "Siguiente paso",
     "previousStep": "Paso anterior",
+    "stepCounter": "{{currentStep}} of {{totalSteps}}",
     "projectSteps": "Instrucciones del proyecto",
     "edit": "Editar",
     "view": "Ver",

From 49638194a9914bf829ba03e0fef3ae8245e93ac0 Mon Sep 17 00:00:00 2001
From: HJ <cocomarine@users.noreply.github.com>
Date: Wed, 11 Mar 2026 08:12:22 +0000
Subject: [PATCH 15/23] Track code changes (#1368)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Story:
https://github.com/RaspberryPiFoundation/digital-code-club/issues/1056

### Description
Now that caching is effectively disabled (#1342), we want to warn the
users about losing their code changes upon locale change.
In CCP, we will be using this feature to trigger a modal to warn users
and also allow them to confirm or cancel the locale change.

### Approaches that didn’t work
- Custom event similar to `editor-codeChanged`: The host couldn't tell
“user edited” from “project just reloaded,” so it’s not suitable for the
purposes of detecting unsaved code changes.
- Redux boolean field and getter: A single flag set to true in
updateProjectComponent and false in setProject / loadProjectFulfilled.
This didn’t work reliably: after a locale change, it didn't reset to
false and stayed true. There seems to be some sort of sync / timing
issue.

### Approach that worked
- Baseline snapshot of initial load and getter: Redux stores
initialComponents (snapshot of { name, extension, content } per
component), updated on load/set/save/remix. The web component getter
compares current components to this snapshot. The host calls the getter
when needed (e.g. before changing locale).

### Changes added
- Added `initialComponents` to initial states and saved the initial
components on project load
- Did the same for `editor/saveProject/fulfilled` and
`editor/remixProject/fulfilled` handlers to update the baseline for
detecting code changes.
- Added `codeChangedSinceInitialLoad` getter that compares any
difference in file count, name, extension, or content between initial
and current projects

### Can we store the initial project content as hash?
- We did consider that and decided not to. For hashing the contents, we
need to either install a new dependency like js-md5 (possible conflict
with the transitive dependency present in `yarn.lock` pulled in by
scratch) or add a custom checksum logic, and we felt the added
complexity is not necessary as the comparison is only done when we call
the getter.
---
 README.md                                     |   1 +
 src/redux/EditorSlice.js                      |  18 ++
 src/redux/EditorSlice.test.js                 | 171 ++++++++++++++++++
 src/redux/reducers/loadProjectReducers.js     |   7 +
 .../reducers/loadProjectReducers.test.js      |  26 ++-
 src/web-component.js                          |  18 ++
 6 files changed, 240 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 643eb941c..f624ab05e 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,7 @@ The host page is able to communicate with the web component via custom methods p
 - `runCode`: triggers a code run in the editor
 - `rerunCode`: stops the current code run and starts another code run in the editor
 - `stopCode`: stops the current code run
+- `codeChangedSinceInitialLoad`: getter that returns whether the current project files differ from the initial load by file count, name, extension, or content.
 
 This allows the host page to query the current code in the editor and to control code runs from outside the web component, for example.
 
diff --git a/src/redux/EditorSlice.js b/src/redux/EditorSlice.js
index 738635d1e..c4c1a3190 100644
--- a/src/redux/EditorSlice.js
+++ b/src/redux/EditorSlice.js
@@ -122,6 +122,7 @@ export const editorInitialState = {
   modals: {},
   errorDetails: {},
   runnerBeingLoaded: null | "pyodide" | "skulpt",
+  initialComponents: [],
 };
 
 export const EditorSlice = createSlice({
@@ -201,6 +202,11 @@ export const EditorSlice = createSlice({
     },
     setProject: (state, action) => {
       state.project = action.payload;
+      state.initialComponents = (action.payload.components || []).map((c) => ({
+        name: c.name,
+        extension: c.extension,
+        content: c.content,
+      }));
       if (!state.project.image_list) {
         state.project.image_list = [];
       }
@@ -379,6 +385,11 @@ export const EditorSlice = createSlice({
         state.project = action.payload.project;
         state.loading = "idle";
       }
+      state.initialComponents = (state.project.components || []).map((c) => ({
+        name: c.name,
+        extension: c.extension,
+        content: c.content,
+      }));
     });
     builder.addCase("editor/saveProject/rejected", (state) => {
       state.saving = "failed";
@@ -393,6 +404,13 @@ export const EditorSlice = createSlice({
       state.saving = "success";
       state.project = action.payload.project;
       state.loading = "idle";
+      state.initialComponents = (action.payload.project.components || []).map(
+        (c) => ({
+          name: c.name,
+          extension: c.extension,
+          content: c.content,
+        }),
+      );
     });
     builder.addCase("editor/loadRemixProject/pending", loadProjectPending);
     builder.addCase("editor/loadRemixProject/fulfilled", (state, action) => {
diff --git a/src/redux/EditorSlice.test.js b/src/redux/EditorSlice.test.js
index 3aff3b023..f2b890ccc 100644
--- a/src/redux/EditorSlice.test.js
+++ b/src/redux/EditorSlice.test.js
@@ -14,6 +14,7 @@ import reducer, {
   addProjectComponent,
   updateProjectComponent,
   setCascadeUpdate,
+  setProject,
 } from "./EditorSlice";
 
 const mockCreateRemix = jest.fn();
@@ -296,6 +297,13 @@ describe("When project has no identifier", () => {
       saving: "success",
       lastSavedTime: 1669808953,
       loading: "idle",
+      initialComponents: [
+        {
+          name: "main",
+          extension: "py",
+          content: "# hello",
+        },
+      ],
     };
 
     expect(
@@ -386,6 +394,13 @@ describe("When project has an identifier", () => {
     const expectedState = {
       project: project,
       saving: "success",
+      initialComponents: [
+        {
+          name: "main",
+          extension: "py",
+          content: "# hello",
+        },
+      ],
     };
 
     expect(
@@ -422,6 +437,13 @@ describe("When project has an identifier", () => {
       saving: "success",
       loading: "idle",
       lastSaveAutosave: false,
+      initialComponents: [
+        {
+          name: "main",
+          extension: "py",
+          content: "# hello",
+        },
+      ],
     };
 
     expect(
@@ -692,3 +714,152 @@ describe("Loading a project", () => {
     });
   });
 });
+
+describe("initialComponents snapshot", () => {
+  const project = {
+    project_type: "python",
+    components: [{ name: "main", extension: "py", content: "print('hello')" }],
+  };
+
+  test("setProject captures the snapshot", () => {
+    const state = reducer(undefined, setProject(project));
+    expect(state.initialComponents).toEqual([
+      {
+        name: "main",
+        extension: "py",
+        content: "print('hello')",
+      },
+    ]);
+  });
+
+  test("setProject captures multiple components", () => {
+    const multiComponentProject = {
+      project_type: "python",
+      components: [
+        { name: "main", extension: "py", content: "# first" },
+        { name: "utils", extension: "py", content: "# second" },
+      ],
+    };
+    const state = reducer(undefined, setProject(multiComponentProject));
+    expect(state.initialComponents).toEqual([
+      {
+        name: "main",
+        extension: "py",
+        content: "# first",
+      },
+      {
+        name: "utils",
+        extension: "py",
+        content: "# second",
+      },
+    ]);
+  });
+
+  test("updateProjectComponent does not change the initial snapshot", () => {
+    const state = reducer(undefined, setProject(project));
+    const edited = reducer(
+      state,
+      updateProjectComponent({
+        name: "main",
+        extension: "py",
+        content: "print('edited')",
+        cascadeUpdate: false,
+      }),
+    );
+    expect(edited.initialComponents).toEqual([
+      {
+        name: "main",
+        extension: "py",
+        content: "print('hello')",
+      },
+    ]);
+    expect(edited.project.components[0].content).toBe("print('edited')");
+  });
+
+  test("setProject resets snapshot when loading a new project", () => {
+    let state = reducer(undefined, setProject(project));
+    state = reducer(
+      state,
+      updateProjectComponent({
+        name: "main",
+        extension: "py",
+        content: "print('edited')",
+        cascadeUpdate: false,
+      }),
+    );
+
+    const newProject = {
+      project_type: "python",
+      components: [
+        { name: "main", extension: "py", content: "print('new project')" },
+      ],
+    };
+    state = reducer(state, setProject(newProject));
+    expect(state.initialComponents).toEqual([
+      {
+        name: "main",
+        extension: "py",
+        content: "print('new project')",
+      },
+    ]);
+  });
+
+  test("loadProject/fulfilled captures initial components", () => {
+    const loadThunk = syncProject("load");
+    const pendingState = reducer(
+      undefined,
+      loadThunk.pending("req1", {}, undefined, { requestId: "req1" }),
+    );
+    const fulfilledAction = loadThunk.fulfilled({ project }, "req1");
+    const fulfilledState = reducer(
+      { ...pendingState, loading: "pending", currentLoadingRequestId: "req1" },
+      fulfilledAction,
+    );
+    expect(fulfilledState.initialComponents).toEqual([
+      {
+        name: "main",
+        extension: "py",
+        content: "print('hello')",
+      },
+    ]);
+  });
+
+  test("saveProject/fulfilled updates initialComponents", () => {
+    const saveThunk = syncProject("save");
+    const stateWithProject = reducer(undefined, setProject(project));
+    const stateAfterSave = reducer(
+      stateWithProject,
+      saveThunk.fulfilled({ project }),
+    );
+    expect(stateAfterSave.initialComponents).toEqual([
+      {
+        name: "main",
+        extension: "py",
+        content: "print('hello')",
+      },
+    ]);
+  });
+
+  test("remixProject/fulfilled updates initialComponents", () => {
+    const remixThunk = syncProject("remix");
+    const remixedProject = {
+      ...project,
+      identifier: "remixed-id",
+      components: [
+        { name: "main", extension: "py", content: "print('remixed')" },
+      ],
+    };
+    const stateWithProject = reducer(undefined, setProject(project));
+    const stateAfterRemix = reducer(
+      stateWithProject,
+      remixThunk.fulfilled({ project: remixedProject }),
+    );
+    expect(stateAfterRemix.initialComponents).toEqual([
+      {
+        name: "main",
+        extension: "py",
+        content: "print('remixed')",
+      },
+    ]);
+  });
+});
diff --git a/src/redux/reducers/loadProjectReducers.js b/src/redux/reducers/loadProjectReducers.js
index 29a0553fb..f53613991 100644
--- a/src/redux/reducers/loadProjectReducers.js
+++ b/src/redux/reducers/loadProjectReducers.js
@@ -12,6 +12,13 @@ const loadProjectFulfilled = (state, action) => {
     state.currentLoadingRequestId === action.meta.requestId
   ) {
     state.project = action.payload.project;
+    state.initialComponents = (action.payload.project.components || []).map(
+      (c) => ({
+        name: c.name,
+        extension: c.extension,
+        content: c.content,
+      }),
+    );
     state.loading = "success";
     state.justLoaded = true;
     state.saving = "idle";
diff --git a/src/redux/reducers/loadProjectReducers.test.js b/src/redux/reducers/loadProjectReducers.test.js
index f024e3d73..128ebe77b 100644
--- a/src/redux/reducers/loadProjectReducers.test.js
+++ b/src/redux/reducers/loadProjectReducers.test.js
@@ -54,6 +54,7 @@ const requestingAProject = function (project, projectFile) {
       openFiles: [[]],
       loading: "pending",
       currentLoadingRequestId: "my_request_id",
+      initialComponents: [],
     };
     const expectedState = {
       openFiles: [[projectFile]],
@@ -63,6 +64,7 @@ const requestingAProject = function (project, projectFile) {
       saving: "idle",
       project: project,
       currentLoadingRequestId: undefined,
+      initialComponents: project.components,
     };
     expect(reducer(initialState, loadFulfilledAction)).toEqual(expectedState);
   });
@@ -122,7 +124,7 @@ describe("When requesting a python project", () => {
       {
         name: "main",
         extension: "py",
-        content: "# hello",
+        content: "# hello world",
       },
     ],
     image_list: [],
@@ -147,6 +149,28 @@ describe("When requesting a HTML project", () => {
   requestingAProject(project, "index.html");
 });
 
+describe("When requesting a project with multiple components", () => {
+  const project = {
+    name: "hello world with multiple components",
+    project_type: "python",
+    identifier: "my-project-identifier",
+    components: [
+      {
+        name: "main",
+        extension: "py",
+        content: "# hello world",
+      },
+      {
+        name: "utils",
+        extension: "py",
+        content: "# some utils",
+      },
+    ],
+    image_list: [],
+  };
+  requestingAProject(project, "main.py");
+});
+
 describe("EditorSliceReducers::loadProjectRejectedReducer", () => {
   let action;
   let initialState;
diff --git a/src/web-component.js b/src/web-component.js
index f29a61480..2ac855093 100644
--- a/src/web-component.js
+++ b/src/web-component.js
@@ -127,6 +127,24 @@ class WebComponent extends HTMLElement {
     return state.editor.project.components[0]?.content;
   }
 
+  get codeChangedSinceInitialLoad() {
+    const { project, initialComponents } = store.getState().editor;
+    const current = project?.components;
+
+    if (!current || initialComponents.length === 0) return false;
+
+    // If the number of components is different, consider it changed
+    if (current.length !== initialComponents.length) return true;
+
+    // If component file contents, names or extensions are different, consider it changed
+    return current.some(
+      (component, i) =>
+        component.content !== initialComponents[i].content ||
+        component.name !== initialComponents[i].name ||
+        component.extension !== initialComponents[i].extension,
+    );
+  }
+
   get menuItems() {
     return this.componentProperties.menuItems;
   }

From a6f12d33c29ac339265638b2d1c8c865ee758463 Mon Sep 17 00:00:00 2001
From: Ram Modhvadia <ram.modhvadia@raspberrypi.org>
Date: Wed, 11 Mar 2026 09:12:34 +0000
Subject: [PATCH 16/23] set task block background colour to white in
 instructions (#1370)

Adds styling for task block body (previously didn't exist) and sets
background colour to rpf-white to match the instruction panel background
---
 src/assets/stylesheets/Instructions.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index 5c84d2151..75fc67f4d 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -255,6 +255,9 @@
     &__checkbox {
       display: none;
     }
+    &__body {
+      background-color: var(--sidebar-panel-background);
+    }
   }
 
   .c-project-callout {

From 046c32fe57081425d7d88ab460df1e50d39f77b5 Mon Sep 17 00:00:00 2001
From: "A.Campo" <261805581+abcampo-iry@users.noreply.github.com>
Date: Thu, 12 Mar 2026 11:19:05 +0100
Subject: [PATCH 17/23] Manual Save for Logged-in Scratch Users (FE) (#1377)

Still items missing due to BE:

[x] The "Save" button is only visible to users who are logged into a
Code Editor for Education account.
[ ] ~When the user clicks "Save," the current state of the Scratch
project (including all blocks, sprites, and assets) is stored against
their user account in the database.~ This will move to a different PR
[x] When the user clicks "Save" the FE makes a request as if it was
saving the scratch project (ready to connect to the BE when available)
[x] When you click it, it says 'Saving...'
[x] When the save is confirmed it says 'Saved'
[x] ~The save action overwrites the previous version of that specific
project.~ The save action, makes the request as if it would overwrite
the previous version of that specific project.
[x] After 5 seconds, it should revert back to the 'Save' button. Please
double check what logic ExCS have here.

Extra thing from context:
"When you click it, it says 'Saving...'" -> i did it the first version
but it needs to concat them ... but we can add them if required

- Added a hook to handle saving.
- Enabled in School accounts for scratch projects, both Educator and
Students

To check the API maybe in a different PR

- Faked status in the code for the video since it's not connected

https://github.com/user-attachments/assets/b5b706d9-6405-488d-8d1f-9738ecd85066
---
 src/components/Editor/Project/Project.jsx    |  12 +-
 src/components/ProjectBar/ProjectBar.jsx     |  83 +++++-----
 src/components/ProjectBar/ProjectBar.test.js | 161 +++++++++++++++----
 src/hooks/useScratchSaveState.js             |  81 ++++++++++
 src/hooks/useScratchSaveState.test.js        | 115 +++++++++++++
 src/scratch.jsx                              |  39 +++--
 6 files changed, 407 insertions(+), 84 deletions(-)
 create mode 100644 src/hooks/useScratchSaveState.js
 create mode 100644 src/hooks/useScratchSaveState.test.js

diff --git a/src/components/Editor/Project/Project.jsx b/src/components/Editor/Project/Project.jsx
index af2e4e970..91b2f6da3 100644
--- a/src/components/Editor/Project/Project.jsx
+++ b/src/components/Editor/Project/Project.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
 import "react-tabs/style/react-tabs.css";
 import "react-toastify/dist/ReactToastify.css";
@@ -29,13 +29,17 @@ const Project = (props) => {
   const autosave = useSelector((state) => state.editor.lastSaveAutosave);
   const project = useSelector((state) => state.editor.project);
   const isCodeEditorScratchProject =
-    project.project_type === "code_editor_scratch";
+    project?.project_type === "code_editor_scratch";
 
   useEffect(() => {
-    if (saving === "success" && autosave === false) {
+    if (
+      !isCodeEditorScratchProject &&
+      saving === "success" &&
+      autosave === false
+    ) {
       showSavedMessage();
     }
-  }, [saving, autosave]);
+  }, [autosave, isCodeEditorScratchProject, saving]);
 
   const [params, containerRef] = useContainerQuery(projContainer);
   const [defaultWidth, setDefaultWidth] = useState("auto");
diff --git a/src/components/ProjectBar/ProjectBar.jsx b/src/components/ProjectBar/ProjectBar.jsx
index ab81e5801..6d4e71fce 100644
--- a/src/components/ProjectBar/ProjectBar.jsx
+++ b/src/components/ProjectBar/ProjectBar.jsx
@@ -3,13 +3,15 @@ import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import SaveStatus from "../SaveStatus/SaveStatus";
 import DownloadIcon from "../../assets/icons/download.svg";
+import SaveIcon from "../../assets/icons/save.svg";
 import ProjectName from "../ProjectName/ProjectName";
 import DownloadButton from "../DownloadButton/DownloadButton";
 import SaveButton from "../SaveButton/SaveButton";
+import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
 
 import "../../assets/stylesheets/ProjectBar.scss";
 import { isOwner } from "../../utils/projectHelpers";
-import { postMessageToScratchIframe } from "../../utils/scratchIframe";
+import { useScratchSaveState } from "../../hooks/useScratchSaveState";
 
 const ProjectBar = ({ nameEditable = true }) => {
   const { t } = useTranslation();
@@ -21,47 +23,56 @@ const ProjectBar = ({ nameEditable = true }) => {
   const lastSavedTime = useSelector((state) => state.editor.lastSavedTime);
   const projectOwner = isOwner(user, project);
   const readOnly = useSelector((state) => state.editor.readOnly);
+  const isScratchProject = project?.project_type === "code_editor_scratch";
+  const showScratchSaveButton = Boolean(isScratchProject && user && !readOnly);
+  const enableScratchSaveState = Boolean(
+    loading === "success" && showScratchSaveButton,
+  );
+  const { isScratchSaving, saveScratchProject, scratchSaveLabelKey } =
+    useScratchSaveState({
+      enabled: enableScratchSaveState,
+    });
+  const scratchSaveLabel = t(scratchSaveLabelKey);
 
-  const saveScratchProject = () => {
-    postMessageToScratchIframe({ type: "scratch-gui-save" });
-  };
+  if (loading !== "success") {
+    return null;
+  }
 
   return (
-    loading === "success" && (
-      <div className="project-bar">
-        {loading === "success" && (
-          <ProjectName editable={!readOnly && nameEditable} isHeading={true} />
+    <div className="project-bar">
+      <ProjectName editable={!readOnly && nameEditable} isHeading={true} />
+      <div className="project-bar__right">
+        <div className="project-bar__btn-wrapper">
+          <DownloadButton
+            buttonText={t("header.download")}
+            className="btn btn--tertiary project-bar__btn"
+            Icon={DownloadIcon}
+            type="tertiary"
+          />
+        </div>
+        {!isScratchProject && !projectOwner && !readOnly && (
+          <div className="project-bar__btn-wrapper">
+            <SaveButton className="project-bar__btn btn--save" />
+          </div>
         )}
-        <div className="project-bar__right">
-          {loading === "success" && (
-            <div className="project-bar__btn-wrapper">
-              <DownloadButton
-                buttonText={t("header.download")}
-                className="btn btn--tertiary project-bar__btn"
-                Icon={DownloadIcon}
-                type="tertiary"
-              />
-            </div>
-          )}
-          {loading === "success" && !projectOwner && !readOnly && (
-            <div className="project-bar__btn-wrapper">
-              <SaveButton className="project-bar__btn btn--save" />
-            </div>
-          )}
-          {project.project_type === "code_editor_scratch" && (
-            <button
-              className="project-bar__btn btn--save"
+        {showScratchSaveButton && (
+          <div className="project-bar__btn-wrapper">
+            <DesignSystemButton
+              className="project-bar__btn btn--save btn--primary"
               onClick={saveScratchProject}
-            >
-              Save
-            </button>
-          )}
-          {lastSavedTime && user && !readOnly && (
-            <SaveStatus saving={saving} lastSavedTime={lastSavedTime} />
-          )}
-        </div>
+              text={scratchSaveLabel}
+              textAlways
+              icon={<SaveIcon />}
+              type="primary"
+              disabled={isScratchSaving}
+            />
+          </div>
+        )}
+        {lastSavedTime && user && !readOnly && !isScratchProject && (
+          <SaveStatus saving={saving} lastSavedTime={lastSavedTime} />
+        )}
       </div>
-    )
+    </div>
   );
 };
 
diff --git a/src/components/ProjectBar/ProjectBar.test.js b/src/components/ProjectBar/ProjectBar.test.js
index 942ea2058..d66088cbf 100644
--- a/src/components/ProjectBar/ProjectBar.test.js
+++ b/src/components/ProjectBar/ProjectBar.test.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import { MemoryRouter } from "react-router-dom";
@@ -7,7 +7,9 @@ import ProjectBar from "./ProjectBar";
 import { postMessageToScratchIframe } from "../../utils/scratchIframe";
 
 jest.mock("axios");
-jest.mock("../../utils/scratchIframe");
+jest.mock("../../utils/scratchIframe", () => ({
+  postMessageToScratchIframe: jest.fn(),
+}));
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
@@ -21,6 +23,7 @@ const project = {
   image_list: [],
   user_id: "b48e70e2-d9ed-4a59-aee5-fc7cf09dbfaf",
 };
+
 const user = {
   access_token: "39a09671-be55-4847-baf5-8919a0c24a25",
   profile: {
@@ -28,10 +31,26 @@ const user = {
   },
 };
 
+const scratchProject = {
+  ...project,
+  project_type: "code_editor_scratch",
+};
+
 const renderProjectBar = (state) => {
   const middlewares = [];
   const mockStore = configureStore(middlewares);
-  const store = mockStore({ ...state });
+  const store = mockStore({
+    editor: {
+      loading: "success",
+      project: {},
+      ...state.editor,
+    },
+    auth: {
+      user: null,
+      ...state.auth,
+    },
+  });
+
   render(
     <Provider store={store}>
       <MemoryRouter>
@@ -41,16 +60,32 @@ const renderProjectBar = (state) => {
   );
 };
 
+const getScratchOrigin = () => process.env.ASSETS_URL || window.location.origin;
+
+const dispatchScratchMessage = (type, origin = getScratchOrigin()) => {
+  act(() => {
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        origin,
+        data: { type },
+      }),
+    );
+  });
+};
+
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
 describe("When logged in and user owns project", () => {
   beforeEach(() => {
     renderProjectBar({
       editor: {
-        project: project,
-        loading: "success",
+        project,
         lastSavedTime: new Date().getTime(),
       },
       auth: {
-        user: user,
+        user,
       },
     });
   });
@@ -77,16 +112,15 @@ describe("When logged in and user owns project", () => {
 });
 
 describe("When logged in and no project identifier", () => {
-  const project_without_id = { ...project, identifier: null };
+  const projectWithoutId = { ...project, identifier: null };
 
   beforeEach(() => {
     renderProjectBar({
       editor: {
-        project: project_without_id,
-        loading: "success",
+        project: projectWithoutId,
       },
       auth: {
-        user: user,
+        user,
       },
     });
   });
@@ -112,11 +146,7 @@ describe("When not logged in", () => {
   beforeEach(() => {
     renderProjectBar({
       editor: {
-        project: project,
-        loading: "success",
-      },
-      auth: {
-        user: null,
+        project,
       },
     });
   });
@@ -146,7 +176,7 @@ describe("When no project loaded", () => {
         loading: "idle",
       },
       auth: {
-        user: user,
+        user,
       },
     });
   });
@@ -168,13 +198,12 @@ describe("When read only", () => {
   beforeEach(() => {
     renderProjectBar({
       editor: {
-        project: project,
-        loading: "success",
+        project,
         readOnly: true,
         lastSavedTime: new Date().getTime(),
       },
       auth: {
-        user: user,
+        user,
       },
     });
   });
@@ -193,29 +222,107 @@ describe("When read only", () => {
 });
 
 describe("When project is Scratch", () => {
-  const scratchProject = {
-    ...project,
-    project_type: "code_editor_scratch",
-  };
-
   beforeEach(() => {
     postMessageToScratchIframe.mockClear();
     renderProjectBar({
       editor: {
         project: scratchProject,
-        loading: "success",
       },
       auth: {
-        user: user,
+        user,
       },
     });
   });
 
   test("clicking Save sends scratch-gui-save message", () => {
-    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    fireEvent.click(screen.getByRole("button", { name: "header.save" }));
+
     expect(postMessageToScratchIframe).toHaveBeenCalledTimes(1);
     expect(postMessageToScratchIframe).toHaveBeenCalledWith({
       type: "scratch-gui-save",
     });
   });
 });
+
+describe("Additional Scratch manual save states", () => {
+  test("shows the saving state from the scratch save hook", () => {
+    renderProjectBar({
+      editor: {
+        project: scratchProject,
+      },
+      auth: {
+        user,
+      },
+    });
+
+    dispatchScratchMessage("scratch-gui-saving-started");
+
+    expect(
+      screen.getByRole("button", { name: "saveStatus.saving" }),
+    ).toBeDisabled();
+  });
+
+  test("shows the saved state from the scratch save hook", () => {
+    renderProjectBar({
+      editor: {
+        project: scratchProject,
+      },
+      auth: {
+        user,
+      },
+    });
+
+    dispatchScratchMessage("scratch-gui-saving-succeeded");
+
+    expect(
+      screen.getByRole("button", { name: "saveStatus.saved" }),
+    ).toBeInTheDocument();
+  });
+
+  test("does not show save for logged-out Scratch users", () => {
+    renderProjectBar({
+      editor: {
+        project: scratchProject,
+      },
+    });
+
+    expect(screen.queryByText("header.save")).not.toBeInTheDocument();
+    expect(screen.queryByText("header.loginToSave")).not.toBeInTheDocument();
+  });
+
+  test("shows save for logged-in non-owners", () => {
+    renderProjectBar({
+      editor: {
+        project: {
+          ...scratchProject,
+          user_id: "teacher-id",
+        },
+      },
+      auth: {
+        user,
+      },
+    });
+
+    expect(
+      screen.getByRole("button", { name: "header.save" }),
+    ).toBeInTheDocument();
+  });
+
+  test("shows save for logged-in users without a Scratch project identifier", () => {
+    renderProjectBar({
+      editor: {
+        project: {
+          ...scratchProject,
+          identifier: null,
+        },
+      },
+      auth: {
+        user,
+      },
+    });
+
+    expect(
+      screen.getByRole("button", { name: "header.save" }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/hooks/useScratchSaveState.js b/src/hooks/useScratchSaveState.js
new file mode 100644
index 000000000..5e8d33a19
--- /dev/null
+++ b/src/hooks/useScratchSaveState.js
@@ -0,0 +1,81 @@
+import { useEffect, useRef, useState } from "react";
+import { postMessageToScratchIframe } from "../utils/scratchIframe";
+
+const SCRATCH_SAVE_LABEL_KEYS = {
+  idle: "header.save",
+  saving: "saveStatus.saving",
+  saved: "saveStatus.saved",
+};
+const SCRATCH_SAVE_RESET_DELAY_MS = 5000;
+
+export const useScratchSaveState = ({ enabled = false } = {}) => {
+  const scratchSaveResetTimeoutRef = useRef(null);
+  const [scratchSaveState, setScratchSaveState] = useState("idle");
+
+  useEffect(() => {
+    const clearScratchSaveResetTimeout = () => {
+      if (scratchSaveResetTimeoutRef.current) {
+        clearTimeout(scratchSaveResetTimeoutRef.current);
+        scratchSaveResetTimeoutRef.current = null;
+      }
+    };
+
+    const resetScratchSaveState = () => {
+      clearScratchSaveResetTimeout();
+      setScratchSaveState("idle");
+    };
+
+    if (!enabled) {
+      resetScratchSaveState();
+      return undefined;
+    }
+
+    const allowedOrigin = process.env.ASSETS_URL || window.location.origin;
+    const handleScratchMessage = (event) => {
+      if (event.origin !== allowedOrigin) {
+        return;
+      }
+
+      switch (event.data?.type) {
+        case "scratch-gui-saving-started":
+          clearScratchSaveResetTimeout();
+          setScratchSaveState("saving");
+          break;
+        case "scratch-gui-saving-succeeded":
+          clearScratchSaveResetTimeout();
+          setScratchSaveState("saved");
+          scratchSaveResetTimeoutRef.current = setTimeout(() => {
+            scratchSaveResetTimeoutRef.current = null;
+            setScratchSaveState("idle");
+          }, SCRATCH_SAVE_RESET_DELAY_MS);
+          break;
+        case "scratch-gui-saving-failed":
+          resetScratchSaveState();
+          break;
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener("message", handleScratchMessage);
+
+    return () => {
+      window.removeEventListener("message", handleScratchMessage);
+      clearScratchSaveResetTimeout();
+    };
+  }, [enabled]);
+
+  const saveScratchProject = () => {
+    postMessageToScratchIframe({
+      type: "scratch-gui-save",
+    });
+  };
+
+  return {
+    scratchSaveState,
+    scratchSaveLabelKey:
+      SCRATCH_SAVE_LABEL_KEYS[scratchSaveState] || SCRATCH_SAVE_LABEL_KEYS.idle,
+    isScratchSaving: scratchSaveState === "saving",
+    saveScratchProject,
+  };
+};
diff --git a/src/hooks/useScratchSaveState.test.js b/src/hooks/useScratchSaveState.test.js
new file mode 100644
index 000000000..fb83b6c50
--- /dev/null
+++ b/src/hooks/useScratchSaveState.test.js
@@ -0,0 +1,115 @@
+import { act, renderHook } from "@testing-library/react";
+
+import { useScratchSaveState } from "./useScratchSaveState";
+import { postMessageToScratchIframe } from "../utils/scratchIframe";
+
+jest.mock("../utils/scratchIframe", () => ({
+  postMessageToScratchIframe: jest.fn(),
+}));
+
+jest.useFakeTimers();
+
+const scratchOrigin = "https://assets.example.com";
+
+const assertScratchSaveState = (result, state, labelKey, isSaving) => {
+  expect(result.current.scratchSaveState).toBe(state);
+  expect(result.current.scratchSaveLabelKey).toBe(labelKey);
+  expect(result.current.isScratchSaving).toBe(isSaving);
+};
+
+const dispatchScratchMessage = (type, origin = scratchOrigin) => {
+  act(() => {
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        origin,
+        data: { type },
+      }),
+    );
+  });
+};
+
+describe("useScratchSaveState", () => {
+  const originalAssetsUrl = process.env.ASSETS_URL;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    process.env.ASSETS_URL = scratchOrigin;
+  });
+
+  afterEach(() => {
+    process.env.ASSETS_URL = originalAssetsUrl;
+  });
+
+  test("returns idle save state by default", () => {
+    const { result } = renderHook(() => useScratchSaveState());
+
+    assertScratchSaveState(result, "idle", "header.save", false);
+  });
+
+  test("posts the scratch save command", () => {
+    const { result } = renderHook(() => useScratchSaveState());
+
+    act(() => {
+      result.current.saveScratchProject();
+    });
+
+    expect(postMessageToScratchIframe).toHaveBeenCalledWith({
+      type: "scratch-gui-save",
+    });
+  });
+
+  test("updates from saving to saved and resets after 5 seconds", () => {
+    const { result } = renderHook(() => useScratchSaveState({ enabled: true }));
+
+    dispatchScratchMessage("scratch-gui-saving-started");
+    assertScratchSaveState(result, "saving", "saveStatus.saving", true);
+
+    dispatchScratchMessage("scratch-gui-saving-succeeded");
+    assertScratchSaveState(result, "saved", "saveStatus.saved", false);
+
+    act(() => {
+      jest.advanceTimersByTime(5000);
+    });
+
+    assertScratchSaveState(result, "idle", "header.save", false);
+  });
+
+  test("resets to idle after a save failure", () => {
+    const { result } = renderHook(() => useScratchSaveState({ enabled: true }));
+
+    dispatchScratchMessage("scratch-gui-saving-started");
+    dispatchScratchMessage("scratch-gui-saving-failed");
+
+    assertScratchSaveState(result, "idle", "header.save", false);
+  });
+
+  test("ignores messages from the wrong origin", () => {
+    const { result } = renderHook(() => useScratchSaveState({ enabled: true }));
+
+    dispatchScratchMessage(
+      "scratch-gui-saving-started",
+      "https://other.example.com",
+    );
+
+    assertScratchSaveState(result, "idle", "header.save", false);
+  });
+
+  test("resets and stops handling messages when disabled", () => {
+    const { result, rerender } = renderHook(
+      ({ enabled }) => useScratchSaveState({ enabled }),
+      {
+        initialProps: { enabled: true },
+      },
+    );
+
+    dispatchScratchMessage("scratch-gui-saving-started");
+    expect(result.current.scratchSaveState).toBe("saving");
+
+    rerender({ enabled: false });
+
+    assertScratchSaveState(result, "idle", "header.save", false);
+
+    dispatchScratchMessage("scratch-gui-saving-started");
+    assertScratchSaveState(result, "idle", "header.save", false);
+  });
+});
diff --git a/src/scratch.jsx b/src/scratch.jsx
index 3fff72782..ca1d4a150 100644
--- a/src/scratch.jsx
+++ b/src/scratch.jsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { compose } from "redux";
 import process from "process";
+import { compose } from "redux";
 
 import GUI, { AppStateHOC } from "@scratch/scratch-gui";
 import ScratchIntegrationHOC from "./components/ScratchEditor/ScratchIntegrationHOC.jsx";
@@ -11,7 +11,6 @@ import ScratchStyles from "./assets/stylesheets/Scratch.scss";
 const appTarget = document.getElementById("app");
 document.getElementById("scratch-loading")?.remove();
 GUI.setAppElement(appTarget);
-
 const WrappedGui = compose(AppStateHOC, ScratchIntegrationHOC)(GUI);
 
 if (process.env.NODE_ENV === "production" && typeof window === "object") {
@@ -26,27 +25,32 @@ const apiUrl = searchParams.get("api_url");
 const defaultLocale = "en";
 const locale = appTarget.dataset.locale || defaultLocale;
 
-const handleUpdateProjectId = (projectId) => {
-  window.top.postMessage(
-    { type: "scratch-gui-project-id-updated", projectId: projectId },
-    "*",
-  );
+const postScratchGuiEvent = (type, payload = {}) => {
+  window.top.postMessage({ type, ...payload }, "*");
 };
 
-const handleRemixingStarted = () => {
-  window.top.postMessage({ type: "scratch-gui-remixing-started" }, "*");
+const handleUpdateProjectId = (updatedProjectId) => {
+  postScratchGuiEvent("scratch-gui-project-id-updated", {
+    projectId: updatedProjectId,
+  });
 };
 
-const handleRemixingSucceeded = () => {
-  window.top.postMessage({ type: "scratch-gui-remixing-succeeded" }, "*");
-};
+const handleRemixingStarted = () =>
+  postScratchGuiEvent("scratch-gui-remixing-started");
 
-const handleSavingStarted = () => {
-  window.top.postMessage({ type: "scratch-gui-saving-started" }, "*");
-};
+const handleRemixingSucceeded = () =>
+  postScratchGuiEvent("scratch-gui-remixing-succeeded");
+
+const handleSavingStarted = () =>
+  postScratchGuiEvent("scratch-gui-saving-started");
+
+const handleSavingSucceeded = () =>
+  postScratchGuiEvent("scratch-gui-saving-succeeded");
 
-const handleSavingSucceeded = () => {
-  window.top.postMessage({ type: "scratch-gui-saving-succeeded" }, "*");
+const handleScratchGuiAlert = (alertType) => {
+  if (alertType === "savingError") {
+    postScratchGuiEvent("scratch-gui-saving-failed");
+  }
 };
 
 if (!projectId) {
@@ -70,6 +74,7 @@ if (!projectId) {
         onShowRemixSuccessAlert={handleRemixingSucceeded}
         onShowSavingAlert={handleSavingStarted}
         onShowSaveSuccessAlert={handleSavingSucceeded}
+        onShowAlert={handleScratchGuiAlert}
       />
     </>,
   );

From e099d1cf31a94dfe82458f3284d745e388afdada Mon Sep 17 00:00:00 2001
From: HJ <cocomarine@users.noreply.github.com>
Date: Thu, 12 Mar 2026 14:03:10 +0000
Subject: [PATCH 18/23] update package version to prep release v0.34.9 (#1376)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 93bab5a30..264aa4271 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/editor-ui",
-  "version": "0.34.8",
+  "version": "0.34.9",
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.7.8",

From dc64a0be114f3bcf7254f2fd0a69dbeaf538c936 Mon Sep 17 00:00:00 2001
From: Dan Halson <danhalson@users.noreply.github.com>
Date: Thu, 12 Mar 2026 15:51:22 +0000
Subject: [PATCH 19/23] 1318-integrate-stylelint-into-ci (#1367)

Closes: #1318
---
 .devcontainer/devcontainer.json               |   11 +-
 .github/workflows/ci-cd.yml                   |   16 +-
 CHANGELOG.md                                  |    3 +
 README.md                                     |   11 +-
 package.json                                  |   24 +-
 src/assets/stylesheets/App.scss               |   10 +-
 src/assets/stylesheets/EditorInput.scss       |    2 +-
 src/assets/stylesheets/EditorPanel.scss       |    4 +-
 src/assets/stylesheets/ErrorMessage.scss      |    2 +-
 src/assets/stylesheets/ExternalStyles.scss    |    2 +-
 src/assets/stylesheets/Instructions.scss      |    2 +-
 src/assets/stylesheets/ProgressBar.scss       |    2 +-
 src/assets/stylesheets/ProjectImages.scss     |    1 -
 src/assets/stylesheets/PythonRunner.scss      |    4 +-
 src/assets/stylesheets/SaveStatus.scss        |    4 +-
 src/assets/stylesheets/Scratch.scss           |   14 +-
 src/assets/stylesheets/Sidebar.scss           |    9 +-
 .../Runners/PythonRunner/OutputViewToggle.jsx |    4 +-
 src/components/Menus/Sidebar/Sidebar.jsx      |    4 +-
 src/utils/ResizableWithHandle.js              |    4 +-
 yarn.lock                                     | 1812 +++++++++--------
 21 files changed, 1068 insertions(+), 877 deletions(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 4c660045d..c26843c8e 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -20,7 +20,7 @@
 
   // Features to add to the dev container. More info: https://containers.dev/features.
   "features": {
-    "ghcr.io/devcontainers-contrib/features/zsh-plugins:0": {
+    "ghcr.io/devcontainers-extra/features/zsh-plugins:0": {
       "omzPlugins": "git docker-compose macos zsh-autosuggestions yarn fzf-zsh-plugin asdf zsh-nvm"
     }
   },
@@ -67,7 +67,14 @@
       ],
       "settings": {
         "terminal.integrated.defaultProfile.linux": "zsh",
-        "jest.jestCommandLine": "yarn test"
+        "jest.jestCommandLine": "yarn test",
+        "eslint.enable": true,
+        "eslint.validate": ["javascript", "javascriptreact"],
+        "stylelint.enable": true,
+        "stylelint.validate": ["css", "scss"],
+        "stylelint.snippet": ["css", "scss"],
+        "css.validate": false,
+        "scss.validate": false
       }
     }
   },
diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
index 32f278088..5c70a8ad1 100644
--- a/.github/workflows/ci-cd.yml
+++ b/.github/workflows/ci-cd.yml
@@ -17,6 +17,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Check for SCSS changes
+        uses: dorny/paths-filter@v3
+        id: changes
+        with:
+          filters: |
+            scss:
+              - 'src/**/*.scss'
+              - '.stylelintrc*'
+              - 'stylelint.config.*'
+              - 'package.json'
+
       - name: Cache dependencies
         uses: actions/setup-node@v4
         with:
@@ -34,8 +45,9 @@ jobs:
       - name: eslint
         run: yarn lint
 
-    # - name: stylelint
-    #   run: yarn stylelint
+      - name: stylelint
+        if: steps.changes.outputs.scss == 'true'
+        run: yarn stylelint
 
   test:
     runs-on: ubuntu-latest
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31eb34f24..da6727dde 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,11 +11,14 @@ https://github.com/RaspberryPiFoundation/editor-ui/releases
 
 - Introduce @testing-library for cypress
 - Update cypress (#1283)
+- Dev container highlights eslint & stylelint detections (#1367)
+- CI runs stylelint (#1367)
 
 ### Fixed
 
 - Clear loaded modules to remove state between runs (#1287)
 - Fix intermitently failing dropdown test (#1285)
+- Fix a handful of linting issues across both eslint and stylelint (#1367)
 
 ## [0.34.2] - 2025-12-09
 
diff --git a/README.md b/README.md
index f624ab05e..5d20b0ed8 100644
--- a/README.md
+++ b/README.md
@@ -47,6 +47,15 @@ Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 
+## Linting
+
+Lint warnings & errors will be highlighted in the dev-container by default. To run them manually:
+
+`yarn lint` (eslint)
+`yarn stylelint`
+
+Note: Both eslint and stylelint are run as part of the CI pipeline.
+
 ## Testing
 
 Automated unit tests can be run via the `yarn test` command. These unit tests are written using the JavaScript testing framework `Jest` and make use of the tools provided by the [React Testing Library](https://testing-library.com/docs/). Automated accessibility testing for components is available via the `jest-axe` library. This can be achieved using the `haveNoViolations` matcher provided by `jest-axe`, although this does not guarantee that the tested components have no accessibility issues.
@@ -60,7 +69,7 @@ Currently, there are `cypress` tests for various aspects of the web component, s
 
 ## Usage
 
-The editor web component can be included in a page using the `<editor-wc>` HTML element and a script tag pointing to the desired version of the web component (`https://editor-static.raspberrypi.org/releases/<version-number>/web-component.js`). 
+The editor web component can be included in a page using the `<editor-wc>` HTML element and a script tag pointing to the desired version of the web component (`https://editor-static.raspberrypi.org/releases/<version-number>/web-component.js`).
 
 ### Attributes
 
diff --git a/package.json b/package.json
index 264aa4271..3f11d60c6 100644
--- a/package.json
+++ b/package.json
@@ -138,7 +138,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^3.9.2",
@@ -161,12 +161,13 @@
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "path-browserify": "^1.0.1",
     "pnp-webpack-plugin": "1.6.4",
-    "postcss-flexbugs-fixes": "4.2.1",
-    "postcss-loader": "3.0.0",
-    "postcss-normalize": "8.0.1",
-    "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "5.0.2",
-    "prettier": "^2.8.8",
+    "postcss": "^8.4.49",
+    "postcss-flexbugs-fixes": "5.0.2",
+    "postcss-loader": "4.3.0",
+    "postcss-normalize": "10.0.1",
+    "postcss-preset-env": "7.8.3",
+    "postcss-safe-parser": "6.0.0",
+    "prettier": "^3.8.1",
     "react-dev-utils": "^11.0.3",
     "react-test-renderer": "^17.0.2",
     "redux-mock-store": "^1.5.4",
@@ -177,11 +178,10 @@
     "semver": "7.3.2",
     "style-it": "^2.1.4",
     "style-loader": "1.3.0",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended-scss": "3.3.0",
-    "stylelint-order": "2.2.1",
-    "stylelint-scss": "3.12.0",
-    "stylelint-use-logical": "^2.1.0",
+    "stylelint": "^17.4.0",
+    "stylelint-config-recommended-scss": "17.0.0",
+    "stylelint-scss": "7.0.0",
+    "stylelint-use-logical": "^2.1.3",
     "terser-webpack-plugin": "4.2.3",
     "url-loader": "4.1.1",
     "webgl-mock-threejs": "^0.0.1",
diff --git a/src/assets/stylesheets/App.scss b/src/assets/stylesheets/App.scss
index 6aac2f37d..8e22e2b9d 100644
--- a/src/assets/stylesheets/App.scss
+++ b/src/assets/stylesheets/App.scss
@@ -3,7 +3,7 @@
 
 @use './Tabs' as *;
 
-a {
+%focusable-element {
   border: 3px solid transparent;
 
   &:focus-visible {
@@ -12,12 +12,14 @@ a {
   }
 }
 
+a {
+  @extend %focusable-element;
+}
+
 button {
   all: initial;
-  border: 3px solid transparent;
   cursor: pointer;
-
-  @extend a;
+  @extend %focusable-element;
 }
 
 input {
diff --git a/src/assets/stylesheets/EditorInput.scss b/src/assets/stylesheets/EditorInput.scss
index ce60b95dd..aa5152b6d 100644
--- a/src/assets/stylesheets/EditorInput.scss
+++ b/src/assets/stylesheets/EditorInput.scss
@@ -11,7 +11,7 @@
 .editor-input__view-only-banner {
   font-weight: $font-weight-bold;
   padding: var(--space-0-5) var(--space-1);
-  border-bottom: 1px solid var(--editor-color-outline);
+  border-block-end: 1px solid var(--editor-color-outline);
 }
 
 .--light .editor-input__view-only-banner {
diff --git a/src/assets/stylesheets/EditorPanel.scss b/src/assets/stylesheets/EditorPanel.scss
index 9e4240de1..f29850738 100644
--- a/src/assets/stylesheets/EditorPanel.scss
+++ b/src/assets/stylesheets/EditorPanel.scss
@@ -6,7 +6,7 @@
   // Needed here for vertical scroll
   overflow: auto;
   scrollbar-width: thin;
-  height: 100%;
+  block-size: 100%;
 }
 
 .editor {
@@ -14,7 +14,7 @@
   flex-flow: column;
   flex: 1;
   overflow: hidden;
-  height: 100%;
+  block-size: 100%;
 
   .cm-editor {
     flex: 1;
diff --git a/src/assets/stylesheets/ErrorMessage.scss b/src/assets/stylesheets/ErrorMessage.scss
index fbbf14acb..ef8f07cce 100644
--- a/src/assets/stylesheets/ErrorMessage.scss
+++ b/src/assets/stylesheets/ErrorMessage.scss
@@ -11,7 +11,7 @@
     padding: 0;
     margin: 0;
     white-space: pre-wrap;
-    word-break: break-word;
+    overflow-wrap: break-word;
   }
 
   &--medium {
diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss
index a3d506a66..b5f942db8 100644
--- a/src/assets/stylesheets/ExternalStyles.scss
+++ b/src/assets/stylesheets/ExternalStyles.scss
@@ -1,4 +1,4 @@
-@forward "../../../node_modules/@raspberrypifoundation/design-system-react/dist/scss/design-system-core.scss";
+@forward "../../../node_modules/@raspberrypifoundation/design-system-react/dist/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";
diff --git a/src/assets/stylesheets/Instructions.scss b/src/assets/stylesheets/Instructions.scss
index 75fc67f4d..04d9c1c3e 100644
--- a/src/assets/stylesheets/Instructions.scss
+++ b/src/assets/stylesheets/Instructions.scss
@@ -95,7 +95,7 @@
       content: "";
       position: absolute;
       inset-inline-start: 0;
-      top: 50%;
+      inset-block-start: 50%;
       transform: translateY(-50%);
       block-size: $space-2;
       inline-size: $space-2;
diff --git a/src/assets/stylesheets/ProgressBar.scss b/src/assets/stylesheets/ProgressBar.scss
index a7d35bc8c..3c139d618 100644
--- a/src/assets/stylesheets/ProgressBar.scss
+++ b/src/assets/stylesheets/ProgressBar.scss
@@ -19,7 +19,7 @@
   }
 
   progress {
-    width: 100%;
+    inline-size: 100%;
   }
 
   .btn-outer {
diff --git a/src/assets/stylesheets/ProjectImages.scss b/src/assets/stylesheets/ProjectImages.scss
index 135ce28f6..0d0a3f0d0 100644
--- a/src/assets/stylesheets/ProjectImages.scss
+++ b/src/assets/stylesheets/ProjectImages.scss
@@ -12,7 +12,6 @@
     flex-direction: column;
     box-sizing: border-box;
     overflow-wrap: break-word;
-    word-break: break-word;
     text-align: center;
     vertical-align: block-start;
   }
diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss
index 66b7449b8..87a25e53e 100644
--- a/src/assets/stylesheets/PythonRunner.scss
+++ b/src/assets/stylesheets/PythonRunner.scss
@@ -17,8 +17,8 @@
   white-space: -moz-pre-wrap;
   white-space: -pre-wrap;
   white-space: -o-pre-wrap;
-  width: 100%;
-  word-wrap: break-word;
+  inline-size: 100%;
+  overflow-wrap: break-word;
   overflow-y: auto;
 
   &--medium {
diff --git a/src/assets/stylesheets/SaveStatus.scss b/src/assets/stylesheets/SaveStatus.scss
index 69c7be785..0fb272be1 100644
--- a/src/assets/stylesheets/SaveStatus.scss
+++ b/src/assets/stylesheets/SaveStatus.scss
@@ -25,8 +25,8 @@
     block-size: 16px;
 
     svg {
-      width: 100%;
-      height: 100%;
+      inline-size: 100%;
+      block-size: 100%;
     }
   }
 }
diff --git a/src/assets/stylesheets/Scratch.scss b/src/assets/stylesheets/Scratch.scss
index 0aff873f5..ff7988463 100644
--- a/src/assets/stylesheets/Scratch.scss
+++ b/src/assets/stylesheets/Scratch.scss
@@ -9,24 +9,24 @@
 html,
 body,
 #app {
-  height: 100%;
+  block-size: 100%;
   background-color: var(--rpf-teal-100);
 }
 
 body {
   margin: 0;
   padding: 0;
-  margin-top: -5px;
-  height: calc(100% + 5px);
+  margin-block-start: -5px;
+  block-size: calc(100% + 5px);
 }
 
 div[class*="sprite-selector_sprite-selector_"] {
-  border-bottom: 1px solid var(--rpf-black);
+  border-block-end: 1px solid var(--rpf-black);
   border-radius: 8px;
 }
 
 div[class^="stage-selector_stage-selector_"] {
-  border-bottom: 1px solid var(--rpf-black);
+  border-block-end: 1px solid var(--rpf-black);
   border-radius: 8px;
 }
 
@@ -51,7 +51,7 @@ div[class^="gui_extension-button-container_"] {
 }
 
 div[class^="asset-panel_wrapper_"] {
-  border-bottom-left-radius: 8px;
+  border-end-start-radius: 8px;
   overflow: hidden;
 }
 
@@ -61,7 +61,7 @@ div[class*="modal_modal-overlay_"] {
 }
 
 div.injectionDiv {
-  border-bottom-left-radius: 8px;
+  border-end-start-radius: 8px;
 }
 
 /* stylelint-enable selector-class-pattern */
diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss
index 06eed31fc..93ec49068 100644
--- a/src/assets/stylesheets/Sidebar.scss
+++ b/src/assets/stylesheets/Sidebar.scss
@@ -64,11 +64,10 @@
     ::after {
       content: "";
       position: absolute;
-      top: -8px;
-      bottom: -1px;
-      right: -12px;
-      width: var(--sidebar-border-obscurer-width);
-      height: 60px;
+      inset-block: -8px -1px;
+      inset-inline-end: -12px;
+      inline-size: var(--sidebar-border-obscurer-width);
+      block-size: 60px;
       background-color: var(--sidebar-panel-background);
     }
 
diff --git a/src/components/Editor/Runners/PythonRunner/OutputViewToggle.jsx b/src/components/Editor/Runners/PythonRunner/OutputViewToggle.jsx
index fe76de2da..ef640237b 100644
--- a/src/components/Editor/Runners/PythonRunner/OutputViewToggle.jsx
+++ b/src/components/Editor/Runners/PythonRunner/OutputViewToggle.jsx
@@ -38,8 +38,8 @@ const OutputViewToggle = () => {
           isMobile
             ? null
             : isSplitView
-            ? t("outputViewToggle.buttonTabLabel")
-            : t("outputViewToggle.buttonSplitLabel")
+              ? t("outputViewToggle.buttonTabLabel")
+              : t("outputViewToggle.buttonSplitLabel")
         }
         disabled={codeRunTriggered || drawTriggered}
         label={
diff --git a/src/components/Menus/Sidebar/Sidebar.jsx b/src/components/Menus/Sidebar/Sidebar.jsx
index 86037eef1..994b5ed87 100644
--- a/src/components/Menus/Sidebar/Sidebar.jsx
+++ b/src/components/Menus/Sidebar/Sidebar.jsx
@@ -139,8 +139,8 @@ const Sidebar = ({ options = [], plugins = [], allowMobileView = true }) => {
     autoOpenPlugin
       ? autoOpenPlugin.name
       : instructionsEditable || instructionsSteps
-      ? "instructions"
-      : "file",
+        ? "instructions"
+        : "file",
   );
 
   const hasInstructions = instructionsSteps && instructionsSteps.length > 0;
diff --git a/src/utils/ResizableWithHandle.js b/src/utils/ResizableWithHandle.js
index 796f5f7e5..fd66d9a76 100644
--- a/src/utils/ResizableWithHandle.js
+++ b/src/utils/ResizableWithHandle.js
@@ -56,8 +56,8 @@ const ResizableWithHandle = (props) => {
   let handleComponent = ["right", "left"].includes(handleDirection)
     ? { [handleDirection]: <VerticalHandle /> }
     : ["top", "bottom"].includes(handleDirection)
-    ? { [handleDirection]: <HorizontalHandle /> }
-    : {};
+      ? { [handleDirection]: <HorizontalHandle /> }
+      : {};
 
   let handleWrapperClass = `resizable-with-handle__handle resizable-with-handle__handle--${handleDirection}`;
 
diff --git a/yarn.lock b/yarn.lock
index 7c40d13b5..ded1d0e54 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1718,6 +1718,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@cacheable/memory@npm:^2.0.8":
+  version: 2.0.8
+  resolution: "@cacheable/memory@npm:2.0.8"
+  dependencies:
+    "@cacheable/utils": "npm:^2.4.0"
+    "@keyv/bigmap": "npm:^1.3.1"
+    hookified: "npm:^1.15.1"
+    keyv: "npm:^5.6.0"
+  checksum: 10/686bb460c1e6b5a1be6ecd54b5f0c204d82210b083aa177d467166b83b5deab5f79e85f5dd2681b4da76b2249b52a80a75daaf679558be2cefb72f8e25adecb2
+  languageName: node
+  linkType: hard
+
+"@cacheable/utils@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "@cacheable/utils@npm:2.4.0"
+  dependencies:
+    hashery: "npm:^1.5.0"
+    keyv: "npm:^5.6.0"
+  checksum: 10/a28c527c1e5c054844ae40c366f099873382a89fe9d08210dd41ce0ad07115ef47a1d0fd58382e37f1bb3250ea3991cf304f07e32461442bec29cace1233ac83
+  languageName: node
+  linkType: hard
+
 "@choojs/findup@npm:^0.2.0":
   version: 0.2.1
   resolution: "@choojs/findup@npm:0.2.1"
@@ -1875,13 +1897,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/convert-colors@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "@csstools/convert-colors@npm:1.4.0"
-  checksum: 10/623db84102e8c52d00cb705e9f9777d4f780bff2a0f77f508c9958739298ad490d8717c5e0cbdd869f90428ee137ea293ee46b49de275f0f88013f5a2cd42a0d
-  languageName: node
-  linkType: hard
-
 "@csstools/css-calc@npm:^3.0.0":
   version: 3.0.0
   resolution: "@csstools/css-calc@npm:3.0.0"
@@ -1892,6 +1907,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@csstools/css-calc@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "@csstools/css-calc@npm:3.1.1"
+  peerDependencies:
+    "@csstools/css-parser-algorithms": ^4.0.0
+    "@csstools/css-tokenizer": ^4.0.0
+  checksum: 10/faa3aa2736b20757ceafd76e3d2841e8726ec9e7ae78e387684eb462aba73d533ba384039338685c3a52196196300ccdfecb051e59864b1d3b457fe927b7f53b
+  languageName: node
+  linkType: hard
+
 "@csstools/css-color-parser@npm:^4.0.1":
   version: 4.0.1
   resolution: "@csstools/css-color-parser@npm:4.0.1"
@@ -1905,15 +1930,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/css-parser-algorithms@npm:^2.3.1":
-  version: 2.7.1
-  resolution: "@csstools/css-parser-algorithms@npm:2.7.1"
-  peerDependencies:
-    "@csstools/css-tokenizer": ^2.4.1
-  checksum: 10/939b23652c970dc4af8c20776e5da9e592cae4a590025f07ddb3263799076d4b6cf1bf8c4de97b29780bfa169177a31945effe94d2a11e0972138b5ff7d93654
-  languageName: node
-  linkType: hard
-
 "@csstools/css-parser-algorithms@npm:^4.0.0":
   version: 4.0.0
   resolution: "@csstools/css-parser-algorithms@npm:4.0.0"
@@ -1930,10 +1946,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/css-tokenizer@npm:^2.2.0":
-  version: 2.4.1
-  resolution: "@csstools/css-tokenizer@npm:2.4.1"
-  checksum: 10/a368e5c96d3b11e147f95951e336105480acfa457cdbc6fdf97e8873ff92ab9ee6b4b6224ac1b263f08798802f6b29b8977a502d070f9ab695c9b9905b964198
+"@csstools/css-syntax-patches-for-csstree@npm:^1.0.27":
+  version: 1.1.0
+  resolution: "@csstools/css-syntax-patches-for-csstree@npm:1.1.0"
+  checksum: 10/4008d5c20c66c68a43c97f96c65c94c7587cb6d4f02b5c6adb9276fbcb940bd55e33a1043fdb5780587794b8ac67cba10e35127b31c436414b944cd78e54a48e
   languageName: node
   linkType: hard
 
@@ -1944,29 +1960,204 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/media-query-list-parser@npm:^2.1.4":
-  version: 2.1.13
-  resolution: "@csstools/media-query-list-parser@npm:2.1.13"
+"@csstools/media-query-list-parser@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@csstools/media-query-list-parser@npm:5.0.0"
   peerDependencies:
-    "@csstools/css-parser-algorithms": ^2.7.1
-    "@csstools/css-tokenizer": ^2.4.1
-  checksum: 10/4a771d94eb01a23279d493cd668c71ae230b660c1e6ebcff1bec6e959eae6987ece7ce01b094b44afbae8695dc98d8617580d488db16de9ec4a7378ed5adf57f
+    "@csstools/css-parser-algorithms": ^4.0.0
+    "@csstools/css-tokenizer": ^4.0.0
+  checksum: 10/16c51af8032b806abb9b636dd9c7eeac825f7e53da045e405f5c3c8c046ec68098d5e0d1a488b3941a5e0627e7f9a9afe1e08ebfcad74473c08825a64915deab
   languageName: node
   linkType: hard
 
-"@csstools/normalize.css@npm:^10.1.0":
-  version: 10.1.0
-  resolution: "@csstools/normalize.css@npm:10.1.0"
-  checksum: 10/a8d108aca23754c9e25c3370f54eacecfcfdb15763bffc26979dfee31ab511692a36e64ecca81ed20cff8450310b7dfec5398c57375fde863b34737b040feb1f
+"@csstools/normalize.css@npm:*":
+  version: 12.1.1
+  resolution: "@csstools/normalize.css@npm:12.1.1"
+  checksum: 10/aa4d1b9a77c1ecba0a60e11371d944615c64b465abfb6fe7aea237d8bebd34dc47036f2570d7038a8633755ebd3ed09ec02326fbb7570b5bf7b80aa142c0ef4b
   languageName: node
   linkType: hard
 
-"@csstools/selector-specificity@npm:^3.0.0":
-  version: 3.1.1
-  resolution: "@csstools/selector-specificity@npm:3.1.1"
+"@csstools/postcss-cascade-layers@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@csstools/postcss-cascade-layers@npm:1.1.1"
+  dependencies:
+    "@csstools/selector-specificity": "npm:^2.0.2"
+    postcss-selector-parser: "npm:^6.0.10"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/9e8172402ed8d0ac5a2300eabb2120aa455f8a9911fe6530dc68d74accde32dfc458b80966bb549846d7ac09e21ec44da24ad74d1d2d89d90afe659d6b6f24de
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-color-function@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@csstools/postcss-color-function@npm:1.1.1"
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties": "npm:^1.1.0"
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/82824ae7ef9664c97b066da9981e0fe9b1be9ae811f9f95bbfecd988f06d5e896b88d2b35c58f0629ddc56048569abfd56b47863276a991fba7447f252033bb0
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-font-format-keywords@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@csstools/postcss-font-format-keywords@npm:1.0.1"
+  dependencies:
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/18af07bef7a92ea65572251cfe0ff483158aa0f43256d420a0a2e77eb19f84dca9b9ff0560beeaeef3bf07e62b1dba13582e425679fc72f73701cdf5b0d78845
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-hwb-function@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@csstools/postcss-hwb-function@npm:1.0.2"
+  dependencies:
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/7dc8dc71924fcf2f61e55cbf83602f6d7c08f8f8a47c8a9fe0bdc2c71742e03ecaf5284a55afc4ea6ed646feb8a0a9cfaec4f31cc3b83c5ab0c3e99847aceab8
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-ic-unit@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@csstools/postcss-ic-unit@npm:1.0.1"
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties": "npm:^1.1.0"
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/e3bee4cdb258ff7471341fc0d814bab1d1e3ea061c13be64ef40b3be8576b75c855cf24ffd3967b3eeb435552d5910af5df35519705192e58309e440cacf02e5
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-is-pseudo-class@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "@csstools/postcss-is-pseudo-class@npm:2.0.7"
+  dependencies:
+    "@csstools/selector-specificity": "npm:^2.0.0"
+    postcss-selector-parser: "npm:^6.0.10"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/b6d509a63d3130dd1e1a7dacb9fef9e68a80e32eafce6e951f51808441821dad025a9b9209c6b9d331f373ee4977c25e1d305b036ee770d9e974cc1ad96df807
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-nested-calc@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@csstools/postcss-nested-calc@npm:1.0.0"
+  dependencies:
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/b02656b35dc2982649ba8a6318b6081e47f7c902c50c0c8d158b380c4b3d38d62018a02cc8863d85ba31e78eb4d0d06499735b8f847ddf24ceeff0e9308e8c83
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-normalize-display-values@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@csstools/postcss-normalize-display-values@npm:1.0.1"
+  dependencies:
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/9ea1b199d377fa2feaf6cae303afc316ea51ef5c770811e277a5a5403cee486ade2d2393fa622e41c56222bf664a3740eb62221bb157af0f8c84d8aed55e3234
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-oklab-function@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@csstools/postcss-oklab-function@npm:1.1.1"
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties": "npm:^1.1.0"
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/3d0f923e10a9378658a640f46f50740041346469dd965787d20646aaee55168ca5ef81c679e39cdd07b918c9f107d4d47067cbb06008bac5ac7798d71c9a2a25
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-progressive-custom-properties@npm:^1.1.0, @csstools/postcss-progressive-custom-properties@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@csstools/postcss-progressive-custom-properties@npm:1.3.0"
+  dependencies:
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.3
+  checksum: 10/cc88ee26fa3b56434c38906ab13463c3510bab92b2c206c50fa6199266407942fdb035733869c75e75c6f43a48e3ef8a8538a605157d3a580ea4ef2bf93b3df7
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-stepped-value-functions@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@csstools/postcss-stepped-value-functions@npm:1.0.1"
+  dependencies:
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/5dbc3cf9edcbc7a43309e6378eb6f2455c6748ef26b83a781a9c9c7df2b8bbb748f887de760a355c798b0e6f0f41d551a10e51ed7276b0de17f6fc4c2f7dbefb
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-text-decoration-shorthand@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@csstools/postcss-text-decoration-shorthand@npm:1.0.0"
+  dependencies:
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/2dc1394307fa8f9a8cea83f54f0df76a4f065b8364b572ce46221f47518b026c886f19334483c038f178e24004adcf3dbf36903cfa28112e17d932176cb2a21b
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-trigonometric-functions@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@csstools/postcss-trigonometric-functions@npm:1.0.2"
+  dependencies:
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/d971403ac69a12e5db31ab798e15be96aa9a06bcfbe20893ce40935da2bdea7c14de3522e2c050a457b6a428699711c0b717d396e05d5ff1d652f8beca0d5d48
+  languageName: node
+  linkType: hard
+
+"@csstools/postcss-unset-value@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@csstools/postcss-unset-value@npm:1.0.2"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/58312dcb457b0f8c9bdcc45601e799da5270e09f6573041a00c50acff77089ceb2a33ed285990cd4a6d847677545a52cfd0919af26de9a40889c483a84df45d3
+  languageName: node
+  linkType: hard
+
+"@csstools/selector-resolve-nested@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@csstools/selector-resolve-nested@npm:4.0.0"
   peerDependencies:
-    postcss-selector-parser: ^6.0.13
-  checksum: 10/3786a6afea97b08ad739ee8f4004f7e0a9e25049cee13af809dbda6462090744012a54bd9275a44712791e8f103f85d21641f14e81799f9dab946b0459a5e1ef
+    postcss-selector-parser: ^7.1.1
+  checksum: 10/eebdec8f3a8dbb81afa5c76b0568bb1a0b6dfa7c2c9434dbc4cd86cc2244db1cca2392127fca0d54653050688eb1da18eb7bfecedf5c1f9689957c4c44617f32
+  languageName: node
+  linkType: hard
+
+"@csstools/selector-specificity@npm:^2.0.0, @csstools/selector-specificity@npm:^2.0.2":
+  version: 2.2.0
+  resolution: "@csstools/selector-specificity@npm:2.2.0"
+  peerDependencies:
+    postcss-selector-parser: ^6.0.10
+  checksum: 10/84ae0e902e8879d375406bd7d2e117b862e18cf8e5f82cecad62fcf729a8fc1527e2b3e2774b0e869a17e2006bd27ac5240f79220638183b273aeece97acd3f2
+  languageName: node
+  linkType: hard
+
+"@csstools/selector-specificity@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "@csstools/selector-specificity@npm:6.0.0"
+  peerDependencies:
+    postcss-selector-parser: ^7.1.1
+  checksum: 10/56790acc910b516df87bf6fd43389a88da1922ffb004de4d6099559ece48c88a8185e29439c570d1102a414bbecbb34e33f1aeace76a63e9f72e0794517cf7d7
   languageName: node
   linkType: hard
 
@@ -2810,6 +3001,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@keyv/bigmap@npm:^1.3.1":
+  version: 1.3.1
+  resolution: "@keyv/bigmap@npm:1.3.1"
+  dependencies:
+    hashery: "npm:^1.4.0"
+    hookified: "npm:^1.15.0"
+  peerDependencies:
+    keyv: ^5.6.0
+  checksum: 10/9745786a94729117460b5399a964ec151e94a89db0e5ed573419c4c620f0595f05d7ad87d596bb7e212a4f3ad2335271694fddcfaa8400013f7b64e11669a884
+  languageName: node
+  linkType: hard
+
+"@keyv/serialize@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "@keyv/serialize@npm:1.1.1"
+  checksum: 10/e3b2cb1377863342acedd5ff785af3e69269bee9b44707c617d1c8bc14eeb5ac763159d6455903ffe92f143c2238e1e783c4f113f9c8910eacccf172894472da
+  languageName: node
+  linkType: hard
+
 "@leichtgewicht/ip-codec@npm:^2.0.1":
   version: 2.0.5
   resolution: "@leichtgewicht/ip-codec@npm:2.0.5"
@@ -3235,6 +3445,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pkgr/core@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "@pkgr/core@npm:0.2.9"
+  checksum: 10/bb2fb86977d63f836f8f5b09015d74e6af6488f7a411dcd2bfdca79d76b5a681a9112f41c45bdf88a9069f049718efc6f3900d7f1de66a2ec966068308ae517f
+  languageName: node
+  linkType: hard
+
 "@plotly/d3-sankey-circular@npm:0.33.1":
   version: 0.33.1
   resolution: "@plotly/d3-sankey-circular@npm:0.33.1"
@@ -3915,7 +4132,7 @@ __metadata:
     eslint-plugin-import: "npm:^2.22.1"
     eslint-plugin-jest: "npm:^24.1.0"
     eslint-plugin-jsx-a11y: "npm:^6.3.1"
-    eslint-plugin-prettier: "npm:^4.2.1"
+    eslint-plugin-prettier: "npm:^5.2.1"
     eslint-plugin-react: "npm:^7.21.5"
     eslint-plugin-react-hooks: "npm:^4.2.0"
     eslint-plugin-testing-library: "npm:^3.9.2"
@@ -3956,12 +4173,13 @@ __metadata:
     path-browserify: "npm:^1.0.1"
     plotly.js: "npm:^3.3.1"
     pnp-webpack-plugin: "npm:1.6.4"
-    postcss-flexbugs-fixes: "npm:4.2.1"
-    postcss-loader: "npm:3.0.0"
-    postcss-normalize: "npm:8.0.1"
-    postcss-preset-env: "npm:6.7.0"
-    postcss-safe-parser: "npm:5.0.2"
-    prettier: "npm:^2.8.8"
+    postcss: "npm:^8.4.49"
+    postcss-flexbugs-fixes: "npm:5.0.2"
+    postcss-loader: "npm:4.3.0"
+    postcss-normalize: "npm:10.0.1"
+    postcss-preset-env: "npm:7.8.3"
+    postcss-safe-parser: "npm:6.0.0"
+    prettier: "npm:^3.8.1"
     prismjs: "npm:^1.29.0"
     prompts: "npm:2.4.0"
     prop-types: "npm:^15.8.1"
@@ -3997,11 +4215,10 @@ __metadata:
     stream-browserify: "npm:^3.0.0"
     style-it: "npm:^2.1.4"
     style-loader: "npm:1.3.0"
-    stylelint: "npm:^15.11.0"
-    stylelint-config-recommended-scss: "npm:3.3.0"
-    stylelint-order: "npm:2.2.1"
-    stylelint-scss: "npm:3.12.0"
-    stylelint-use-logical: "npm:^2.1.0"
+    stylelint: "npm:^17.4.0"
+    stylelint-config-recommended-scss: "npm:17.0.0"
+    stylelint-scss: "npm:7.0.0"
+    stylelint-use-logical: "npm:^2.1.3"
     terser-webpack-plugin: "npm:4.2.3"
     three: "npm:0.169.0"
     ts-pnp: "npm:1.2.0"
@@ -4613,6 +4830,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/merge-streams@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@sindresorhus/merge-streams@npm:4.0.0"
+  checksum: 10/16551c787f5328c8ef05fd9831ade64369ccc992df78deb635ec6c44af217d2f1b43f8728c348cdc4e00585ff2fad6e00d8155199cbf6b154acc45fe65cbf0aa
+  languageName: node
+  linkType: hard
+
 "@sinonjs/commons@npm:^3.0.0":
   version: 3.0.1
   resolution: "@sinonjs/commons@npm:3.0.1"
@@ -5453,13 +5677,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/minimist@npm:^1.2.2":
-  version: 1.2.5
-  resolution: "@types/minimist@npm:1.2.5"
-  checksum: 10/477047b606005058ab0263c4f58097136268007f320003c348794f74adedc3166ffc47c80ec3e94687787f2ab7f4e72c468223946e79892cf0fd9e25e9970a90
-  languageName: node
-  linkType: hard
-
 "@types/node-fetch@npm:^2.1.2":
   version: 2.6.13
   resolution: "@types/node-fetch@npm:2.6.13"
@@ -5497,13 +5714,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/normalize-package-data@npm:^2.4.0":
-  version: 2.4.4
-  resolution: "@types/normalize-package-data@npm:2.4.4"
-  checksum: 10/65dff72b543997b7be8b0265eca7ace0e34b75c3e5fee31de11179d08fa7124a7a5587265d53d0409532ecb7f7fba662c2012807963e1f9b059653ec2c83ee05
-  languageName: node
-  linkType: hard
-
 "@types/offscreencanvas@npm:^2019.6.4, @types/offscreencanvas@npm:~2019.7.0":
   version: 2019.7.3
   resolution: "@types/offscreencanvas@npm:2019.7.3"
@@ -6535,6 +6745,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ansi-regex@npm:^6.2.2":
+  version: 6.2.2
+  resolution: "ansi-regex@npm:6.2.2"
+  checksum: 10/9b17ce2c6daecc75bcd5966b9ad672c23b184dc3ed9bf3c98a0702f0d2f736c15c10d461913568f2cf527a5e64291c7473358885dd493305c84a1cfed66ba94f
+  languageName: node
+  linkType: hard
+
 "ansi-styles@npm:^3.2.1":
   version: 3.2.1
   resolution: "ansi-styles@npm:3.2.1"
@@ -6881,13 +7098,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"arrify@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "arrify@npm:1.0.1"
-  checksum: 10/745075dd4a4624ff0225c331dacb99be501a515d39bcb7c84d24660314a6ec28e68131b137e6f7e16318170842ce97538cd298fc4cd6b2cc798e0b957f2747e7
-  languageName: node
-  linkType: hard
-
 "arrify@npm:^2.0.1":
   version: 2.0.1
   resolution: "arrify@npm:2.0.1"
@@ -7003,7 +7213,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autoprefixer@npm:9.8.8, autoprefixer@npm:^9.6.1":
+"autoprefixer@npm:9.8.8":
   version: 9.8.8
   resolution: "autoprefixer@npm:9.8.8"
   dependencies:
@@ -7020,6 +7230,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"autoprefixer@npm:^10.4.13":
+  version: 10.4.27
+  resolution: "autoprefixer@npm:10.4.27"
+  dependencies:
+    browserslist: "npm:^4.28.1"
+    caniuse-lite: "npm:^1.0.30001774"
+    fraction.js: "npm:^5.3.4"
+    picocolors: "npm:^1.1.1"
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  bin:
+    autoprefixer: bin/autoprefixer
+  checksum: 10/5dd9ec57cc1c2af556e10d6c76d082f66d23275671b8b125f6c1d33ba7d9a984d80d3fb4fab7b5e092ac1a34f3aa5a131a392f131f5924029c3cb82faea15b0c
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.7":
   version: 1.0.7
   resolution: "available-typed-arrays@npm:1.0.7"
@@ -7340,13 +7567,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"balanced-match@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "balanced-match@npm:2.0.0"
-  checksum: 10/9a5caad6a292c5df164cc6d0c38e0eedf9a1413f42e5fece733640949d74d0052cfa9587c1a1681f772147fb79be495121325a649526957fd75b3a216d1fbc68
-  languageName: node
-  linkType: hard
-
 "base64-arraybuffer@npm:^1.0.2":
   version: 1.0.2
   resolution: "base64-arraybuffer@npm:1.0.2"
@@ -7638,7 +7858,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.23.3, browserslist@npm:^4.24.0, browserslist@npm:^4.6.2, browserslist@npm:^4.6.4":
+"browserslist@npm:^4.0.0, browserslist@npm:^4.12.0, browserslist@npm:^4.23.3, browserslist@npm:^4.24.0":
   version: 4.24.0
   resolution: "browserslist@npm:4.24.0"
   dependencies:
@@ -7652,7 +7872,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.28.1":
+"browserslist@npm:^4.21.4, browserslist@npm:^4.28.1":
   version: 4.28.1
   resolution: "browserslist@npm:4.28.1"
   dependencies:
@@ -7858,6 +8078,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cacheable@npm:^2.3.2":
+  version: 2.3.3
+  resolution: "cacheable@npm:2.3.3"
+  dependencies:
+    "@cacheable/memory": "npm:^2.0.8"
+    "@cacheable/utils": "npm:^2.4.0"
+    hookified: "npm:^1.15.0"
+    keyv: "npm:^5.6.0"
+    qified: "npm:^0.6.0"
+  checksum: 10/70f6f034cdae8d0d7f57ac166756165b65863d92e977af29042c77d831c565b7ed1182e34a4da03c3fa7ef2c766d33de7ea475800f432dd8438a3299aba86c52
+  languageName: node
+  linkType: hard
+
 "cachedir@npm:^2.3.0":
   version: 2.4.0
   resolution: "cachedir@npm:2.4.0"
@@ -7952,18 +8185,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase-keys@npm:^7.0.0":
-  version: 7.0.2
-  resolution: "camelcase-keys@npm:7.0.2"
-  dependencies:
-    camelcase: "npm:^6.3.0"
-    map-obj: "npm:^4.1.0"
-    quick-lru: "npm:^5.1.1"
-    type-fest: "npm:^1.2.1"
-  checksum: 10/6f92d969b7fa97456ffc35fe93f0a42d0d0a00fbd94bfc6cac07c84da86e6acfb89fdf04151460d47c583d2dd38a3e9406f980efe9a3d2e143cdfe46a7343083
-  languageName: node
-  linkType: hard
-
 "camelcase@npm:5.3.1, camelcase@npm:^5.3.1":
   version: 5.3.1
   resolution: "camelcase@npm:5.3.1"
@@ -7971,7 +8192,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camelcase@npm:6.3.0, camelcase@npm:^6.0.0, camelcase@npm:^6.1.0, camelcase@npm:^6.2.0, camelcase@npm:^6.3.0":
+"camelcase@npm:6.3.0, camelcase@npm:^6.0.0, camelcase@npm:^6.1.0, camelcase@npm:^6.2.0":
   version: 6.3.0
   resolution: "camelcase@npm:6.3.0"
   checksum: 10/8c96818a9076434998511251dcb2761a94817ea17dbdc37f47ac080bd088fc62c7369429a19e2178b993497132c8cbcf5cc1f44ba963e76782ba469c0474938d
@@ -7999,13 +8220,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30000981, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001125, caniuse-lite@npm:^1.0.30001663, caniuse-lite@npm:^1.0.30001759":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001125, caniuse-lite@npm:^1.0.30001663, caniuse-lite@npm:^1.0.30001759":
   version: 1.0.30001769
   resolution: "caniuse-lite@npm:1.0.30001769"
   checksum: 10/4b7d087832d4330a8b1fa02cd9455bdb068ea67f1735f2aa6324d5b64b24f5079cf6349b13d209f268ffa59644b9f4f784266b780bafd877ceb83c9797ca80ba
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001774":
+  version: 1.0.30001777
+  resolution: "caniuse-lite@npm:1.0.30001777"
+  checksum: 10/4f71c57ac7f46bd0c0b42bef212df28639652972e7cf6e3f40f902a87fa86d77217f76b1021dcef202ab6eb5958bad83cdcc81336a954fb4e857c2975ddb2569
+  languageName: node
+  linkType: hard
+
 "canvas-fit@npm:^1.5.0":
   version: 1.5.0
   resolution: "canvas-fit@npm:1.5.0"
@@ -8894,20 +9122,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^8.2.0":
-  version: 8.3.6
-  resolution: "cosmiconfig@npm:8.3.6"
+"cosmiconfig@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "cosmiconfig@npm:9.0.1"
   dependencies:
+    env-paths: "npm:^2.2.1"
     import-fresh: "npm:^3.3.0"
     js-yaml: "npm:^4.1.0"
     parse-json: "npm:^5.2.0"
-    path-type: "npm:^4.0.0"
   peerDependencies:
     typescript: ">=4.9.5"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/91d082baca0f33b1c085bf010f9ded4af43cbedacba8821da0fb5667184d0a848addc52c31fadd080007f904a555319c238cf5f4c03e6d58ece2e4876b2e73d6
+  checksum: 10/89fcac84d062f0710091bb2d6a6175bcde22f5448877db9c43429694408191d3d4e215193b3ac4d54f7f89ef188d55cd481c7a2295b0dc572e65b528bf6fec01
   languageName: node
   linkType: hard
 
@@ -8988,14 +9216,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-blank-pseudo@npm:^0.1.4":
-  version: 0.1.4
-  resolution: "css-blank-pseudo@npm:0.1.4"
+"css-blank-pseudo@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "css-blank-pseudo@npm:3.0.3"
   dependencies:
-    postcss: "npm:^7.0.5"
+    postcss-selector-parser: "npm:^6.0.9"
+  peerDependencies:
+    postcss: ^8.4
   bin:
-    css-blank-pseudo: cli.js
-  checksum: 10/c13a13c46e78504d24dfa53d4c84a191e56def241f37bfadf68333c551b08b605117b0cff4e42412e2263624c01572e6750dce846b1579208ac0c7473fbd4b37
+    css-blank-pseudo: dist/cli.cjs
+  checksum: 10/3c4a258c27e719cd8f841b4c652247f2a25c0a04edff6a5a70bf91ad9fe539665013e0a2d357abd6f04f04cceaef99f4cbe29a2fc9bb8d7a5f1935d9b610209a
   languageName: node
   linkType: hard
 
@@ -9070,10 +9300,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-functions-list@npm:^3.2.1":
-  version: 3.2.3
-  resolution: "css-functions-list@npm:3.2.3"
-  checksum: 10/25f12fb0ef1384b1cf45a6e7e0afd596a19bee90b90316d9e50f7820888f4a8f265be7a6a96b10a5c81e403bd7a5ff8010fa936144f84959d9d91c9350cda0d4
+"css-functions-list@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "css-functions-list@npm:3.3.3"
+  checksum: 10/867751049941ca5d56f91695a0ba7f45947000e9cd6b80432521779922d705838cb1d6621a53135de4b639d12c8c9b5128da72ccc956a0df8eac54e89601014a
   languageName: node
   linkType: hard
 
@@ -9084,15 +9314,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-has-pseudo@npm:^0.10.0":
-  version: 0.10.0
-  resolution: "css-has-pseudo@npm:0.10.0"
+"css-has-pseudo@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "css-has-pseudo@npm:3.0.4"
   dependencies:
-    postcss: "npm:^7.0.6"
-    postcss-selector-parser: "npm:^5.0.0-rc.4"
+    postcss-selector-parser: "npm:^6.0.9"
+  peerDependencies:
+    postcss: ^8.4
   bin:
-    css-has-pseudo: cli.js
-  checksum: 10/cc7a16c65730d43891214a0de490e811546a68dcf26f729464f33e173a595829b9d9656c45e0e187c4a7b00f73270ed8085ea5822c253b45a031d34f0b3e3705
+    css-has-pseudo: dist/cli.cjs
+  checksum: 10/bad885b0bb2b88d3753427f05ca6d6d833c1af89857222675c0742ef6c3461ae06f56a9be8a464bb6ac860c12581dfa2ae1cb8f15598ffb52d38cb3b6d291a48
   languageName: node
   linkType: hard
 
@@ -9145,14 +9376,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-prefers-color-scheme@npm:^3.1.1":
-  version: 3.1.1
-  resolution: "css-prefers-color-scheme@npm:3.1.1"
-  dependencies:
-    postcss: "npm:^7.0.5"
+"css-prefers-color-scheme@npm:^6.0.3":
+  version: 6.0.3
+  resolution: "css-prefers-color-scheme@npm:6.0.3"
+  peerDependencies:
+    postcss: ^8.4
   bin:
-    css-prefers-color-scheme: cli.js
-  checksum: 10/2a06d806d2c2ce5372885555f7876a4132fd80bacde889b1944172251003294a7f28c7602d73c416adbe2e8af55b7fbd56bf363d7a1db727cbade4d37666c715
+    css-prefers-color-scheme: dist/cli.cjs
+  checksum: 10/389f8d5b102270aaefd7f1db269d12bd883d9f7e13d139c2ef7ad6eb462c0c87f2dd466efeb8cc1b93432b07f94a3a5c82fc0ed6b950ba2da2f44d86f109fdc7
   languageName: node
   linkType: hard
 
@@ -9228,13 +9459,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^2.3.1":
-  version: 2.3.1
-  resolution: "css-tree@npm:2.3.1"
+"css-tree@npm:^3.0.1":
+  version: 3.2.1
+  resolution: "css-tree@npm:3.2.1"
   dependencies:
-    mdn-data: "npm:2.0.30"
-    source-map-js: "npm:^1.0.1"
-  checksum: 10/e5e39b82eb4767c664fa5c2cd9968c8c7e6b7fd2c0079b52680a28466d851e2826d5e64699c449d933c0e8ca0554beca43c41a9fcb09fb6a46139d462dbdf0df
+    mdn-data: "npm:2.27.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10/9945b387bdec756738c34d64b8287f05ca6645f51d1c8abaaa5822ec3e74533604103aaad164b8100afd8495e92120be7c1c6afbe5be89f867acc5b456ddd79c
   languageName: node
   linkType: hard
 
@@ -9297,19 +9528,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cssdb@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "cssdb@npm:4.4.0"
-  checksum: 10/d96ad1458f8e296cd4967c5de6ddf761274a61d3b431409877200ddc85996ab8b5a76adf900d341533df8fdea779ab504e87f68f694f94819ae6afd64c756bf5
-  languageName: node
-  linkType: hard
-
-"cssesc@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "cssesc@npm:2.0.0"
-  bin:
-    cssesc: bin/cssesc
-  checksum: 10/330239463b5e2963382ffc8ebd5664bc962672f3dae8459837e0f1dfbd1ac60179326878c0403ec41e1e5d8e23cf3d35462213c89987bf5be9d34b39b86c9636
+"cssdb@npm:^7.1.0":
+  version: 7.11.2
+  resolution: "cssdb@npm:7.11.2"
+  checksum: 10/234e15ff8b09083d67b4fb1d97dc619f5a328bc559f9633eb312dc4020d9af0a1a57b5813de0868af0e93d2d327e9f684243a9933e1ac863d21e291c2ea6ebc9
   languageName: node
   linkType: hard
 
@@ -9818,27 +10040,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decamelize-keys@npm:^1.1.0":
-  version: 1.1.1
-  resolution: "decamelize-keys@npm:1.1.1"
+"debug@npm:^4.4.3":
+  version: 4.4.3
+  resolution: "debug@npm:4.4.3"
   dependencies:
-    decamelize: "npm:^1.1.0"
-    map-obj: "npm:^1.0.0"
-  checksum: 10/71d5898174f17a8d2303cecc98ba0236e842948c4d042a8180d5e749be8442220bca2d16dd93bebd7b49e86c807814273212e4da0fae67be7c58c282ff76057a
-  languageName: node
-  linkType: hard
-
-"decamelize@npm:^1.1.0":
-  version: 1.2.0
-  resolution: "decamelize@npm:1.2.0"
-  checksum: 10/ad8c51a7e7e0720c70ec2eeb1163b66da03e7616d7b98c9ef43cce2416395e84c1e9548dd94f5f6ffecfee9f8b94251fc57121a8b021f2ff2469b2bae247b8aa
-  languageName: node
-  linkType: hard
-
-"decamelize@npm:^5.0.0":
-  version: 5.0.1
-  resolution: "decamelize@npm:5.0.1"
-  checksum: 10/643e88804c538a334fae303ae1da8b30193b81dad8689643b35e6ab8ab60a3b03492cab6096d8163bd41fd384d969485f0634c000f80af502aa7f4047258d5b4
+    ms: "npm:^2.1.3"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10/9ada3434ea2993800bd9a1e320bd4aa7af69659fb51cca685d390949434bc0a8873c21ed7c9b852af6f2455a55c6d050aa3937d52b3c69f796dab666f762acad
   languageName: node
   linkType: hard
 
@@ -10758,7 +10968,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"env-paths@npm:^2.2.0":
+"env-paths@npm:^2.2.0, env-paths@npm:^2.2.1":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
   checksum: 10/65b5df55a8bab92229ab2b40dad3b387fad24613263d103a97f91c9fe43ceb21965cd3392b1ccb5d77088021e525c4e0481adb309625d0cb94ade1d1fb8dc17e
@@ -11345,18 +11555,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-prettier@npm:^4.2.1":
-  version: 4.2.1
-  resolution: "eslint-plugin-prettier@npm:4.2.1"
+"eslint-plugin-prettier@npm:^5.2.1":
+  version: 5.5.5
+  resolution: "eslint-plugin-prettier@npm:5.5.5"
   dependencies:
-    prettier-linter-helpers: "npm:^1.0.0"
+    prettier-linter-helpers: "npm:^1.0.1"
+    synckit: "npm:^0.11.12"
   peerDependencies:
-    eslint: ">=7.28.0"
-    prettier: ">=2.0.0"
+    "@types/eslint": ">=8.0.0"
+    eslint: ">=8.0.0"
+    eslint-config-prettier: ">= 7.0.0 <10.0.0 || >=10.1.0"
+    prettier: ">=3.0.0"
   peerDependenciesMeta:
+    "@types/eslint":
+      optional: true
     eslint-config-prettier:
       optional: true
-  checksum: 10/d387f85dd1bfcb6bc6b794845fee6afb9ebb2375653de6bcde6e615892fb97f85121a7c012a4651b181fc09953bdf54c9bc70cab7ad297019d89ae87dd007e28
+  checksum: 10/36c22c2fa2fd7c61ed292af1280e1d8f94dfe1671eacc5a503a249ca4b27fd226dbf6a1820457d611915926946f42729488d2dc7a5c320601e6cf1fad0d28f66
   languageName: node
   linkType: hard
 
@@ -11938,7 +12153,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
+"fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -11951,7 +12166,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.4":
+"fast-glob@npm:^3.2.4, fast-glob@npm:^3.3.3":
   version: 3.3.3
   resolution: "fast-glob@npm:3.3.3"
   dependencies:
@@ -12067,6 +12282,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-entry-cache@npm:^11.1.2":
+  version: 11.1.2
+  resolution: "file-entry-cache@npm:11.1.2"
+  dependencies:
+    flat-cache: "npm:^6.1.20"
+  checksum: 10/608a988db343f3ddcbf96ec93697daae2bbde2976763960b979c55de64d5ae3779c014d5308dbea5bfb42386c3e492b117d8715824b74079efcc1f5d27b8836c
+  languageName: node
+  linkType: hard
+
 "file-entry-cache@npm:^6.0.1":
   version: 6.0.1
   resolution: "file-entry-cache@npm:6.0.1"
@@ -12076,15 +12300,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-entry-cache@npm:^7.0.0":
-  version: 7.0.2
-  resolution: "file-entry-cache@npm:7.0.2"
-  dependencies:
-    flat-cache: "npm:^3.2.0"
-  checksum: 10/e03e99beb9809a5679699ebd7146f3b93870b57775705f4b61bda4a1d8454dfd261b48e770a601f6c36a4789b4c0750f262e4d5fb2c7eeceb75e16439b07211a
-  languageName: node
-  linkType: hard
-
 "file-loader@npm:6.1.1":
   version: 6.1.1
   resolution: "file-loader@npm:6.1.1"
@@ -12230,19 +12445,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"find-up@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "find-up@npm:5.0.0"
-  dependencies:
-    locate-path: "npm:^6.0.0"
-    path-exists: "npm:^4.0.0"
-  checksum: 10/07955e357348f34660bde7920783204ff5a26ac2cafcaa28bace494027158a97b9f56faaf2d89a6106211a8174db650dd9f503f9c0d526b1202d5554a00b9095
-  languageName: node
-  linkType: hard
-
-"findup@npm:^0.1.5":
-  version: 0.1.5
-  resolution: "findup@npm:0.1.5"
+"findup@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "findup@npm:0.1.5"
   dependencies:
     colors: "npm:~0.6.0-1"
     commander: "npm:~2.1.0"
@@ -12252,7 +12457,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flat-cache@npm:^3.0.4, flat-cache@npm:^3.2.0":
+"flat-cache@npm:^3.0.4":
   version: 3.2.0
   resolution: "flat-cache@npm:3.2.0"
   dependencies:
@@ -12263,6 +12468,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flat-cache@npm:^6.1.20":
+  version: 6.1.20
+  resolution: "flat-cache@npm:6.1.20"
+  dependencies:
+    cacheable: "npm:^2.3.2"
+    flatted: "npm:^3.3.3"
+    hookified: "npm:^1.15.0"
+  checksum: 10/e8bf0b73ca210c907361c2899571b101cfc413212fff2d171f8f512d1e0608a549289bcac07a57c36dd51697c4c09e305d74d76e110dfc75af302b8cf6fe0535
+  languageName: node
+  linkType: hard
+
 "flat@npm:^5.0.2":
   version: 5.0.2
   resolution: "flat@npm:5.0.2"
@@ -12279,6 +12495,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flatted@npm:^3.3.3":
+  version: 3.3.4
+  resolution: "flatted@npm:3.3.4"
+  checksum: 10/185b93176da0f54a97f88f56f9b8bccca9cbbb6ff1caaf264ae8b6ee4d3c041d7df131301060208695d7b573925dbee7162951be5ffd1efb5b6969495e83dba8
+  languageName: node
+  linkType: hard
+
 "flatten-vertex-data@npm:^1.0.2":
   version: 1.0.2
   resolution: "flatten-vertex-data@npm:1.0.2"
@@ -12288,13 +12511,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flatten@npm:^1.0.2":
-  version: 1.0.3
-  resolution: "flatten@npm:1.0.3"
-  checksum: 10/5c57379816f1692aaa79fbc6390e0a0644e5e8442c5783ed57c6d315468eddbc53a659eaa03c9bb1e771b0f4a9bd8dd8a2620286bf21fd6538a7857321fdfb20
-  languageName: node
-  linkType: hard
-
 "follow-redirects@npm:^1.0.0":
   version: 1.15.9
   resolution: "follow-redirects@npm:1.15.9"
@@ -12468,6 +12684,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fraction.js@npm:^5.3.4":
+  version: 5.3.4
+  resolution: "fraction.js@npm:5.3.4"
+  checksum: 10/ef2c4bc81b2484065f8f7e4c2498f3fdfe6d233b8e7c7f75e3683ed10698536129b2c2dbd6c3f788ca4a020ec07116dd909a91036a364c98dc802b5003bfc613
+  languageName: node
+  linkType: hard
+
 "fragment-cache@npm:^0.2.1":
   version: 0.2.1
   resolution: "fragment-cache@npm:0.2.1"
@@ -12663,6 +12886,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-east-asian-width@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "get-east-asian-width@npm:1.5.0"
+  checksum: 10/60bc34cd1e975055ab99f0f177e31bed3e516ff7cee9c536474383954a976abaa6b94a51d99ad158ef1e372790fa096cab7d07f166bb0778f6587954c0fbe946
+  languageName: node
+  linkType: hard
+
 "get-float-time-domain-data@npm:0.1.0":
   version: 0.1.0
   resolution: "get-float-time-domain-data@npm:0.1.0"
@@ -13060,7 +13290,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^11.0.1, globby@npm:^11.0.3, globby@npm:^11.1.0":
+"globby@npm:^11.0.1, globby@npm:^11.0.3":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:
@@ -13088,6 +13318,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^16.1.0":
+  version: 16.1.1
+  resolution: "globby@npm:16.1.1"
+  dependencies:
+    "@sindresorhus/merge-streams": "npm:^4.0.0"
+    fast-glob: "npm:^3.3.3"
+    ignore: "npm:^7.0.5"
+    is-path-inside: "npm:^4.0.0"
+    slash: "npm:^5.1.0"
+    unicorn-magic: "npm:^0.4.0"
+  checksum: 10/bb854734ad4957f4ec493b511712573dd16be2c2044c92dc8637039dbbb7603bc3a37e8f0a06e83e51eaa0b72c456efa6179eb0acbd0966394a696d17536feea
+  languageName: node
+  linkType: hard
+
 "globjoin@npm:^0.1.4":
   version: 0.1.4
   resolution: "globjoin@npm:0.1.4"
@@ -13392,13 +13636,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hard-rejection@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "hard-rejection@npm:2.1.0"
-  checksum: 10/7baaf80a0c7fff4ca79687b4060113f1529589852152fa935e6787a2bc96211e784ad4588fb3048136ff8ffc9dfcf3ae385314a5b24db32de20bea0d1597f9dc
-  languageName: node
-  linkType: hard
-
 "harmony-reflect@npm:^1.4.6":
   version: 1.6.2
   resolution: "harmony-reflect@npm:1.6.2"
@@ -13434,6 +13671,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"has-flag@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "has-flag@npm:5.0.1"
+  checksum: 10/e0a151db8e43b528258c4269c23224c691b42c1f5168f6d88b61c3f9398ef16d44226a78a0596642da55851cf306a8afe57d6936d4d69a24b66fd10de1373da8
+  languageName: node
+  linkType: hard
+
 "has-hover@npm:^1.0.1":
   version: 1.0.1
   resolution: "has-hover@npm:1.0.1"
@@ -13563,6 +13807,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hashery@npm:^1.4.0, hashery@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "hashery@npm:1.5.0"
+  dependencies:
+    hookified: "npm:^1.14.0"
+  checksum: 10/2d7ee480620fd3718ac77b3fc9ac92986fec8ed087bf66f5ff3f9d77b3a3fe063165b6169d25ecd234848a5ea21d0d71f9873c3bfa704f33d9fa757d558bec7d
+  languageName: node
+  linkType: hard
+
 "hasown@npm:^2.0.0, hasown@npm:^2.0.1, hasown@npm:^2.0.2":
   version: 2.0.2
   resolution: "hasown@npm:2.0.2"
@@ -13630,6 +13883,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hookified@npm:^1.14.0, hookified@npm:^1.15.0, hookified@npm:^1.15.1":
+  version: 1.15.1
+  resolution: "hookified@npm:1.15.1"
+  checksum: 10/ecaee63506d9a213e8b78dfdb92346227f951d3bcd8ef60d14105c5590f61d466f130a908274e1ec87ee3b3668bd87d9250cad64547cf15cfa69932bcdbbea8f
+  languageName: node
+  linkType: hard
+
 "hoopy@npm:^0.1.4":
   version: 0.1.4
   resolution: "hoopy@npm:0.1.4"
@@ -13644,15 +13904,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hosted-git-info@npm:^4.0.1":
-  version: 4.1.0
-  resolution: "hosted-git-info@npm:4.1.0"
-  dependencies:
-    lru-cache: "npm:^6.0.0"
-  checksum: 10/4dc67022b7ecb12829966bd731fb9a5f14d351547aafc6520ef3c8e7211f4f0e69452d24e29eae3d9b17df924d660052e53d8ca321cf3008418fb7e6c7c47d6f
-  languageName: node
-  linkType: hard
-
 "hpack.js@npm:^2.1.6":
   version: 2.1.6
   resolution: "hpack.js@npm:2.1.6"
@@ -13744,10 +13995,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-tags@npm:^3.3.1":
-  version: 3.3.1
-  resolution: "html-tags@npm:3.3.1"
-  checksum: 10/d0e808544b92d8b999cbcc86d539577255a2f0f2f4f73110d10749d1d36e6fe6ad706a0355a8477afb6e000ecdc93d8455b3602951f9a2b694ac9e28f1b52878
+"html-tags@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "html-tags@npm:5.1.0"
+  checksum: 10/73d0448496ad9ac4a905427717908a3e72b8676d514e077437aaa9310deb43fd9f3eda58ac6b01b651db7431f3ddcc914e1f8e24052375dfe11d3ddfe4a20de7
   languageName: node
   linkType: hard
 
@@ -14087,6 +14338,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ignore@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "ignore@npm:7.0.5"
+  checksum: 10/f134b96a4de0af419196f52c529d5c6120c4456ff8a6b5a14ceaaa399f883e15d58d2ce651c9b69b9388491d4669dda47285d307e827de9304a53a1824801bc6
+  languageName: node
+  linkType: hard
+
 "immediate@npm:~3.0.5":
   version: 3.0.6
   resolution: "immediate@npm:3.0.6"
@@ -14122,15 +14380,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-cwd@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "import-cwd@npm:2.1.0"
-  dependencies:
-    import-from: "npm:^2.1.0"
-  checksum: 10/b8786fa3578f3df55370352bf61f99c2d8e6ee9b5741a07503d5a73d99281d141330a8faf87078e67527be4558f758356791ee5efb4b0112ac5eaed0f07de544
-  languageName: node
-  linkType: hard
-
 "import-fresh@npm:^2.0.0":
   version: 2.0.0
   resolution: "import-fresh@npm:2.0.0"
@@ -14151,22 +14400,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-from@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "import-from@npm:2.1.0"
-  dependencies:
-    resolve-from: "npm:^3.0.0"
-  checksum: 10/91f6f89f46a07227920ef819181bb52eb93023ccc0bdf00224fdfb326f8f753e279ad06819f39a02bb88c9d3a4606adc85b0cc995285e5d65feeb59f1421a1d4
-  languageName: node
-  linkType: hard
-
-"import-lazy@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "import-lazy@npm:4.0.0"
-  checksum: 10/943309cc8eb01ada12700448c288b0384f77a1bc33c7e00fa4cb223c665f467a13ce9aaceb8d2e4cf586b07c1d2828040263dcc069873ce63cfc2ac6fd087971
-  languageName: node
-  linkType: hard
-
 "import-local@npm:^3.0.2":
   version: 3.2.0
   resolution: "import-local@npm:3.2.0"
@@ -14179,6 +14412,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"import-meta-resolve@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "import-meta-resolve@npm:4.2.0"
+  checksum: 10/3499ee8b7eddb79be77067b368bcdf39e6f144306dea4686d08071ae7e65a2e3bdca3f98f2a0f4babdcd4ba9d9e7d379ae7e27c4b9bf8b08c1e812a28c674bf3
+  languageName: node
+  linkType: hard
+
 "imports-loader@npm:^0.8.0":
   version: 0.8.0
   resolution: "imports-loader@npm:0.8.0"
@@ -14203,13 +14443,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"indent-string@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "indent-string@npm:5.0.0"
-  checksum: 10/e466c27b6373440e6d84fbc19e750219ce25865cb82d578e41a6053d727e5520dc5725217d6eb1cc76005a1bb1696a0f106d84ce7ebda3033b963a38583fb3b3
-  languageName: node
-  linkType: hard
-
 "indexes-of@npm:^1.0.1":
   version: 1.0.1
   resolution: "indexes-of@npm:1.0.1"
@@ -14472,7 +14705,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.0.0, is-core-module@npm:^2.13.0, is-core-module@npm:^2.15.1, is-core-module@npm:^2.5.0":
+"is-core-module@npm:^2.0.0, is-core-module@npm:^2.13.0, is-core-module@npm:^2.15.1":
   version: 2.15.1
   resolution: "is-core-module@npm:2.15.1"
   dependencies:
@@ -14806,6 +15039,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-path-inside@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "is-path-inside@npm:4.0.0"
+  checksum: 10/8810fa11c58e6360b82c3e0d6cd7d9c7d0392d3ac9eb10f980b81f9839f40ac6d1d6d6f05d069db0d227759801228f0b072e1b6c343e4469b065ab5fe0b68fe5
+  languageName: node
+  linkType: hard
+
 "is-plain-obj@npm:^1.0.0, is-plain-obj@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-plain-obj@npm:1.1.0"
@@ -16206,6 +16446,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"keyv@npm:^5.6.0":
+  version: 5.6.0
+  resolution: "keyv@npm:5.6.0"
+  dependencies:
+    "@keyv/serialize": "npm:^1.1.1"
+  checksum: 10/f1de999fdf635d703d091981a0a3844fb20081e01d45c6743ada7d01f3a6570dc47d1882e10d0a98d31075b342db8e62b4ebe4f5bf473dcd0903064d718709c1
+  languageName: node
+  linkType: hard
+
 "kind-of@npm:^3.0.2, kind-of@npm:^3.0.3, kind-of@npm:^3.2.0":
   version: 3.2.2
   resolution: "kind-of@npm:3.2.2"
@@ -16245,10 +16494,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"known-css-properties@npm:^0.29.0":
-  version: 0.29.0
-  resolution: "known-css-properties@npm:0.29.0"
-  checksum: 10/ab4e1d6bad10fe4ba15183e640dab8eec52aaa5a69899382de5843699f145e49c67e6a3ca5c8426ccd31577d3eec4459004ed317a550c3523b863a251280ddd4
+"known-css-properties@npm:^0.37.0":
+  version: 0.37.0
+  resolution: "known-css-properties@npm:0.37.0"
+  checksum: 10/9bddf2eb980f707567e3fbf8f2daaca27f5d544f4a49eab26d696ae33f54410f82f0a3032097b083d9e889e285586696c7b4324e6393103e7d71a46ca4438bfd
   languageName: node
   linkType: hard
 
@@ -16447,15 +16696,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"locate-path@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "locate-path@npm:6.0.0"
-  dependencies:
-    p-locate: "npm:^5.0.0"
-  checksum: 10/72eb661788a0368c099a184c59d2fee760b3831c9c1c33955e8a19ae4a21b4116e53fa736dc086cdeb9fce9f7cc508f2f92d2d3aae516f133e16a2bb59a39f5a
-  languageName: node
-  linkType: hard
-
 "lodash._getnative@npm:^3.0.0":
   version: 3.9.1
   resolution: "lodash._getnative@npm:3.9.1"
@@ -16593,7 +16833,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:>=3.5 <5, lodash@npm:^4.17.1, lodash@npm:^4.17.10, lodash@npm:^4.17.15, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.17.5":
+"lodash@npm:>=3.5 <5, lodash@npm:^4.17.1, lodash@npm:^4.17.15, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.5":
   version: 4.17.23
   resolution: "lodash@npm:4.17.23"
   checksum: 10/82504c88250f58da7a5a4289f57a4f759c44946c005dd232821c7688b5fcfbf4a6268f6a6cdde4b792c91edd2f3b5398c1d2a0998274432cff76def48735e233
@@ -16830,20 +17070,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"map-obj@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "map-obj@npm:1.0.1"
-  checksum: 10/f8e6fc7f6137329c376c4524f6d25b3c243c17019bc8f621d15a2dcb855919e482a9298a78ae58b00dbd0e76b640bf6533aa343a9e993cfc16e0346a2507e7f8
-  languageName: node
-  linkType: hard
-
-"map-obj@npm:^4.1.0":
-  version: 4.3.0
-  resolution: "map-obj@npm:4.3.0"
-  checksum: 10/fbc554934d1a27a1910e842bc87b177b1a556609dd803747c85ece420692380827c6ae94a95cce4407c054fa0964be3bf8226f7f2cb2e9eeee432c7c1985684e
-  languageName: node
-  linkType: hard
-
 "map-visit@npm:^1.0.0":
   version: 1.0.0
   resolution: "map-visit@npm:1.0.0"
@@ -16919,10 +17145,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mathml-tag-names@npm:^2.1.3":
-  version: 2.1.3
-  resolution: "mathml-tag-names@npm:2.1.3"
-  checksum: 10/1201a25a137d6b9e328facd67912058b8b45b19a6c4cc62641c9476195da28a275ca6e0eca070af5378b905c2b11abc1114676ba703411db0b9ce007de921ad0
+"mathml-tag-names@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "mathml-tag-names@npm:4.0.0"
+  checksum: 10/811f2555a8058d747b39a0c948668fc1dd609281b93d15f6211162a800f7fa51742743028140ea115dde73e27ade24bfdf3dc4fedb10f45ecdf28064bcea8b72
   languageName: node
   linkType: hard
 
@@ -16933,13 +17159,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdn-data@npm:2.0.30":
-  version: 2.0.30
-  resolution: "mdn-data@npm:2.0.30"
-  checksum: 10/e4944322bf3e0461a2daa2aee7e14e208960a036289531e4ef009e53d32bd41528350c070c4a33be867980443fe4c0523518d99318423cffa7c825fe7b1154e2
-  languageName: node
-  linkType: hard
-
 "mdn-data@npm:2.0.4":
   version: 2.0.4
   resolution: "mdn-data@npm:2.0.4"
@@ -16954,6 +17173,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdn-data@npm:2.27.1, mdn-data@npm:^2.25.0":
+  version: 2.27.1
+  resolution: "mdn-data@npm:2.27.1"
+  checksum: 10/5046dc83a961b8ea82a5d6d8331d07df6b15faec61519ce2f83e49766702358e7e6af96413be977ff89080534be6762c1d5963b5dd1180c208a47c0a663226b2
+  languageName: node
+  linkType: hard
+
 "media-typer@npm:0.3.0":
   version: 0.3.0
   resolution: "media-typer@npm:0.3.0"
@@ -16980,23 +17206,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"meow@npm:^10.1.5":
-  version: 10.1.5
-  resolution: "meow@npm:10.1.5"
-  dependencies:
-    "@types/minimist": "npm:^1.2.2"
-    camelcase-keys: "npm:^7.0.0"
-    decamelize: "npm:^5.0.0"
-    decamelize-keys: "npm:^1.1.0"
-    hard-rejection: "npm:^2.1.0"
-    minimist-options: "npm:4.1.0"
-    normalize-package-data: "npm:^3.0.2"
-    read-pkg-up: "npm:^8.0.0"
-    redent: "npm:^4.0.0"
-    trim-newlines: "npm:^4.0.2"
-    type-fest: "npm:^1.2.2"
-    yargs-parser: "npm:^20.2.9"
-  checksum: 10/4d6d4c233b9405bace4fd6c60db0b5806d7186a047852ddce0748e56a57c75d4fef3ab2603a480bd74595e4e8e3a47b932d737397a62e043da1d3187f1240ff4
+"meow@npm:^14.0.0":
+  version: 14.1.0
+  resolution: "meow@npm:14.1.0"
+  checksum: 10/c6a22b3912a6bc849dee0d6475cd8bb63b9307e26919ca3ace28dc1aaf3d30257071de32bba496f7b5eec3e62b03a6b7731e3d04d18efb3c3103b829aad52ca5
   languageName: node
   linkType: hard
 
@@ -17167,7 +17380,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"min-indent@npm:^1.0.0, min-indent@npm:^1.0.1":
+"min-indent@npm:^1.0.0":
   version: 1.0.1
   resolution: "min-indent@npm:1.0.1"
   checksum: 10/bfc6dd03c5eaf623a4963ebd94d087f6f4bbbfd8c41329a7f09706b0cb66969c4ddd336abeb587bc44bc6f08e13bf90f0b374f9d71f9f01e04adc2cd6f083ef1
@@ -17231,17 +17444,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist-options@npm:4.1.0":
-  version: 4.1.0
-  resolution: "minimist-options@npm:4.1.0"
-  dependencies:
-    arrify: "npm:^1.0.1"
-    is-plain-obj: "npm:^1.1.0"
-    kind-of: "npm:^6.0.3"
-  checksum: 10/8c040b3068811e79de1140ca2b708d3e203c8003eb9a414c1ab3cd467fc5f17c9ca02a5aef23bedc51a7f8bfbe77f87e9a7e31ec81fba304cda675b019496f4e
-  languageName: node
-  linkType: hard
-
 "minimist@npm:0.0.8":
   version: 0.0.8
   resolution: "minimist@npm:0.0.8"
@@ -17757,18 +17959,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"normalize-package-data@npm:^3.0.2":
-  version: 3.0.3
-  resolution: "normalize-package-data@npm:3.0.3"
-  dependencies:
-    hosted-git-info: "npm:^4.0.1"
-    is-core-module: "npm:^2.5.0"
-    semver: "npm:^7.3.4"
-    validate-npm-package-license: "npm:^3.0.1"
-  checksum: 10/3cd3b438c9c7b15d72ed2d1bbf0f8cc2d07bfe27702fc9e95d039f0af4e069dc75c0646e75068f9f9255a8aae64b59aa4fe2177e65787145fb996c3d38d48acb
-  languageName: node
-  linkType: hard
-
 "normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
   version: 3.0.0
   resolution: "normalize-path@npm:3.0.0"
@@ -18265,15 +18455,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-locate@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "p-locate@npm:5.0.0"
-  dependencies:
-    p-limit: "npm:^3.0.2"
-  checksum: 10/1623088f36cf1cbca58e9b61c4e62bf0c60a07af5ae1ca99a720837356b5b6c5ba3eb1b2127e47a06865fee59dd0453cad7cc844cda9d5a62ac1a5a51b7c86d3
-  languageName: node
-  linkType: hard
-
 "p-map@npm:^4.0.0":
   version: 4.0.0
   resolution: "p-map@npm:4.0.0"
@@ -18758,24 +18939,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-attribute-case-insensitive@npm:^4.0.1":
-  version: 4.0.2
-  resolution: "postcss-attribute-case-insensitive@npm:4.0.2"
+"postcss-attribute-case-insensitive@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "postcss-attribute-case-insensitive@npm:5.0.2"
   dependencies:
-    postcss: "npm:^7.0.2"
-    postcss-selector-parser: "npm:^6.0.2"
-  checksum: 10/118d0ba29787a3d350f01be9b9bc0147b7001468acf8da8f2b2a3c13e7fcfd4c8dcbd66cc774f294d8716b0b65d303d8385f11cf921381a32603b885cef51ea3
+    postcss-selector-parser: "npm:^6.0.10"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/c0b8139f37e68dba372724cba03a53c30716224f0085f98485cada99489beb7c3da9d598ffc1d81519b59d9899291712c9041c250205e6ec0b034bb2c144dcf9
   languageName: node
   linkType: hard
 
-"postcss-browser-comments@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "postcss-browser-comments@npm:3.0.0"
-  dependencies:
-    postcss: "npm:^7"
+"postcss-browser-comments@npm:^4":
+  version: 4.0.0
+  resolution: "postcss-browser-comments@npm:4.0.0"
   peerDependencies:
-    browserslist: ^4
-  checksum: 10/33879d381553beed0f5a7225a0cc20b41815c0795b0ec526868e39544ff691cf04aceef91dfb44c6102fd2ed4bc2c1d8027c2097eb4493baca5aae66ca363093
+    browserslist: ">=4"
+    postcss: ">=8"
+  checksum: 10/41850023901eada80e41f7328874e458b4b1e38fcf8aea277ae02128d3585d6652063544f34b575561a8d4f53e154e8082cc82ac73e09118bbad41dc749f7a54
   languageName: node
   linkType: hard
 
@@ -18790,55 +18971,47 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-color-functional-notation@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "postcss-color-functional-notation@npm:2.0.1"
-  dependencies:
-    postcss: "npm:^7.0.2"
-    postcss-values-parser: "npm:^2.0.0"
-  checksum: 10/c9678877b16635628d356baf733d846b6b20792e56665911a8dab4f26377988b281f1d937e2ed795b41ae7ce2571c59adf8476d64f8a006aa20bb2860e6a227b
-  languageName: node
-  linkType: hard
-
-"postcss-color-gray@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "postcss-color-gray@npm:5.0.0"
+"postcss-clamp@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "postcss-clamp@npm:4.1.0"
   dependencies:
-    "@csstools/convert-colors": "npm:^1.4.0"
-    postcss: "npm:^7.0.5"
-    postcss-values-parser: "npm:^2.0.0"
-  checksum: 10/6a69147ec6a9537d35380bd48e9dc362beb8d69a14fb455a1d614129db197197f98810ee80828682a7695648106c9874cf0ac648a6f9c36da79be206022759a9
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.4.6
+  checksum: 10/fb38286d3e607a8b11ef28c89272bd572a077f5a496e2838c3996697bbc4cfb8f7a5be4b4a8987e6b0223db48c9ce5683c9d840f7afe54210ab0f77127628415
   languageName: node
   linkType: hard
 
-"postcss-color-hex-alpha@npm:^5.0.3":
-  version: 5.0.3
-  resolution: "postcss-color-hex-alpha@npm:5.0.3"
+"postcss-color-functional-notation@npm:^4.2.4":
+  version: 4.2.4
+  resolution: "postcss-color-functional-notation@npm:4.2.4"
   dependencies:
-    postcss: "npm:^7.0.14"
-    postcss-values-parser: "npm:^2.0.1"
-  checksum: 10/0a0ccb42c7c6a271ffd3c8b123b9c67744827d4b810b759731bc702fea1e00f05f08479ec7cbd8dfa47bc20510830a69f1e316a5724b9e53d5fdc6fabf90afc4
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/a64e24588538bdf182de43d093d622248c6b6b50ea8f2abbae302ec00e07c2af767841748181b28163e14bb25135d5b657ffde9c4dde2d6a9db71d0fae827cd8
   languageName: node
   linkType: hard
 
-"postcss-color-mod-function@npm:^3.0.3":
-  version: 3.0.3
-  resolution: "postcss-color-mod-function@npm:3.0.3"
+"postcss-color-hex-alpha@npm:^8.0.4":
+  version: 8.0.4
+  resolution: "postcss-color-hex-alpha@npm:8.0.4"
   dependencies:
-    "@csstools/convert-colors": "npm:^1.4.0"
-    postcss: "npm:^7.0.2"
-    postcss-values-parser: "npm:^2.0.0"
-  checksum: 10/146a299ac78e3765d547369b0b160fa2ae1b168094f5b9d4de595c565939a39ed9943aa37533213a9f0830f24135341322fbdff66f9a3783071d9564a3ae7d91
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.4
+  checksum: 10/a2f3173a60176cf0aea3b7ebbc799b2cb08229127f0fff708fa31efa14e4ded47ca49aff549d8ed92e74ffe24adee32d5b9d557dbde0524fde5fe389bc520b4e
   languageName: node
   linkType: hard
 
-"postcss-color-rebeccapurple@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "postcss-color-rebeccapurple@npm:4.0.1"
+"postcss-color-rebeccapurple@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "postcss-color-rebeccapurple@npm:7.1.1"
   dependencies:
-    postcss: "npm:^7.0.2"
-    postcss-values-parser: "npm:^2.0.0"
-  checksum: 10/815f09d25a5b6ca96a53ab0c8a39a0839164d5867ff18f0e07c643683babb103d6717cbbcf4e77d6769fd2d71e45dc359146d9ae35f2f42ae016d3e74b7a81b9
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/4876acabfe6b41f78687253eaeb1fd398144bc7e6aae9ae9ffdd6dfcf16f1a315d5a405e730b5fde5312fc21207a99d0065cef286959663d97c8ad1cc5057a87
   languageName: node
   linkType: hard
 
@@ -18865,42 +19038,47 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-custom-media@npm:^7.0.8":
-  version: 7.0.8
-  resolution: "postcss-custom-media@npm:7.0.8"
+"postcss-custom-media@npm:^8.0.2":
+  version: 8.0.2
+  resolution: "postcss-custom-media@npm:8.0.2"
   dependencies:
-    postcss: "npm:^7.0.14"
-  checksum: 10/5bd8116738f721d5fab58a882bf8d1de6313862f36b097e6a41e85ed581d094976f3e880227bfa0a4c9526dd5590b071196a161fba8def47a23885e35d88b35a
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.3
+  checksum: 10/02d0dfd53d2f748f2904d6c380e790ec6d2dca0d96e70e2d261d504700ad9fdb1f1e3febeefb4611b9005e91c412725502ed2f5885455d6e1483cc016d65af34
   languageName: node
   linkType: hard
 
-"postcss-custom-properties@npm:^8.0.11":
-  version: 8.0.11
-  resolution: "postcss-custom-properties@npm:8.0.11"
+"postcss-custom-properties@npm:^12.1.10":
+  version: 12.1.11
+  resolution: "postcss-custom-properties@npm:12.1.11"
   dependencies:
-    postcss: "npm:^7.0.17"
-    postcss-values-parser: "npm:^2.0.1"
-  checksum: 10/a071df6d3e47f09369908c9a6deb3bdfb0e68444f836c008828515be2acbd25e96596eec9bb95003ee4d02755efcc43b8b1b230868026fefc1c08d6ffe6d35bc
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/3f049f07cc45c9debcc8d662374947eb3158bb66b2722c81368b36d60de0629e75d80ccfe2ca25ba21af8ce146c50dbc91c62c28e01c06635252e39678c1eb6d
   languageName: node
   linkType: hard
 
-"postcss-custom-selectors@npm:^5.1.2":
-  version: 5.1.2
-  resolution: "postcss-custom-selectors@npm:5.1.2"
+"postcss-custom-selectors@npm:^6.0.3":
+  version: 6.0.3
+  resolution: "postcss-custom-selectors@npm:6.0.3"
   dependencies:
-    postcss: "npm:^7.0.2"
-    postcss-selector-parser: "npm:^5.0.0-rc.3"
-  checksum: 10/2841ffa283a123562a472a95c02d980641b1a59b16847cdb40516c2955e2be5d5ef221c770a512b585aacb7d252b69040b0a2a651f10e65e388b1d5cac136b05
+    postcss-selector-parser: "npm:^6.0.4"
+  peerDependencies:
+    postcss: ^8.3
+  checksum: 10/da174daa68643b4c814ea1ef763551c7c48d0873bc101f9902e85ed271f3d5f46d50e0e496eec8dc49c9c88f68f021bb5ee16940136232d4bb7e765eb5a0ae03
   languageName: node
   linkType: hard
 
-"postcss-dir-pseudo-class@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "postcss-dir-pseudo-class@npm:5.0.0"
+"postcss-dir-pseudo-class@npm:^6.0.5":
+  version: 6.0.5
+  resolution: "postcss-dir-pseudo-class@npm:6.0.5"
   dependencies:
-    postcss: "npm:^7.0.2"
-    postcss-selector-parser: "npm:^5.0.0-rc.3"
-  checksum: 10/e6634eadb0ef7003fcd025217b4f140194740d419521e3856873e9c6ea9c70f984243eac51af3aa24d378d188216a4d9148f133ce74ab88d7ac8752396dc2d7b
+    postcss-selector-parser: "npm:^6.0.10"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/70117146ff55225bcfe47186d7ff1bf68f4de551761797f60e475e923047caa0c373197b810133d52d2bca18e45040c4a9b20e92037847496509cf7089adc3ec
   languageName: node
   linkType: hard
 
@@ -18940,78 +19118,86 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-double-position-gradients@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "postcss-double-position-gradients@npm:1.0.0"
+"postcss-double-position-gradients@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "postcss-double-position-gradients@npm:3.1.2"
   dependencies:
-    postcss: "npm:^7.0.5"
-    postcss-values-parser: "npm:^2.0.0"
-  checksum: 10/717d498a704067a0f7bb8b5f738a4b1ca853a47d7aef5950501041d408b9d2c8c5856f54132c3a896adb6ab1cea21ab45c1bb875587cc75e62fe4e73989abd1e
+    "@csstools/postcss-progressive-custom-properties": "npm:^1.1.0"
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/5ed0561c3b64ba6fc6efc1069d469c98fe2b4b0460bdc3a5d859bc39224def7b3142c56a56336a7c24365aee9c94bb65aa61f498921ce8b77b4c89811beea857
   languageName: node
   linkType: hard
 
-"postcss-env-function@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "postcss-env-function@npm:2.0.2"
+"postcss-env-function@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "postcss-env-function@npm:4.0.6"
   dependencies:
-    postcss: "npm:^7.0.2"
-    postcss-values-parser: "npm:^2.0.0"
-  checksum: 10/79866ecdf3c1266620c71a929621f5197b550447433dc9c437f4b7e2059b144ca159a7bf7b9a5b396219bb0f0d986a66a6c059a7a3f871eb824435196845f94f
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.4
+  checksum: 10/76e0c9de458a8938da92be7755f0a8a25fd2d1790e509b7b3c7975c1c121b3786095dcab19a884759ff2c701b5eeefac5f3c7e8d1a7394a4ffc5ad97d2e3c1fe
   languageName: node
   linkType: hard
 
-"postcss-flexbugs-fixes@npm:4.2.1":
-  version: 4.2.1
-  resolution: "postcss-flexbugs-fixes@npm:4.2.1"
-  dependencies:
-    postcss: "npm:^7.0.26"
-  checksum: 10/51a626bc80dbe42fcc8b0895b4f23a558bb809ec52cdc05aa27fb24cdffd4c9dc53f25218085ddf407c53d76573bc6d7568219c912161609f02532a8f5f59b43
+"postcss-flexbugs-fixes@npm:5.0.2":
+  version: 5.0.2
+  resolution: "postcss-flexbugs-fixes@npm:5.0.2"
+  peerDependencies:
+    postcss: ^8.1.4
+  checksum: 10/022ddbcca8987303b9be75ff259e9de81b98643adac87a5fc6b52a0fcbbf95e1ac9fd508c4ed67cad76ac5d039b7123de8a0832329481b3c626f5d63f7a28f47
   languageName: node
   linkType: hard
 
-"postcss-focus-visible@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "postcss-focus-visible@npm:4.0.0"
+"postcss-focus-visible@npm:^6.0.4":
+  version: 6.0.4
+  resolution: "postcss-focus-visible@npm:6.0.4"
   dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/8163e129fab5527b5a424f7dce0ee8a597cbfdae445d585b08ac04b4a70010cf713292d9440923e2d97a6a0c88a6b84dac12526b8ceff75d6c68f3359271afd9
+    postcss-selector-parser: "npm:^6.0.9"
+  peerDependencies:
+    postcss: ^8.4
+  checksum: 10/efe1b14f72a590d6cd923f53e8023364a34397b377dba6caaada424f5a53621a08fec6f0bb9f3110ddabb00eb6e745746de39d1a03a2218cf89c0eb70ab11675
   languageName: node
   linkType: hard
 
-"postcss-focus-within@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "postcss-focus-within@npm:3.0.0"
+"postcss-focus-within@npm:^5.0.4":
+  version: 5.0.4
+  resolution: "postcss-focus-within@npm:5.0.4"
   dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/16aaf138f7c9e1cd0150c5bfe4972c3a4d8eafd50ff56b18298e498e6dd7a9bcdcccd53571e9ac3bb455f4f0249c1e929453fde6da5bdfa49fc13d4cabf550bf
+    postcss-selector-parser: "npm:^6.0.9"
+  peerDependencies:
+    postcss: ^8.4
+  checksum: 10/1d274e06312386190bc6cd006a92748aca59207021787a6f44b33760a549b5fa1baef2797ca839ae34a9edb36dbedc6700ab01e5b0926d6a96001223bcd674dd
   languageName: node
   linkType: hard
 
-"postcss-font-variant@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "postcss-font-variant@npm:4.0.1"
-  dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/43dac7238dbe1dc54497aa6e4cb948877b6e22a354f35aa1f19a65300542e348427aa021ac818f28eb68bd4866f1c0bebbd53e050d1d81c6f7bb4635255d5cc3
+"postcss-font-variant@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "postcss-font-variant@npm:5.0.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 10/738328282cf71750f6efc72d72017f938a6e76c9c49602aae4cc4337beac6d13e72a4ade608567293cb87cad2af502e6aaef652fdcc500e09b4aba38c3e32fc6
   languageName: node
   linkType: hard
 
-"postcss-gap-properties@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "postcss-gap-properties@npm:2.0.0"
-  dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/ba818dc3acf9f97ce7cd9fa06701f2fe6253b23c15690c00d4d60a2d0645ec7c680fc97320014aee1e15fd35f8a0a64f8a8792806c6279c30fcd8413f81dd7c9
+"postcss-gap-properties@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "postcss-gap-properties@npm:3.0.5"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/e4513d02424bd3ab1e472a81d54fe2825b7a21ff81991abd8bce1438cdc5d1006cb9c821875bd50afcd74c82a9b99d59ad36a12e8fd9da4e028b99a00793a565
   languageName: node
   linkType: hard
 
-"postcss-image-set-function@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "postcss-image-set-function@npm:3.0.1"
+"postcss-image-set-function@npm:^4.0.7":
+  version: 4.0.7
+  resolution: "postcss-image-set-function@npm:4.0.7"
   dependencies:
-    postcss: "npm:^7.0.2"
-    postcss-values-parser: "npm:^2.0.0"
-  checksum: 10/d3c7a1ae25ccb73ae47da6d3ebe04871b3feec39562ff6906a6f81c2f335d12fb06f5a7a1c4682c9ee0dd989e8aa106bcffeae0db429a6d7a2db4755682a8b22
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/17cba0b2bda98900dfe6adae88a9034cfc6fc6101b386144a27218bcdc5e65b52576326beb0d92a908423f4d144873998044e6f41c01e16165873225d3678889
   languageName: node
   linkType: hard
 
@@ -19027,45 +19213,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-initial@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "postcss-initial@npm:3.0.4"
-  dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/9b9054a2a31a56bcc718973daaab42e7848ecec613589d51e7420a72df6ab8a02680d6d2cba20968f8f8d8335416f97c1fc54bdfcc73c35fa9eea169eea9e7ad
-  languageName: node
-  linkType: hard
-
-"postcss-lab-function@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "postcss-lab-function@npm:2.0.1"
-  dependencies:
-    "@csstools/convert-colors": "npm:^1.4.0"
-    postcss: "npm:^7.0.2"
-    postcss-values-parser: "npm:^2.0.0"
-  checksum: 10/4d295a265cee9db2898ce618cf2855f9f36a6be3ab1ae695d212c46aa2d5625ec7f5f1f9e9b56b8d4cbc3111142bf411d492294f6de3512a7f11a9fbce147940
-  languageName: node
-  linkType: hard
-
-"postcss-load-config@npm:^2.0.0":
-  version: 2.1.2
-  resolution: "postcss-load-config@npm:2.1.2"
-  dependencies:
-    cosmiconfig: "npm:^5.0.0"
-    import-cwd: "npm:^2.0.0"
-  checksum: 10/d45b74bc6d8dd3f49443813725a762a98347d3607bdbffcbd44b2e4ba864925e4f623601f3bb22e41c85eecd2643c9c15b67b4b7028bf5a7f14307ca716177aa
+"postcss-initial@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "postcss-initial@npm:4.0.1"
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: 10/556848de52b502696f0a28153e14d35aca03aa702eacd742f0518a68dfca882654b600ba8742a28c6d1c378888cee767d87aec41ecd2880f8b83434df3f2b20e
   languageName: node
   linkType: hard
 
-"postcss-loader@npm:3.0.0":
-  version: 3.0.0
-  resolution: "postcss-loader@npm:3.0.0"
+"postcss-lab-function@npm:^4.2.1":
+  version: 4.2.1
+  resolution: "postcss-lab-function@npm:4.2.1"
   dependencies:
-    loader-utils: "npm:^1.1.0"
-    postcss: "npm:^7.0.0"
-    postcss-load-config: "npm:^2.0.0"
-    schema-utils: "npm:^1.0.0"
-  checksum: 10/9e3e7b281174b43ed3e06ef73fe87503e806f82dae7a8cae90df58497dd76e9dc49274151e2c80b7193f0fa3647a9a88c6f74c6de6be3d01ca1a69aea67f01ed
+    "@csstools/postcss-progressive-custom-properties": "npm:^1.1.0"
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/0cc25e4dec23a421da1a5652096c4114b2bf5df0a77ee27f1b579f0e7f3692137e1660d1b8d14f4208625f5e5ceb7ada5db67f75577d187879354733ee6fc3f2
   languageName: node
   linkType: hard
 
@@ -19085,21 +19250,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-logical@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "postcss-logical@npm:3.0.0"
-  dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/8e6be0c03fdf2e453a20550e027cd43d34e6ac79d17a40329b492c4eefed5248dd6bba65fa052461a7151356d7d7f3681349118bd7d4beb9c94312e1ee3712e9
+"postcss-logical@npm:^5.0.4":
+  version: 5.0.4
+  resolution: "postcss-logical@npm:5.0.4"
+  peerDependencies:
+    postcss: ^8.4
+  checksum: 10/de03f1e3070c3fc9d8cb373481b34a911a795138159e74451dfd553155bec5c64d7eabb30b26f8840754960d10bf9e880223ce694dcd1ec5e7b3be3cfa6438e0
   languageName: node
   linkType: hard
 
-"postcss-media-minmax@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "postcss-media-minmax@npm:4.0.0"
-  dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/d6fdd465aa62f9bc220260ef61c960c672b0c375315b8b563f07227aaef69a30734076aea4f2853f1d39d6a05d291f9da30efbea09f49de018af869e189cbd5e
+"postcss-media-minmax@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "postcss-media-minmax@npm:5.0.0"
+  peerDependencies:
+    postcss: ^8.1.0
+  checksum: 10/a35a25b944bb70583ef301ce98560b2a2062da25867f3bef5f7c62a8738b7924b78a2f7b293bba823ea4365c00e828680f51efad773f2e2cfcfa21f95282e0eb
   languageName: node
   linkType: hard
 
@@ -19280,12 +19445,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-nesting@npm:^7.0.0":
-  version: 7.0.1
-  resolution: "postcss-nesting@npm:7.0.1"
+"postcss-nesting@npm:^10.2.0":
+  version: 10.2.0
+  resolution: "postcss-nesting@npm:10.2.0"
   dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/53749320bd0dd2863ad7cb321e999ed8c46eb5b5ad2433c8c1e022e3fb68121ec0431cf779954f903a4b2b5e7a02b383773d21c782a9cb4acfc9a2d61bab618b
+    "@csstools/selector-specificity": "npm:^2.0.0"
+    postcss-selector-parser: "npm:^6.0.10"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/eb3531612243379ce43aeb864acc146b77fb61a3b34e8679b61226c3078f318a06def50c9468650e6eb904022d4de325e2555d09866ba893f413e4b0416059d8
   languageName: node
   linkType: hard
 
@@ -19388,16 +19556,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-normalize@npm:8.0.1":
-  version: 8.0.1
-  resolution: "postcss-normalize@npm:8.0.1"
+"postcss-normalize@npm:10.0.1":
+  version: 10.0.1
+  resolution: "postcss-normalize@npm:10.0.1"
   dependencies:
-    "@csstools/normalize.css": "npm:^10.1.0"
-    browserslist: "npm:^4.6.2"
-    postcss: "npm:^7.0.17"
-    postcss-browser-comments: "npm:^3.0.0"
-    sanitize.css: "npm:^10.0.0"
-  checksum: 10/01c6f7a918a7b58cd3ce4c66ae947469b9098b82a4fbceb7ac7b6c35671b9f8ed3856d1923e30d053ed22bfd7af15b34a8b242ae2b13335570cfff163de2d59c
+    "@csstools/normalize.css": "npm:*"
+    postcss-browser-comments: "npm:^4"
+    sanitize.css: "npm:*"
+  peerDependencies:
+    browserslist: ">= 4"
+    postcss: ">= 8"
+  checksum: 10/f2562ae30a75531436542cfd8ee5aec6c46f044cd410fed51d38dbecfc053f822ff5589687eeb1c0a1c5db3a16b25f6cebe0188c75be2cf4352d526212b760dc
+  languageName: node
+  linkType: hard
+
+"postcss-opacity-percentage@npm:^1.1.2":
+  version: 1.1.3
+  resolution: "postcss-opacity-percentage@npm:1.1.3"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/54d1b8ca68035bc1a5788aaabdbc3b66ffee34b5a2412cecf073627dad7e3f2bae07c01fac3bc7f46bbac5da3291ac9ddcf74bfee26dfd86f9f96c847a0afc13
   languageName: node
   linkType: hard
 
@@ -19412,86 +19590,104 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-overflow-shorthand@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "postcss-overflow-shorthand@npm:2.0.0"
+"postcss-overflow-shorthand@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "postcss-overflow-shorthand@npm:3.0.4"
   dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/195f12413140f20af11e4cf3c53b6032950863b1afc3eb248bdd718218a3e532db71c129c91bf67376484acbfaa2e681b00e1fb6920562f4116abb4edb377b7b
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/0a44a922f2bf3370cffef6f97954e17cf5f8690102093d7adf3600a47099c5babdc51d7cb309976cecbb7eb9f852a380319e4badd02f1caa4d5915c8ffc04b56
   languageName: node
   linkType: hard
 
-"postcss-page-break@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "postcss-page-break@npm:2.0.0"
-  dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/65a4453883e904ca0f337d3a988a1b5a090e2e8bc2855913cb0b4b741158e6ea2e4eed9b33f5989e7ae55faa0f7b83cdc09693d600ac4c86ce804ae381ec48a4
+"postcss-page-break@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "postcss-page-break@npm:3.0.4"
+  peerDependencies:
+    postcss: ^8
+  checksum: 10/a7d08c945fc691f62c77ac701e64722218b14ec5c8fc1972b8af9c21553492d40808cf95e61b9697b1dacaf7e6180636876d7fee314f079e6c9e39ac1b1edc6f
   languageName: node
   linkType: hard
 
-"postcss-place@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "postcss-place@npm:4.0.1"
+"postcss-place@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "postcss-place@npm:7.0.5"
   dependencies:
-    postcss: "npm:^7.0.2"
-    postcss-values-parser: "npm:^2.0.0"
-  checksum: 10/1e73e1c3549477a37176aaafe2e04a4405a8e1627863c67a15a6222ee00a07c2760357b8416fb74e4df60a17422f5bdde23d5b8fc47782d93ae0015f689bbbbd
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/a462b427c29e0276183aab717ef17893ac7fab3e0e5c459d4f54d24f936624bb71b3acc1660fd72be8bd0ecdb99ab99c40798d9846ad5a796cdc32e63ca06434
   languageName: node
   linkType: hard
 
-"postcss-preset-env@npm:6.7.0":
-  version: 6.7.0
-  resolution: "postcss-preset-env@npm:6.7.0"
-  dependencies:
-    autoprefixer: "npm:^9.6.1"
-    browserslist: "npm:^4.6.4"
-    caniuse-lite: "npm:^1.0.30000981"
-    css-blank-pseudo: "npm:^0.1.4"
-    css-has-pseudo: "npm:^0.10.0"
-    css-prefers-color-scheme: "npm:^3.1.1"
-    cssdb: "npm:^4.4.0"
-    postcss: "npm:^7.0.17"
-    postcss-attribute-case-insensitive: "npm:^4.0.1"
-    postcss-color-functional-notation: "npm:^2.0.1"
-    postcss-color-gray: "npm:^5.0.0"
-    postcss-color-hex-alpha: "npm:^5.0.3"
-    postcss-color-mod-function: "npm:^3.0.3"
-    postcss-color-rebeccapurple: "npm:^4.0.1"
-    postcss-custom-media: "npm:^7.0.8"
-    postcss-custom-properties: "npm:^8.0.11"
-    postcss-custom-selectors: "npm:^5.1.2"
-    postcss-dir-pseudo-class: "npm:^5.0.0"
-    postcss-double-position-gradients: "npm:^1.0.0"
-    postcss-env-function: "npm:^2.0.2"
-    postcss-focus-visible: "npm:^4.0.0"
-    postcss-focus-within: "npm:^3.0.0"
-    postcss-font-variant: "npm:^4.0.0"
-    postcss-gap-properties: "npm:^2.0.0"
-    postcss-image-set-function: "npm:^3.0.1"
-    postcss-initial: "npm:^3.0.0"
-    postcss-lab-function: "npm:^2.0.1"
-    postcss-logical: "npm:^3.0.0"
-    postcss-media-minmax: "npm:^4.0.0"
-    postcss-nesting: "npm:^7.0.0"
-    postcss-overflow-shorthand: "npm:^2.0.0"
-    postcss-page-break: "npm:^2.0.0"
-    postcss-place: "npm:^4.0.1"
-    postcss-pseudo-class-any-link: "npm:^6.0.0"
-    postcss-replace-overflow-wrap: "npm:^3.0.0"
-    postcss-selector-matches: "npm:^4.0.0"
-    postcss-selector-not: "npm:^4.0.0"
-  checksum: 10/d73c466e39b29a3073160305bfad00cca39440cfd13c8c7e834f9e027b8682ca049c368aab170f077319dbfde47965432db7a80154277bfc316665b8cf704080
-  languageName: node
-  linkType: hard
-
-"postcss-pseudo-class-any-link@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "postcss-pseudo-class-any-link@npm:6.0.0"
+"postcss-preset-env@npm:7.8.3":
+  version: 7.8.3
+  resolution: "postcss-preset-env@npm:7.8.3"
+  dependencies:
+    "@csstools/postcss-cascade-layers": "npm:^1.1.1"
+    "@csstools/postcss-color-function": "npm:^1.1.1"
+    "@csstools/postcss-font-format-keywords": "npm:^1.0.1"
+    "@csstools/postcss-hwb-function": "npm:^1.0.2"
+    "@csstools/postcss-ic-unit": "npm:^1.0.1"
+    "@csstools/postcss-is-pseudo-class": "npm:^2.0.7"
+    "@csstools/postcss-nested-calc": "npm:^1.0.0"
+    "@csstools/postcss-normalize-display-values": "npm:^1.0.1"
+    "@csstools/postcss-oklab-function": "npm:^1.1.1"
+    "@csstools/postcss-progressive-custom-properties": "npm:^1.3.0"
+    "@csstools/postcss-stepped-value-functions": "npm:^1.0.1"
+    "@csstools/postcss-text-decoration-shorthand": "npm:^1.0.0"
+    "@csstools/postcss-trigonometric-functions": "npm:^1.0.2"
+    "@csstools/postcss-unset-value": "npm:^1.0.2"
+    autoprefixer: "npm:^10.4.13"
+    browserslist: "npm:^4.21.4"
+    css-blank-pseudo: "npm:^3.0.3"
+    css-has-pseudo: "npm:^3.0.4"
+    css-prefers-color-scheme: "npm:^6.0.3"
+    cssdb: "npm:^7.1.0"
+    postcss-attribute-case-insensitive: "npm:^5.0.2"
+    postcss-clamp: "npm:^4.1.0"
+    postcss-color-functional-notation: "npm:^4.2.4"
+    postcss-color-hex-alpha: "npm:^8.0.4"
+    postcss-color-rebeccapurple: "npm:^7.1.1"
+    postcss-custom-media: "npm:^8.0.2"
+    postcss-custom-properties: "npm:^12.1.10"
+    postcss-custom-selectors: "npm:^6.0.3"
+    postcss-dir-pseudo-class: "npm:^6.0.5"
+    postcss-double-position-gradients: "npm:^3.1.2"
+    postcss-env-function: "npm:^4.0.6"
+    postcss-focus-visible: "npm:^6.0.4"
+    postcss-focus-within: "npm:^5.0.4"
+    postcss-font-variant: "npm:^5.0.0"
+    postcss-gap-properties: "npm:^3.0.5"
+    postcss-image-set-function: "npm:^4.0.7"
+    postcss-initial: "npm:^4.0.1"
+    postcss-lab-function: "npm:^4.2.1"
+    postcss-logical: "npm:^5.0.4"
+    postcss-media-minmax: "npm:^5.0.0"
+    postcss-nesting: "npm:^10.2.0"
+    postcss-opacity-percentage: "npm:^1.1.2"
+    postcss-overflow-shorthand: "npm:^3.0.4"
+    postcss-page-break: "npm:^3.0.4"
+    postcss-place: "npm:^7.0.5"
+    postcss-pseudo-class-any-link: "npm:^7.1.6"
+    postcss-replace-overflow-wrap: "npm:^4.0.0"
+    postcss-selector-not: "npm:^6.0.1"
+    postcss-value-parser: "npm:^4.2.0"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/e1f98019405b2f75d4e198ffa3be10ac99c2a2e0747d37ada548bc3ad6603370181045b43f55c4c79689ff5c25ff103f901eff07e12ba992e6fb015ea2eae748
+  languageName: node
+  linkType: hard
+
+"postcss-pseudo-class-any-link@npm:^7.1.6":
+  version: 7.1.6
+  resolution: "postcss-pseudo-class-any-link@npm:7.1.6"
   dependencies:
-    postcss: "npm:^7.0.2"
-    postcss-selector-parser: "npm:^5.0.0-rc.3"
-  checksum: 10/1bbd51836c513606d2aac6ae021073c075857241d3d376072460cf7988bc7218768e9e0e7c5012a34dbe5edbb147a1d47decae3ce27205bd0d89dcb6567c14bb
+    postcss-selector-parser: "npm:^6.0.10"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/2f2a6b35135033d02551ac7f260302cbe0fa306dc59428bb9a81dfc15d63093a24c3bb59a1e54d5a4661d2f4830aeaf9807d55e60d9027b9e4a378067b95a245
   languageName: node
   linkType: hard
 
@@ -19519,32 +19715,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-replace-overflow-wrap@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "postcss-replace-overflow-wrap@npm:3.0.0"
-  dependencies:
-    postcss: "npm:^7.0.2"
-  checksum: 10/3a8d85eb00a02da85e9947e65b49fed491ffa921a1bb05f2b8e3a8dedcad09fcc213d878aacba42909b0f8105472f3c12c4b45a25956d2f82ef0884e982a2cde
+"postcss-replace-overflow-wrap@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "postcss-replace-overflow-wrap@npm:4.0.0"
+  peerDependencies:
+    postcss: ^8.0.3
+  checksum: 10/0629ec17deae65e27dc3059ecec1c6bc833ee65291093b476fce151ab0af45c9e1a56ce250eb9ec4bbc306c19ab318cc982fdbcca8651d347d7dfaa3c9fc9201
   languageName: node
   linkType: hard
 
-"postcss-resolve-nested-selector@npm:^0.1.1":
+"postcss-resolve-nested-selector@npm:^0.1.6":
   version: 0.1.6
   resolution: "postcss-resolve-nested-selector@npm:0.1.6"
   checksum: 10/85453901afe2a4db497b4e0d2c9cf2a097a08fa5d45bc646547025176217050334e423475519a1e6c74a1f31ade819d16bb37a39914e5321e250695ee3feea14
   languageName: node
   linkType: hard
 
-"postcss-safe-parser@npm:5.0.2":
-  version: 5.0.2
-  resolution: "postcss-safe-parser@npm:5.0.2"
-  dependencies:
-    postcss: "npm:^8.1.0"
-  checksum: 10/b786eca091f856f2d31856d903c24c1b591ecbc0b607af0824e1cf12b9b254b5e1f24bc842cc2b95bc561f097d8b358fb4c9e04c73c1ba9c118d21bde9a83253
-  languageName: node
-  linkType: hard
-
-"postcss-safe-parser@npm:^6.0.0":
+"postcss-safe-parser@npm:6.0.0":
   version: 6.0.0
   resolution: "postcss-safe-parser@npm:6.0.0"
   peerDependencies:
@@ -19553,23 +19740,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-matches@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "postcss-selector-matches@npm:4.0.0"
-  dependencies:
-    balanced-match: "npm:^1.0.0"
-    postcss: "npm:^7.0.2"
-  checksum: 10/724f6cb345477691909468268a456f978ad3bae9ecd9908b2bb55c55c5f3c6d54a1fe50ce3956d93b122d05fc36677a8e4a34eed07bccda969c3f8baa43669a6
+"postcss-safe-parser@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "postcss-safe-parser@npm:7.0.1"
+  peerDependencies:
+    postcss: ^8.4.31
+  checksum: 10/285f30877f3ef5d43586432394ef4fcab904cd5bcfff5c26f586eb630fbee490abf2ac6d81e64fa212fb64d03630d12c2f3c5196f5637bec5ba3d043562ddf30
   languageName: node
   linkType: hard
 
-"postcss-selector-not@npm:^4.0.0":
-  version: 4.0.1
-  resolution: "postcss-selector-not@npm:4.0.1"
+"postcss-scss@npm:^4.0.9":
+  version: 4.0.9
+  resolution: "postcss-scss@npm:4.0.9"
+  peerDependencies:
+    postcss: ^8.4.29
+  checksum: 10/d191c771344357a28995a2f53041ec699070331b8238e076001cedde97215bd3ebf596d0a9882b22c566977c4b72816dafc00028dc09153c6f97f71cd28a70f7
+  languageName: node
+  linkType: hard
+
+"postcss-selector-not@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "postcss-selector-not@npm:6.0.1"
   dependencies:
-    balanced-match: "npm:^1.0.0"
-    postcss: "npm:^7.0.2"
-  checksum: 10/08fbd3e5ca273f3b767bd35d6bd033647a68f59b596d8aec19a9089b750539bdf85121ed7fd00a7763174a55c75c22a309d75d306127e23dc396069781efbaa4
+    postcss-selector-parser: "npm:^6.0.10"
+  peerDependencies:
+    postcss: ^8.2
+  checksum: 10/fe523a0219e4bd34f04498534bb9e8aec3193f3585eafe4c388d086955b41201cae71fd20980ca465acade7f182029b43dbd5ca7e9d50bf34bbcaf1d19fe3ee6
   languageName: node
   linkType: hard
 
@@ -19584,18 +19780,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^5.0.0-rc.3, postcss-selector-parser@npm:^5.0.0-rc.4":
-  version: 5.0.0
-  resolution: "postcss-selector-parser@npm:5.0.0"
-  dependencies:
-    cssesc: "npm:^2.0.0"
-    indexes-of: "npm:^1.0.1"
-    uniq: "npm:^1.0.1"
-  checksum: 10/0bfba73eb4e0a192052f008a03b15bd47539b28627b622f3cfe592c1bdc691501db28c9f703748e5ab0b015af8edb937370c8dca58ab85cb8c5e597865ef43be
-  languageName: node
-  linkType: hard
-
-"postcss-selector-parser@npm:^6.0.0, postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.6":
+"postcss-selector-parser@npm:^6.0.0, postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.6, postcss-selector-parser@npm:^6.0.9":
   version: 6.1.2
   resolution: "postcss-selector-parser@npm:6.1.2"
   dependencies:
@@ -19605,7 +19790,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-selector-parser@npm:^7.0.0":
+"postcss-selector-parser@npm:^7.0.0, postcss-selector-parser@npm:^7.1.1":
   version: 7.1.1
   resolution: "postcss-selector-parser@npm:7.1.1"
   dependencies:
@@ -19624,16 +19809,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-sorting@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "postcss-sorting@npm:4.1.0"
-  dependencies:
-    lodash: "npm:^4.17.4"
-    postcss: "npm:^7.0.0"
-  checksum: 10/ee1017e584c2fdc5b10801fc60ed7fc077e111ee2f0a326f9ebbb4b10a9d57d21e47db7be9821061d7239c7384ea94869c627c5b5f344ec42c8393152f4cbb10
-  languageName: node
-  linkType: hard
-
 "postcss-svgo@npm:^4.0.3":
   version: 4.0.3
   resolution: "postcss-svgo@npm:4.0.3"
@@ -19670,17 +19845,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-values-parser@npm:^2.0.0, postcss-values-parser@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "postcss-values-parser@npm:2.0.1"
-  dependencies:
-    flatten: "npm:^1.0.2"
-    indexes-of: "npm:^1.0.1"
-    uniq: "npm:^1.0.1"
-  checksum: 10/f69211656b90a9d2f5efb1ec4a9e5f076f968b0c1169bfddc16aa0dce2e3a2853d7875e4d8058652e9b65d084fab93bfee8da389f6a2145ac547ee9ab0a03456
-  languageName: node
-  linkType: hard
-
 "postcss@npm:7.0.36":
   version: 7.0.36
   resolution: "postcss@npm:7.0.36"
@@ -19692,7 +19856,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^7, postcss@npm:^7.0.0, postcss@npm:^7.0.1, postcss@npm:^7.0.14, postcss@npm:^7.0.17, postcss@npm:^7.0.2, postcss@npm:^7.0.26, postcss@npm:^7.0.27, postcss@npm:^7.0.32, postcss@npm:^7.0.5, postcss@npm:^7.0.6":
+"postcss@npm:^7.0.0, postcss@npm:^7.0.1, postcss@npm:^7.0.14, postcss@npm:^7.0.27, postcss@npm:^7.0.32, postcss@npm:^7.0.5, postcss@npm:^7.0.6":
   version: 7.0.39
   resolution: "postcss@npm:7.0.39"
   dependencies:
@@ -19702,7 +19866,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^7.0.30 || ^8.0.0, postcss@npm:^8.1.0, postcss@npm:^8.4.28":
+"postcss@npm:^7.0.30 || ^8.0.0":
   version: 8.4.47
   resolution: "postcss@npm:8.4.47"
   dependencies:
@@ -19724,6 +19888,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.49, postcss@npm:^8.5.6":
+  version: 8.5.8
+  resolution: "postcss@npm:8.5.8"
+  dependencies:
+    nanoid: "npm:^3.3.11"
+    picocolors: "npm:^1.1.1"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10/cbacbfd7f767e2c820d4bf09a3a744834dd7d14f69ff08d1f57b1a7defce9ae5efcf31981890d9697a972a64e9965de677932ef28e4c8ba23a87aad45b82c459
+  languageName: node
+  linkType: hard
+
 "potpack@npm:^1.0.1":
   version: 1.0.2
   resolution: "potpack@npm:1.0.2"
@@ -19766,21 +19941,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier-linter-helpers@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "prettier-linter-helpers@npm:1.0.0"
+"prettier-linter-helpers@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "prettier-linter-helpers@npm:1.0.1"
   dependencies:
     fast-diff: "npm:^1.1.2"
-  checksum: 10/00ce8011cf6430158d27f9c92cfea0a7699405633f7f1d4a45f07e21bf78e99895911cbcdc3853db3a824201a7c745bd49bfea8abd5fb9883e765a90f74f8392
+  checksum: 10/2dc35f5036a35f4c4f5e645887edda1436acb63687a7f12b2383e0a6f3c1f76b8a0a4709fe4d82e19157210feb5984b159bb714d43290022911ab53d606474ec
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.8.8":
-  version: 2.8.8
-  resolution: "prettier@npm:2.8.8"
+"prettier@npm:^3.8.1":
+  version: 3.8.1
+  resolution: "prettier@npm:3.8.1"
   bin:
-    prettier: bin-prettier.js
-  checksum: 10/00cdb6ab0281f98306cd1847425c24cbaaa48a5ff03633945ab4c701901b8e96ad558eb0777364ffc312f437af9b5a07d0f45346266e8245beaf6247b9c62b24
+    prettier: bin/prettier.cjs
+  checksum: 10/3da1cf8c1ef9bea828aa618553696c312e951f810bee368f6887109b203f18ee869fe88f66e65f9cf60b7cb1f2eae859892c860a300c062ff8ec69c381fc8dbd
   languageName: node
   linkType: hard
 
@@ -20012,6 +20187,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"qified@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "qified@npm:0.6.0"
+  dependencies:
+    hookified: "npm:^1.14.0"
+  checksum: 10/69a6340d290d6a322b2fc36a958b9a3ee6014c5e5bd2d46ac77498f1b9686efbc1b0ab6d2d1d42b720dad0eeec1ff18a4b29b7618e33435104f8cd6a3909ae70
+  languageName: node
+  linkType: hard
+
 "qs@npm:6.13.0, qs@npm:^6.12.3":
   version: 6.13.0
   resolution: "qs@npm:6.13.0"
@@ -20079,13 +20263,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"quick-lru@npm:^5.1.1":
-  version: 5.1.1
-  resolution: "quick-lru@npm:5.1.1"
-  checksum: 10/a516faa25574be7947969883e6068dbe4aa19e8ef8e8e0fd96cddd6d36485e9106d85c0041a27153286b0770b381328f4072aa40d3b18a19f5f7d2b78b94b5ed
-  languageName: node
-  linkType: hard
-
 "quickselect@npm:^2.0.0":
   version: 2.0.0
   resolution: "quickselect@npm:2.0.0"
@@ -20801,29 +20978,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"read-pkg-up@npm:^8.0.0":
-  version: 8.0.0
-  resolution: "read-pkg-up@npm:8.0.0"
-  dependencies:
-    find-up: "npm:^5.0.0"
-    read-pkg: "npm:^6.0.0"
-    type-fest: "npm:^1.0.1"
-  checksum: 10/fe4c80401656b40b408884457fffb5a8015c03b1018cfd8e48f8d82a5e9023e24963603aeb2755608d964593e046c15b34d29b07d35af9c7aa478be81805209c
-  languageName: node
-  linkType: hard
-
-"read-pkg@npm:^6.0.0":
-  version: 6.0.0
-  resolution: "read-pkg@npm:6.0.0"
-  dependencies:
-    "@types/normalize-package-data": "npm:^2.4.0"
-    normalize-package-data: "npm:^3.0.2"
-    parse-json: "npm:^5.2.0"
-    type-fest: "npm:^1.0.1"
-  checksum: 10/0cebdff381128e923815c643074a87011070e5fc352bee575d327d6485da3317fab6d802a7b03deeb0be7be8d3ad1640397b3d5d2f044452caf4e8d1736bf94f
-  languageName: node
-  linkType: hard
-
 "readable-stream@npm:>=1.0.33-1 <1.1.0-0":
   version: 1.0.34
   resolution: "readable-stream@npm:1.0.34"
@@ -20906,16 +21060,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"redent@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "redent@npm:4.0.0"
-  dependencies:
-    indent-string: "npm:^5.0.0"
-    strip-indent: "npm:^4.0.0"
-  checksum: 10/6944e7b1d8f3fd28c2515f5c605b9f7f0ea0f4edddf41890bbbdd4d9ee35abb7540c3b278f03ff827bd278bb6ff4a5bd8692ca406b748c5c1c3ce7355e9fbf8f
-  languageName: node
-  linkType: hard
-
 "redux-mock-store@npm:^1.5.4":
   version: 1.5.4
   resolution: "redux-mock-store@npm:1.5.4"
@@ -21789,10 +21933,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sanitize.css@npm:^10.0.0":
-  version: 10.0.0
-  resolution: "sanitize.css@npm:10.0.0"
-  checksum: 10/4120b06b464ffa58868cdb5a515e42571336572831ce660fbdeebfe3ce731ff964a93f4bb784b2fa0cf80ebc7c808b8ae6fbcd2c83c179d35c57df1f7682d2ce
+"sanitize.css@npm:*":
+  version: 13.0.0
+  resolution: "sanitize.css@npm:13.0.0"
+  checksum: 10/508cde59d1c99a885806387ca8350c594c4211cab16804fe66ed75cd7e1ba7ebd4079224128b1aea4d4227f0d1add3e83a85a51a6a7e4419c083f4cce70d010f
   languageName: node
   linkType: hard
 
@@ -23079,6 +23223,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-width@npm:^8.1.1":
+  version: 8.2.0
+  resolution: "string-width@npm:8.2.0"
+  dependencies:
+    get-east-asian-width: "npm:^1.5.0"
+    strip-ansi: "npm:^7.1.2"
+  checksum: 10/c4f62877ec08fca155e84a260eb4f58f473cfe5169bd1c1e21ffb563d8e0b7f6d705cc3d250f2ed6bb4f30ee9732ad026f54afaac77aa487e3d1dc1b1969e51b
+  languageName: node
+  linkType: hard
+
 "string.prototype.includes@npm:^2.0.0":
   version: 2.0.1
   resolution: "string.prototype.includes@npm:2.0.1"
@@ -23217,6 +23371,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-ansi@npm:^7.1.2":
+  version: 7.2.0
+  resolution: "strip-ansi@npm:7.2.0"
+  dependencies:
+    ansi-regex: "npm:^6.2.2"
+  checksum: 10/96da3bc6d73cfba1218625a3d66cf7d37a69bf0920d8735b28f9eeaafcdb6c1fe8440e1ae9eb1ba0ca355dbe8702da872e105e2e939fa93e7851b3cb5dd7d316
+  languageName: node
+  linkType: hard
+
 "strip-bom@npm:^3.0.0":
   version: 3.0.0
   resolution: "strip-bom@npm:3.0.0"
@@ -23266,15 +23429,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-indent@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "strip-indent@npm:4.0.0"
-  dependencies:
-    min-indent: "npm:^1.0.1"
-  checksum: 10/06cbcd93da721c46bc13caeb1c00af93a9b18146a1c95927672d2decab6a25ad83662772417cea9317a2507fb143253ecc23c4415b64f5828cef9b638a744598
-  languageName: node
-  linkType: hard
-
 "strip-json-comments@npm:^3.1.0, strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
@@ -23335,13 +23489,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"style-search@npm:^0.1.0":
-  version: 0.1.0
-  resolution: "style-search@npm:0.1.0"
-  checksum: 10/841049768c863737389558fafffa0b765f553bde041b7997c4cd54606b64b0d139936e2efee74dc1ce59fcde78aaa88484d9894838c31d5c98c1ccace312a59b
-  languageName: node
-  linkType: hard
-
 "stylehacks@npm:^4.0.0":
   version: 4.0.3
   resolution: "stylehacks@npm:4.0.3"
@@ -23353,111 +23500,103 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stylelint-config-recommended-scss@npm:3.3.0":
-  version: 3.3.0
-  resolution: "stylelint-config-recommended-scss@npm:3.3.0"
+"stylelint-config-recommended-scss@npm:17.0.0":
+  version: 17.0.0
+  resolution: "stylelint-config-recommended-scss@npm:17.0.0"
   dependencies:
-    stylelint-config-recommended: "npm:^2.2.0"
+    postcss-scss: "npm:^4.0.9"
+    stylelint-config-recommended: "npm:^18.0.0"
+    stylelint-scss: "npm:^7.0.0"
   peerDependencies:
-    stylelint: ^8.3.0 || ^9.0.0 || ^10.0.0
-    stylelint-scss: ^2.0.0 || ^3.0.0
-  checksum: 10/821b39689cd4e4a17fec8a46d98fd12f077444aa2a246714855a1ef2b1ee1db3fd786ef951f8bda4acd048134f7c34d5c21822f352316b316f7f81fbd4664d80
-  languageName: node
-  linkType: hard
-
-"stylelint-config-recommended@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "stylelint-config-recommended@npm:2.2.0"
-  peerDependencies:
-    stylelint: ^8.3.0 || ^9.0.0 || ^10.0.0
-  checksum: 10/bd9114ab7e512d0a0819ab3bc6f97cc08c6c15b521143b5eeb44f0061be874f93b104cf7495598c4d2cbab801979e25983bf08267e67e7fe36a9a3dd29c67257
+    postcss: ^8.3.3
+    stylelint: ^17.0.0
+  peerDependenciesMeta:
+    postcss:
+      optional: true
+  checksum: 10/f679312756b2f6975eb65ed96738968cc81a18c12817852d3571cff0f0e6b7b92cfc54b7b5bca8873b7ef9e8ef4eac2135222b00ed1c9b9279b5840f2c339fe2
   languageName: node
   linkType: hard
 
-"stylelint-order@npm:2.2.1":
-  version: 2.2.1
-  resolution: "stylelint-order@npm:2.2.1"
-  dependencies:
-    lodash: "npm:^4.17.10"
-    postcss: "npm:^7.0.2"
-    postcss-sorting: "npm:^4.1.0"
+"stylelint-config-recommended@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "stylelint-config-recommended@npm:18.0.0"
   peerDependencies:
-    stylelint: ^9.10.1 || ^10.0.0
-  checksum: 10/837d3f1dadb0c9188b255c33ae3281b14895e13be8f978bbb72a5bf80d3d5f80a45b4aef5021222e9b80d59336e03a4ed1d7a78ebb309b4e5f36f07258b180d3
+    stylelint: ^17.0.0
+  checksum: 10/7fadaca52bcd4522f5c053fc0b3722f4ade02682bcac26055b7814e9ba99bd7cef6b82c166e6d7ad8cbe1d27d9da2736f48b644a270fa51d93f8255a63e92fcc
   languageName: node
   linkType: hard
 
-"stylelint-scss@npm:3.12.0":
-  version: 3.12.0
-  resolution: "stylelint-scss@npm:3.12.0"
+"stylelint-scss@npm:7.0.0, stylelint-scss@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "stylelint-scss@npm:7.0.0"
   dependencies:
-    lodash: "npm:^4.17.15"
+    css-tree: "npm:^3.0.1"
+    is-plain-object: "npm:^5.0.0"
+    known-css-properties: "npm:^0.37.0"
+    mdn-data: "npm:^2.25.0"
     postcss-media-query-parser: "npm:^0.2.3"
-    postcss-resolve-nested-selector: "npm:^0.1.1"
-    postcss-selector-parser: "npm:^6.0.2"
-    postcss-value-parser: "npm:^4.0.2"
+    postcss-resolve-nested-selector: "npm:^0.1.6"
+    postcss-selector-parser: "npm:^7.1.1"
+    postcss-value-parser: "npm:^4.2.0"
   peerDependencies:
-    stylelint: ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0
-  checksum: 10/418b45cfb3468d23f153a82c7c800e9c91b49f34d78eb4e8dc9207fc574b89711d8d849822abcc441155417cb7a958a3f0e907314f3332a483253912e127e50f
+    stylelint: ^16.8.2 || ^17.0.0
+  checksum: 10/d3e56e0e340e4f5c7db7bda4f37040342c2dfda901dc987397293f0ecd457245407d569f7d5a53e6d5fc0efb94e045811d58f8497f7a5a1ea542a05bbff82bf4
   languageName: node
   linkType: hard
 
-"stylelint-use-logical@npm:^2.1.0":
-  version: 2.1.2
-  resolution: "stylelint-use-logical@npm:2.1.2"
+"stylelint-use-logical@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "stylelint-use-logical@npm:2.1.3"
   peerDependencies:
-    stylelint: ">= 11 < 17"
-  checksum: 10/8e96ffa0858d4863de9bf20164c7d7177793a35cad604ff762948ceccfef26227cccb59263237fb08e069bfcdc3f4eab7b726c3e9557bac810e37490b3ea2bf5
+    stylelint: ">= 11 < 18"
+  checksum: 10/b45187c3d850f74626d5295d5b89786ebfb4f337e763c447be810a6ba6112873f3cff29af825f98fa2b129eec85c5af6ad47f50e901076ae586c11b0982d589f
   languageName: node
   linkType: hard
 
-"stylelint@npm:^15.11.0":
-  version: 15.11.0
-  resolution: "stylelint@npm:15.11.0"
+"stylelint@npm:^17.4.0":
+  version: 17.4.0
+  resolution: "stylelint@npm:17.4.0"
   dependencies:
-    "@csstools/css-parser-algorithms": "npm:^2.3.1"
-    "@csstools/css-tokenizer": "npm:^2.2.0"
-    "@csstools/media-query-list-parser": "npm:^2.1.4"
-    "@csstools/selector-specificity": "npm:^3.0.0"
-    balanced-match: "npm:^2.0.0"
+    "@csstools/css-calc": "npm:^3.1.1"
+    "@csstools/css-parser-algorithms": "npm:^4.0.0"
+    "@csstools/css-syntax-patches-for-csstree": "npm:^1.0.27"
+    "@csstools/css-tokenizer": "npm:^4.0.0"
+    "@csstools/media-query-list-parser": "npm:^5.0.0"
+    "@csstools/selector-resolve-nested": "npm:^4.0.0"
+    "@csstools/selector-specificity": "npm:^6.0.0"
     colord: "npm:^2.9.3"
-    cosmiconfig: "npm:^8.2.0"
-    css-functions-list: "npm:^3.2.1"
-    css-tree: "npm:^2.3.1"
-    debug: "npm:^4.3.4"
-    fast-glob: "npm:^3.3.1"
+    cosmiconfig: "npm:^9.0.0"
+    css-functions-list: "npm:^3.3.3"
+    css-tree: "npm:^3.1.0"
+    debug: "npm:^4.4.3"
+    fast-glob: "npm:^3.3.3"
     fastest-levenshtein: "npm:^1.0.16"
-    file-entry-cache: "npm:^7.0.0"
+    file-entry-cache: "npm:^11.1.2"
     global-modules: "npm:^2.0.0"
-    globby: "npm:^11.1.0"
+    globby: "npm:^16.1.0"
     globjoin: "npm:^0.1.4"
-    html-tags: "npm:^3.3.1"
-    ignore: "npm:^5.2.4"
-    import-lazy: "npm:^4.0.0"
+    html-tags: "npm:^5.1.0"
+    ignore: "npm:^7.0.5"
+    import-meta-resolve: "npm:^4.2.0"
     imurmurhash: "npm:^0.1.4"
     is-plain-object: "npm:^5.0.0"
-    known-css-properties: "npm:^0.29.0"
-    mathml-tag-names: "npm:^2.1.3"
-    meow: "npm:^10.1.5"
-    micromatch: "npm:^4.0.5"
+    mathml-tag-names: "npm:^4.0.0"
+    meow: "npm:^14.0.0"
+    micromatch: "npm:^4.0.8"
     normalize-path: "npm:^3.0.0"
-    picocolors: "npm:^1.0.0"
-    postcss: "npm:^8.4.28"
-    postcss-resolve-nested-selector: "npm:^0.1.1"
-    postcss-safe-parser: "npm:^6.0.0"
-    postcss-selector-parser: "npm:^6.0.13"
+    picocolors: "npm:^1.1.1"
+    postcss: "npm:^8.5.6"
+    postcss-safe-parser: "npm:^7.0.1"
+    postcss-selector-parser: "npm:^7.1.1"
     postcss-value-parser: "npm:^4.2.0"
-    resolve-from: "npm:^5.0.0"
-    string-width: "npm:^4.2.3"
-    strip-ansi: "npm:^6.0.1"
-    style-search: "npm:^0.1.0"
-    supports-hyperlinks: "npm:^3.0.0"
+    string-width: "npm:^8.1.1"
+    supports-hyperlinks: "npm:^4.4.0"
     svg-tags: "npm:^1.0.0"
-    table: "npm:^6.8.1"
-    write-file-atomic: "npm:^5.0.1"
+    table: "npm:^6.9.0"
+    write-file-atomic: "npm:^7.0.0"
   bin:
     stylelint: bin/stylelint.mjs
-  checksum: 10/34b9242b8a009642f8a9a50319c9a6c94b745a8605890df99830fc4d4847031e59719e68df12eed897fd486724fbfb1d240a8f267bb8b4440152a4dbfc3765f5
+  checksum: 10/27c95604df4659f660fd94a7f1bec43f8ec1a8904ac3da1b6a1124ecda52c4e1fd7cf95c5f9a57bb768f3f12f41351fed66c5f0dee79900229cb8942f6b59825
   languageName: node
   linkType: hard
 
@@ -23495,6 +23634,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"supports-color@npm:^10.2.2":
+  version: 10.2.2
+  resolution: "supports-color@npm:10.2.2"
+  checksum: 10/bd132705fc07213a4024131fb061f0a46a48b49ecaf434bb029c0a5aa0339b969236d496d63969e3c248a90fdcac16d4f9c5bf187e7be0bfb5e804ed13bef6b0
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -23531,13 +23677,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"supports-hyperlinks@npm:^3.0.0":
-  version: 3.1.0
-  resolution: "supports-hyperlinks@npm:3.1.0"
+"supports-hyperlinks@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "supports-hyperlinks@npm:4.4.0"
   dependencies:
-    has-flag: "npm:^4.0.0"
-    supports-color: "npm:^7.0.0"
-  checksum: 10/e893fb035ecd86e42c5225dc1cd24db56eb950ed77b2e8f59c7aaf2836b8b2ef276ffd11f0df88b0b12184832aa2333f875eefcb74d3c47ed2633b6b41d4be43
+    has-flag: "npm:^5.0.1"
+    supports-color: "npm:^10.2.2"
+  checksum: 10/f128846b76c2d573cb5a44999513f4ccf407969e6ff6ebe8a7587c2bcd24dc75accb310a9188d1afde416d4cbdf9a5069889ad9debc1789d8a9e4057513c5f35
   languageName: node
   linkType: hard
 
@@ -23640,7 +23786,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"table@npm:^6.0.9, table@npm:^6.8.1":
+"synckit@npm:^0.11.12":
+  version: 0.11.12
+  resolution: "synckit@npm:0.11.12"
+  dependencies:
+    "@pkgr/core": "npm:^0.2.9"
+  checksum: 10/2f51978bfed81aaf0b093f596709a72c49b17909020f42b43c5549f9c0fe18b1fe29f82e41ef771172d729b32e9ce82900a85d2b87fa14d59f886d4df8d7a329
+  languageName: node
+  linkType: hard
+
+"table@npm:^6.0.9":
   version: 6.8.2
   resolution: "table@npm:6.8.2"
   dependencies:
@@ -23653,6 +23808,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"table@npm:^6.9.0":
+  version: 6.9.0
+  resolution: "table@npm:6.9.0"
+  dependencies:
+    ajv: "npm:^8.0.1"
+    lodash.truncate: "npm:^4.4.2"
+    slice-ansi: "npm:^4.0.0"
+    string-width: "npm:^4.2.3"
+    strip-ansi: "npm:^6.0.1"
+  checksum: 10/976da6d89841566e39628d1ba107ffab126964c9390a0a877a7c54ebb08820bf388d28fe9f8dcf354b538f19634a572a506c38a3762081640013a149cc862af9
+  languageName: node
+  linkType: hard
+
 "tapable@npm:^1.0.0":
   version: 1.1.3
   resolution: "tapable@npm:1.1.3"
@@ -24232,13 +24400,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"trim-newlines@npm:^4.0.2":
-  version: 4.1.1
-  resolution: "trim-newlines@npm:4.1.1"
-  checksum: 10/5b09f8e329e8f33c1111ef26906332ba7ba7248cde3e26fc054bb3d69f2858bf5feedca9559c572ff91f33e52977c28e0d41c387df6a02a633cbb8c2d8238627
-  languageName: node
-  linkType: hard
-
 "trim-repeated@npm:^1.0.0":
   version: 1.0.0
   resolution: "trim-repeated@npm:1.0.0"
@@ -24470,13 +24631,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^1.0.1, type-fest@npm:^1.2.1, type-fest@npm:^1.2.2":
-  version: 1.4.0
-  resolution: "type-fest@npm:1.4.0"
-  checksum: 10/89875c247564601c2650bacad5ff80b859007fbdb6c9e43713ae3ffa3f584552eea60f33711dd762e16496a1ab4debd409822627be14097d9a17e39c49db591a
-  languageName: node
-  linkType: hard
-
 "type-is@npm:~1.6.18":
   version: 1.6.18
   resolution: "type-is@npm:1.6.18"
@@ -24667,6 +24821,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicorn-magic@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "unicorn-magic@npm:0.4.0"
+  checksum: 10/5a02923ac75a322b6ea8b0835cd106180cce01b67110f933ebd446757c708591ea45fbbe576f1e027c44a69642926d1d5b94ddf3a64082f4ff420296c84caff9
+  languageName: node
+  linkType: hard
+
 "union-value@npm:^1.0.0":
   version: 1.0.1
   resolution: "union-value@npm:1.0.1"
@@ -25948,13 +26109,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"write-file-atomic@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "write-file-atomic@npm:5.0.1"
+"write-file-atomic@npm:^7.0.0":
+  version: 7.0.1
+  resolution: "write-file-atomic@npm:7.0.1"
   dependencies:
-    imurmurhash: "npm:^0.1.4"
     signal-exit: "npm:^4.0.1"
-  checksum: 10/648efddba54d478d0e4330ab6f239976df3b9752b123db5dc9405d9b5af768fa9d70ce60c52fdbe61d1200d24350bc4fbcbaf09288496c2be050de126bd95b7e
+  checksum: 10/99c9fdf6fb282fc798102bc8763430fbf0f9b26030b510bf085e25c13ac9a36b0a0c8198e52eddcdb6ffcac68f0959a3db7b9b025f40df48374fd699db559f55
   languageName: node
   linkType: hard
 
@@ -26070,7 +26230,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:^20.2.2, yargs-parser@npm:^20.2.9":
+"yargs-parser@npm:^20.2.2":
   version: 20.2.9
   resolution: "yargs-parser@npm:20.2.9"
   checksum: 10/0188f430a0f496551d09df6719a9132a3469e47fe2747208b1dd0ab2bb0c512a95d0b081628bbca5400fb20dbf2fabe63d22badb346cecadffdd948b049f3fcc

From af01ab753070d4cee30b53c4bf3b6113fc2cf21f Mon Sep 17 00:00:00 2001
From: Dan Halson <danhalson@users.noreply.github.com>
Date: Thu, 12 Mar 2026 15:51:22 +0000
Subject: [PATCH 20/23] 1318-integrate-stylelint-into-ci (#1367)

Closes: #1318
---
 src/assets/stylesheets/index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 0b66db029..1ce61e84d 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -48,3 +48,4 @@
     --rpf-button-secondary-border-color-hover: var(--editor-color-theme-secondary);
   }
 }
+

From 7bd295011d7c5a1be28c815875cf9b8698a58bdc Mon Sep 17 00:00:00 2001
From: Nathan Richards <DNR500@users.noreply.github.com>
Date: Fri, 13 Mar 2026 10:22:42 +0100
Subject: [PATCH 21/23] 1187: Scatch editor project upload (#1371)

Closes:
https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/1187

This adds an sb3 Upload project button to the save and download panel

The button currently will only be visible on the scratch editor as it
currently only allows upload for scratch projects
---
 public/translations/en-US.json                |  3 +-
 public/translations/en.json                   |  3 +-
 public/translations/es-LA.json                |  3 +-
 public/translations/fr-FR.json                |  3 +-
 public/translations/xx-XX.json                |  3 +-
 src/assets/icons/upload.svg                   |  4 +
 .../Sidebar/DownloadPanel/DownloadPanel.jsx   | 25 ++++--
 .../ScratchEditor/ScratchIntegrationHOC.jsx   |  6 +-
 .../ScratchIntegrationHOC.test.jsx            | 29 +++++++
 src/components/UploadButton/UploadButton.jsx  | 61 +++++++++++++++
 .../UploadButton/UploadButton.test.js         | 77 +++++++++++++++++++
 11 files changed, 202 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/icons/upload.svg
 create mode 100644 src/components/UploadButton/UploadButton.jsx
 create mode 100644 src/components/UploadButton/UploadButton.test.js

diff --git a/public/translations/en-US.json b/public/translations/en-US.json
index 199108f8c..830bd1a74 100644
--- a/public/translations/en-US.json
+++ b/public/translations/en-US.json
@@ -58,7 +58,8 @@
     "logInButton": "Log in to save",
     "signUpButton": "Sign up",
     "downloadHint": "Download your project files so you can use them offline and in a different code editor.",
-    "downloadButton": "Download project"
+    "downloadButton": "Download project",
+    "uploadButton": "Upload project"
   },
   "footer": {
     "accessibility": "Accessibility",
diff --git a/public/translations/en.json b/public/translations/en.json
index ce4781aee..acc3e94cb 100644
--- a/public/translations/en.json
+++ b/public/translations/en.json
@@ -58,7 +58,8 @@
     "logInButton": "Log in to save",
     "signUpButton": "Sign up",
     "downloadHint": "Download your project files so you can use them offline and in a different code editor.",
-    "downloadButton": "Download project"
+    "downloadButton": "Download project",
+    "uploadButton": "Upload project"
   },
   "footer": {
     "accessibility": "Accessibility",
diff --git a/public/translations/es-LA.json b/public/translations/es-LA.json
index 976bb5e3b..592626449 100644
--- a/public/translations/es-LA.json
+++ b/public/translations/es-LA.json
@@ -58,7 +58,8 @@
     "logInButton": "Inicia sesión para guardar",
     "signUpButton": "Registrarse",
     "downloadHint": "Descarga los archivos de tu proyecto para que usarlos sin conexión y en un editor de código diferente.",
-    "downloadButton": "Descargar proyecto"
+    "downloadButton": "Descargar proyecto",
+    "uploadButton": "Cargar proyecto"
   },
   "footer": {
     "accessibility": "Accesibilidad",
diff --git a/public/translations/fr-FR.json b/public/translations/fr-FR.json
index 44feecaaf..ec1617621 100644
--- a/public/translations/fr-FR.json
+++ b/public/translations/fr-FR.json
@@ -58,7 +58,8 @@
     "logInButton": "Connectez-vous pour enregistrer",
     "signUpButton": "S'inscrire",
     "downloadHint": "Téléchargez vos fichiers de projet afin de pouvoir les utiliser hors ligne et dans un autre éditeur de code.",
-    "downloadButton": "Télécharger le projet"
+    "downloadButton": "Télécharger le projet",
+    "uploadButton": "Importer le projet"
   },
   "footer": {
     "accessibility": "Accessibilité",
diff --git a/public/translations/xx-XX.json b/public/translations/xx-XX.json
index ce1dbf426..2677d392a 100644
--- a/public/translations/xx-XX.json
+++ b/public/translations/xx-XX.json
@@ -57,7 +57,8 @@
     "logInButton": "Zum Speichern anmelden",
     "signUpButton": "Registrieren",
     "downloadHint": "Laden Sie Ihre Projektdateien herunter, damit Sie sie offline und in einem anderen Code-Editor verwenden können.",
-    "downloadButton": "Projekt herunterladen"
+    "downloadButton": "Projekt herunterladen",
+    "uploadButton": "Projekt hochladen"
   },
   "footer": {
     "accessibility": "Barrierefreiheit",
diff --git a/src/assets/icons/upload.svg b/src/assets/icons/upload.svg
new file mode 100644
index 000000000..8dfb089dd
--- /dev/null
+++ b/src/assets/icons/upload.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="nonee" viewBox="0 0 24 24">
+  <path d="m12 4.012-5 4.99 1.4 1.447L11 7.854v8.134h2V7.854l2.6 2.595L17 9.002Z "/>
+  <path d="M4 20v-5h2v3h12v-3h2v5z"/>
+</svg>
diff --git a/src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx b/src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx
index 749e71726..9643f3269 100644
--- a/src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx
+++ b/src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.jsx
@@ -6,6 +6,7 @@ import DownloadButton from "../../../DownloadButton/DownloadButton";
 import SaveButton from "../../../SaveButton/SaveButton";
 import DesignSystemButton from "../../../DesignSystemButton/DesignSystemButton";
 import DownloadIcon from "../../../../assets/icons/download.svg";
+import UploadIcon from "../../../../assets/icons/upload.svg";
 import { isOwner } from "../../../../utils/projectHelpers";
 
 import {
@@ -13,6 +14,7 @@ import {
   signUpEvent,
 } from "../../../../events/WebComponentCustomEvents";
 import "../../../../assets/stylesheets/DownloadPanel.scss";
+import UploadButton from "../../../UploadButton/UploadButton";
 
 export const DownloadPanel = () => {
   const { t } = useTranslation();
@@ -61,12 +63,23 @@ export const DownloadPanel = () => {
         <p className="download-panel__hint">
           {t("downloadPanel.downloadHint")}
         </p>
-        <DownloadButton
-          buttonText={t("downloadPanel.downloadButton")}
-          className="btn btn--secondary download-panel__button"
-          Icon={DownloadIcon}
-          fill
-        />
+        <div className="download-panel__button-container">
+          <DownloadButton
+            buttonText={t("downloadPanel.downloadButton")}
+            className="btn btn--secondary download-panel__button"
+            Icon={DownloadIcon}
+            fill
+          />
+          {/* Upload currently only applies to Scratch; hidden for other project types. */}
+          {project.project_type === "code_editor_scratch" && (
+            <UploadButton
+              buttonText={t("downloadPanel.uploadButton")}
+              className="btn btn--secondary download-panel__button"
+              Icon={UploadIcon}
+              fill
+            />
+          )}
+        </div>
       </div>
       {user && !projectOwner && <SaveButton fill />}
     </SidebarPanel>
diff --git a/src/components/ScratchEditor/ScratchIntegrationHOC.jsx b/src/components/ScratchEditor/ScratchIntegrationHOC.jsx
index 36a8955c0..87bea0424 100644
--- a/src/components/ScratchEditor/ScratchIntegrationHOC.jsx
+++ b/src/components/ScratchEditor/ScratchIntegrationHOC.jsx
@@ -69,10 +69,8 @@ const ScratchIntegrationHOC = function (WrappedComponent) {
     }
     handleUpload(event) {
       const file = event.data.file;
-      file.arrayBuffer().then((blob) => {
-        this.props.loadProject(blob).then(() => {
-          console.log("done uploading");
-        });
+      file?.arrayBuffer()?.then((arrayBuffer) => {
+        this.props.loadProject(arrayBuffer);
       });
     }
     handleRemix() {
diff --git a/src/components/ScratchEditor/ScratchIntegrationHOC.test.jsx b/src/components/ScratchEditor/ScratchIntegrationHOC.test.jsx
index 3971cd5fb..4f1889f33 100644
--- a/src/components/ScratchEditor/ScratchIntegrationHOC.test.jsx
+++ b/src/components/ScratchEditor/ScratchIntegrationHOC.test.jsx
@@ -26,6 +26,7 @@ describe("ScratchIntegrationHOC", () => {
       saveAs.mockClear();
     }
     mockSaveProjectSb3.mockClear();
+    mockLoadProject.mockClear();
     process.env.REACT_APP_ALLOWED_IFRAME_ORIGINS = allowedOrigin;
     const mockStore = configureStore([]);
     store = mockStore({
@@ -72,4 +73,32 @@ describe("ScratchIntegrationHOC", () => {
       expect(mockSaveProjectSb3).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe("scratch-gui-upload message", () => {
+    it("calls loadProject with arrayBuffer from event.data.file", async () => {
+      const arrayBuffer = new ArrayBuffer(8);
+      const file = {
+        arrayBuffer: jest.fn().mockResolvedValue(arrayBuffer),
+      };
+
+      render(
+        React.createElement(Provider, { store }, React.createElement(Wrapped)),
+      );
+
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          origin: allowedOrigin,
+          data: {
+            type: "scratch-gui-upload",
+            file,
+          },
+        }),
+      );
+
+      await waitFor(() => {
+        expect(file.arrayBuffer).toHaveBeenCalledTimes(1);
+        expect(mockLoadProject).toHaveBeenCalledWith(arrayBuffer);
+      });
+    });
+  });
 });
diff --git a/src/components/UploadButton/UploadButton.jsx b/src/components/UploadButton/UploadButton.jsx
new file mode 100644
index 000000000..53c081e33
--- /dev/null
+++ b/src/components/UploadButton/UploadButton.jsx
@@ -0,0 +1,61 @@
+import React, { useRef } from "react";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+
+import DesignSystemButton from "../DesignSystemButton/DesignSystemButton";
+import { postMessageToScratchIframe } from "../../utils/scratchIframe";
+
+const UploadButton = (props) => {
+  const {
+    buttonText,
+    className,
+    Icon,
+    type = "secondary",
+    ...otherProps
+  } = props;
+  const project = useSelector((state) => state.editor.project);
+  const fileInputRef = useRef(null);
+
+  const onClickUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const onFileSelected = (event) => {
+    const file = event.target.files?.[0];
+    if (!file || project.project_type !== "code_editor_scratch") return;
+    postMessageToScratchIframe({ type: "scratch-gui-upload", file });
+
+    // Reset so the same file can be selected again (change will fire next time).
+    event.target.value = "";
+  };
+
+  return (
+    <>
+      <DesignSystemButton
+        className={className}
+        onClick={onClickUpload}
+        text={buttonText}
+        textAlways
+        icon={Icon ? <Icon /> : null}
+        type={type}
+        {...otherProps}
+      />
+      <input
+        ref={fileInputRef}
+        type="file"
+        hidden
+        accept=".sb3"
+        onChange={onFileSelected}
+        data-testid="upload-file-input"
+      />
+    </>
+  );
+};
+
+UploadButton.propTypes = {
+  buttonText: PropTypes.string,
+  className: PropTypes.string,
+  Icon: PropTypes.func,
+};
+
+export default UploadButton;
diff --git a/src/components/UploadButton/UploadButton.test.js b/src/components/UploadButton/UploadButton.test.js
new file mode 100644
index 000000000..8e3052303
--- /dev/null
+++ b/src/components/UploadButton/UploadButton.test.js
@@ -0,0 +1,77 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Provider } from "react-redux";
+import { configureStore } from "@reduxjs/toolkit";
+import UploadButton from "./UploadButton";
+import { postMessageToScratchIframe } from "../../utils/scratchIframe";
+
+jest.mock("../../utils/scratchIframe");
+
+const createStore = (project) =>
+  configureStore({
+    reducer: {
+      editor: () => ({ project }),
+    },
+  });
+
+const renderUploadButton = (project) => {
+  postMessageToScratchIframe.mockClear();
+  const store = createStore(project);
+  render(
+    <Provider store={store}>
+      <UploadButton buttonText="Upload" Icon={() => null} />
+    </Provider>,
+  );
+  return screen.getByTestId("upload-file-input");
+};
+
+describe("UploadButton", () => {
+  describe("when project is Scratch", () => {
+    let fileInput;
+
+    beforeEach(() => {
+      fileInput = renderUploadButton({
+        project_type: "code_editor_scratch",
+        name: "Cool Scratch",
+      });
+    });
+
+    test("clicking the button triggers the file input", () => {
+      const button = screen.getByRole("button", { name: "Upload" });
+      const clickSpy = jest.spyOn(fileInput, "click");
+      fireEvent.click(button);
+      expect(clickSpy).toHaveBeenCalledTimes(1);
+    });
+
+    test("selecting a file sends scratch-gui-upload message with the file", () => {
+      const file = new File(["content"], "project.sb3", {
+        type: "application/octet-stream",
+      });
+      fireEvent.change(fileInput, { target: { files: [file] } });
+      expect(postMessageToScratchIframe).toHaveBeenCalledTimes(1);
+      expect(postMessageToScratchIframe).toHaveBeenCalledWith({
+        type: "scratch-gui-upload",
+        file,
+      });
+    });
+  });
+
+  describe("when project is not Scratch", () => {
+    let fileInput;
+
+    beforeEach(() => {
+      fileInput = renderUploadButton({
+        project_type: "code_editor_python",
+        name: "My Python Project",
+      });
+    });
+
+    test("selecting a file does not call postMessageToScratchIframe", () => {
+      const file = new File(["content"], "project.sb3", {
+        type: "application/octet-stream",
+      });
+      fireEvent.change(fileInput, { target: { files: [file] } });
+      expect(postMessageToScratchIframe).not.toHaveBeenCalled();
+    });
+  });
+});

From 905ddb4ad4f989f12962992afb7f347923b13712 Mon Sep 17 00:00:00 2001
From: Jamie Benstead <jamie.benstead@gmail.com>
Date: Wed, 11 Mar 2026 14:19:10 +0000
Subject: [PATCH 22/23] Move styles over to InternalStyles

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

diff --git a/src/assets/stylesheets/InternalStyles.scss b/src/assets/stylesheets/InternalStyles.scss
index 9aaf674f0..bc09b8220 100644
--- a/src/assets/stylesheets/InternalStyles.scss
+++ b/src/assets/stylesheets/InternalStyles.scss
@@ -236,3 +236,4 @@ button:focus-visible {
   }
 }
 
+

From 724c0581f6bb804857f9db47197767842e014114 Mon Sep 17 00:00:00 2001
From: Jamie Benstead <jamie.benstead@gmail.com>
Date: Fri, 13 Mar 2026 15:19:14 +0000
Subject: [PATCH 23/23] Remove duplicate

---
 src/assets/stylesheets/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 1ce61e84d..13cd28c5f 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -40,7 +40,6 @@
     --rpf-button-primary-background-color-focus: var(--editor-color-theme-secondary);
     --rpf-button-primary-background-color-active: var(--rpf-teal-200);
     --rpf-button-primary-color-disabled-focus: var(--editor-color-theme-secondary);
-    --rpf-button-primary-background-color: var(--editor-color-theme-secondary);
     --rpf-button-primary-background-color-hover: var(--rpf-teal-600);
     --rpf-button-primary-text-color: var(--rpf-black);