"use client";
import { BuilderConfiguration as o } from "../../config/builder.config.js";
import { useFrame as g } from "../../hooks/use-frame.js";
import { Breakpoint as l } from "../../types/responsive.js";
import { createStyle as b } from "../../../../../utils.js";
import { generateContentStyles as S, generateFontsUrl as E } from "../../utils/style.js";
import { generateThemeStyles as k } from "../../utils/theme.js";
import M from "../../../../../_virtual/cssbeautify.js";
import { memo as A, useEffect as y } from "react";
const B = A(
  ({ content: u, themeSettings: a }) => {
    const { document: e } = g(), d = o.getBreakpoints(), c = b();
    c.register({
      $global: !0,
      "html, body, #builder-root, .frame-content": {
        height: "100%"
      },
      ".hide-on-desktop": {
        [o.getMediaQuery(l.DESKTOP)]: {
          display: "none !important"
        }
      },
      ".hide-on-tablet": {
        [o.getMediaQuery(l.TABLET)]: {
          display: "none !important"
        }
      },
      ".hide-on-mobile": {
        [o.getMediaQuery(l.MOBILE)]: {
          display: "none !important"
        }
      }
    });
    const f = c.get(), p = S({
      content: u,
      themeSettings: a,
      breakpoints: d,
      config: o.getRegisteredBlocks()
    }), h = k({
      settings: a,
      breakpoints: d
    }), i = f + h + p, s = E(i);
    return y(() => {
      if (!e) return;
      const n = M(i), t = e.head.querySelector("#builder-styles");
      if (t) {
        t.innerHTML = n;
        return;
      }
      const r = e.createElement("style");
      return r.setAttribute("id", "builder-styles"), r.innerHTML = n, e.head.appendChild(r), () => {
        var m;
        (m = e.head.querySelector("#builder-styles")) == null || m.remove();
      };
    }, [e, i]), y(() => {
      if (!e) return;
      const n = e.head.querySelector("#fonts");
      if (n) {
        n.setAttribute("href", s);
        return;
      }
      const t = e.createElement("link");
      t.setAttribute("id", "fonts"), t.setAttribute("href", s), t.setAttribute("rel", "stylesheet"), e.head.appendChild(t);
      const r = e.createElement("script");
      return r.src = "https://code.iconify.design/iconify-icon/3.0.0/iconify-icon.min.js", e.head.appendChild(r), () => {
        e.head.removeChild(t);
      };
    }, [e, s]), null;
  }
);
B.displayName = "StyleManager";
export {
  B as EditorAssetManager
};
//# sourceMappingURL=editor-asset-manager.js.map
