@wordpress/global-styles-ui 1.1.0

package/build-module/typography-example.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "@wordpress/element";
+import { __unstableMotion as motion } from "@wordpress/components";
+import { _x } from "@wordpress/i18n";
+import { GlobalStylesContext } from "./context";
+import { getFamilyPreviewStyle } from "./font-library-modal/utils/preview-styles";
+import { getFontFamilies } from "./utils";
+import { useStyle } from "./hooks";
+function PreviewTypography({
+  fontSize,
+  variation
+}) {
+  const { base } = useContext(GlobalStylesContext);
+  let config = base;
+  if (variation) {
+    config = { ...base, ...variation };
+  }
+  const [textColor] = useStyle("color.text");
+  const [bodyFontFamilies, headingFontFamilies] = getFontFamilies(config);
+  const bodyPreviewStyle = bodyFontFamilies ? getFamilyPreviewStyle(bodyFontFamilies) : {};
+  const headingPreviewStyle = headingFontFamilies ? getFamilyPreviewStyle(headingFontFamilies) : {};
+  if (textColor) {
+    bodyPreviewStyle.color = textColor;
+    headingPreviewStyle.color = textColor;
+  }
+  if (fontSize) {
+    bodyPreviewStyle.fontSize = fontSize;
+    headingPreviewStyle.fontSize = fontSize;
+  }
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      animate: {
+        scale: 1,
+        opacity: 1
+      },
+      initial: {
+        scale: 0.1,
+        opacity: 0
+      },
+      transition: {
+        delay: 0.3,
+        type: "tween"
+      },
+      style: {
+        textAlign: "center",
+        lineHeight: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: headingPreviewStyle, children: _x("A", "Uppercase letter A") }),
+        /* @__PURE__ */ jsx("span", { style: bodyPreviewStyle, children: _x("a", "Lowercase letter A") })
+      ]
+    }
+  );
+}
+export {
+  PreviewTypography as default
+};
+//# sourceMappingURL=typography-example.js.map

