"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 _data = require("@wordpress/data");
var _editor = require("@wordpress/editor");
var _typographyElements = _interopRequireDefault(require("./typography-elements"));
var _header = _interopRequireDefault(require("./header"));
var _variationsTypography = _interopRequireDefault(require("./variations/variations-typography"));
var _fontSizesCount = _interopRequireDefault(require("./font-sizes/font-sizes-count"));
var _fontFamilies = _interopRequireDefault(require("./font-families"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function ScreenTypography() {
  const fontLibraryEnabled = (0, _data.useSelect)(select => select(_editor.store).getEditorSettings().fontLibraryEnabled, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
      title: (0, _i18n.__)('Typography'),
      description: (0, _i18n.__)('Available fonts, typographic styles, and the application of those styles.')
    }), /*#__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)(_variationsTypography.default, {
          title: (0, _i18n.__)('Typesets')
        }), fontLibraryEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontFamilies.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typographyElements.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontSizesCount.default, {})]
      })
    })]
  });
}
var _default = exports.default = ScreenTypography;
//# sourceMappingURL=screen-typography.js.map