From 1b25fba97be3b74463f1be44f48110ee15881bd2 Mon Sep 17 00:00:00 2001
From: Vincenzo Guerrisi <vincenzo@buildo.io>
Date: Fri, 24 Nov 2023 12:43:56 +0100
Subject: [PATCH] Make Playgrounds inert

---
 .../src/TokensSection/Playground.tsx          | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/configuration-builder/src/TokensSection/Playground.tsx b/packages/configuration-builder/src/TokensSection/Playground.tsx
index 1a0edcff1..792c75efb 100644
--- a/packages/configuration-builder/src/TokensSection/Playground.tsx
+++ b/packages/configuration-builder/src/TokensSection/Playground.tsx
@@ -5,16 +5,18 @@ export function Playground({ children }: { children: Children }) {
   const theme = useConfiguredTheme();
 
   return (
-    <Box
-      borderRadius={24}
-      padding={40}
-      background="backgroundSecondary"
-      display="flex"
-      flexDirection="column"
-      flexGrow={1}
-      overflow="hidden"
-    >
-      <BentoThemeProvider theme={theme}>{children}</BentoThemeProvider>
-    </Box>
+    <div ref={(node) => node && node.setAttribute("inert", "true")}>
+      <Box
+        borderRadius={24}
+        padding={40}
+        background="backgroundSecondary"
+        display="flex"
+        flexDirection="column"
+        flexGrow={1}
+        overflow="hidden"
+      >
+        <BentoThemeProvider theme={theme}>{children}</BentoThemeProvider>
+      </Box>
+    </div>
   );
 }