package/build-module/typography-example.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/typography-example.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport { _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\nimport { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';\nimport { getFontFamilies } from './utils';\nimport { useStyle } from './hooks';\n\ninterface TypographyExampleProps {\n\tfontSize?: number;\n\tvariation?: any;\n}\n\nexport default function PreviewTypography( {\n\tfontSize,\n\tvariation,\n}: TypographyExampleProps ) {\n\tconst { base } = useContext( GlobalStylesContext );\n\tlet config = base;\n\tif ( variation ) {\n\t\tconfig = { ...base, ...variation };\n\t}\n\n\tconst [ textColor ] = useStyle( 'color.text' );\n\n\tconst [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );\n\tconst bodyPreviewStyle: React.CSSProperties = bodyFontFamilies\n\t\t? getFamilyPreviewStyle( bodyFontFamilies )\n\t\t: {};\n\tconst headingPreviewStyle: React.CSSProperties = headingFontFamilies\n\t\t? getFamilyPreviewStyle( headingFontFamilies )\n\t\t: {};\n\n\tif ( textColor ) {\n\t\tbodyPreviewStyle.color = textColor;\n\t\theadingPreviewStyle.color = textColor;\n\t}\n\n\tif ( fontSize ) {\n\t\tbodyPreviewStyle.fontSize = fontSize;\n\t\theadingPreviewStyle.fontSize = fontSize;\n\t}\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={ {\n\t\t\t\tscale: 1,\n\t\t\t\topacity: 1,\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tscale: 0.1,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\ttransition={ {\n\t\t\t\tdelay: 0.3,\n\t\t\t\ttype: 'tween',\n\t\t\t} }\n\t\t\tstyle={ {\n\t\t\t\ttextAlign: 'center',\n\t\t\t\tlineHeight: 1,\n\t\t\t} }\n\t\t>\n\t\t\t<span style={ headingPreviewStyle }>\n\t\t\t\t{ _x( 'A', 'Uppercase letter A' ) }\n\t\t\t</span>\n\t\t\t<span style={ bodyPreviewStyle }>\n\t\t\t\t{ _x( 'a', 'Lowercase letter A' ) }\n\t\t\t</span>\n\t\t</motion.div>\n\t);\n}\n"],
+  "mappings": "AAmDE,SAkBC,KAlBD;AAhDF,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB,cAAc;AAC3C,SAAS,UAAU;AAKnB,SAAS,2BAA2B;AACpC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAOV,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,EAAE,KAAK,IAAI,WAAY,mBAAoB;AACjD,MAAI,SAAS;AACb,MAAK,WAAY;AAChB,aAAS,EAAE,GAAG,MAAM,GAAG,UAAU;AAAA,EAClC;AAEA,QAAM,CAAE,SAAU,IAAI,SAAU,YAAa;AAE7C,QAAM,CAAE,kBAAkB,mBAAoB,IAAI,gBAAiB,MAAO;AAC1E,QAAM,mBAAwC,mBAC3C,sBAAuB,gBAAiB,IACxC,CAAC;AACJ,QAAM,sBAA2C,sBAC9C,sBAAuB,mBAAoB,IAC3C,CAAC;AAEJ,MAAK,WAAY;AAChB,qBAAiB,QAAQ;AACzB,wBAAoB,QAAQ;AAAA,EAC7B;AAEA,MAAK,UAAW;AACf,qBAAiB,WAAW;AAC5B,wBAAoB,WAAW;AAAA,EAChC;AAEA,SACC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA,SAAU;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,SAAU;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,YAAa;AAAA,QACZ,OAAO;AAAA,QACP,MAAM;AAAA,MACP;AAAA,MACA,OAAQ;AAAA,QACP,WAAW;AAAA,QACX,YAAY;AAAA,MACb;AAAA,MAEA;AAAA,4BAAC,UAAK,OAAQ,qBACX,aAAI,KAAK,oBAAqB,GACjC;AAAA,QACA,oBAAC,UAAK,OAAQ,kBACX,aAAI,KAAK,oBAAqB,GACjC;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}

package/build-module/typography-panel.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { useStyle, useSetting } from "./hooks";
+import { unlock } from "./lock-unlock";
+const { useSettingsForBlockElement, TypographyPanel: StylesTypographyPanel } = unlock(blockEditorPrivateApis);
+function TypographyPanel({
+  element,
+  headingLevel
+}) {
+  let prefixParts = [];
+  if (element === "heading") {
+    prefixParts = prefixParts.concat(["elements", headingLevel]);
+  } else if (element && element !== "text") {
+    prefixParts = prefixParts.concat(["elements", element]);
+  }
+  const prefix = prefixParts.join(".");
+  const [style] = useStyle(prefix, "", "user", false);
+  const [inheritedStyle, setStyle] = useStyle(
+    prefix,
+    "",
+    "merged",
+    false
+  );
+  const [rawSettings] = useSetting("");
+  const usedElement = element === "heading" ? headingLevel : element;
+  const settings = useSettingsForBlockElement(
+    rawSettings,
+    void 0,
+    usedElement
+  );
+  return /* @__PURE__ */ jsx(
+    StylesTypographyPanel,
+    {
+      inheritedValue: inheritedStyle,
+      value: style,
+      onChange: setStyle,
+      settings
+    }
+  );
+}
+export {
+  TypographyPanel as default
+};
+//# sourceMappingURL=typography-panel.js.map

package/build-module/typography-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/typography-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useSettingsForBlockElement, TypographyPanel: StylesTypographyPanel } =\n\tunlock( blockEditorPrivateApis );\n\ninterface TypographyPanelProps {\n\telement: string;\n\theadingLevel: string;\n}\n\nexport default function TypographyPanel( {\n\telement,\n\theadingLevel,\n}: TypographyPanelProps ) {\n\tlet prefixParts: string[] = [];\n\tif ( element === 'heading' ) {\n\t\tprefixParts = prefixParts.concat( [ 'elements', headingLevel ] );\n\t} else if ( element && element !== 'text' ) {\n\t\tprefixParts = prefixParts.concat( [ 'elements', element ] );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useStyle( prefix, '', 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\tprefix,\n\t\t'',\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ rawSettings ] = useSetting( '' );\n\tconst usedElement = element === 'heading' ? headingLevel : element;\n\tconst settings = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tundefined,\n\t\tusedElement\n\t);\n\n\treturn (\n\t\t<StylesTypographyPanel\n\t\t\tinheritedValue={ inheritedStyle }\n\t\t\tvalue={ style }\n\t\t\tonChange={ setStyle }\n\t\t\tsettings={ settings }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AAgDE;AA5CF,SAAS,eAAe,8BAA8B;AAKtD,SAAS,UAAU,kBAAkB;AACrC,SAAS,cAAc;AAEvB,MAAM,EAAE,4BAA4B,iBAAiB,sBAAsB,IAC1E,OAAQ,sBAAuB;AAOjB,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA;AACD,GAA0B;AACzB,MAAI,cAAwB,CAAC;AAC7B,MAAK,YAAY,WAAY;AAC5B,kBAAc,YAAY,OAAQ,CAAE,YAAY,YAAa,CAAE;AAAA,EAChE,WAAY,WAAW,YAAY,QAAS;AAC3C,kBAAc,YAAY,OAAQ,CAAE,YAAY,OAAQ,CAAE;AAAA,EAC3D;AACA,QAAM,SAAS,YAAY,KAAM,GAAI;AAErC,QAAM,CAAE,KAAM,IAAI,SAAU,QAAQ,IAAI,QAAQ,KAAM;AACtD,QAAM,CAAE,gBAAgB,QAAS,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,WAAY,IAAI,WAAY,EAAG;AACvC,QAAM,cAAc,YAAY,YAAY,eAAe;AAC3D,QAAM,WAAW;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,OAAQ;AAAA,MACR,UAAW;AAAA,MACX;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}

package/build-module/typography-preview.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useStyle } from "./hooks";
+function TypographyPreview({
+  name,
+  element,
+  headingLevel
+}) {
+  let prefix = "";
+  if (element === "heading") {
+    prefix = `elements.${headingLevel}.`;
+  } else if (element && element !== "text") {
+    prefix = `elements.${element}.`;
+  }
+  const [fontFamily] = useStyle(prefix + "typography.fontFamily", name);
+  const [gradientValue] = useStyle(prefix + "color.gradient", name);
+  const [backgroundColor] = useStyle(prefix + "color.background", name);
+  const [fallbackBackgroundColor] = useStyle("color.background");
+  const [color] = useStyle(prefix + "color.text", name);
+  const [fontSize] = useStyle(prefix + "typography.fontSize", name);
+  const [fontStyle] = useStyle(prefix + "typography.fontStyle", name);
+  const [fontWeight] = useStyle(prefix + "typography.fontWeight", name);
+  const [letterSpacing] = useStyle(
+    prefix + "typography.letterSpacing",
+    name
+  );
+  const extraStyles = element === "link" ? {
+    textDecoration: "underline"
+  } : {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "global-styles-ui-typography-preview",
+      style: {
+        fontFamily: fontFamily ?? "serif",
+        background: gradientValue ?? backgroundColor ?? fallbackBackgroundColor,
+        color,
+        fontSize,
+        fontStyle,
+        fontWeight,
+        letterSpacing,
+        ...extraStyles
+      },
+      children: "Aa"
+    }
+  );
+}
+export {
+  TypographyPreview as default
+};
+//# sourceMappingURL=typography-preview.js.map

