sixseconds-modules 2.0.3 → 2.0.4

package/dist/index.es.js

@@ -12906,21 +12906,25 @@ function ShadowIsland({ children }) {
   return /* @__PURE__ */ jsx("div", { ref: hostRef, className: "sixseconds-header-shadow-host", suppressHydrationWarning: true });
 }
 function IsolatedProviders({ cache, children }) {
-  const overlayRef = useRef(null);
   const theme = useMemo(
     () => createTheme({
       typography: { fontFamily: "'Inter', sans-serif" },
       components: {
-        MuiModal: { defaultProps: { container: () => overlayRef.current } },
-        MuiPopper: { defaultProps: { container: () => overlayRef.current } }
+        // Keep every MUI overlay INSIDE the shadow root. By default Dialog/Menu/
+        // Popover (via Modal) and Tooltip/Autocomplete (via Popper) portal to
+        // document.body — which is OUTSIDE the shadow boundary. There the HOST
+        // app's MUI theme styles them (identical `.MuiPaper`/`.MuiDialog` class
+        // names) while our shadow-scoped styles do NOT reach them, so spacing
+        // collapses. `disablePortal` renders them in-tree instead, so they stay
+        // isolated and correctly styled. (Backdrops/poppers are position:fixed,
+        // so they still overlay the viewport correctly from inside the tree.)
+        MuiModal: { defaultProps: { disablePortal: true } },
+        MuiPopper: { defaultProps: { disablePortal: true } }
       }
     }),
     []
   );
-  return /* @__PURE__ */ jsx(CacheProvider, { value: cache, children: /* @__PURE__ */ jsxs(ThemeProvider, { theme, children: [
-    children,
-    /* @__PURE__ */ jsx("div", { ref: overlayRef, className: "sixseconds-header-overlays" })
-  ] }) });
+  return /* @__PURE__ */ jsx(CacheProvider, { value: cache, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children }) });
 }
 const DangerDialog = ({
   open,