@wordpress/global-styles-ui 1.1.0

package/build/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/variations/variation.js

@@ -0,0 +1,116 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var variation_exports = {};
+__export(variation_exports, {
+  default: () => Variation
+});
+module.exports = __toCommonJS(variation_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_keycodes = require("@wordpress/keycodes");
+var import_i18n = require("@wordpress/i18n");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_context = require("../context");
+var import_utils = require("../utils");
+function Variation({
+  variation,
+  children,
+  isPill = false,
+  properties,
+  showTooltip = false
+}) {
+  const [isFocused, setIsFocused] = (0, import_element.useState)(false);
+  const {
+    base,
+    user,
+    onChange: setUserConfig
+  } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  const context = (0, import_element.useMemo)(() => {
+    let merged = { ...base, ...variation };
+    if (properties) {
+      merged = (0, import_utils.filterObjectByProperties)(merged, properties);
+    }
+    return {
+      user: variation,
+      base,
+      merged,
+      onChange: () => {
+      }
+    };
+  }, [variation, base, properties]);
+  const selectVariation = () => setUserConfig(variation);
+  const selectOnEnter = (event) => {
+    if (event.keyCode === import_keycodes.ENTER) {
+      event.preventDefault();
+      selectVariation();
+    }
+  };
+  const isActive = (0, import_element.useMemo)(
+    () => (0, import_global_styles_engine.areGlobalStylesEqual)(user, variation),
+    [user, variation]
+  );
+  let label = variation?.title;
+  if (variation?.description) {
+    label = (0, import_i18n.sprintf)(
+      /* translators: 1: variation title. 2: variation description. */
+      (0, import_i18n._x)("%1$s (%2$s)", "variation label"),
+      variation?.title,
+      variation?.description
+    );
+  }
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_clsx.default)("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__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          className: (0, import_clsx.default)("global-styles-ui-variations_item-preview", {
+            "is-pill": isPill
+          }),
+          children: children(isFocused)
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.GlobalStylesContext.Provider, { value: context, children: showTooltip ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: variation?.title, children: content }) : content });
+}
+//# sourceMappingURL=variation.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6FG;AA1FH,kBAAiB;AAKjB,wBAAwB;AACxB,qBAA8C;AAC9C,sBAAsB;AACtB,kBAA4B;AAC5B,kCAAqC;AAKrC,qBAAoC;AACpC,mBAAyC;AAU1B,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,cAAc;AACf,GAAoB;AACnB,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAU,KAAM;AACpD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACX,QAAI,2BAAY,kCAAoB;AAEpC,QAAM,cAAU,wBAAS,MAAM;AAC9B,QAAI,SAAS,EAAE,GAAG,MAAM,GAAG,UAAU;AACrC,QAAK,YAAa;AACjB,mBAAS,uCAA0B,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,uBAAQ;AAC9B,YAAM,eAAe;AACrB,sBAAgB;AAAA,IACjB;AAAA,EACD;AAEA,QAAM,eAAW;AAAA,IAChB,UAAM,kDAAsB,MAAM,SAAU;AAAA,IAC5C,CAAE,MAAM,SAAU;AAAA,EACnB;AAEA,MAAI,QAAQ,WAAW;AACvB,MAAK,WAAW,aAAc;AAC7B,gBAAQ;AAAA;AAAA,UAEP,gBAAI,eAAe,iBAAkB;AAAA,MACrC,WAAW;AAAA,MACX,WAAW;AAAA,IACZ;AAAA,EACD;AAEA,QAAM,UACL;AAAA,IAAC;AAAA;AAAA,MACA,eAAY,YAAAA,SAAM,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,eAAY,YAAAA,SAAM,4CAA4C;AAAA,YAC7D,WAAW;AAAA,UACZ,CAAE;AAAA,UAEA,mBAAU,SAAU;AAAA;AAAA,MACvB;AAAA;AAAA,EACD;AAGD,SACC,4CAAC,mCAAoB,UAApB,EAA6B,OAAQ,SACnC,wBACD,4CAAC,6BAAQ,MAAO,WAAW,OAAU,mBAAS,IAE9C,SAEF;AAEF;",
+  "names": ["clsx"]
+}

package/build/variations/variations-color.js

