"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = TypographyVariations;
var _components = require("@wordpress/components");
var _previewTypography = _interopRequireDefault(require("../preview-typography"));
var _useThemeStyleVariationsByProperty = require("../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property");
var _subtitle = _interopRequireDefault(require("../subtitle"));
var _variation = _interopRequireDefault(require("./variation"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function TypographyVariations({
  title,
  gap = 2
}) {
  const propertiesToFilter = ['typography'];
  const typographyVariations = (0, _useThemeStyleVariationsByProperty.useCurrentMergeThemeStyleVariationsWithUserConfig)(propertiesToFilter);

  // Return null if there is only one variation (the default).
  if (typographyVariations?.length <= 1) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
    spacing: 3,
    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
      level: 3,
      children: title
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalGrid, {
      columns: 3,
      gap: gap,
      className: "edit-site-global-styles-style-variations-container",
      children: typographyVariations.map((variation, index) => {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_variation.default, {
          variation: variation,
          properties: propertiesToFilter,
          showTooltip: true,
          children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_previewTypography.default, {
            variation: variation
          })
        }, index);
      })
    })]
  });
}
//# sourceMappingURL=variations-typography.js.map