bugfix: add OverlayProvider just once with the MarigoldProvider

.changeset/neat-penguins-tap.md

@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+bugfix: add OverlayProvider just once with the MarigoldProvider

packages/components/src/Provider/MarigoldProvider.tsx

@@ -1,8 +1,31 @@
 import React from 'react';
 import { OverlayProvider } from '@react-aria/overlays';
-import { ThemeProvider, ThemeProviderProps, useTheme } from '@marigold/system';
+import {
+  Theme,
+  ThemeProvider,
+  ThemeProviderProps,
+  useTheme,
+} from '@marigold/system';
 import { Global } from '@emotion/react';
 
+
+interface ThemeContextValue {
+  theme: Theme;
+}
+
+const defaultThemeValue: ThemeContextValue = {
+  theme: {},
+};
+
+/**
+ * @internal
+ */
+const __MarigoldContext = React.createContext(
+  defaultThemeValue
+)
+
+const useMarigoldTheme = () => React.useContext(__MarigoldContext)
+
 const GlobalStyles = () => {
   const { css } = useTheme();
   const styles = css({
@@ -17,12 +40,13 @@ export const MarigoldProvider: React.FC<ThemeProviderProps> = ({
   theme,
   children,
 }) => {
+  const outerTheme = useMarigoldTheme();
+  const isTopLevel = outerTheme === defaultThemeValue
+
   return (
     <ThemeProvider theme={theme}>
-      <OverlayProvider>
-        <GlobalStyles />
-        {children}
-      </OverlayProvider>
+      {isTopLevel && <GlobalStyles />}
+      <OverlayProvider>{children}</OverlayProvider>
     </ThemeProvider>
   );
 };