import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import {
  privateApis as blockEditorPrivateApis,
  store as blockEditorStore
} from "@wordpress/block-editor";
import { Card, CardBody } from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { __ } from "@wordpress/i18n";
import ScreenHeader from "./header";
import SidebarNavigationScreenGlobalStylesContent from "../sidebar-navigation-screen-global-styles/content";
import { unlock } from "../../lock-unlock";
const { useZoomOut } = unlock(blockEditorPrivateApis);
function ScreenStyleVariations() {
  const isPreviewMode = useSelect((select) => {
    return select(blockEditorStore).getSettings().isPreviewMode;
  }, []);
  useZoomOut(!isPreviewMode);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      ScreenHeader,
      {
        title: __("Browse styles"),
        description: __(
          "Choose a variation to change the look of the site."
        )
      }
    ),
    /* @__PURE__ */ jsx(
      Card,
      {
        size: "small",
        isBorderless: true,
        className: "edit-site-global-styles-screen-style-variations",
        children: /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(SidebarNavigationScreenGlobalStylesContent, {}) })
      }
    )
  ] });
}
var screen_style_variations_default = ScreenStyleVariations;
export {
  screen_style_variations_default as default
};
//# sourceMappingURL=screen-style-variations.js.map