@@ -0,0 +1,64 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var variations_color_exports = {};
+__export(variations_color_exports, {
+  default: () => ColorVariations
+});
+module.exports = __toCommonJS(variations_color_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_preview_colors = __toESM(require("../preview-colors"));
+var import_hooks = require("../hooks");
+var import_subtitle = require("../subtitle");
+var import_variation = __toESM(require("./variation"));
+const propertiesToFilter = ["color"];
+function ColorVariations({
+  title,
+  gap = 2
+}) {
+  const colorVariations = (0, import_hooks.useCurrentMergeThemeStyleVariationsWithUserConfig)(propertiesToFilter);
+  if (colorVariations?.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 3, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.Subtitle, { level: 3, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalGrid, { gap, children: colorVariations.map((variation, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_variation.default,
+      {
+        variation,
+        isPill: true,
+        properties: propertiesToFilter,
+        showTooltip: true,
+        children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_preview_colors.default, {})
+      },
+      index
+    )) })
+  ] });
+}
+//# sourceMappingURL=variations-color.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCE;AAjCF,wBAGO;AAKP,4BAAgC;AAChC,mBAAkE;AAClE,sBAAyB;AACzB,uBAAsB;AAOtB,MAAM,qBAAqB,CAAE,OAAQ;AAEtB,SAAR,gBAAkC;AAAA,EACxC;AAAA,EACA,MAAM;AACP,GAA0B;AACzB,QAAM,sBACL,gEAAmD,kBAAmB;AAGvE,MAAK,iBAAiB,UAAU,GAAI;AACnC,WAAO;AAAA,EACR;AAEA,SACC,6CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACf;AAAA,aAAS,4CAAC,4BAAS,OAAQ,GAAM,iBAAO;AAAA,IAC1C,4CAAC,kBAAAC,oBAAA,EAAK,KACH,0BAAgB,IAAK,CAAE,WAAgB,UACxC;AAAA,MAAC,iBAAAC;AAAA,MAAA;AAAA,QAEA;AAAA,QACA,QAAM;AAAA,QACN,YAAa;AAAA,QACb,aAAW;AAAA,QAET,gBAAM,4CAAC,sBAAAC,SAAA,EAAoB;AAAA;AAAA,MANvB;AAAA,IAOP,CACC,GACH;AAAA,KACD;AAEF;",
+  "names": ["VStack", "Grid", "Variation", "StylesPreviewColors"]
+}

package/build/variations/variations-panel.js

@@ -0,0 +1,69 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var variations_panel_exports = {};
+__export(variations_panel_exports, {
+  VariationsPanel: () => VariationsPanel,
+  useBlockVariations: () => useBlockVariations
+});
+module.exports = __toCommonJS(variations_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_blocks = require("@wordpress/blocks");
+var import_data = require("@wordpress/data");
+var import_components = require("@wordpress/components");
+var import_navigation_button = require("../navigation-button");
+var import_hooks = require("../hooks");
+function getFilteredBlockStyles(blockStyles, variations) {
+  return blockStyles?.filter(
+    (style) => style.source === "block" || variations.includes(style.name)
+  ) || [];
+}
+function useBlockVariations(name) {
+  const blockStyles = (0, import_data.useSelect)(
+    (select) => {
+      const { getBlockStyles } = select(import_blocks.store);
+      return getBlockStyles(name);
+    },
+    [name]
+  );
+  const [variations] = (0, import_hooks.useSetting)("variations", name);
+  const variationNames = Object.keys(variations ?? {});
+  return getFilteredBlockStyles(blockStyles, variationNames);
+}
+function VariationsPanel({ name }) {
+  const coreBlockStyles = useBlockVariations(name);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { isBordered: true, isSeparated: true, children: coreBlockStyles.map((style, index) => {
+    if (style?.isDefault) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_navigation_button.NavigationButtonAsItem,
+      {
+        path: "/blocks/" + encodeURIComponent(name) + "/variations/" + encodeURIComponent(style.name),
+        children: style.label
+      },
+      index
+    );
+  }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VariationsPanel,
+  useBlockVariations
+});
+//# sourceMappingURL=variations-panel.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+DK;AA3DL,oBAAqC;AACrC,kBAA0B;AAC1B,wBAAqD;AAKrD,+BAAuC;AACvC,mBAA2B;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,kBAAc;AAAA,IACnB,CAAE,WAAY;AACb,YAAM,EAAE,eAAe,IAAI,OAAQ,cAAAA,KAAY;AAC/C,aAAO,eAAgB,IAAK;AAAA,IAC7B;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AACA,QAAM,CAAE,UAAW,QAAI,yBAAY,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,4CAAC,kBAAAC,yBAAA,EAAU,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": ["blocksStore", "ItemGroup"]
+}

