/* wp:polyfill */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ColorVariations;
var _components = require("@wordpress/components");
var _previewColors = _interopRequireDefault(require("../preview-colors"));
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 ColorVariations({
  title,
  gap = 2
}) {
  const propertiesToFilter = ['color'];
  const colorVariations = (0, _useThemeStyleVariationsByProperty.useCurrentMergeThemeStyleVariationsWithUserConfig)(propertiesToFilter);

  // Return null if there is only one variation (the default).
  if (colorVariations?.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, {
      spacing: gap,
      children: colorVariations.map((variation, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_variation.default, {
        variation: variation,
        isPill: true,
        properties: propertiesToFilter,
        showTooltip: true,
        children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_previewColors.default, {})
      }, index))
    })]
  });
}
//# sourceMappingURL=variations-color.js.map