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