"use client";
import { jsxs as l, jsx as t } from "react/jsx-runtime";
import { Label as p } from "../shared/label.js";
import { useSettings as h } from "../../hooks/use-settings.js";
import x from "../../../../../node_modules/.pnpm/@monaco-editor_react@4.7.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@monaco-editor/react/dist/index.js";
import { l as g } from "../../../../../_virtual/lodash.js";
import { useState as C } from "react";
const v = ({ type: a, label: o, fieldName: n }) => {
  const [m, i] = h(n, a), [d, c] = C([]);
  let r = !1;
  const u = g.debounce((e) => {
    r || i(e);
  }, 2e3);
  return /* @__PURE__ */ l("div", { children: [
    o && /* @__PURE__ */ t(p, { className: "mb-1.5", children: o }),
    /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
      x,
      {
        defaultValue: m ?? `selector {
    /* Your custom CSS here */
}`,
        onValidate: (e) => {
          const s = e.filter((f) => f.code !== "emptyRules");
          r = !!s.length, c(s);
        },
        onChange: u,
        defaultLanguage: "css",
        height: "150px",
        options: {
          minimap: { enabled: !1 }
        },
        className: "rounded border"
      }
    ) }),
    /* @__PURE__ */ t("ol", { className: "flex list-decimal flex-col gap-1 px-4 pt-4", children: d.map((e, s) => /* @__PURE__ */ l("li", { className: "text-sm text-red-500", children: [
      e.message,
      " : End Line Number ",
      e.endLineNumber
    ] }, s)) })
  ] });
};
export {
  v as CustomCSSControl
};
//# sourceMappingURL=custom-css.control.js.map
