@wordpress/global-styles-ui 1.1.0 → 1.2.0

package/build/size-control/index.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../src/size-control/index.tsx"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tRangeControl,\n\tFlex,\n\tFlexItem,\n\tuseBaseControlProps,\n\t__experimentalUseCustomUnits as useCustomUnits,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalSpacer as Spacer,\n} from '@wordpress/components';\n\nconst DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];\n\ninterface SizeControlProps {\n\tvalue?: string;\n\tonChange?: ( value: string | undefined ) => void;\n\tfallbackValue?: number;\n\tdisabled?: boolean;\n\tlabel?: string;\n\t__nextHasNoMarginBottom?: boolean;\n}\n\nfunction SizeControl( {\n\t// Do not allow manipulation of margin bottom\n\t__nextHasNoMarginBottom,\n\t...props\n}: SizeControlProps ) {\n\tconst { baseControlProps } = useBaseControlProps( props );\n\tconst { value, onChange, fallbackValue, disabled, label } = props;\n\n\tconst units = useCustomUnits( {\n\t\tavailableUnits: DEFAULT_UNITS,\n\t} );\n\n\tconst [ valueQuantity, valueUnit = 'px' ] =\n\t\tparseQuantityAndUnitFromRawValue( value, units );\n\n\tconst isValueUnitRelative =\n\t\t!! valueUnit && [ 'em', 'rem', 'vw', 'vh' ].includes( valueUnit );\n\n\t// Receives the new value from the UnitControl component as a string containing the value and unit.\n\tconst handleUnitControlChange = ( newValue: string | undefined ) => {\n\t\tonChange?.( newValue );\n\t};\n\n\t// Receives the new value from the RangeControl component as a number.\n\tconst handleRangeControlChange = ( newValue: number | undefined ) => {\n\t\tif ( newValue !== undefined ) {\n\t\t\tonChange?.( newValue + valueUnit );\n\t\t} else {\n\t\t\tonChange?.( undefined );\n\t\t}\n\t};\n\n\treturn (\n\t\t<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>\n\t\t\t<Flex>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ handleUnitControlChange }\n\t\t\t\t\t\tunits={ units }\n\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t/>\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t<Spacer marginX={ 2 } marginBottom={ 0 }>\n\t\t\t\t\t\t<RangeControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ valueQuantity }\n\t\t\t\t\t\t\tinitialPosition={ fallbackValue }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t\tonChange={ handleRangeControlChange }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ isValueUnitRelative ? 10 : 100 }\n\t\t\t\t\t\t\tstep={ isValueUnitRelative ? 0.1 : 1 }\n\t\t\t\t\t\t\tdisabled={ disabled }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</FlexItem>\n\t\t\t</Flex>\n\t\t</BaseControl>\n\t);\n}\n\nexport { SizeControl };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4DG;AAzDH,wBAUO;AAEP,MAAM,gBAAgB,CAAE,MAAM,MAAM,OAAO,MAAM,IAAK;AAWtD,SAAS,YAAa;AAAA;AAAA,EAErB;AAAA,EACA,GAAG;AACJ,GAAsB;AACrB,QAAM,EAAE,iBAAiB,QAAI,uCAAqB,KAAM;AACxD,QAAM,EAAE,OAAO,UAAU,eAAe,UAAU,MAAM,IAAI;AAE5D,QAAM,YAAQ,kBAAAA,8BAAgB;AAAA,IAC7B,gBAAgB;AAAA,EACjB,CAAE;AAEF,QAAM,CAAE,eAAe,YAAY,IAAK,QACvC,kBAAAC,gDAAkC,OAAO,KAAM;AAEhD,QAAM,sBACL,CAAC,CAAE,aAAa,CAAE,MAAM,OAAO,MAAM,IAAK,EAAE,SAAU,SAAU;AAGjE,QAAM,0BAA0B,CAAE,aAAkC;AACnE,eAAY,QAAS;AAAA,EACtB;AAGA,QAAM,2BAA2B,CAAE,aAAkC;AACpE,QAAK,aAAa,QAAY;AAC7B,iBAAY,WAAW,SAAU;AAAA,IAClC,OAAO;AACN,iBAAY,MAAU;AAAA,IACvB;AAAA,EACD;AAEA,SACC,4CAAC,iCAAc,GAAG,kBAAmB,yBAAuB,MAC3D,uDAAC,0BACA;AAAA,gDAAC,8BAAS,SAAO,MAChB;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,uBAAqB;AAAA,QACrB;AAAA,QACA,qBAAmB;AAAA,QACnB;AAAA,QACA,UAAW;AAAA,QACX;AAAA,QACA,KAAM;AAAA,QACN;AAAA;AAAA,IACD,GACD;AAAA,IACA,4CAAC,8BAAS,SAAO,MAChB,sDAAC,kBAAAC,sBAAA,EAAO,SAAU,GAAI,cAAe,GACpC;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,yBAAuB;AAAA,QACvB;AAAA,QACA,qBAAmB;AAAA,QACnB,OAAQ;AAAA,QACR,iBAAkB;AAAA,QAClB,gBAAiB;AAAA,QACjB,UAAW;AAAA,QACX,KAAM;AAAA,QACN,KAAM,sBAAsB,KAAK;AAAA,QACjC,MAAO,sBAAsB,MAAM;AAAA,QACnC;AAAA;AAAA,IACD,GACD,GACD;AAAA,KACD,GACD;AAEF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAUO;AA+CJ;AA7CH,IAAM,gBAAgB,CAAE,MAAM,MAAM,OAAO,MAAM,IAAK;AAWtD,SAAS,YAAa;AAAA;AAAA,EAErB;AAAA,EACA,GAAG;AACJ,GAAsB;AACrB,QAAM,EAAE,iBAAiB,QAAI,uCAAqB,KAAM;AACxD,QAAM,EAAE,OAAO,UAAU,eAAe,UAAU,MAAM,IAAI;AAE5D,QAAM,YAAQ,kBAAAA,8BAAgB;AAAA,IAC7B,gBAAgB;AAAA,EACjB,CAAE;AAEF,QAAM,CAAE,eAAe,YAAY,IAAK,QACvC,kBAAAC,gDAAkC,OAAO,KAAM;AAEhD,QAAM,sBACL,CAAC,CAAE,aAAa,CAAE,MAAM,OAAO,MAAM,IAAK,EAAE,SAAU,SAAU;AAGjE,QAAM,0BAA0B,CAAE,aAAkC;AACnE,eAAY,QAAS;AAAA,EACtB;AAGA,QAAM,2BAA2B,CAAE,aAAkC;AACpE,QAAK,aAAa,QAAY;AAC7B,iBAAY,WAAW,SAAU;AAAA,IAClC,OAAO;AACN,iBAAY,MAAU;AAAA,IACvB;AAAA,EACD;AAEA,SACC,4CAAC,iCAAc,GAAG,kBAAmB,yBAAuB,MAC3D,uDAAC,0BACA;AAAA,gDAAC,8BAAS,SAAO,MAChB;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,uBAAqB;AAAA,QACrB;AAAA,QACA,qBAAmB;AAAA,QACnB;AAAA,QACA,UAAW;AAAA,QACX;AAAA,QACA,KAAM;AAAA,QACN;AAAA;AAAA,IACD,GACD;AAAA,IACA,4CAAC,8BAAS,SAAO,MAChB,sDAAC,kBAAAC,sBAAA,EAAO,SAAU,GAAI,cAAe,GACpC;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,yBAAuB;AAAA,QACvB;AAAA,QACA,qBAAmB;AAAA,QACnB,OAAQ;AAAA,QACR,iBAAkB;AAAA,QAClB,gBAAiB;AAAA,QACjB,UAAW;AAAA,QACX,KAAM;AAAA,QACN,KAAM,sBAAsB,KAAK;AAAA,QACjC,MAAO,sBAAsB,MAAM;AAAA,QACnC;AAAA;AAAA,IACD,GACD,GACD;AAAA,KACD,GACD;AAEF;",
   "names": ["useCustomUnits", "parseQuantityAndUnitFromRawValue", "UnitControl", "Spacer"]
 }

