import { jsx, jsxs } from "react/jsx-runtime";
import {
  __experimentalGrid as Grid,
  __experimentalVStack as VStack
} from "@wordpress/components";
import StylesPreviewColors from "../preview-colors";
import { useCurrentMergeThemeStyleVariationsWithUserConfig } from "../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property";
import Subtitle from "../subtitle";
import Variation from "./variation";
function ColorVariations({ title, gap = 2 }) {
  const propertiesToFilter = ["color"];
  const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig(propertiesToFilter);
  if (colorVariations?.length <= 1) {
    return null;
  }
  return /* @__PURE__ */ jsxs(VStack, { spacing: 3, children: [
    title && /* @__PURE__ */ jsx(Subtitle, { level: 3, children: title }),
    /* @__PURE__ */ jsx(Grid, { spacing: gap, children: colorVariations.map((variation, index) => /* @__PURE__ */ jsx(
      Variation,
      {
        variation,
        isPill: true,
        properties: propertiesToFilter,
        showTooltip: true,
        children: () => /* @__PURE__ */ jsx(StylesPreviewColors, {})
      },
      index
    )) })
  ] });
}
export {
  ColorVariations as default
};
//# sourceMappingURL=variations-color.js.map
