import { jsx } from "react/jsx-runtime";
import clsx from "clsx";
import { __experimentalGrid as Grid } from "@wordpress/components";
import { View } from "@wordpress/primitives";
import {
  getColorClassName,
  __experimentalGetGradientClass
} from "@wordpress/block-editor";
const ColorExamples = ({
  colors,
  type,
  templateColumns = "1fr 1fr",
  itemHeight = "52px"
}) => {
  if (!colors) {
    return null;
  }
  return /* @__PURE__ */ jsx(Grid, { templateColumns, rowGap: 8, columnGap: 16, children: colors.map((color) => {
    const className = type === "gradients" ? __experimentalGetGradientClass(color.slug) : getColorClassName("background-color", color.slug);
    const classes = clsx(
      "edit-site-style-book__color-example",
      className
    );
    return /* @__PURE__ */ jsx(
      View,
      {
        className: classes,
        style: { height: itemHeight }
      },
      color.slug
    );
  }) });
};
var color_examples_default = ColorExamples;
export {
  color_examples_default as default
};
//# sourceMappingURL=color-examples.js.map
