"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SidebarNavigationScreenGlobalStylesContent;
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _styleVariationsContainer = _interopRequireDefault(require("../global-styles/style-variations-container"));
var _lockUnlock = require("../../lock-unlock");
var _store = require("../../store");
var _variationsColor = _interopRequireDefault(require("../global-styles/variations/variations-color"));
var _variationsTypography = _interopRequireDefault(require("../global-styles/variations/variations-typography"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const noop = () => {};
function SidebarNavigationScreenGlobalStylesContent() {
  const {
    storedSettings
  } = (0, _data.useSelect)(select => {
    const {
      getSettings
    } = (0, _lockUnlock.unlock)(select(_store.store));
    return {
      storedSettings: getSettings()
    };
  }, []);
  const gap = 3;

  // Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
  // loaded. This is necessary because the Iframe component waits until
  // the block editor store's `__internalIsInitialized` is true before
  // rendering the iframe. Without this, the iframe previews will not render
  // in mobile viewport sizes, where the editor canvas is hidden.
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockEditorProvider, {
    settings: storedSettings,
    onChange: noop,
    onInput: noop,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
      spacing: 10,
      className: "edit-site-global-styles-variation-container",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styleVariationsContainer.default, {
        gap: gap
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_variationsColor.default, {
        title: (0, _i18n.__)('Palettes'),
        gap: gap
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_variationsTypography.default, {
        title: (0, _i18n.__)('Typography'),
        gap: gap
      })]
    })
  });
}
//# sourceMappingURL=content.js.map