package/build-module/typography-preview.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/typography-preview.tsx"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\n\ninterface TypographyPreviewProps {\n\tname?: string;\n\telement: string;\n\theadingLevel: string;\n}\n\nexport default function TypographyPreview( {\n\tname,\n\telement,\n\theadingLevel,\n}: TypographyPreviewProps ) {\n\tlet prefix = '';\n\tif ( element === 'heading' ) {\n\t\tprefix = `elements.${ headingLevel }.`;\n\t} else if ( element && element !== 'text' ) {\n\t\tprefix = `elements.${ element }.`;\n\t}\n\n\tconst [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );\n\tconst [ gradientValue ] = useStyle( prefix + 'color.gradient', name );\n\tconst [ backgroundColor ] = useStyle( prefix + 'color.background', name );\n\tconst [ fallbackBackgroundColor ] = useStyle( 'color.background' );\n\tconst [ color ] = useStyle( prefix + 'color.text', name );\n\tconst [ fontSize ] = useStyle( prefix + 'typography.fontSize', name );\n\tconst [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );\n\tconst [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );\n\tconst [ letterSpacing ] = useStyle(\n\t\tprefix + 'typography.letterSpacing',\n\t\tname\n\t);\n\tconst extraStyles =\n\t\telement === 'link'\n\t\t\t? {\n\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t  }\n\t\t\t: {};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"global-styles-ui-typography-preview\"\n\t\t\tstyle={ {\n\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\tbackground:\n\t\t\t\t\tgradientValue ?? backgroundColor ?? fallbackBackgroundColor,\n\t\t\t\tcolor,\n\t\t\t\tfontSize,\n\t\t\t\tfontStyle,\n\t\t\t\tfontWeight,\n\t\t\t\tletterSpacing,\n\t\t\t\t...extraStyles,\n\t\t\t} }\n\t\t>\n\t\t\tAa\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "AA2CE;AAxCF,SAAS,gBAAgB;AAQV,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AACD,GAA4B;AAC3B,MAAI,SAAS;AACb,MAAK,YAAY,WAAY;AAC5B,aAAS,YAAa,YAAa;AAAA,EACpC,WAAY,WAAW,YAAY,QAAS;AAC3C,aAAS,YAAa,OAAQ;AAAA,EAC/B;AAEA,QAAM,CAAE,UAAW,IAAI,SAAU,SAAS,yBAAyB,IAAK;AACxE,QAAM,CAAE,aAAc,IAAI,SAAU,SAAS,kBAAkB,IAAK;AACpE,QAAM,CAAE,eAAgB,IAAI,SAAU,SAAS,oBAAoB,IAAK;AACxE,QAAM,CAAE,uBAAwB,IAAI,SAAU,kBAAmB;AACjE,QAAM,CAAE,KAAM,IAAI,SAAU,SAAS,cAAc,IAAK;AACxD,QAAM,CAAE,QAAS,IAAI,SAAU,SAAS,uBAAuB,IAAK;AACpE,QAAM,CAAE,SAAU,IAAI,SAAU,SAAS,wBAAwB,IAAK;AACtE,QAAM,CAAE,UAAW,IAAI,SAAU,SAAS,yBAAyB,IAAK;AACxE,QAAM,CAAE,aAAc,IAAI;AAAA,IACzB,SAAS;AAAA,IACT;AAAA,EACD;AACA,QAAM,cACL,YAAY,SACT;AAAA,IACA,gBAAgB;AAAA,EAChB,IACA,CAAC;AAEL,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ;AAAA,QACP,YAAY,cAAc;AAAA,QAC1B,YACC,iBAAiB,mBAAmB;AAAA,QACrC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACJ;AAAA,MACA;AAAA;AAAA,EAED;AAEF;",
+  "names": []
+}

package/build-module/typography-variations.js

@@ -0,0 +1,7 @@
+import TypographyVariationsInternal from "./variations/variations-typography";
+import { withGlobalStylesProvider } from "./with-global-styles-provider";
+const TypographyVariations = withGlobalStylesProvider(TypographyVariationsInternal);
+export {
+  TypographyVariations
+};
+//# sourceMappingURL=typography-variations.js.map

package/build-module/typography-variations.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/typography-variations.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport TypographyVariationsInternal from './variations/variations-typography';\nimport { withGlobalStylesProvider } from './with-global-styles-provider';\n\nexport interface TypographyVariationsProps {\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( config: GlobalStylesConfig ) => void;\n\ttitle?: string;\n\tgap?: number;\n}\n\n/**\n * Render Typography Variations.\n *\n * @example\n * ```tsx\n * <TypographyVariations\n *   value={userConfig}\n *   baseValue={baseConfig}\n *   onChange={setUserConfig}\n *   title=\"Typography\"\n *   gap={3}\n * />\n * ```\n */\nexport const TypographyVariations: React.ComponentType< TypographyVariationsProps > =\n\twithGlobalStylesProvider( TypographyVariationsInternal );\n"],
+  "mappings": "AAQA,OAAO,kCAAkC;AACzC,SAAS,gCAAgC;AAwBlC,MAAM,uBACZ,yBAA0B,4BAA6B;",
+  "names": []
+}

package/build-module/utils.js

