import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { __ } from "@wordpress/i18n";
import { __experimentalVStack as VStack } from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { store as editorStore } from "@wordpress/editor";
import TypographyElements from "./typography-elements";
import ScreenHeader from "./header";
import TypographyVariations from "./variations/variations-typography";
import FontSizesCount from "./font-sizes/font-sizes-count";
import FontFamilies from "./font-families";
function ScreenTypography() {
  const fontLibraryEnabled = useSelect(
    (select) => select(editorStore).getEditorSettings().fontLibraryEnabled,
    []
  );
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ScreenHeader,
      {
        title: __("Typography"),
        description: __(
          "Available fonts, typographic styles, and the application of those styles."
        )
      }
    ),
    /* @__PURE__ */ jsx("div", { className: "edit-site-global-styles-screen", children: /* @__PURE__ */ jsxs(VStack, { spacing: 7, children: [
      /* @__PURE__ */ jsx(TypographyVariations, { title: __("Typesets") }),
      fontLibraryEnabled && /* @__PURE__ */ jsx(FontFamilies, {}),
      /* @__PURE__ */ jsx(TypographyElements, {}),
      /* @__PURE__ */ jsx(FontSizesCount, {})
    ] }) })
  ] });
}
var screen_typography_default = ScreenTypography;
export {
  screen_typography_default as default
};
//# sourceMappingURL=screen-typography.js.map
