sixseconds-modules 2.0.3 → 2.0.4

package/dist/index.cjs.js

@@ -12924,21 +12924,25 @@ function ShadowIsland({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: hostRef, className: "sixseconds-header-shadow-host", suppressHydrationWarning: true });
 }
 function IsolatedProviders({ cache, children }) {
-  const overlayRef = React.useRef(null);
   const theme = React.useMemo(
     () => styles.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__ */ jsxRuntime.jsx(react.CacheProvider, { value: cache, children: /* @__PURE__ */ jsxRuntime.jsxs(styles.ThemeProvider, { theme, children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: overlayRef, className: "sixseconds-header-overlays" })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.CacheProvider, { value: cache, children: /* @__PURE__ */ jsxRuntime.jsx(styles.ThemeProvider, { theme, children }) });
 }
 const DangerDialog = ({
   open,