@@ -0,0 +1,179 @@
+import { areGlobalStylesEqual } from "@wordpress/global-styles-engine";
+function removePropertiesFromObject(object, properties) {
+  if (!properties?.length) {
+    return object;
+  }
+  if (typeof object !== "object" || !object || !Object.keys(object).length) {
+    return object;
+  }
+  for (const key in object) {
+    if (properties.includes(key)) {
+      delete object[key];
+    } else if (typeof object[key] === "object") {
+      removePropertiesFromObject(object[key], properties);
+    }
+  }
+  return object;
+}
+const filterObjectByProperties = (object, properties) => {
+  if (!object || !properties?.length) {
+    return {};
+  }
+  const newObject = {};
+  Object.keys(object).forEach((key) => {
+    if (properties.includes(key)) {
+      newObject[key] = object[key];
+    } else if (typeof object[key] === "object") {
+      const newFilter = filterObjectByProperties(
+        object[key],
+        properties
+      );
+      if (Object.keys(newFilter).length) {
+        newObject[key] = newFilter;
+      }
+    }
+  });
+  return newObject;
+};
+function isVariationWithProperties(variation, properties) {
+  const variationWithProperties = filterObjectByProperties(
+    structuredClone(variation),
+    properties
+  );
+  return areGlobalStylesEqual(variationWithProperties, variation);
+}
+function getFontFamilyFromSetting(fontFamilies, setting) {
+  if (!Array.isArray(fontFamilies) || !setting) {
+    return null;
+  }
+  const fontFamilyVariable = setting.replace("var(", "").replace(")", "");
+  const fontFamilySlug = fontFamilyVariable?.split("--").slice(-1)[0];
+  return fontFamilies.find(
+    (fontFamily) => fontFamily.slug === fontFamilySlug
+  );
+}
+function getFontFamilies(themeJson) {
+  const themeFontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme;
+  const customFontFamilies = themeJson?.settings?.typography?.fontFamilies?.custom;
+  let fontFamilies = [];
+  if (themeFontFamilies && customFontFamilies) {
+    fontFamilies = [...themeFontFamilies, ...customFontFamilies];
+  } else if (themeFontFamilies) {
+    fontFamilies = themeFontFamilies;
+  } else if (customFontFamilies) {
+    fontFamilies = customFontFamilies;
+  }
+  const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
+  const bodyFontFamily = getFontFamilyFromSetting(
+    fontFamilies,
+    bodyFontFamilySetting
+  );
+  const headingFontFamilySetting = themeJson?.styles?.elements?.heading?.typography?.fontFamily;
+  let headingFontFamily;
+  if (!headingFontFamilySetting) {
+    headingFontFamily = bodyFontFamily;
+  } else {
+    headingFontFamily = getFontFamilyFromSetting(
+      fontFamilies,
+      themeJson?.styles?.elements?.heading?.typography?.fontFamily
+    );
+  }
+  return [bodyFontFamily, headingFontFamily];
+}
+function findNearest(input, numbers) {
+  if (numbers.length === 0) {
+    return null;
+  }
+  numbers.sort((a, b) => Math.abs(input - a) - Math.abs(input - b));
+  return numbers[0];
+}
+function extractFontWeights(fontFaces) {
+  const result = [];
+  fontFaces.forEach((face) => {
+    const weights = String(face.fontWeight).split(" ");
+    if (weights.length === 2) {
+      const start = parseInt(weights[0]);
+      const end = parseInt(weights[1]);
+      for (let i = start; i <= end; i += 100) {
+        result.push(i);
+      }
+    } else if (weights.length === 1) {
+      result.push(parseInt(weights[0]));
+    }
+  });
+  return result;
+}
+function formatFontFamily(input) {
+  const regex = /^(?!generic\([ a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/;
+  const output = input.trim();
+  const formatItem = (item) => {
+    item = item.trim();
+    if (item.match(regex)) {
+      item = item.replace(/^["']|["']$/g, "");
+      return `"${item}"`;
+    }
+    return item;
+  };
+  if (output.includes(",")) {
+    return output.split(",").map(formatItem).filter((item) => item !== "").join(", ");
+  }
+  return formatItem(output);
+}
+function getFamilyPreviewStyle(family) {
+  const style = {
+    fontFamily: formatFontFamily(family.fontFamily)
+  };
+  if (!Array.isArray(family.fontFace)) {
+    style.fontWeight = "400";
+    style.fontStyle = "normal";
+    return style;
+  }
+  if (family.fontFace) {
+    const normalFaces = family.fontFace.filter(
+      (face) => face?.fontStyle && face.fontStyle.toLowerCase() === "normal"
+    );
+    if (normalFaces.length > 0) {
+      style.fontStyle = "normal";
+      const normalWeights = extractFontWeights(normalFaces);
+      const nearestWeight = findNearest(400, normalWeights);
+      style.fontWeight = String(nearestWeight) || "400";
+    } else {
+      style.fontStyle = family.fontFace.length && family.fontFace[0].fontStyle || "normal";
+      style.fontWeight = family.fontFace.length && String(family.fontFace[0].fontWeight) || "400";
+    }
+  }
+  return style;
+}
+function getVariationClassName(variation) {
+  if (!variation) {
+    return "";
+  }
+  return `is-style-${variation}`;
+}
+function getNewIndexFromPresets(presets, slugPrefix) {
+  const nameRegex = new RegExp(`^${slugPrefix}([\\d]+)$`);
+  const highestPresetValue = presets.reduce((currentHighest, preset) => {
+    if (typeof preset?.slug === "string") {
+      const matches = preset?.slug.match(nameRegex);
+      if (matches) {
+        const id = parseInt(matches[1], 10);
+        if (id > currentHighest) {
+          return id;
+        }
+      }
+    }
+    return currentHighest;
+  }, 0);
+  return highestPresetValue + 1;
+}
+export {
+  filterObjectByProperties,
+  formatFontFamily,
+  getFamilyPreviewStyle,
+  getFontFamilies,
+  getNewIndexFromPresets,
+  getVariationClassName,
+  isVariationWithProperties,
+  removePropertiesFromObject
+};
+//# sourceMappingURL=utils.js.map

package/build-module/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/utils.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { areGlobalStylesEqual } from '@wordpress/global-styles-engine';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Removes all instances of properties from an object.\n *\n * @param object     The object to remove the properties from.\n * @param properties The properties to remove.\n * @return The modified object.\n */\nexport function removePropertiesFromObject(\n\tobject: any,\n\tproperties: string[]\n): any {\n\tif ( ! properties?.length ) {\n\t\treturn object;\n\t}\n\n\tif (\n\t\ttypeof object !== 'object' ||\n\t\t! object ||\n\t\t! Object.keys( object ).length\n\t) {\n\t\treturn object;\n\t}\n\n\tfor ( const key in object ) {\n\t\tif ( properties.includes( key ) ) {\n\t\t\tdelete object[ key ];\n\t\t} else if ( typeof object[ key ] === 'object' ) {\n\t\t\tremovePropertiesFromObject( object[ key ], properties );\n\t\t}\n\t}\n\treturn object;\n}\n\n/**\n * Returns a new object, with properties specified in `properties` array.,\n * maintain the original object tree structure.\n * The function is recursive, so it will perform a deep search for the given properties.\n * E.g., the function will return `{ a: { b: { c: { test: 1 } } } }` if the properties are  `[ 'test' ]`.\n *\n * @param object     The object to filter\n * @param properties The properties to filter by\n * @return The merged object.\n */\nexport const filterObjectByProperties = (\n\tobject: any,\n\tproperties: string[]\n): any => {\n\tif ( ! object || ! properties?.length ) {\n\t\treturn {};\n\t}\n\n\tconst newObject: any = {};\n\tObject.keys( object ).forEach( ( key ) => {\n\t\tif ( properties.includes( key ) ) {\n\t\t\tnewObject[ key ] = object[ key ];\n\t\t} else if ( typeof object[ key ] === 'object' ) {\n\t\t\tconst newFilter = filterObjectByProperties(\n\t\t\t\tobject[ key ],\n\t\t\t\tproperties\n\t\t\t);\n\t\t\tif ( Object.keys( newFilter ).length ) {\n\t\t\t\tnewObject[ key ] = newFilter;\n\t\t\t}\n\t\t}\n\t} );\n\treturn newObject;\n};\n\n/**\n * Compares a style variation to the same variation filtered by the specified properties.\n * Returns true if the variation contains only the properties specified.\n *\n * @param variation  The variation to compare.\n * @param properties The properties to compare.\n * @return Whether the variation contains only the specified properties.\n */\nexport function isVariationWithProperties(\n\tvariation: GlobalStylesConfig,\n\tproperties: string[]\n): boolean {\n\tconst variationWithProperties = filterObjectByProperties(\n\t\tstructuredClone( variation ),\n\t\tproperties\n\t);\n\n\treturn areGlobalStylesEqual( variationWithProperties, variation );\n}\n\nfunction getFontFamilyFromSetting( fontFamilies: any[], setting: string ): any {\n\tif ( ! Array.isArray( fontFamilies ) || ! setting ) {\n\t\treturn null;\n\t}\n\n\tconst fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );\n\tconst fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];\n\n\treturn fontFamilies.find(\n\t\t( fontFamily ) => fontFamily.slug === fontFamilySlug\n\t);\n}\n\n/**\n * Extracts font families from a theme JSON configuration.\n *\n * @param themeJson The theme JSON configuration\n * @return Array containing [bodyFontFamily, headingFontFamily]\n */\nexport function getFontFamilies( themeJson: any ): [ any, any ] {\n\tconst themeFontFamilies =\n\t\tthemeJson?.settings?.typography?.fontFamilies?.theme;\n\tconst customFontFamilies =\n\t\tthemeJson?.settings?.typography?.fontFamilies?.custom;\n\n\tlet fontFamilies: any[] = [];\n\tif ( themeFontFamilies && customFontFamilies ) {\n\t\tfontFamilies = [ ...themeFontFamilies, ...customFontFamilies ];\n\t} else if ( themeFontFamilies ) {\n\t\tfontFamilies = themeFontFamilies;\n\t} else if ( customFontFamilies ) {\n\t\tfontFamilies = customFontFamilies;\n\t}\n\tconst bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;\n\tconst bodyFontFamily = getFontFamilyFromSetting(\n\t\tfontFamilies,\n\t\tbodyFontFamilySetting\n\t);\n\n\tconst headingFontFamilySetting =\n\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily;\n\n\tlet headingFontFamily;\n\tif ( ! headingFontFamilySetting ) {\n\t\theadingFontFamily = bodyFontFamily;\n\t} else {\n\t\theadingFontFamily = getFontFamilyFromSetting(\n\t\t\tfontFamilies,\n\t\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily\n\t\t);\n\t}\n\n\treturn [ bodyFontFamily, headingFontFamily ];\n}\n\nfunction findNearest( input: number, numbers: number[] ): number | null {\n\t// If the numbers array is empty, return null\n\tif ( numbers.length === 0 ) {\n\t\treturn null;\n\t}\n\t// Sort the array based on the absolute difference with the input\n\tnumbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );\n\t// Return the first element (which will be the nearest) from the sorted array\n\treturn numbers[ 0 ];\n}\n\nfunction extractFontWeights( fontFaces: any[] ): number[] {\n\tconst result: number[] = [];\n\n\tfontFaces.forEach( ( face ) => {\n\t\tconst weights = String( face.fontWeight ).split( ' ' );\n\n\t\tif ( weights.length === 2 ) {\n\t\t\tconst start = parseInt( weights[ 0 ] );\n\t\t\tconst end = parseInt( weights[ 1 ] );\n\n\t\t\tfor ( let i = start; i <= end; i += 100 ) {\n\t\t\t\tresult.push( i );\n\t\t\t}\n\t\t} else if ( weights.length === 1 ) {\n\t\t\tresult.push( parseInt( weights[ 0 ] ) );\n\t\t}\n\t} );\n\n\treturn result;\n}\n\n/*\n * Format the font family to use in the CSS font-family property of a CSS rule.\n *\n * The input can be a string with the font family name or a string with multiple font family names separated by commas.\n * It follows the recommendations from the CSS Fonts Module Level 4.\n * https://www.w3.org/TR/css-fonts-4/#font-family-prop\n *\n * @param input - The font family.\n * @return The formatted font family.\n */\nexport function formatFontFamily( input: string ): string {\n\t// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).\n\tconst regex = /^(?!generic\\([ a-zA-Z\\-]+\\)$)(?!^[a-zA-Z\\-]+$).+/;\n\tconst output = input.trim();\n\n\tconst formatItem = ( item: string ) => {\n\t\titem = item.trim();\n\t\tif ( item.match( regex ) ) {\n\t\t\t// removes leading and trailing quotes.\n\t\t\titem = item.replace( /^[\"']|[\"']$/g, '' );\n\t\t\treturn `\"${ item }\"`;\n\t\t}\n\t\treturn item;\n\t};\n\n\tif ( output.includes( ',' ) ) {\n\t\treturn output\n\t\t\t.split( ',' )\n\t\t\t.map( formatItem )\n\t\t\t.filter( ( item ) => item !== '' )\n\t\t\t.join( ', ' );\n\t}\n\n\treturn formatItem( output );\n}\n\n/**\n * Gets the preview style for a font family.\n *\n * @param family The font family object\n * @return CSS style object for the font family\n */\nexport function getFamilyPreviewStyle( family: any ): React.CSSProperties {\n\tconst style: React.CSSProperties = {\n\t\tfontFamily: formatFontFamily( family.fontFamily ),\n\t};\n\n\tif ( ! Array.isArray( family.fontFace ) ) {\n\t\tstyle.fontWeight = '400';\n\t\tstyle.fontStyle = 'normal';\n\t\treturn style;\n\t}\n\n\tif ( family.fontFace ) {\n\t\t//get all the font faces with normal style\n\t\tconst normalFaces = family.fontFace.filter(\n\t\t\t( face: any ) =>\n\t\t\t\tface?.fontStyle && face.fontStyle.toLowerCase() === 'normal'\n\t\t);\n\t\tif ( normalFaces.length > 0 ) {\n\t\t\tstyle.fontStyle = 'normal';\n\t\t\tconst normalWeights = extractFontWeights( normalFaces );\n\t\t\tconst nearestWeight = findNearest( 400, normalWeights );\n\t\t\tstyle.fontWeight = String( nearestWeight ) || '400';\n\t\t} else {\n\t\t\tstyle.fontStyle =\n\t\t\t\t( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||\n\t\t\t\t'normal';\n\t\t\tstyle.fontWeight =\n\t\t\t\t( family.fontFace.length &&\n\t\t\t\t\tString( family.fontFace[ 0 ].fontWeight ) ) ||\n\t\t\t\t'400';\n\t\t}\n\t}\n\n\treturn style;\n}\n\n/**\n * Iterates through the presets array and searches for slugs that start with the specified\n * slugPrefix followed by a numerical suffix. It identifies the highest numerical suffix found\n * and returns one greater than the highest found suffix, ensuring that the new index is unique.\n *\n * @param presets    The array of preset objects, each potentially containing a slug property.\n * @param slugPrefix The prefix to look for in the preset slugs.\n *\n * @return The next available index for a preset with the specified slug prefix, or 1 if no matching slugs are found.\n */\n/**\n * Gets the variation class name for a block style variation.\n *\n * @param variation The variation name.\n * @return The variation class name.\n */\nexport function getVariationClassName( variation: string ): string {\n\tif ( ! variation ) {\n\t\treturn '';\n\t}\n\treturn `is-style-${ variation }`;\n}\n\nexport function getNewIndexFromPresets(\n\tpresets: any[],\n\tslugPrefix: string\n): number {\n\tconst nameRegex = new RegExp( `^${ slugPrefix }([\\\\d]+)$` );\n\tconst highestPresetValue = presets.reduce( ( currentHighest, preset ) => {\n\t\tif ( typeof preset?.slug === 'string' ) {\n\t\t\tconst matches = preset?.slug.match( nameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id > currentHighest ) {\n\t\t\t\t\treturn id;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn currentHighest;\n\t}, 0 );\n\treturn highestPresetValue + 1;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/variations/variation.js

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Tooltip } from "@wordpress/components";
+import { useMemo, useContext, useState } from "@wordpress/element";
+import { ENTER } from "@wordpress/keycodes";
+import { _x, sprintf } from "@wordpress/i18n";
+import { areGlobalStylesEqual } from "@wordpress/global-styles-engine";
+import { GlobalStylesContext } from "../context";
+import { filterObjectByProperties } from "../utils";
+function Variation({
+  variation,
+  children,
+  isPill = false,
+  properties,
+  showTooltip = false
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+  const {
+    base,
+    user,
+    onChange: setUserConfig
+  } = useContext(GlobalStylesContext);
+  const context = useMemo(() => {
+    let merged = { ...base, ...variation };
+    if (properties) {
+      merged = filterObjectByProperties(merged, properties);
+    }
+    return {
+      user: variation,
+      base,
+      merged,
+      onChange: () => {
+      }
+    };
+  }, [variation, base, properties]);
+  const selectVariation = () => setUserConfig(variation);
+  const selectOnEnter = (event) => {
+    if (event.keyCode === ENTER) {
+      event.preventDefault();
+      selectVariation();
+    }
+  };
+  const isActive = useMemo(
+    () => areGlobalStylesEqual(user, variation),
+    [user, variation]
+  );
+  let label = variation?.title;
+  if (variation?.description) {
+    label = sprintf(
+      /* translators: 1: variation title. 2: variation description. */
+      _x("%1$s (%2$s)", "variation label"),
+      variation?.title,
+      variation?.description
+    );
+  }
+  const content = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("global-styles-ui-variations_item", {
+        "is-active": isActive
+      }),
+      role: "button",
+      onClick: selectVariation,
+      onKeyDown: selectOnEnter,
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-current": isActive,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx("global-styles-ui-variations_item-preview", {
+            "is-pill": isPill
+          }),
+          children: children(isFocused)
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx(GlobalStylesContext.Provider, { value: context, children: showTooltip ? /* @__PURE__ */ jsx(Tooltip, { text: variation?.title, children: content }) : content });
+}
+export {
+  Variation as default
+};
+//# sourceMappingURL=variation.js.map

package/build-module/variations/variation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/variations/variation.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Tooltip } from '@wordpress/components';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { _x, sprintf } from '@wordpress/i18n';\nimport { areGlobalStylesEqual } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from '../context';\nimport { filterObjectByProperties } from '../utils';\n\ninterface VariationProps {\n\tvariation: any;\n\tchildren: ( isFocused: boolean ) => React.ReactNode;\n\tisPill?: boolean;\n\tproperties?: string[];\n\tshowTooltip?: boolean;\n}\n\nexport default function Variation( {\n\tvariation,\n\tchildren,\n\tisPill = false,\n\tproperties,\n\tshowTooltip = false,\n}: VariationProps ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst {\n\t\tbase,\n\t\tuser,\n\t\tonChange: setUserConfig,\n\t} = useContext( GlobalStylesContext );\n\n\tconst context = useMemo( () => {\n\t\tlet merged = { ...base, ...variation };\n\t\tif ( properties ) {\n\t\t\tmerged = filterObjectByProperties( merged, properties );\n\t\t}\n\t\treturn {\n\t\t\tuser: variation,\n\t\t\tbase,\n\t\t\tmerged,\n\t\t\tonChange: () => {},\n\t\t};\n\t}, [ variation, base, properties ] );\n\n\tconst selectVariation = () => setUserConfig( variation );\n\n\tconst selectOnEnter = ( event: React.KeyboardEvent ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo(\n\t\t() => areGlobalStylesEqual( user, variation ),\n\t\t[ user, variation ]\n\t);\n\n\tlet label = variation?.title;\n\tif ( variation?.description ) {\n\t\tlabel = sprintf(\n\t\t\t/* translators: 1: variation title. 2: variation description. */\n\t\t\t_x( '%1$s (%2$s)', 'variation label' ),\n\t\t\tvariation?.title,\n\t\t\tvariation?.description\n\t\t);\n\t}\n\n\tconst content = (\n\t\t<div\n\t\t\tclassName={ clsx( 'global-styles-ui-variations_item', {\n\t\t\t\t'is-active': isActive,\n\t\t\t} ) }\n\t\t\trole=\"button\"\n\t\t\tonClick={ selectVariation }\n\t\t\tonKeyDown={ selectOnEnter }\n\t\t\ttabIndex={ 0 }\n\t\t\taria-label={ label }\n\t\t\taria-current={ isActive }\n\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'global-styles-ui-variations_item-preview', {\n\t\t\t\t\t'is-pill': isPill,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ children( isFocused ) }\n\t\t\t</div>\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t{ showTooltip ? (\n\t\t\t\t<Tooltip text={ variation?.title }>{ content }</Tooltip>\n\t\t\t) : (\n\t\t\t\tcontent\n\t\t\t) }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],
+  "mappings": "AA6FG;AA1FH,OAAO,UAAU;AAKjB,SAAS,eAAe;AACxB,SAAS,SAAS,YAAY,gBAAgB;AAC9C,SAAS,aAAa;AACtB,SAAS,IAAI,eAAe;AAC5B,SAAS,4BAA4B;AAKrC,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AAU1B,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,cAAc;AACf,GAAoB;AACnB,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACX,IAAI,WAAY,mBAAoB;AAEpC,QAAM,UAAU,QAAS,MAAM;AAC9B,QAAI,SAAS,EAAE,GAAG,MAAM,GAAG,UAAU;AACrC,QAAK,YAAa;AACjB,eAAS,yBAA0B,QAAQ,UAAW;AAAA,IACvD;AACA,WAAO;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAAC;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,WAAW,MAAM,UAAW,CAAE;AAEnC,QAAM,kBAAkB,MAAM,cAAe,SAAU;AAEvD,QAAM,gBAAgB,CAAE,UAAgC;AACvD,QAAK,MAAM,YAAY,OAAQ;AAC9B,YAAM,eAAe;AACrB,sBAAgB;AAAA,IACjB;AAAA,EACD;AAEA,QAAM,WAAW;AAAA,IAChB,MAAM,qBAAsB,MAAM,SAAU;AAAA,IAC5C,CAAE,MAAM,SAAU;AAAA,EACnB;AAEA,MAAI,QAAQ,WAAW;AACvB,MAAK,WAAW,aAAc;AAC7B,YAAQ;AAAA;AAAA,MAEP,GAAI,eAAe,iBAAkB;AAAA,MACrC,WAAW;AAAA,MACX,WAAW;AAAA,IACZ;AAAA,EACD;AAEA,QAAM,UACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,oCAAoC;AAAA,QACrD,aAAa;AAAA,MACd,CAAE;AAAA,MACF,MAAK;AAAA,MACL,SAAU;AAAA,MACV,WAAY;AAAA,MACZ,UAAW;AAAA,MACX,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,SAAU,MAAM,aAAc,IAAK;AAAA,MACnC,QAAS,MAAM,aAAc,KAAM;AAAA,MAEnC;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,KAAM,4CAA4C;AAAA,YAC7D,WAAW;AAAA,UACZ,CAAE;AAAA,UAEA,mBAAU,SAAU;AAAA;AAAA,MACvB;AAAA;AAAA,EACD;AAGD,SACC,oBAAC,oBAAoB,UAApB,EAA6B,OAAQ,SACnC,wBACD,oBAAC,WAAQ,MAAO,WAAW,OAAU,mBAAS,IAE9C,SAEF;AAEF;",
+  "names": []
+}

package/build-module/variations/variations-color.js

@@ -0,0 +1,37 @@
+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";
+import { Subtitle } from "../subtitle";
+import Variation from "./variation";
+const propertiesToFilter = ["color"];
+function ColorVariations({
+  title,
+  gap = 2
+}) {
+  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, { 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

package/build-module/variations/variations-color.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/variations/variations-color.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalGrid as Grid,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport StylesPreviewColors from '../preview-colors';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../hooks';\nimport { Subtitle } from '../subtitle';\nimport Variation from './variation';\n\ninterface ColorVariationsProps {\n\ttitle?: string;\n\tgap?: number;\n}\n\nconst propertiesToFilter = [ 'color' ];\n\nexport default function ColorVariations( {\n\ttitle,\n\tgap = 2,\n}: ColorVariationsProps ) {\n\tconst colorVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );\n\n\t// Return null if there is only one variation (the default).\n\tif ( colorVariations?.length <= 1 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }\n\t\t\t<Grid gap={ gap }>\n\t\t\t\t{ colorVariations.map( ( variation: any, index: number ) => (\n\t\t\t\t\t<Variation\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\tisPill\n\t\t\t\t\t\tproperties={ propertiesToFilter }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t>\n\t\t\t\t\t\t{ () => <StylesPreviewColors /> }\n\t\t\t\t\t</Variation>\n\t\t\t\t) ) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": "AAoCE,SACY,KADZ;AAjCF;AAAA,EACC,sBAAsB;AAAA,EACtB,wBAAwB;AAAA,OAClB;AAKP,OAAO,yBAAyB;AAChC,SAAS,yDAAyD;AAClE,SAAS,gBAAgB;AACzB,OAAO,eAAe;AAOtB,MAAM,qBAAqB,CAAE,OAAQ;AAEtB,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA,MAAM;AACP,GAA0B;AACzB,QAAM,kBACL,kDAAmD,kBAAmB;AAGvE,MAAK,iBAAiB,UAAU,GAAI;AACnC,WAAO;AAAA,EACR;AAEA,SACC,qBAAC,UAAO,SAAU,GACf;AAAA,aAAS,oBAAC,YAAS,OAAQ,GAAM,iBAAO;AAAA,IAC1C,oBAAC,QAAK,KACH,0BAAgB,IAAK,CAAE,WAAgB,UACxC;AAAA,MAAC;AAAA;AAAA,QAEA;AAAA,QACA,QAAM;AAAA,QACN,YAAa;AAAA,QACb,aAAW;AAAA,QAET,gBAAM,oBAAC,uBAAoB;AAAA;AAAA,MANvB;AAAA,IAOP,CACC,GACH;AAAA,KACD;AAEF;",
+  "names": []
+}

package/build-module/variations/variations-panel.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { store as blocksStore } from "@wordpress/blocks";
+import { useSelect } from "@wordpress/data";
+import { __experimentalItemGroup as ItemGroup } from "@wordpress/components";
+import { NavigationButtonAsItem } from "../navigation-button";
+import { useSetting } from "../hooks";
+function getFilteredBlockStyles(blockStyles, variations) {
+  return blockStyles?.filter(
+    (style) => style.source === "block" || variations.includes(style.name)
+  ) || [];
+}
+function useBlockVariations(name) {
+  const blockStyles = useSelect(
+    (select) => {
+      const { getBlockStyles } = select(blocksStore);
+      return getBlockStyles(name);
+    },
+    [name]
+  );
+  const [variations] = useSetting("variations", name);
+  const variationNames = Object.keys(variations ?? {});
+  return getFilteredBlockStyles(blockStyles, variationNames);
+}
+function VariationsPanel({ name }) {
+  const coreBlockStyles = useBlockVariations(name);
+  return /* @__PURE__ */ jsx(ItemGroup, { isBordered: true, isSeparated: true, children: coreBlockStyles.map((style, index) => {
+    if (style?.isDefault) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      NavigationButtonAsItem,
+      {
+        path: "/blocks/" + encodeURIComponent(name) + "/variations/" + encodeURIComponent(style.name),
+        children: style.label
+      },
+      index
+    );
+  }) });
+}
+export {
+  VariationsPanel,
+  useBlockVariations
+};
+//# sourceMappingURL=variations-panel.js.map

package/build-module/variations/variations-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/variations/variations-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from '../navigation-button';\nimport { useSetting } from '../hooks';\n\ninterface BlockStyle {\n\tname: string;\n\tlabel: string;\n\tsource?: string;\n\tisDefault?: boolean;\n}\n\ninterface VariationsPanelProps {\n\tname: string;\n}\n\n// Only core block styles (source === block) or block styles with a matching\n// theme.json style variation will be configurable via Global Styles.\nfunction getFilteredBlockStyles(\n\tblockStyles: BlockStyle[],\n\tvariations: string[]\n): BlockStyle[] {\n\treturn (\n\t\tblockStyles?.filter(\n\t\t\t( style ) =>\n\t\t\t\tstyle.source === 'block' || variations.includes( style.name )\n\t\t) || []\n\t);\n}\n\nexport function useBlockVariations( name: string ): BlockStyle[] {\n\tconst blockStyles = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\tconst [ variations ] = useSetting( 'variations', name );\n\tconst variationNames = Object.keys( variations ?? {} );\n\n\treturn getFilteredBlockStyles( blockStyles, variationNames );\n}\n\nexport function VariationsPanel( { name }: VariationsPanelProps ) {\n\tconst coreBlockStyles = useBlockVariations( name );\n\n\treturn (\n\t\t<ItemGroup isBordered isSeparated>\n\t\t\t{ coreBlockStyles.map( ( style, index ) => {\n\t\t\t\tif ( style?.isDefault ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\treturn (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t'/blocks/' +\n\t\t\t\t\t\t\tencodeURIComponent( name ) +\n\t\t\t\t\t\t\t'/variations/' +\n\t\t\t\t\t\t\tencodeURIComponent( style.name )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ style.label }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</ItemGroup>\n\t);\n}\n"],
+  "mappings": "AA+DK;AA3DL,SAAS,SAAS,mBAAmB;AACrC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B,iBAAiB;AAKrD,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAe3B,SAAS,uBACR,aACA,YACe;AACf,SACC,aAAa;AAAA,IACZ,CAAE,UACD,MAAM,WAAW,WAAW,WAAW,SAAU,MAAM,IAAK;AAAA,EAC9D,KAAK,CAAC;AAER;AAEO,SAAS,mBAAoB,MAA6B;AAChE,QAAM,cAAc;AAAA,IACnB,CAAE,WAAY;AACb,YAAM,EAAE,eAAe,IAAI,OAAQ,WAAY;AAC/C,aAAO,eAAgB,IAAK;AAAA,IAC7B;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AACA,QAAM,CAAE,UAAW,IAAI,WAAY,cAAc,IAAK;AACtD,QAAM,iBAAiB,OAAO,KAAM,cAAc,CAAC,CAAE;AAErD,SAAO,uBAAwB,aAAa,cAAe;AAC5D;AAEO,SAAS,gBAAiB,EAAE,KAAK,GAA0B;AACjE,QAAM,kBAAkB,mBAAoB,IAAK;AAEjD,SACC,oBAAC,aAAU,YAAU,MAAC,aAAW,MAC9B,0BAAgB,IAAK,CAAE,OAAO,UAAW;AAC1C,QAAK,OAAO,WAAY;AACvB,aAAO;AAAA,IACR;AACA,WACC;AAAA,MAAC;AAAA;AAAA,QAEA,MACC,aACA,mBAAoB,IAAK,IACzB,iBACA,mBAAoB,MAAM,IAAK;AAAA,QAG9B,gBAAM;AAAA;AAAA,MARF;AAAA,IASP;AAAA,EAEF,CAAE,GACH;AAEF;",
+  "names": []
+}