package/build/variations/variations-typography.js

@@ -0,0 +1,80 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var variations_typography_exports = {};
+__export(variations_typography_exports, {
+  default: () => TypographyVariations
+});
+module.exports = __toCommonJS(variations_typography_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_preview_typography = __toESM(require("../preview-typography"));
+var import_hooks = require("../hooks");
+var import_subtitle = require("../subtitle");
+var import_variation = __toESM(require("./variation"));
+const propertiesToFilter = ["typography"];
+function TypographyVariations({
+  title,
+  gap = 2
+}) {
+  const typographyVariations = (0, import_hooks.useCurrentMergeThemeStyleVariationsWithUserConfig)(propertiesToFilter);
+  if (typographyVariations?.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 3, children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.Subtitle, { level: 3, children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.__experimentalGrid,
+      {
+        columns: 3,
+        gap,
+        className: "global-styles-ui-style-variations-container",
+        children: typographyVariations.map(
+          (variation, index) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_variation.default,
+              {
+                variation,
+                properties: propertiesToFilter,
+                showTooltip: true,
+                children: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_preview_typography.default,
+                  {
+                    variation
+                  }
+                )
+              },
+              index
+            );
+          }
+        )
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=variations-typography.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/variations/variations-typography.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 StylesPreviewTypography from '../preview-typography';\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../hooks';\nimport { Subtitle } from '../subtitle';\nimport Variation from './variation';\n\ninterface TypographyVariationsProps {\n\ttitle?: string;\n\tgap?: number;\n}\n\nconst propertiesToFilter = [ 'typography' ];\n\nexport default function TypographyVariations( {\n\ttitle,\n\tgap = 2,\n}: TypographyVariationsProps ) {\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );\n\n\t// Return null if there is only one variation (the default).\n\tif ( typographyVariations?.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\n\t\t\t\tcolumns={ 3 }\n\t\t\t\tgap={ gap }\n\t\t\t\tclassName=\"global-styles-ui-style-variations-container\"\n\t\t\t>\n\t\t\t\t{ typographyVariations.map(\n\t\t\t\t\t( variation: any, index: number ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Variation\n\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t\tproperties={ propertiesToFilter }\n\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ () => (\n\t\t\t\t\t\t\t\t\t<StylesPreviewTypography\n\t\t\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Variation>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t</Grid>\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoCE;AAjCF,wBAGO;AAKP,gCAAoC;AACpC,mBAAkE;AAClE,sBAAyB;AACzB,uBAAsB;AAOtB,MAAM,qBAAqB,CAAE,YAAa;AAE3B,SAAR,qBAAuC;AAAA,EAC7C;AAAA,EACA,MAAM;AACP,GAA+B;AAC9B,QAAM,2BACL,gEAAmD,kBAAmB;AAGvE,MAAK,sBAAsB,UAAU,GAAI;AACxC,WAAO;AAAA,EACR;AAEA,SACC,6CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACf;AAAA,aAAS,4CAAC,4BAAS,OAAQ,GAAM,iBAAO;AAAA,IAC1C;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,SAAU;AAAA,QACV;AAAA,QACA,WAAU;AAAA,QAER,+BAAqB;AAAA,UACtB,CAAE,WAAgB,UAAmB;AACpC,mBACC;AAAA,cAAC,iBAAAC;AAAA,cAAA;AAAA,gBAEA;AAAA,gBACA,YAAa;AAAA,gBACb,aAAW;AAAA,gBAET,gBACD;AAAA,kBAAC,0BAAAC;AAAA,kBAAA;AAAA,oBACA;AAAA;AAAA,gBACD;AAAA;AAAA,cARK;AAAA,YAUP;AAAA,UAEF;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "names": ["VStack", "Grid", "Variation", "StylesPreviewTypography"]
+}

package/build/with-global-styles-provider.js

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var with_global_styles_provider_exports = {};
+__export(with_global_styles_provider_exports, {
+  withGlobalStylesProvider: () => withGlobalStylesProvider
+});
+module.exports = __toCommonJS(with_global_styles_provider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_provider = require("./provider");
+function withGlobalStylesProvider(Component) {
+  return function WrappedComponent({
+    value,
+    baseValue,
+    onChange,
+    ...props
+  }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_provider.GlobalStylesProvider,
+      {
+        value,
+        baseValue,
+        onChange,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props })
+      }
+    );
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withGlobalStylesProvider
+});
+//# sourceMappingURL=with-global-styles-provider.js.map

