var _GlobalStyles;
import * as React from 'react';
import { StyleSheetManager } from 'styled-components';
import { CacheProvider } from '@emotion/react';
import { createEmotionCache as createCache } from '@mui/material-nextjs/v15-pagesRouter';
import { prefixer } from 'stylis';
import rtlPlugin from '@mui/stylis-plugin-rtl';
import GlobalStyles from '@mui/material/GlobalStyles';
import { ThemeOptionsContext } from "../ThemeContext/index.js";
import globalSelector from "../globalSelector/index.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// Cache for the rtl version of the styles
const cacheRtl = createCache({
  key: 'rtl',
  prepend: true,
  enableCssLayer: true,
  stylisPlugins: [prefixer, rtlPlugin, globalSelector]
});
export default function StyledEngineProvider(props) {
  const {
    children,
    cacheLtr
  } = props;
  const {
    direction
  } = React.useContext(ThemeOptionsContext);
  const rtl = direction === 'rtl';
  const emotionCache = direction === 'rtl' ? cacheRtl : cacheLtr;
  return /*#__PURE__*/_jsx(StyleSheetManager, {
    stylisPlugins: rtl ? [rtlPlugin] : [],
    children: /*#__PURE__*/_jsxs(CacheProvider, {
      value: emotionCache,
      children: [_GlobalStyles || (_GlobalStyles = /*#__PURE__*/_jsx(GlobalStyles, {
        styles: "@layer theme, docsearch, mui, utilities;"
      })), children]
    })
  });
}