import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { __ } from "@wordpress/i18n";
import { __experimentalVStack as VStack } from "@wordpress/components";
import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
import ScreenHeader from "./header";
import Palette from "./palette";
import { unlock } from "../../lock-unlock";
const {
  useGlobalStyle,
  useGlobalSetting,
  useSettingsForBlockElement,
  ColorPanel: StylesColorPanel
} = unlock(blockEditorPrivateApis);
function ScreenColors() {
  const [style] = useGlobalStyle("", void 0, "user", {
    shouldDecodeEncode: false
  });
  const [inheritedStyle, setStyle] = useGlobalStyle("", void 0, "all", {
    shouldDecodeEncode: false
  });
  const [rawSettings] = useGlobalSetting("");
  const settings = useSettingsForBlockElement(rawSettings);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ScreenHeader,
      {
        title: __("Colors"),
        description: __(
          "Palette colors and the application of those colors on site elements."
        )
      }
    ),
    /* @__PURE__ */ jsx("div", { className: "edit-site-global-styles-screen", children: /* @__PURE__ */ jsxs(VStack, { spacing: 7, children: [
      /* @__PURE__ */ jsx(Palette, {}),
      /* @__PURE__ */ jsx(
        StylesColorPanel,
        {
          inheritedValue: inheritedStyle,
          value: style,
          onChange: setStyle,
          settings
        }
      )
    ] }) })
  ] });
}
var screen_colors_default = ScreenColors;
export {
  screen_colors_default as default
};
//# sourceMappingURL=screen-colors.js.map