package/build/with-global-styles-provider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/with-global-styles-provider.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesProvider } from './provider';\n\ninterface GlobalStylesProviderProps {\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( config: GlobalStylesConfig ) => void;\n}\n\n/**\n * Higher-order component that wraps a component with GlobalStylesProvider.\n * This allows components to access GlobalStylesContext without exposing\n * the provider directly in the public API.\n *\n * @param Component - The component to wrap\n * @return A wrapped component that accepts value, baseValue, and onChange props\n */\nexport function withGlobalStylesProvider< P extends object >(\n\tComponent: React.ComponentType< P >\n) {\n\treturn function WrappedComponent( {\n\t\tvalue,\n\t\tbaseValue,\n\t\tonChange,\n\t\t...props\n\t}: P & GlobalStylesProviderProps ) {\n\t\treturn (\n\t\t\t<GlobalStylesProvider\n\t\t\t\tvalue={ value }\n\t\t\t\tbaseValue={ baseValue }\n\t\t\t\tonChange={ onChange }\n\t\t\t>\n\t\t\t\t<Component { ...( props as P ) } />\n\t\t\t</GlobalStylesProvider>\n\t\t);\n\t};\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCI;AA/BJ,sBAAqC;AAgB9B,SAAS,yBACf,WACC;AACD,SAAO,SAAS,iBAAkB;AAAA,IACjC;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,GAAmC;AAClC,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEA,sDAAC,aAAY,GAAK,OAAe;AAAA;AAAA,IAClC;AAAA,EAEF;AACD;",
+  "names": []
+}

package/build-module/background-panel.js

@@ -0,0 +1,38 @@
+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 BACKGROUND_DEFAULT_VALUES = {
+  backgroundSize: "auto"
+};
+const { BackgroundPanel: StylesBackgroundPanel } = unlock(
+  blockEditorPrivateApis
+);
+function hasBackgroundImageValue(style) {
+  return !!style?.background?.backgroundImage?.id || !!style?.background?.backgroundImage?.url || typeof style?.background?.backgroundImage === "string";
+}
+function BackgroundPanel() {
+  const [style] = useStyle("", void 0, "user", false);
+  const [inheritedStyle, setStyle] = useStyle(
+    "",
+    void 0,
+    "merged",
+    false
+  );
+  const [settings] = useSetting("");
+  return /* @__PURE__ */ jsx(
+    StylesBackgroundPanel,
+    {
+      inheritedValue: inheritedStyle,
+      value: style,
+      onChange: setStyle,
+      settings,
+      defaultValues: BACKGROUND_DEFAULT_VALUES
+    }
+  );
+}
+export {
+  BackgroundPanel as default,
+  hasBackgroundImageValue
+};
+//# sourceMappingURL=background-panel.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/background-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\n// Initial control values where no block style is set.\nconst BACKGROUND_DEFAULT_VALUES = {\n\tbackgroundSize: 'auto',\n};\n\nconst { BackgroundPanel: StylesBackgroundPanel } = unlock(\n\tblockEditorPrivateApis\n);\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param style Style attribute.\n * @return Whether the block has a background image value set.\n */\nexport function hasBackgroundImageValue( style: any ): boolean {\n\treturn (\n\t\t!! style?.background?.backgroundImage?.id ||\n\t\t!! style?.background?.backgroundImage?.url ||\n\t\ttypeof style?.background?.backgroundImage === 'string'\n\t);\n}\n\nexport default function BackgroundPanel() {\n\tconst [ style ] = useStyle( '', undefined, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ settings ] = useSetting( '' );\n\n\treturn (\n\t\t<StylesBackgroundPanel\n\t\t\tinheritedValue={ inheritedStyle }\n\t\t\tvalue={ style }\n\t\t\tonChange={ setStyle }\n\t\t\tsettings={ settings }\n\t\t\tdefaultValues={ BACKGROUND_DEFAULT_VALUES }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AA+CE;AA3CF,SAAS,eAAe,8BAA8B;AAKtD,SAAS,UAAU,kBAAkB;AACrC,SAAS,cAAc;AAGvB,MAAM,4BAA4B;AAAA,EACjC,gBAAgB;AACjB;AAEA,MAAM,EAAE,iBAAiB,sBAAsB,IAAI;AAAA,EAClD;AACD;AASO,SAAS,wBAAyB,OAAsB;AAC9D,SACC,CAAC,CAAE,OAAO,YAAY,iBAAiB,MACvC,CAAC,CAAE,OAAO,YAAY,iBAAiB,OACvC,OAAO,OAAO,YAAY,oBAAoB;AAEhD;AAEe,SAAR,kBAAmC;AACzC,QAAM,CAAE,KAAM,IAAI,SAAU,IAAI,QAAW,QAAQ,KAAM;AACzD,QAAM,CAAE,gBAAgB,QAAS,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,QAAS,IAAI,WAAY,EAAG;AAEpC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,OAAQ;AAAA,MACR,UAAW;AAAA,MACX;AAAA,MACA,eAAgB;AAAA;AAAA,EACjB;AAEF;",
+  "names": []
+}

