/**
 * WordPress dependencies
 */
import { Card, CardBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { useDispatch } from '@wordpress/data';
import { store as editorStore } from '@wordpress/editor';

/**
 * Internal dependencies
 */
import ScreenHeader from './header';
import SidebarNavigationScreenGlobalStylesContent from '../sidebar-navigation-screen-global-styles/content';
import { unlock } from '../../lock-unlock';
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const {
  useZoomOut
} = unlock(blockEditorPrivateApis);
function ScreenStyleVariations() {
  // Style Variations should only be previewed in with
  // - a "zoomed out" editor
  // - "Desktop" device preview
  const {
    setDeviceType
  } = useDispatch(editorStore);
  useZoomOut();
  setDeviceType('desktop');
  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, {})
      })
    })]
  });
}
export default ScreenStyleVariations;
//# sourceMappingURL=screen-style-variations.js.map