"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _header = _interopRequireDefault(require("./header"));
var _palette = _interopRequireDefault(require("./palette"));
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useGlobalStyle,
  useGlobalSetting,
  useSettingsForBlockElement,
  ColorPanel: StylesColorPanel
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function ScreenColors() {
  const [style] = useGlobalStyle('', undefined, 'user', {
    shouldDecodeEncode: false
  });
  const [inheritedStyle, setStyle] = useGlobalStyle('', undefined, 'all', {
    shouldDecodeEncode: false
  });
  const [rawSettings] = useGlobalSetting('');
  const settings = useSettingsForBlockElement(rawSettings);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
      title: (0, _i18n.__)('Colors'),
      description: (0, _i18n.__)('Palette colors and the application of those colors on site elements.')
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "edit-site-global-styles-screen",
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        spacing: 7,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_palette.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StylesColorPanel, {
          inheritedValue: inheritedStyle,
          value: style,
          onChange: setStyle,
          settings: settings
        })]
      })
    })]
  });
}
var _default = exports.default = ScreenColors;
//# sourceMappingURL=screen-colors.js.map