package/build-module/block-preview-panel.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { BlockPreview } from "@wordpress/block-editor";
+import { getBlockType, getBlockFromExample } from "@wordpress/blocks";
+import { __experimentalSpacer as Spacer } from "@wordpress/components";
+import { useMemo } from "@wordpress/element";
+import { getVariationClassName } from "./utils";
+const BlockPreviewPanel = ({
+  name,
+  variation = ""
+}) => {
+  const blockExample = getBlockType(name)?.example;
+  const blocks = useMemo(() => {
+    if (!blockExample) {
+      return null;
+    }
+    const example = {
+      ...blockExample,
+      attributes: {
+        ...blockExample.attributes,
+        style: void 0,
+        className: variation ? getVariationClassName(variation) : blockExample.attributes?.className
+      }
+    };
+    return getBlockFromExample(name, example);
+  }, [name, blockExample, variation]);
+  const viewportWidth = blockExample?.viewportWidth ?? 500;
+  const previewHeight = 144;
+  const sidebarWidth = 235;
+  const scale = sidebarWidth / viewportWidth;
+  const minHeight = scale !== 0 && scale < 1 && previewHeight ? previewHeight / scale : previewHeight;
+  if (!blockExample) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Spacer, { marginX: 4, marginBottom: 4, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "global-styles-ui__block-preview-panel",
+      style: { maxHeight: previewHeight, boxSizing: "initial" },
+      children: /* @__PURE__ */ jsx(
+        BlockPreview,
+        {
+          blocks,
+          viewportWidth,
+          minHeight: previewHeight,
+          additionalStyles: (
+            //We want this CSS to be in sync with the one in InserterPreviewPanel.
+            [
+              {
+                css: `
+								body{
+									padding: 24px;
+									min-height:${Math.round(minHeight)}px;
+									display:flex;
+									align-items:center;
+								}
+								.is-root-container { width: 100%; }
+							`
+              }
+            ]
+          )
+        }
+      )
+    }
+  ) });
+};
+var block_preview_panel_default = BlockPreviewPanel;
+export {
+  block_preview_panel_default as default
+};
+//# sourceMappingURL=block-preview-panel.js.map