package/build/style-variations-container.js

@@ -26,12 +26,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/style-variations-container.tsx
 var style_variations_container_exports = {};
 __export(style_variations_container_exports, {
   default: () => style_variations_container_default
 });
 module.exports = __toCommonJS(style_variations_container_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_core_data = require("@wordpress/core-data");
 var import_data = require("@wordpress/data");
 var import_element = require("@wordpress/element");
@@ -41,6 +42,7 @@ var import_preview_styles = __toESM(require("./preview-styles"));
 var import_variation = __toESM(require("./variations/variation"));
 var import_context = require("./context");
 var import_utils = require("./utils");
+var import_jsx_runtime = require("react/jsx-runtime");
 function StyleVariationsContainer({
   gap = 2
 }) {

package/build/style-variations-container.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../src/style-variations-container.tsx"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useMemo } from '@wordpress/element';\nimport { __experimentalGrid as Grid } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport type {\n\tGlobalStylesConfig,\n\tStyleVariation,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport PreviewStyles from './preview-styles';\nimport Variation from './variations/variation';\nimport { GlobalStylesContext } from './context';\nimport { isVariationWithProperties } from './utils';\n\ninterface StyleVariationsContainerProps {\n\tgap?: number;\n}\n\nfunction StyleVariationsContainer( {\n\tgap = 2,\n}: StyleVariationsContainerProps ) {\n\tconst { user } = useContext( GlobalStylesContext );\n\tconst userStyles = user?.styles;\n\n\tconst variations = useSelect( ( select ) => {\n\t\tconst result =\n\t\t\tselect(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations();\n\t\t// The API might return null or an array\n\t\treturn Array.isArray( result )\n\t\t\t? ( result as GlobalStylesConfig[] )\n\t\t\t: undefined;\n\t}, [] );\n\n\t// Filter out variations that are color or typography variations.\n\tconst fullStyleVariations = variations?.filter(\n\t\t( variation: GlobalStylesConfig ) => {\n\t\t\treturn (\n\t\t\t\t! isVariationWithProperties( variation, [ 'color' ] ) &&\n\t\t\t\t! isVariationWithProperties( variation, [\n\t\t\t\t\t'typography',\n\t\t\t\t\t'spacing',\n\t\t\t\t] )\n\t\t\t);\n\t\t}\n\t);\n\n\tconst themeVariations = useMemo( () => {\n\t\tconst withEmptyVariation: StyleVariation[] = [\n\t\t\t{\n\t\t\t\ttitle: __( 'Default' ),\n\t\t\t\tsettings: {},\n\t\t\t\tstyles: {},\n\t\t\t},\n\t\t\t...( fullStyleVariations ?? [] ),\n\t\t];\n\t\treturn [\n\t\t\t...withEmptyVariation.map( ( variation: StyleVariation ) => {\n\t\t\t\tconst blockStyles = variation?.styles?.blocks\n\t\t\t\t\t? { ...variation.styles.blocks }\n\t\t\t\t\t: {};\n\n\t\t\t\t// We need to copy any user custom CSS to the variation to prevent it being lost\n\t\t\t\t// when switching variations.\n\t\t\t\tif ( userStyles?.blocks ) {\n\t\t\t\t\tObject.keys( userStyles.blocks ).forEach( ( blockName ) => {\n\t\t\t\t\t\t// First get any block specific custom CSS from the current user styles and merge with any custom CSS for\n\t\t\t\t\t\t// that block in the variation.\n\t\t\t\t\t\tif ( userStyles.blocks?.[ blockName ]?.css ) {\n\t\t\t\t\t\t\tconst variationBlockStyles =\n\t\t\t\t\t\t\t\tblockStyles[ blockName ] || {};\n\t\t\t\t\t\t\tconst customCSS = {\n\t\t\t\t\t\t\t\tcss: `${\n\t\t\t\t\t\t\t\t\tblockStyles[ blockName ]?.css || ''\n\t\t\t\t\t\t\t\t} ${\n\t\t\t\t\t\t\t\t\tuserStyles.blocks?.[\n\t\t\t\t\t\t\t\t\t\tblockName\n\t\t\t\t\t\t\t\t\t]?.css?.trim() || ''\n\t\t\t\t\t\t\t\t}`,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\tblockStyles[ blockName ] = {\n\t\t\t\t\t\t\t\t...variationBlockStyles,\n\t\t\t\t\t\t\t\t...customCSS,\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\t// Now merge any global custom CSS from current user styles with global custom CSS in the variation.\n\t\t\t\tconst css =\n\t\t\t\t\tuserStyles?.css || variation.styles?.css\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tcss: `${ variation.styles?.css || '' } ${\n\t\t\t\t\t\t\t\t\tuserStyles?.css || ''\n\t\t\t\t\t\t\t\t}`,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: {};\n\n\t\t\t\tconst blocks =\n\t\t\t\t\tObject.keys( blockStyles ).length > 0\n\t\t\t\t\t\t? { blocks: blockStyles }\n\t\t\t\t\t\t: {};\n\n\t\t\t\tconst styles = {\n\t\t\t\t\t...variation.styles,\n\t\t\t\t\t...css,\n\t\t\t\t\t...blocks,\n\t\t\t\t};\n\t\t\t\treturn {\n\t\t\t\t\t...variation,\n\t\t\t\t\tsettings: variation.settings ?? {},\n\t\t\t\t\tstyles,\n\t\t\t\t};\n\t\t\t} ),\n\t\t];\n\t}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );\n\n\tif ( ! fullStyleVariations || fullStyleVariations.length < 1 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Grid\n\t\t\tcolumns={ 2 }\n\t\t\tclassName=\"global-styles-ui-style-variations-container\"\n\t\t\tgap={ gap }\n\t\t>\n\t\t\t{ themeVariations.map(\n\t\t\t\t( variation: StyleVariation, index: number ) => (\n\t\t\t\t\t<Variation key={ index } variation={ variation }>\n\t\t\t\t\t\t{ ( isFocused: boolean ) => (\n\t\t\t\t\t\t\t<PreviewStyles\n\t\t\t\t\t\t\t\tlabel={ variation?.title }\n\t\t\t\t\t\t\t\twithHoverView\n\t\t\t\t\t\t\t\tisFocused={ isFocused }\n\t\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Variation>\n\t\t\t\t)\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport default StyleVariationsContainer;\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": ["coreStore", "Grid", "Variation", "PreviewStyles"]
 }

package/build/style-variations-content.js

@@ -26,17 +26,19 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/style-variations-content.tsx
 var style_variations_content_exports = {};
 __export(style_variations_content_exports, {
   StyleVariationsContent: () => StyleVariationsContent
 });
 module.exports = __toCommonJS(style_variations_content_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_i18n = require("@wordpress/i18n");
 var import_components = require("@wordpress/components");
 var import_style_variations_container = __toESM(require("./style-variations-container"));
 var import_variations_typography = __toESM(require("./variations/variations-typography"));
 var import_variations_color = __toESM(require("./variations/variations-color"));
+var import_jsx_runtime = require("react/jsx-runtime");
 function StyleVariationsContent() {
   const gap = 3;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 10, className: "global-styles-ui-variation-container", children: [

package/build/style-variations-content.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../src/style-variations-content.tsx"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport StyleVariationsContainer from './style-variations-container';\nimport TypographyVariations from './variations/variations-typography';\nimport ColorVariations from './variations/variations-color';\n\nexport function StyleVariationsContent() {\n\tconst gap = 3;\n\n\treturn (\n\t\t<VStack spacing={ 10 } className=\"global-styles-ui-variation-container\">\n\t\t\t<StyleVariationsContainer gap={ gap } />\n\t\t\t<ColorVariations title={ __( 'Color Variations' ) } gap={ gap } />\n\t\t\t<TypographyVariations title={ __( 'Typography' ) } gap={ gap } />\n\t\t</VStack>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBE;AAdF,kBAAmB;AACnB,wBAA+C;AAK/C,wCAAqC;AACrC,mCAAiC;AACjC,8BAA4B;AAErB,SAAS,yBAAyB;AACxC,QAAM,MAAM;AAEZ,SACC,6CAAC,kBAAAA,sBAAA,EAAO,SAAU,IAAK,WAAU,wCAChC;AAAA,gDAAC,kCAAAC,SAAA,EAAyB,KAAY;AAAA,IACtC,4CAAC,wBAAAC,SAAA,EAAgB,WAAQ,gBAAI,kBAAmB,GAAI,KAAY;AAAA,IAChE,4CAAC,6BAAAC,SAAA,EAAqB,WAAQ,gBAAI,YAAa,GAAI,KAAY;AAAA,KAChE;AAEF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAA+C;AAK/C,wCAAqC;AACrC,mCAAiC;AACjC,8BAA4B;AAM1B;AAJK,SAAS,yBAAyB;AACxC,QAAM,MAAM;AAEZ,SACC,6CAAC,kBAAAA,sBAAA,EAAO,SAAU,IAAK,WAAU,wCAChC;AAAA,gDAAC,kCAAAC,SAAA,EAAyB,KAAY;AAAA,IACtC,4CAAC,wBAAAC,SAAA,EAAgB,WAAQ,gBAAI,kBAAmB,GAAI,KAAY;AAAA,IAChE,4CAAC,6BAAAC,SAAA,EAAqB,WAAQ,gBAAI,YAAa,GAAI,KAAY;AAAA,KAChE;AAEF;",
   "names": ["VStack", "StyleVariationsContainer", "ColorVariations", "TypographyVariations"]
 }

package/build/style-variations.js

@@ -26,6 +26,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/style-variations.tsx
 var style_variations_exports = {};
 __export(style_variations_exports, {
   StyleVariations: () => StyleVariations
@@ -33,7 +35,7 @@ __export(style_variations_exports, {
 module.exports = __toCommonJS(style_variations_exports);
 var import_style_variations_container = __toESM(require("./style-variations-container"));
 var import_with_global_styles_provider = require("./with-global-styles-provider");
-const StyleVariations = (0, import_with_global_styles_provider.withGlobalStylesProvider)(import_style_variations_container.default);
+var StyleVariations = (0, import_with_global_styles_provider.withGlobalStylesProvider)(import_style_variations_container.default);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   StyleVariations

package/build/style-variations.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../src/style-variations.tsx"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport StyleVariationsContainer from './style-variations-container';\nimport { withGlobalStylesProvider } from './with-global-styles-provider';\n\nexport interface StyleVariationsProps {\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( config: GlobalStylesConfig ) => void;\n\tgap?: number;\n}\n\n/**\n * Render Style Variations.\n *\n * @example\n * ```tsx\n * <StyleVariations\n *   value={userConfig}\n *   baseValue={baseConfig}\n *   onChange={setUserConfig}\n *   gap={3}\n * />\n * ```\n */\nexport const StyleVariations: React.ComponentType< StyleVariationsProps > =\n\twithGlobalStylesProvider( StyleVariationsContainer );\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,wCAAqC;AACrC,yCAAyC;AAsBlC,MAAM,sBACZ,6DAA0B,kCAAAA,OAAyB;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,wCAAqC;AACrC,yCAAyC;AAsBlC,IAAM,sBACZ,6DAA0B,kCAAAA,OAAyB;",
   "names": ["StyleVariationsContainer"]
 }

package/build/subtitle.js

@@ -16,13 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/subtitle.tsx
 var subtitle_exports = {};
 __export(subtitle_exports, {
   Subtitle: () => Subtitle
 });
 module.exports = __toCommonJS(subtitle_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_components = require("@wordpress/components");
+var import_jsx_runtime = require("react/jsx-runtime");
 function Subtitle({ children, level = 2 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { className: "global-styles-ui-subtitle", level, children });
 }

package/build/subtitle.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../src/subtitle.tsx"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalHeading as Heading } from '@wordpress/components';\n\ninterface SubtitleProps {\n\tchildren: React.ReactNode;\n\tlevel?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport function Subtitle( { children, level = 2 }: SubtitleProps ) {\n\treturn (\n\t\t<Heading className=\"global-styles-ui-subtitle\" level={ level }>\n\t\t\t{ children }\n\t\t</Heading>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYE;AATF,wBAAiD;AAO1C,SAAS,SAAU,EAAE,UAAU,QAAQ,EAAE,GAAmB;AAClE,SACC,4CAAC,kBAAAA,uBAAA,EAAQ,WAAU,6BAA4B,OAC5C,UACH;AAEF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAiD;AAS/C;AAFK,SAAS,SAAU,EAAE,UAAU,QAAQ,EAAE,GAAmB;AAClE,SACC,4CAAC,kBAAAA,uBAAA,EAAQ,WAAU,6BAA4B,OAC5C,UACH;AAEF;",
   "names": ["Heading"]
 }

package/build/typography-elements.js

@@ -16,17 +16,19 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/typography-elements.tsx
 var typography_elements_exports = {};
 __export(typography_elements_exports, {
   default: () => typography_elements_default
 });
 module.exports = __toCommonJS(typography_elements_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_i18n = require("@wordpress/i18n");
 var import_components = require("@wordpress/components");
 var import_navigation_button = require("./navigation-button");
 var import_subtitle = require("./subtitle");
 var import_hooks = require("./hooks");
+var import_jsx_runtime = require("react/jsx-runtime");
 function ElementItem({ parentMenu, element, label }) {
   const prefix = element === "text" || !element ? "" : `elements.${element}.`;
   const extraStyles = element === "link" ? {

package/build/typography-elements.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../src/typography-elements.tsx"],
   "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tFlexItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { Subtitle } from './subtitle';\nimport { useStyle } from './hooks';\n\ninterface ElementItemProps {\n\tparentMenu: string;\n\telement: string;\n\tlabel: string;\n}\n\nfunction ElementItem( { parentMenu, element, label }: ElementItemProps ) {\n\tconst prefix =\n\t\telement === 'text' || ! element ? '' : `elements.${ element }.`;\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\tconst [ fontFamily ] = useStyle< string >(\n\t\tprefix + 'typography.fontFamily'\n\t);\n\tconst [ fontStyle ] = useStyle< string >( prefix + 'typography.fontStyle' );\n\tconst [ fontWeight ] = useStyle< string >(\n\t\tprefix + 'typography.fontWeight'\n\t);\n\tconst [ backgroundColor ] = useStyle< string >(\n\t\tprefix + 'color.background'\n\t);\n\tconst [ fallbackBackgroundColor ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( prefix + 'color.gradient' );\n\tconst [ color ] = useStyle< string >( prefix + 'color.text' );\n\n\treturn (\n\t\t<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<FlexItem\n\t\t\t\t\tclassName=\"global-styles-ui-screen-typography__indicator\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tfontFamily: fontFamily ?? 'serif',\n\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\tgradientValue ??\n\t\t\t\t\t\t\tbackgroundColor ??\n\t\t\t\t\t\t\tfallbackBackgroundColor,\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t\tfontStyle,\n\t\t\t\t\t\tfontWeight,\n\t\t\t\t\t\t...extraStyles,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Aa' ) }\n\t\t\t\t</FlexItem>\n\t\t\t\t<FlexItem>{ label }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction TypographyElements() {\n\tconst parentMenu = '';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"text\"\n\t\t\t\t\tlabel={ __( 'Text' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"link\"\n\t\t\t\t\tlabel={ __( 'Links' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"heading\"\n\t\t\t\t\tlabel={ __( 'Headings' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"caption\"\n\t\t\t\t\tlabel={ __( 'Captions' ) }\n\t\t\t\t/>\n\t\t\t\t<ElementItem\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\telement=\"button\"\n\t\t\t\t\tlabel={ __( 'Buttons' ) }\n\t\t\t\t/>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default TypographyElements;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDG;AAhDH,kBAAmB;AACnB,wBAKO;AAKP,+BAAuC;AACvC,sBAAyB;AACzB,mBAAyB;AAQzB,SAAS,YAAa,EAAE,YAAY,SAAS,MAAM,GAAsB;AACxE,QAAM,SACL,YAAY,UAAU,CAAE,UAAU,KAAK,YAAa,OAAQ;AAC7D,QAAM,cACL,YAAY,SACT;AAAA,IACA,gBAAgB;AAAA,EAChB,IACA,CAAC;AAEL,QAAM,CAAE,UAAW,QAAI;AAAA,IACtB,SAAS;AAAA,EACV;AACA,QAAM,CAAE,SAAU,QAAI,uBAAoB,SAAS,sBAAuB;AAC1E,QAAM,CAAE,UAAW,QAAI;AAAA,IACtB,SAAS;AAAA,EACV;AACA,QAAM,CAAE,eAAgB,QAAI;AAAA,IAC3B,SAAS;AAAA,EACV;AACA,QAAM,CAAE,uBAAwB,QAC/B,uBAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,QAAI,uBAAoB,SAAS,gBAAiB;AACxE,QAAM,CAAE,KAAM,QAAI,uBAAoB,SAAS,YAAa;AAE5D,SACC,4CAAC,mDAAuB,MAAO,aAAa,iBAAiB,SAC5D,uDAAC,kBAAAA,sBAAA,EAAO,SAAQ,cACf;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAQ;AAAA,UACP,YAAY,cAAc;AAAA,UAC1B,YACC,iBACA,mBACA;AAAA,UACD;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACJ;AAAA,QAEE,8BAAI,IAAK;AAAA;AAAA,IACZ;AAAA,IACA,4CAAC,8BAAW,iBAAO;AAAA,KACpB,GACD;AAEF;AAEA,SAAS,qBAAqB;AAC7B,QAAM,aAAa;AAEnB,SACC,6CAAC,kBAAAC,sBAAA,EAAO,SAAU,GACjB;AAAA,gDAAC,4BAAS,OAAQ,GAAM,8BAAI,UAAW,GAAG;AAAA,IAC1C,6CAAC,kBAAAC,yBAAA,EAAU,YAAU,MAAC,aAAW,MAChC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,MAAO;AAAA;AAAA,MACpB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,OAAQ;AAAA;AAAA,MACrB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,UAAW;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,UAAW;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,SAAU;AAAA;AAAA,MACvB;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,8BAAQ;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,wBAKO;AAKP,+BAAuC;AACvC,sBAAyB;AACzB,mBAAyB;AAmCtB;AA3BH,SAAS,YAAa,EAAE,YAAY,SAAS,MAAM,GAAsB;AACxE,QAAM,SACL,YAAY,UAAU,CAAE,UAAU,KAAK,YAAa,OAAQ;AAC7D,QAAM,cACL,YAAY,SACT;AAAA,IACA,gBAAgB;AAAA,EAChB,IACA,CAAC;AAEL,QAAM,CAAE,UAAW,QAAI;AAAA,IACtB,SAAS;AAAA,EACV;AACA,QAAM,CAAE,SAAU,QAAI,uBAAoB,SAAS,sBAAuB;AAC1E,QAAM,CAAE,UAAW,QAAI;AAAA,IACtB,SAAS;AAAA,EACV;AACA,QAAM,CAAE,eAAgB,QAAI;AAAA,IAC3B,SAAS;AAAA,EACV;AACA,QAAM,CAAE,uBAAwB,QAC/B,uBAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,QAAI,uBAAoB,SAAS,gBAAiB;AACxE,QAAM,CAAE,KAAM,QAAI,uBAAoB,SAAS,YAAa;AAE5D,SACC,4CAAC,mDAAuB,MAAO,aAAa,iBAAiB,SAC5D,uDAAC,kBAAAA,sBAAA,EAAO,SAAQ,cACf;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,eAAY;AAAA,QACZ,OAAQ;AAAA,UACP,YAAY,cAAc;AAAA,UAC1B,YACC,iBACA,mBACA;AAAA,UACD;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACJ;AAAA,QAEE,8BAAI,IAAK;AAAA;AAAA,IACZ;AAAA,IACA,4CAAC,8BAAW,iBAAO;AAAA,KACpB,GACD;AAEF;AAEA,SAAS,qBAAqB;AAC7B,QAAM,aAAa;AAEnB,SACC,6CAAC,kBAAAC,sBAAA,EAAO,SAAU,GACjB;AAAA,gDAAC,4BAAS,OAAQ,GAAM,8BAAI,UAAW,GAAG;AAAA,IAC1C,6CAAC,kBAAAC,yBAAA,EAAU,YAAU,MAAC,aAAW,MAChC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,MAAO;AAAA;AAAA,MACpB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,OAAQ;AAAA;AAAA,MACrB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,UAAW;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,UAAW;AAAA;AAAA,MACxB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR,WAAQ,gBAAI,SAAU;AAAA;AAAA,MACvB;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,8BAAQ;",
   "names": ["HStack", "VStack", "ItemGroup"]
 }

package/build/typography-example.js

@@ -16,12 +16,13 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/typography-example.tsx
 var typography_example_exports = {};
 __export(typography_example_exports, {
   default: () => PreviewTypography
 });
 module.exports = __toCommonJS(typography_example_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_element = require("@wordpress/element");
 var import_components = require("@wordpress/components");
 var import_i18n = require("@wordpress/i18n");
@@ -29,6 +30,7 @@ var import_context = require("./context");
 var import_preview_styles = require("./font-library-modal/utils/preview-styles");
 var import_utils = require("./utils");
 var import_hooks = require("./hooks");
+var import_jsx_runtime = require("react/jsx-runtime");
 function PreviewTypography({
   fontSize,
   variation

package/build/typography-example.js.map

@@ -2,6 +2,6 @@
   "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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDE;AAhDF,qBAA2B;AAC3B,wBAA2C;AAC3C,kBAAmB;AAKnB,qBAAoC;AACpC,4BAAsC;AACtC,mBAAgC;AAChC,mBAAyB;AAOV,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,EAAE,KAAK,QAAI,2BAAY,kCAAoB;AACjD,MAAI,SAAS;AACb,MAAK,WAAY;AAChB,aAAS,EAAE,GAAG,MAAM,GAAG,UAAU;AAAA,EAClC;AAEA,QAAM,CAAE,SAAU,QAAI,uBAAU,YAAa;AAE7C,QAAM,CAAE,kBAAkB,mBAAoB,QAAI,8BAAiB,MAAO;AAC1E,QAAM,mBAAwC,uBAC3C,6CAAuB,gBAAiB,IACxC,CAAC;AACJ,QAAM,sBAA2C,0BAC9C,6CAAuB,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,kBAAAA,iBAAO;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,oDAAC,UAAK,OAAQ,qBACX,8BAAI,KAAK,oBAAqB,GACjC;AAAA,QACA,4CAAC,UAAK,OAAQ,kBACX,8BAAI,KAAK,oBAAqB,GACjC;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA2B;AAC3B,wBAA2C;AAC3C,kBAAmB;AAKnB,qBAAoC;AACpC,4BAAsC;AACtC,mBAAgC;AAChC,mBAAyB;AAsCvB;AA/Ba,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,EAAE,KAAK,QAAI,2BAAY,kCAAoB;AACjD,MAAI,SAAS;AACb,MAAK,WAAY;AAChB,aAAS,EAAE,GAAG,MAAM,GAAG,UAAU;AAAA,EAClC;AAEA,QAAM,CAAE,SAAU,QAAI,uBAAU,YAAa;AAE7C,QAAM,CAAE,kBAAkB,mBAAoB,QAAI,8BAAiB,MAAO;AAC1E,QAAM,mBAAwC,uBAC3C,6CAAuB,gBAAiB,IACxC,CAAC;AACJ,QAAM,sBAA2C,0BAC9C,6CAAuB,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,kBAAAA,iBAAO;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,oDAAC,UAAK,OAAQ,qBACX,8BAAI,KAAK,oBAAqB,GACjC;AAAA,QACA,4CAAC,UAAK,OAAQ,kBACX,8BAAI,KAAK,oBAAqB,GACjC;AAAA;AAAA;AAAA,EACD;AAEF;",
   "names": ["motion"]
 }

package/build/typography-panel.js

@@ -16,16 +16,18 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/typography-panel.tsx
 var typography_panel_exports = {};
 __export(typography_panel_exports, {
   default: () => TypographyPanel
 });
 module.exports = __toCommonJS(typography_panel_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_block_editor = require("@wordpress/block-editor");
 var import_hooks = require("./hooks");
 var import_lock_unlock = require("./lock-unlock");
-const { useSettingsForBlockElement, TypographyPanel: StylesTypographyPanel } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+var import_jsx_runtime = require("react/jsx-runtime");
+var { useSettingsForBlockElement, TypographyPanel: StylesTypographyPanel } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
 function TypographyPanel({
   element,
   headingLevel

package/build/typography-panel.js.map

@@ -2,6 +2,6 @@
   "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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDE;AA5CF,0BAAsD;AAKtD,mBAAqC;AACrC,yBAAuB;AAEvB,MAAM,EAAE,4BAA4B,iBAAiB,sBAAsB,QAC1E,2BAAQ,oBAAAA,WAAuB;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,QAAI,uBAAU,QAAQ,IAAI,QAAQ,KAAM;AACtD,QAAM,CAAE,gBAAgB,QAAS,QAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,WAAY,QAAI,yBAAY,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;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,0BAAsD;AAKtD,mBAAqC;AACrC,yBAAuB;AAsCrB;AApCF,IAAM,EAAE,4BAA4B,iBAAiB,sBAAsB,QAC1E,2BAAQ,oBAAAA,WAAuB;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,QAAI,uBAAU,QAAQ,IAAI,QAAQ,KAAM;AACtD,QAAM,CAAE,gBAAgB,QAAS,QAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,WAAY,QAAI,yBAAY,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": ["blockEditorPrivateApis"]
 }

package/build/typography-preview.js

@@ -16,13 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/typography-preview.tsx
 var typography_preview_exports = {};
 __export(typography_preview_exports, {
   default: () => TypographyPreview
 });
 module.exports = __toCommonJS(typography_preview_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_hooks = require("./hooks");
+var import_jsx_runtime = require("react/jsx-runtime");
 function TypographyPreview({
   name,
   element,

package/build/typography-preview.js.map

@@ -2,6 +2,6 @@
   "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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2CE;AAxCF,mBAAyB;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,QAAI,uBAAU,SAAS,yBAAyB,IAAK;AACxE,QAAM,CAAE,aAAc,QAAI,uBAAU,SAAS,kBAAkB,IAAK;AACpE,QAAM,CAAE,eAAgB,QAAI,uBAAU,SAAS,oBAAoB,IAAK;AACxE,QAAM,CAAE,uBAAwB,QAAI,uBAAU,kBAAmB;AACjE,QAAM,CAAE,KAAM,QAAI,uBAAU,SAAS,cAAc,IAAK;AACxD,QAAM,CAAE,QAAS,QAAI,uBAAU,SAAS,uBAAuB,IAAK;AACpE,QAAM,CAAE,SAAU,QAAI,uBAAU,SAAS,wBAAwB,IAAK;AACtE,QAAM,CAAE,UAAW,QAAI,uBAAU,SAAS,yBAAyB,IAAK;AACxE,QAAM,CAAE,aAAc,QAAI;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;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAAyB;AAwCvB;AAhCa,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,QAAI,uBAAU,SAAS,yBAAyB,IAAK;AACxE,QAAM,CAAE,aAAc,QAAI,uBAAU,SAAS,kBAAkB,IAAK;AACpE,QAAM,CAAE,eAAgB,QAAI,uBAAU,SAAS,oBAAoB,IAAK;AACxE,QAAM,CAAE,uBAAwB,QAAI,uBAAU,kBAAmB;AACjE,QAAM,CAAE,KAAM,QAAI,uBAAU,SAAS,cAAc,IAAK;AACxD,QAAM,CAAE,QAAS,QAAI,uBAAU,SAAS,uBAAuB,IAAK;AACpE,QAAM,CAAE,SAAU,QAAI,uBAAU,SAAS,wBAAwB,IAAK;AACtE,QAAM,CAAE,UAAW,QAAI,uBAAU,SAAS,yBAAyB,IAAK;AACxE,QAAM,CAAE,aAAc,QAAI;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/typography-variations.js

@@ -26,6 +26,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/typography-variations.tsx
 var typography_variations_exports = {};
 __export(typography_variations_exports, {
   TypographyVariations: () => TypographyVariations
@@ -33,7 +35,7 @@ __export(typography_variations_exports, {
 module.exports = __toCommonJS(typography_variations_exports);
 var import_variations_typography = __toESM(require("./variations/variations-typography"));
 var import_with_global_styles_provider = require("./with-global-styles-provider");
-const TypographyVariations = (0, import_with_global_styles_provider.withGlobalStylesProvider)(import_variations_typography.default);
+var TypographyVariations = (0, import_with_global_styles_provider.withGlobalStylesProvider)(import_variations_typography.default);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   TypographyVariations

package/build/typography-variations.js.map

@@ -2,6 +2,6 @@
   "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,mCAAyC;AACzC,yCAAyC;AAwBlC,MAAM,2BACZ,6DAA0B,6BAAAA,OAA6B;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,mCAAyC;AACzC,yCAAyC;AAwBlC,IAAM,2BACZ,6DAA0B,6BAAAA,OAA6B;",
   "names": ["TypographyVariationsInternal"]
 }

package/build/utils.js

@@ -16,6 +16,8 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/utils.ts
 var utils_exports = {};
 __export(utils_exports, {
   filterObjectByProperties: () => filterObjectByProperties,
@@ -45,7 +47,7 @@ function removePropertiesFromObject(object, properties) {
   }
   return object;
 }
-const filterObjectByProperties = (object, properties) => {
+var filterObjectByProperties = (object, properties) => {
   if (!object || !properties?.length) {
     return {};
   }

package/build/utils.js.map

@@ -2,6 +2,6 @@
   "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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",
+  "mappings": "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",
   "names": []
 }

package/build/variations/variation.js

@@ -26,12 +26,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/variations/variation.tsx
 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");
@@ -40,6 +41,7 @@ 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");
+var import_jsx_runtime = require("react/jsx-runtime");
 function Variation({
   variation,
   children,

package/build/variations/variation.js.map

@@ -2,6 +2,6 @@
   "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;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAAwB;AACxB,qBAA8C;AAC9C,sBAAsB;AACtB,kBAA4B;AAC5B,kCAAqC;AAKrC,qBAAoC;AACpC,mBAAyC;AA2EtC;AAjEY,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

@@ -26,18 +26,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/variations/variations-color.tsx
 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"];
+var import_jsx_runtime = require("react/jsx-runtime");
+var propertiesToFilter = ["color"];
 function ColorVariations({
   title,
   gap = 2

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

@@ -2,6 +2,6 @@
   "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;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AAKP,4BAAgC;AAChC,mBAAkE;AAClE,sBAAyB;AACzB,uBAAsB;AAsBpB;AAfF,IAAM,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

@@ -16,18 +16,20 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/variations/variations-panel.tsx
 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");
+var import_jsx_runtime = require("react/jsx-runtime");
 function getFilteredBlockStyles(blockStyles, variations) {
   return blockStyles?.filter(
     (style) => style.source === "block" || variations.includes(style.name)

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

@@ -2,6 +2,6 @@
   "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;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,oBAAqC;AACrC,kBAA0B;AAC1B,wBAAqD;AAKrD,+BAAuC;AACvC,mBAA2B;AAmDtB;AApCL,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

@@ -26,18 +26,20 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/variations/variations-typography.tsx
 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"];
+var import_jsx_runtime = require("react/jsx-runtime");
+var propertiesToFilter = ["typography"];
 function TypographyVariations({
   title,
   gap = 2

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

@@ -2,6 +2,6 @@
   "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;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AAKP,gCAAoC;AACpC,mBAAkE;AAClE,sBAAyB;AACzB,uBAAsB;AAsBpB;AAfF,IAAM,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

@@ -16,13 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/global-styles-ui/src/with-global-styles-provider.tsx
 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");
+var import_jsx_runtime = require("react/jsx-runtime");
 function withGlobalStylesProvider(Component) {
   return function WrappedComponent({
     value,