import * as p from "react";
import c from "./index-_virtual16.js";
import "./index-emotion-react.browser.esm.js";
import m from "./index-emotion-cache.browser.esm.js";
import { jsx as l } from "react/jsx-runtime";
import { C as f } from "./index-emotion-element-8ce3e063.browser.esm.js";
function u(n, r) {
  const e = m({
    key: "css",
    prepend: n
  });
  if (r) {
    const o = e.insert;
    e.insert = (...t) => (t[1].styles.match(/^@layer\s+[^{]*$/) || (t[1].styles = `@layer mui {${t[1].styles}}`), o(...t));
  }
  return e;
}
const i = /* @__PURE__ */ new Map();
function h(n) {
  const {
    injectFirst: r,
    enableCssLayer: e,
    children: o
  } = n, t = p.useMemo(() => {
    const s = `${r}-${e}`;
    if (typeof document == "object" && i.has(s))
      return i.get(s);
    const a = u(r, e);
    return i.set(s, a), a;
  }, [r, e]);
  return r || e ? /* @__PURE__ */ l(f, {
    value: t,
    children: o
  }) : o;
}
process.env.NODE_ENV !== "production" && (h.propTypes = {
  /**
   * Your component tree.
   */
  children: c.node,
  /**
   * If true, MUI styles are wrapped in CSS `@layer mui` rule.
   * It helps to override MUI styles when using CSS Modules, Tailwind CSS, plain CSS, or any other styling solution.
   */
  enableCssLayer: c.bool,
  /**
   * By default, the styles are injected last in the <head> element of the page.
   * As a result, they gain more specificity than any other style sheet.
   * If you want to override MUI's styles, set this prop.
   */
  injectFirst: c.bool
});
export {
  h as default
};