package/build-module/block-preview-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/block-preview-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { BlockPreview } from '@wordpress/block-editor';\n// @ts-expect-error: Not typed yet.\nimport { getBlockType, getBlockFromExample } from '@wordpress/blocks';\nimport { __experimentalSpacer as Spacer } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getVariationClassName } from './utils';\n\ninterface BlockPreviewPanelProps {\n\tname: string;\n\tvariation?: string;\n}\n\nconst BlockPreviewPanel = ( {\n\tname,\n\tvariation = '',\n}: BlockPreviewPanelProps ) => {\n\tconst blockExample = getBlockType( name )?.example;\n\tconst blocks = useMemo( () => {\n\t\tif ( ! blockExample ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst example = {\n\t\t\t...blockExample,\n\t\t\tattributes: {\n\t\t\t\t...blockExample.attributes,\n\t\t\t\tstyle: undefined,\n\t\t\t\tclassName: variation\n\t\t\t\t\t? getVariationClassName( variation )\n\t\t\t\t\t: blockExample.attributes?.className,\n\t\t\t},\n\t\t};\n\n\t\treturn getBlockFromExample( name, example );\n\t}, [ name, blockExample, variation ] );\n\n\tconst viewportWidth = blockExample?.viewportWidth ?? 500;\n\t// Same as height of InserterPreviewPanel.\n\tconst previewHeight = 144;\n\tconst sidebarWidth = 235;\n\tconst scale = sidebarWidth / viewportWidth;\n\tconst minHeight =\n\t\tscale !== 0 && scale < 1 && previewHeight\n\t\t\t? previewHeight / scale\n\t\t\t: previewHeight;\n\n\tif ( ! blockExample ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Spacer marginX={ 4 } marginBottom={ 4 }>\n\t\t\t<div\n\t\t\t\tclassName=\"global-styles-ui__block-preview-panel\"\n\t\t\t\tstyle={ { maxHeight: previewHeight, boxSizing: 'initial' } }\n\t\t\t>\n\t\t\t\t<BlockPreview\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tviewportWidth={ viewportWidth }\n\t\t\t\t\tminHeight={ previewHeight }\n\t\t\t\t\tadditionalStyles={\n\t\t\t\t\t\t//We want this CSS to be in sync with the one in InserterPreviewPanel.\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tcss: `\n\t\t\t\t\t\t\t\tbody{\n\t\t\t\t\t\t\t\t\tpadding: 24px;\n\t\t\t\t\t\t\t\t\tmin-height:${ Math.round( minHeight ) }px;\n\t\t\t\t\t\t\t\t\tdisplay:flex;\n\t\t\t\t\t\t\t\t\talign-items:center;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t.is-root-container { width: 100%; }\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t]\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</Spacer>\n\t);\n};\n\nexport default BlockPreviewPanel;\n"],
+  "mappings": "AAgEI;AA5DJ,SAAS,oBAAoB;AAE7B,SAAS,cAAc,2BAA2B;AAClD,SAAS,wBAAwB,cAAc;AAC/C,SAAS,eAAe;AAKxB,SAAS,6BAA6B;AAOtC,MAAM,oBAAoB,CAAE;AAAA,EAC3B;AAAA,EACA,YAAY;AACb,MAA+B;AAC9B,QAAM,eAAe,aAAc,IAAK,GAAG;AAC3C,QAAM,SAAS,QAAS,MAAM;AAC7B,QAAK,CAAE,cAAe;AACrB,aAAO;AAAA,IACR;AAEA,UAAM,UAAU;AAAA,MACf,GAAG;AAAA,MACH,YAAY;AAAA,QACX,GAAG,aAAa;AAAA,QAChB,OAAO;AAAA,QACP,WAAW,YACR,sBAAuB,SAAU,IACjC,aAAa,YAAY;AAAA,MAC7B;AAAA,IACD;AAEA,WAAO,oBAAqB,MAAM,OAAQ;AAAA,EAC3C,GAAG,CAAE,MAAM,cAAc,SAAU,CAAE;AAErC,QAAM,gBAAgB,cAAc,iBAAiB;AAErD,QAAM,gBAAgB;AACtB,QAAM,eAAe;AACrB,QAAM,QAAQ,eAAe;AAC7B,QAAM,YACL,UAAU,KAAK,QAAQ,KAAK,gBACzB,gBAAgB,QAChB;AAEJ,MAAK,CAAE,cAAe;AACrB,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,UAAO,SAAU,GAAI,cAAe,GACpC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ,EAAE,WAAW,eAAe,WAAW,UAAU;AAAA,MAEzD;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAY;AAAA,UACZ;AAAA;AAAA,YAEC;AAAA,cACC;AAAA,gBACC,KAAK;AAAA;AAAA;AAAA,sBAGU,KAAK,MAAO,SAAU,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMxC;AAAA,YACD;AAAA;AAAA;AAAA,MAEF;AAAA;AAAA,EACD,GACD;AAEF;AAEA,IAAO,8BAAQ;",
+  "names": []
+}

package/build-module/color-indicator-wrapper.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Flex } from "@wordpress/components";
+function ColorIndicatorWrapper({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      className: clsx(
+        "global-styles-ui__color-indicator-wrapper",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var color_indicator_wrapper_default = ColorIndicatorWrapper;
+export {
+  color_indicator_wrapper_default as default
+};
+//# sourceMappingURL=color-indicator-wrapper.js.map