Make Playgrounds inert

buildo · Nov 24, 2023 · 1b25fba · 1b25fba
1 parent f6cf30d
commit 1b25fba
Showing 1 changed file with 13 additions and 11 deletions.
diff --git 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>
   );
 }