@wordpress/edit-site 5.35.0 → 6.0.1

package/build/components/global-styles/gradients-palette-panel.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = GradientPalettePanel;
-var _react = require("react");
 var _compose = require("@wordpress/compose");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _blockEditor = require("@wordpress/block-editor");
 var _subtitle = _interopRequireDefault(require("./subtitle"));
 var _lockUnlock = require("../../lock-unlock");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -44,42 +44,46 @@ function GradientPalettePanel({
   const duotonePalette = [...(customDuotone || []), ...(themeDuotone || []), ...(defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [])];
   const isMobileViewport = (0, _compose.useViewportMatch)('small', '<');
   const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
-  return (0, _react.createElement)(_components.__experimentalVStack, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
     className: "edit-site-global-styles-gradient-palette-panel",
-    spacing: 8
-  }, !!themeGradients && !!themeGradients.length && (0, _react.createElement)(_components.__experimentalPaletteEdit, {
-    canReset: themeGradients !== baseThemeGradients,
-    canOnlyChangeValues: true,
-    gradients: themeGradients,
-    onChange: setThemeGradients,
-    paletteLabel: (0, _i18n.__)('Theme'),
-    paletteLabelHeadingLevel: 3,
-    popoverProps: popoverProps
-  }), !!defaultGradients && !!defaultGradients.length && !!defaultPaletteEnabled && (0, _react.createElement)(_components.__experimentalPaletteEdit, {
-    canReset: defaultGradients !== baseDefaultGradients,
-    canOnlyChangeValues: true,
-    gradients: defaultGradients,
-    onChange: setDefaultGradients,
-    paletteLabel: (0, _i18n.__)('Default'),
-    paletteLabelLevel: 3,
-    popoverProps: popoverProps
-  }), (0, _react.createElement)(_components.__experimentalPaletteEdit, {
-    gradients: customGradients,
-    onChange: setCustomGradients,
-    paletteLabel: (0, _i18n.__)('Custom'),
-    paletteLabelLevel: 3,
-    slugPrefix: "custom-",
-    popoverProps: popoverProps
-  }), !!duotonePalette && !!duotonePalette.length && (0, _react.createElement)("div", null, (0, _react.createElement)(_subtitle.default, {
-    level: 3
-  }, (0, _i18n.__)('Duotone')), (0, _react.createElement)(_components.__experimentalSpacer, {
-    margin: 3
-  }), (0, _react.createElement)(_components.DuotonePicker, {
-    duotonePalette: duotonePalette,
-    disableCustomDuotone: true,
-    disableCustomColors: true,
-    clearable: false,
-    onChange: noop
-  })));
+    spacing: 8,
+    children: [!!themeGradients && !!themeGradients.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalPaletteEdit, {
+      canReset: themeGradients !== baseThemeGradients,
+      canOnlyChangeValues: true,
+      gradients: themeGradients,
+      onChange: setThemeGradients,
+      paletteLabel: (0, _i18n.__)('Theme'),
+      paletteLabelHeadingLevel: 3,
+      popoverProps: popoverProps
+    }), !!defaultGradients && !!defaultGradients.length && !!defaultPaletteEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalPaletteEdit, {
+      canReset: defaultGradients !== baseDefaultGradients,
+      canOnlyChangeValues: true,
+      gradients: defaultGradients,
+      onChange: setDefaultGradients,
+      paletteLabel: (0, _i18n.__)('Default'),
+      paletteLabelLevel: 3,
+      popoverProps: popoverProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalPaletteEdit, {
+      gradients: customGradients,
+      onChange: setCustomGradients,
+      paletteLabel: (0, _i18n.__)('Custom'),
+      paletteLabelLevel: 3,
+      slugPrefix: "custom-",
+      popoverProps: popoverProps
+    }), !!duotonePalette && !!duotonePalette.length && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
+        level: 3,
+        children: (0, _i18n.__)('Duotone')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+        margin: 3
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DuotonePicker, {
+        duotonePalette: duotonePalette,
+        disableCustomDuotone: true,
+        disableCustomColors: true,
+        clearable: false,
+        onChange: noop
+      })]
+    })]
+  });
 }
 //# sourceMappingURL=gradients-palette-panel.js.map

package/build/components/global-styles/gradients-palette-panel.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_components","_i18n","_blockEditor","_subtitle","_interopRequireDefault","_lockUnlock","useGlobalSetting","unlock","blockEditorPrivateApis","mobilePopoverProps","placement","offset","noop","GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","customDuotone","defaultDuotone","themeDuotone","defaultDuotoneEnabled","duotonePalette","isMobileViewport","useViewportMatch","popoverProps","undefined","_react","createElement","__experimentalVStack","className","spacing","length","__experimentalPaletteEdit","canReset","canOnlyChangeValues","gradients","onChange","paletteLabel","__","paletteLabelHeadingLevel","paletteLabelLevel","slugPrefix","default","level","__experimentalSpacer","margin","DuotonePicker","disableCustomDuotone","disableCustomColors","clearable"],"sources":["@wordpress/edit-site/src/components/global-styles/gradients-palette-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalSpacer as Spacer,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nconst mobilePopoverProps = { placement: 'bottom-start', offset: 8 };\n\nconst noop = () => {};\n\nexport default function GradientPalettePanel( { name } ) {\n\tconst [ themeGradients, setThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\n\tconst [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];\n\tconst [ defaultDuotone ] =\n\t\tuseGlobalSetting( 'color.duotone.default' ) || [];\n\tconst [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];\n\tconst [ defaultDuotoneEnabled ] = useGlobalSetting(\n\t\t'color.defaultDuotone'\n\t);\n\n\tconst duotonePalette = [\n\t\t...( customDuotone || [] ),\n\t\t...( themeDuotone || [] ),\n\t\t...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),\n\t];\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tconst popoverProps = isMobileViewport ? mobilePopoverProps : undefined;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-gradient-palette-panel\"\n\t\t\tspacing={ 8 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t/>\n\t\t\t{ !! duotonePalette && !! duotonePalette.length && (\n\t\t\t\t<div>\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomDuotone\n\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_compose","require","_components","_i18n","_blockEditor","_subtitle","_interopRequireDefault","_lockUnlock","_jsxRuntime","useGlobalSetting","unlock","blockEditorPrivateApis","mobilePopoverProps","placement","offset","noop","GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","customDuotone","defaultDuotone","themeDuotone","defaultDuotoneEnabled","duotonePalette","isMobileViewport","useViewportMatch","popoverProps","undefined","jsxs","__experimentalVStack","className","spacing","children","length","jsx","__experimentalPaletteEdit","canReset","canOnlyChangeValues","gradients","onChange","paletteLabel","__","paletteLabelHeadingLevel","paletteLabelLevel","slugPrefix","default","level","__experimentalSpacer","margin","DuotonePicker","disableCustomDuotone","disableCustomColors","clearable"],"sources":["@wordpress/edit-site/src/components/global-styles/gradients-palette-panel.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalSpacer as Spacer,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nconst mobilePopoverProps = { placement: 'bottom-start', offset: 8 };\n\nconst noop = () => {};\n\nexport default function GradientPalettePanel( { name } ) {\n\tconst [ themeGradients, setThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\n\tconst [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];\n\tconst [ defaultDuotone ] =\n\t\tuseGlobalSetting( 'color.duotone.default' ) || [];\n\tconst [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];\n\tconst [ defaultDuotoneEnabled ] = useGlobalSetting(\n\t\t'color.defaultDuotone'\n\t);\n\n\tconst duotonePalette = [\n\t\t...( customDuotone || [] ),\n\t\t...( themeDuotone || [] ),\n\t\t...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),\n\t];\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tconst popoverProps = isMobileViewport ? mobilePopoverProps : undefined;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"edit-site-global-styles-gradient-palette-panel\"\n\t\t\tspacing={ 8 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelLevel={ 3 }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t/>\n\t\t\t{ !! duotonePalette && !! duotonePalette.length && (\n\t\t\t\t<div>\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomDuotone\n\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/global-styles/header.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -17,33 +17,42 @@ function ScreenHeader({
   description,
   onBack
 }) {
-  return (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 0
-  }, (0, _react.createElement)(_components.__experimentalView, null, (0, _react.createElement)(_components.__experimentalSpacer, {
-    marginBottom: 0,
-    paddingX: 4,
-    paddingY: 3
-  }, (0, _react.createElement)(_components.__experimentalHStack, {
-    spacing: 2
-  }, (0, _react.createElement)(_components.__experimentalNavigatorToParentButton, {
-    style:
-    // TODO: This style override is also used in ToolsPanelHeader.
-    // It should be supported out-of-the-box by Button.
-    {
-      minWidth: 24,
-      padding: 0
-    },
-    icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
-    size: "small",
-    label: (0, _i18n.__)('Back'),
-    onClick: onBack
-  }), (0, _react.createElement)(_components.__experimentalSpacer, null, (0, _react.createElement)(_components.__experimentalHeading, {
-    className: "edit-site-global-styles-header",
-    level: 2,
-    size: 13
-  }, title))))), description && (0, _react.createElement)("p", {
-    className: "edit-site-global-styles-header__description"
-  }, description));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    spacing: 0,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalView, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+        marginBottom: 0,
+        paddingX: 4,
+        paddingY: 3,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+          spacing: 2,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorToParentButton, {
+            style:
+            // TODO: This style override is also used in ToolsPanelHeader.
+            // It should be supported out-of-the-box by Button.
+            {
+              minWidth: 24,
+              padding: 0
+            },
+            icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
+            size: "small",
+            label: (0, _i18n.__)('Back'),
+            onClick: onBack
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
+              className: "edit-site-global-styles-header",
+              level: 2,
+              size: 13,
+              children: title
+            })
+          })]
+        })
+      })
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "edit-site-global-styles-header__description",
+      children: description
+    })]
+  });
 }
 var _default = exports.default = ScreenHeader;
 //# sourceMappingURL=header.js.map

package/build/components/global-styles/header.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_i18n","_icons","ScreenHeader","title","description","onBack","_react","createElement","__experimentalVStack","spacing","__experimentalView","__experimentalSpacer","marginBottom","paddingX","paddingY","__experimentalHStack","__experimentalNavigatorToParentButton","style","minWidth","padding","icon","isRTL","chevronRight","chevronLeft","size","label","__","onClick","__experimentalHeading","className","level","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/header.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n\nfunction ScreenHeader( { title, description, onBack } ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"edit-site-global-styles-header__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default ScreenHeader;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAQA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAZA;AACA;AACA;;AAYA,SAASG,YAAYA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAO,CAAC,EAAG;EACvD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAU,oBAAM;IAACC,OAAO,EAAG;EAAG,GACpB,IAAAH,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAY,kBAAI,QACJ,IAAAJ,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,oBAAM;IAACC,YAAY,EAAG,CAAG;IAACC,QAAQ,EAAG,CAAG;IAACC,QAAQ,EAAG;EAAG,GACvD,IAAAR,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAiB,oBAAM;IAACN,OAAO,EAAG;EAAG,GACpB,IAAAH,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAkB,qCAAuB;IACvBC,KAAK;IACJ;IACA;IACA;MAAEC,QAAQ,EAAE,EAAE;MAAEC,OAAO,EAAE;IAAE,CAC3B;IACDC,IAAI,EAAG,IAAAC,WAAK,EAAC,CAAC,GAAGC,mBAAY,GAAGC,kBAAa;IAC7CC,IAAI,EAAC,OAAO;IACZC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;IACtBC,OAAO,EAAGtB;EAAQ,CAClB,CAAC,EACF,IAAAC,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAAa,oBAAM,QACN,IAAAL,MAAA,CAAAC,aAAA,EAACT,WAAA,CAAA8B,qBAAO;IACPC,SAAS,EAAC,gCAAgC;IAC1CC,KAAK,EAAG,CAAG;IACXN,IAAI,EAAG;EAAI,GAETrB,KACM,CACF,CACD,CACD,CACH,CAAC,EACLC,WAAW,IACZ,IAAAE,MAAA,CAAAC,aAAA;IAAGsB,SAAS,EAAC;EAA6C,GACvDzB,WACA,CAEG,CAAC;AAEX;AAAC,IAAA2B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc/B,YAAY","ignoreList":[]}
+{"version":3,"names":["_components","require","_i18n","_icons","_jsxRuntime","ScreenHeader","title","description","onBack","jsxs","__experimentalVStack","spacing","children","jsx","__experimentalView","__experimentalSpacer","marginBottom","paddingX","paddingY","__experimentalHStack","__experimentalNavigatorToParentButton","style","minWidth","padding","icon","isRTL","chevronRight","chevronLeft","size","label","__","onClick","__experimentalHeading","className","level","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/header.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n\nfunction ScreenHeader( { title, description, onBack } ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t<NavigatorToParentButton\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\tclassName=\"edit-site-global-styles-header\"\n\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t</HStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"edit-site-global-styles-header__description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default ScreenHeader;\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAQA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAA6D,IAAAG,WAAA,GAAAH,OAAA;AAZ7D;AACA;AACA;;AAYA,SAASI,YAAYA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAO,CAAC,EAAG;EACvD,oBACC,IAAAJ,WAAA,CAAAK,IAAA,EAACT,WAAA,CAAAU,oBAAM;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,gBACpB,IAAAR,WAAA,CAAAS,GAAA,EAACb,WAAA,CAAAc,kBAAI;MAAAF,QAAA,eACJ,IAAAR,WAAA,CAAAS,GAAA,EAACb,WAAA,CAAAe,oBAAM;QAACC,YAAY,EAAG,CAAG;QAACC,QAAQ,EAAG,CAAG;QAACC,QAAQ,EAAG,CAAG;QAAAN,QAAA,eACvD,IAAAR,WAAA,CAAAK,IAAA,EAACT,WAAA,CAAAmB,oBAAM;UAACR,OAAO,EAAG,CAAG;UAAAC,QAAA,gBACpB,IAAAR,WAAA,CAAAS,GAAA,EAACb,WAAA,CAAAoB,qCAAuB;YACvBC,KAAK;YACJ;YACA;YACA;cAAEC,QAAQ,EAAE,EAAE;cAAEC,OAAO,EAAE;YAAE,CAC3B;YACDC,IAAI,EAAG,IAAAC,WAAK,EAAC,CAAC,GAAGC,mBAAY,GAAGC,kBAAa;YAC7CC,IAAI,EAAC,OAAO;YACZC,KAAK,EAAG,IAAAC,QAAE,EAAE,MAAO,CAAG;YACtBC,OAAO,EAAGvB;UAAQ,CAClB,CAAC,eACF,IAAAJ,WAAA,CAAAS,GAAA,EAACb,WAAA,CAAAe,oBAAM;YAAAH,QAAA,eACN,IAAAR,WAAA,CAAAS,GAAA,EAACb,WAAA,CAAAgC,qBAAO;cACPC,SAAS,EAAC,gCAAgC;cAC1CC,KAAK,EAAG,CAAG;cACXN,IAAI,EAAG,EAAI;cAAAhB,QAAA,EAETN;YAAK,CACC;UAAC,CACH,CAAC;QAAA,CACF;MAAC,CACF;IAAC,CACJ,CAAC,EACLC,WAAW,iBACZ,IAAAH,WAAA,CAAAS,GAAA;MAAGoB,SAAS,EAAC,6CAA6C;MAAArB,QAAA,EACvDL;IAAW,CACX,CACH;EAAA,CACM,CAAC;AAEX;AAAC,IAAA4B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEchC,YAAY","ignoreList":[]}

package/build/components/global-styles/highlighted-colors.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = HighlightedColors;
-var _react = require("react");
 var _components = require("@wordpress/components");
 var _hooks = require("./hooks");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -26,8 +26,7 @@ function HighlightedColors({
   return highlightedColors.map(({
     slug,
     color
-  }, index) => (0, _react.createElement)(_components.__unstableMotion.div, {
-    key: `${slug}-${index}`,
+  }, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
     style: {
       height: scaledSwatchSize,
       width: scaledSwatchSize,
@@ -45,6 +44,6 @@ function HighlightedColors({
     transition: {
       delay: index === 1 ? 0.2 : 0.1
     }
-  }));
+  }, `${slug}-${index}`));
 }
 //# sourceMappingURL=highlighted-colors.js.map

package/build/components/global-styles/highlighted-colors.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_hooks","HighlightedColors","normalizedColorSwatchSize","ratio","highlightedColors","useStylesPreviewColors","scaledSwatchSize","map","slug","color","index","_react","createElement","__unstableMotion","div","key","style","height","width","background","borderRadius","animate","scale","opacity","initial","transition","delay"],"sources":["@wordpress/edit-site/src/components/global-styles/highlighted-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './hooks';\n\nexport default function HighlightedColors( {\n\tnormalizedColorSwatchSize,\n\tratio,\n} ) {\n\tconst { highlightedColors } = useStylesPreviewColors();\n\tconst scaledSwatchSize = normalizedColorSwatchSize * ratio;\n\treturn highlightedColors.map( ( { slug, color }, index ) => (\n\t\t<motion.div\n\t\t\tkey={ `${ slug }-${ index }` }\n\t\t\tstyle={ {\n\t\t\t\theight: scaledSwatchSize,\n\t\t\t\twidth: scaledSwatchSize,\n\t\t\t\tbackground: color,\n\t\t\t\tborderRadius: scaledSwatchSize / 2,\n\t\t\t} }\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: index === 1 ? 0.2 : 0.1,\n\t\t\t} }\n\t\t/>\n\t) );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGe,SAASE,iBAAiBA,CAAE;EAC1CC,yBAAyB;EACzBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAkB,CAAC,GAAG,IAAAC,6BAAsB,EAAC,CAAC;EACtD,MAAMC,gBAAgB,GAAGJ,yBAAyB,GAAGC,KAAK;EAC1D,OAAOC,iBAAiB,CAACG,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,EAAEC,KAAK,KACrD,IAAAC,MAAA,CAAAC,aAAA,EAACd,WAAA,CAAAe,gBAAM,CAACC,GAAG;IACVC,GAAG,EAAI,GAAGP,IAAM,IAAIE,KAAO,EAAG;IAC9BM,KAAK,EAAG;MACPC,MAAM,EAAEX,gBAAgB;MACxBY,KAAK,EAAEZ,gBAAgB;MACvBa,UAAU,EAAEV,KAAK;MACjBW,YAAY,EAAEd,gBAAgB,GAAG;IAClC,CAAG;IACHe,OAAO,EAAG;MACTC,KAAK,EAAE,CAAC;MACRC,OAAO,EAAE;IACV,CAAG;IACHC,OAAO,EAAG;MACTF,KAAK,EAAE,GAAG;MACVC,OAAO,EAAE;IACV,CAAG;IACHE,UAAU,EAAG;MACZC,KAAK,EAAEhB,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG;IAC5B;EAAG,CACH,CACA,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["_components","require","_hooks","_jsxRuntime","HighlightedColors","normalizedColorSwatchSize","ratio","highlightedColors","useStylesPreviewColors","scaledSwatchSize","map","slug","color","index","jsx","__unstableMotion","div","style","height","width","background","borderRadius","animate","scale","opacity","initial","transition","delay"],"sources":["@wordpress/edit-site/src/components/global-styles/highlighted-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './hooks';\n\nexport default function HighlightedColors( {\n\tnormalizedColorSwatchSize,\n\tratio,\n} ) {\n\tconst { highlightedColors } = useStylesPreviewColors();\n\tconst scaledSwatchSize = normalizedColorSwatchSize * ratio;\n\treturn highlightedColors.map( ( { slug, color }, index ) => (\n\t\t<motion.div\n\t\t\tkey={ `${ slug }-${ index }` }\n\t\t\tstyle={ {\n\t\t\t\theight: scaledSwatchSize,\n\t\t\t\twidth: scaledSwatchSize,\n\t\t\t\tbackground: color,\n\t\t\t\tborderRadius: scaledSwatchSize / 2,\n\t\t\t} }\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: index === 1 ? 0.2 : 0.1,\n\t\t\t} }\n\t\t/>\n\t) );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAAiD,IAAAE,WAAA,GAAAF,OAAA;AARjD;AACA;AACA;;AAGA;AACA;AACA;;AAGe,SAASG,iBAAiBA,CAAE;EAC1CC,yBAAyB;EACzBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAkB,CAAC,GAAG,IAAAC,6BAAsB,EAAC,CAAC;EACtD,MAAMC,gBAAgB,GAAGJ,yBAAyB,GAAGC,KAAK;EAC1D,OAAOC,iBAAiB,CAACG,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,EAAEC,KAAK,kBACrD,IAAAV,WAAA,CAAAW,GAAA,EAACd,WAAA,CAAAe,gBAAM,CAACC,GAAG;IAEVC,KAAK,EAAG;MACPC,MAAM,EAAET,gBAAgB;MACxBU,KAAK,EAAEV,gBAAgB;MACvBW,UAAU,EAAER,KAAK;MACjBS,YAAY,EAAEZ,gBAAgB,GAAG;IAClC,CAAG;IACHa,OAAO,EAAG;MACTC,KAAK,EAAE,CAAC;MACRC,OAAO,EAAE;IACV,CAAG;IACHC,OAAO,EAAG;MACTF,KAAK,EAAE,GAAG;MACVC,OAAO,EAAE;IACV,CAAG;IACHE,UAAU,EAAG;MACZC,KAAK,EAAEd,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG;IAC5B;EAAG,GAjBI,GAAGF,IAAM,IAAIE,KAAO,EAkB3B,CACA,CAAC;AACJ","ignoreList":[]}

package/build/components/global-styles/hooks.js

@@ -13,11 +13,8 @@ var _colord = require("colord");
 var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
 var _blocks = require("@wordpress/blocks");
 var _blockEditor = require("@wordpress/block-editor");
-var _editor = require("@wordpress/editor");
-var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _useThemeStyleVariationsByProperty = require("../../hooks/use-theme-style-variations/use-theme-style-variations-by-property");
-var _utils = require("./utils");
 var _lockUnlock = require("../../lock-unlock");
 var _data = require("@wordpress/data");
 /**
@@ -32,13 +29,9 @@ var _data = require("@wordpress/data");
  * Internal dependencies
  */
 
-const {
-  mergeBaseAndUserConfigs
-} = (0, _lockUnlock.unlock)(_editor.privateApis);
 const {
   useGlobalSetting,
-  useGlobalStyle,
-  GlobalStylesContext
+  useGlobalStyle
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 
 // Enable colord's a11y plugin.
@@ -122,23 +115,18 @@ function useTypographyVariations() {
   const typographyVariations = (0, _useThemeStyleVariationsByProperty.useCurrentMergeThemeStyleVariationsWithUserConfig)({
     property: 'typography'
   });
-  const {
-    base
-  } = (0, _element.useContext)(GlobalStylesContext);
   /*
-   * Filter duplicate variations based on whether the variaitons
-   * have different heading and body font families.
+   * Filter out variations with no settings or styles.
    */
-  return typographyVariations?.length ? Object.values(typographyVariations.reduce((acc, variation) => {
-    const [bodyFontFamily, headingFontFamily] = (0, _utils.getFontFamilies)(mergeBaseAndUserConfigs(base, variation));
-
+  return typographyVariations?.length ? typographyVariations.filter(variation => {
+    const {
+      settings,
+      styles,
+      title
+    } = variation;
+    return title === (0, _i18n.__)('Default') ||
     // Always preseve the default variation.
-    if (variation?.title === 'Default') {
-      acc[`${headingFontFamily?.name}:${bodyFontFamily?.name}`] = variation;
-    } else if (headingFontFamily?.name && bodyFontFamily?.name && !acc[`${headingFontFamily?.name}:${bodyFontFamily?.name}`]) {
-      acc[`${headingFontFamily?.name}:${bodyFontFamily?.name}`] = variation;
-    }
-    return acc;
-  }, {})) : [];
+    Object.keys(settings).length > 0 || Object.keys(styles).length > 0;
+  }) : [];
 }
 //# sourceMappingURL=hooks.js.map

package/build/components/global-styles/hooks.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colord","require","_a11y","_interopRequireDefault","_blocks","_blockEditor","_editor","_element","_i18n","_useThemeStyleVariationsByProperty","_utils","_lockUnlock","_data","mergeBaseAndUserConfigs","unlock","editorPrivateApis","useGlobalSetting","useGlobalStyle","GlobalStylesContext","blockEditorPrivateApis","extend","a11yPlugin","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","colord","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","linkColor","buttonBackgroundColor","coreColors","customColors","paletteColors","concat","textColorObject","filter","buttonBackgroundColorObject","highlightedColors","slice","useSupportedStyles","element","supportedPanels","useSelect","select","blocksStore","getSupportedStyles","useColorVariations","colorVariations","useCurrentMergeThemeStyleVariationsWithUserConfig","property","length","variation","settings","styles","title","__","Object","keys","useTypographyVariations","typographyVariations","base","useContext","values","reduce","acc","bodyFontFamily","headingFontFamily","getFontFamilies"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\nimport { useContext } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport { getFontFamilies } from './utils';\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );\nconst { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(\n\tblockEditorPrivateApis\n);\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ linkColor = headingColor ] = useGlobalStyle(\n\t\t'elements.link.color.text'\n\t);\n\n\tconst [ buttonBackgroundColor = linkColor ] = useGlobalStyle(\n\t\t'elements.button.color.background'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\n\tconst textColorObject = paletteColors.filter(\n\t\t( { color } ) => color === textColor\n\t);\n\tconst buttonBackgroundColorObject = paletteColors.filter(\n\t\t( { color } ) => color === buttonBackgroundColor\n\t);\n\n\tconst highlightedColors = textColorObject\n\t\t.concat( buttonBackgroundColorObject )\n\t\t.concat( paletteColors )\n\t\t.filter(\n\t\t\t// we exclude these background color because it is already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n\nexport function useColorVariations() {\n\tconst colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\tproperty: 'color',\n\t} );\n\t/*\n\t * Filter out variations with no settings or styles.\n\t */\n\treturn colorVariations?.length\n\t\t? colorVariations.filter( ( variation ) => {\n\t\t\t\tconst { settings, styles, title } = variation;\n\t\t\t\treturn (\n\t\t\t\t\ttitle === __( 'Default' ) || // Always preseve the default variation.\n\t\t\t\t\tObject.keys( settings ).length > 0 ||\n\t\t\t\t\tObject.keys( styles ).length > 0\n\t\t\t\t);\n\t\t  } )\n\t\t: [];\n}\n\nexport function useTypographyVariations() {\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t} );\n\n\tconst { base } = useContext( GlobalStylesContext );\n\t/*\n\t * Filter duplicate variations based on whether the variaitons\n\t * have different heading and body font families.\n\t */\n\treturn typographyVariations?.length\n\t\t? Object.values(\n\t\t\t\ttypographyVariations.reduce( ( acc, variation ) => {\n\t\t\t\t\tconst [ bodyFontFamily, headingFontFamily ] =\n\t\t\t\t\t\tgetFontFamilies(\n\t\t\t\t\t\t\tmergeBaseAndUserConfigs( base, variation )\n\t\t\t\t\t\t);\n\n\t\t\t\t\t// Always preseve the default variation.\n\t\t\t\t\tif ( variation?.title === 'Default' ) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t} else if (\n\t\t\t\t\t\theadingFontFamily?.name &&\n\t\t\t\t\t\tbodyFontFamily?.name &&\n\t\t\t\t\t\t! acc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t]\n\t\t\t\t\t) {\n\t\t\t\t\t\tacc[\n\t\t\t\t\t\t\t`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`\n\t\t\t\t\t\t] = variation;\n\t\t\t\t\t}\n\t\t\t\t\treturn acc;\n\t\t\t\t}, {} )\n\t\t  )\n\t\t: [];\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_colord","require","_a11y","_interopRequireDefault","_blocks","_blockEditor","_i18n","_useThemeStyleVariationsByProperty","_lockUnlock","_data","useGlobalSetting","useGlobalStyle","unlock","blockEditorPrivateApis","extend","a11yPlugin","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","colord","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","linkColor","buttonBackgroundColor","coreColors","customColors","paletteColors","concat","textColorObject","filter","buttonBackgroundColorObject","highlightedColors","slice","useSupportedStyles","element","supportedPanels","useSelect","select","blocksStore","getSupportedStyles","useColorVariations","colorVariations","useCurrentMergeThemeStyleVariationsWithUserConfig","property","length","variation","settings","styles","title","__","Object","keys","useTypographyVariations","typographyVariations"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ linkColor = headingColor ] = useGlobalStyle(\n\t\t'elements.link.color.text'\n\t);\n\n\tconst [ buttonBackgroundColor = linkColor ] = useGlobalStyle(\n\t\t'elements.button.color.background'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\n\tconst textColorObject = paletteColors.filter(\n\t\t( { color } ) => color === textColor\n\t);\n\tconst buttonBackgroundColorObject = paletteColors.filter(\n\t\t( { color } ) => color === buttonBackgroundColor\n\t);\n\n\tconst highlightedColors = textColorObject\n\t\t.concat( buttonBackgroundColorObject )\n\t\t.concat( paletteColors )\n\t\t.filter(\n\t\t\t// we exclude these background color because it is already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\t};\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n\nexport function useColorVariations() {\n\tconst colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\tproperty: 'color',\n\t} );\n\t/*\n\t * Filter out variations with no settings or styles.\n\t */\n\treturn colorVariations?.length\n\t\t? colorVariations.filter( ( variation ) => {\n\t\t\t\tconst { settings, styles, title } = variation;\n\t\t\t\treturn (\n\t\t\t\t\ttitle === __( 'Default' ) || // Always preseve the default variation.\n\t\t\t\t\tObject.keys( settings ).length > 0 ||\n\t\t\t\t\tObject.keys( styles ).length > 0\n\t\t\t\t);\n\t\t  } )\n\t\t: [];\n}\n\nexport function useTypographyVariations() {\n\tconst typographyVariations =\n\t\tuseCurrentMergeThemeStyleVariationsWithUserConfig( {\n\t\t\tproperty: 'typography',\n\t\t} );\n\t/*\n\t * Filter out variations with no settings or styles.\n\t */\n\treturn typographyVariations?.length\n\t\t? typographyVariations.filter( ( variation ) => {\n\t\t\t\tconst { settings, styles, title } = variation;\n\t\t\t\treturn (\n\t\t\t\t\ttitle === __( 'Default' ) || // Always preseve the default variation.\n\t\t\t\t\tObject.keys( settings ).length > 0 ||\n\t\t\t\t\tObject.keys( styles ).length > 0\n\t\t\t\t);\n\t\t  } )\n\t\t: [];\n}\n"],"mappings":";;;;;;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAKA,IAAAM,kCAAA,GAAAN,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AACA,IAAAQ,KAAA,GAAAR,OAAA;AAlBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAM;EAAES,gBAAgB;EAAEC;AAAe,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;;AAE7E;AACA,IAAAC,cAAM,EAAE,CAAEC,aAAU,CAAG,CAAC;AAEjB,SAASC,kBAAkBA,CAAEC,IAAI,EAAG;EAC1C,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAGT,gBAAgB,CACvD,qBAAqB,EACrBO,IACD,CAAC;EAED,SAASG,eAAeA,CAAA,EAAG;IAC1B;IACA,MAAMC,mBAAmB,GAAGC,IAAI,CAACC,KAAK,CAAED,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAI,CAAC;IAC7D;;IAEA,MAAMC,SAAS,GAAGP,WAAW,CAACQ,GAAG,CAAIC,WAAW,IAAM;MACrD,MAAM;QAAEC;MAAM,CAAC,GAAGD,WAAW;MAC7B,MAAME,QAAQ,GAAG,IAAAC,cAAM,EAAEF,KAAM,CAAC,CAC9BG,MAAM,CAAEV,mBAAoB,CAAC,CAC7BW,KAAK,CAAC,CAAC;MAET,OAAO;QACN,GAAGL,WAAW;QACdC,KAAK,EAAEC;MACR,CAAC;IACF,CAAE,CAAC;IAEHV,cAAc,CAAEM,SAAU,CAAC;EAC5B;EAEA,OAAOQ,MAAM,CAACC,mCAAmC,GAC9C,CAAEd,eAAe,CAAE,GACnB,EAAE;AACN;AAEO,SAASe,sBAAsBA,CAAA,EAAG;EACxC,MAAM,CAAEC,SAAS,GAAG,OAAO,CAAE,GAAGzB,cAAc,CAAE,YAAa,CAAC;EAC9D,MAAM,CAAE0B,eAAe,GAAG,OAAO,CAAE,GAAG1B,cAAc,CAAE,kBAAmB,CAAC;EAC1E,MAAM,CAAE2B,YAAY,GAAGF,SAAS,CAAE,GAAGzB,cAAc,CAClD,wBACD,CAAC;EACD,MAAM,CAAE4B,SAAS,GAAGD,YAAY,CAAE,GAAG3B,cAAc,CAClD,0BACD,CAAC;EAED,MAAM,CAAE6B,qBAAqB,GAAGD,SAAS,CAAE,GAAG5B,cAAc,CAC3D,kCACD,CAAC;EACD,MAAM,CAAE8B,UAAU,CAAE,GAAG/B,gBAAgB,CAAE,oBAAqB,CAAC;EAC/D,MAAM,CAAEQ,WAAW,CAAE,GAAGR,gBAAgB,CAAE,qBAAsB,CAAC;EACjE,MAAM,CAAEgC,YAAY,CAAE,GAAGhC,gBAAgB,CAAE,sBAAuB,CAAC;EAEnE,MAAMiC,aAAa,GAAG,CAAEzB,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,EAAE,EACvC0B,MAAM,CAAEF,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,EAAG,CAAC,CAC5BE,MAAM,CAAEH,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAG,CAAC;EAE5B,MAAMI,eAAe,GAAGF,aAAa,CAACG,MAAM,CAC3C,CAAE;IAAElB;EAAM,CAAC,KAAMA,KAAK,KAAKQ,SAC5B,CAAC;EACD,MAAMW,2BAA2B,GAAGJ,aAAa,CAACG,MAAM,CACvD,CAAE;IAAElB;EAAM,CAAC,KAAMA,KAAK,KAAKY,qBAC5B,CAAC;EAED,MAAMQ,iBAAiB,GAAGH,eAAe,CACvCD,MAAM,CAAEG,2BAA4B,CAAC,CACrCH,MAAM,CAAED,aAAc,CAAC,CACvBG,MAAM;EACN;EACA,CAAE;IAAElB;EAAM,CAAC,KAAMA,KAAK,KAAKS,eAC5B,CAAC,CACAY,KAAK,CAAE,CAAC,EAAE,CAAE,CAAC;EAEf,OAAO;IACNN,aAAa;IACbK;EACD,CAAC;AACF;AAEO,SAASE,kBAAkBA,CAAEjC,IAAI,EAAEkC,OAAO,EAAG;EACnD,MAAM;IAAEC;EAAgB,CAAC,GAAG,IAAAC,eAAS,EAClCC,MAAM,IAAM;IACb,OAAO;MACNF,eAAe,EAAE,IAAAxC,kBAAM,EACtB0C,MAAM,CAAEC,aAAY,CACrB,CAAC,CAACC,kBAAkB,CAAEvC,IAAI,EAAEkC,OAAQ;IACrC,CAAC;EACF,CAAC,EACD,CAAElC,IAAI,EAAEkC,OAAO,CAChB,CAAC;EAED,OAAOC,eAAe;AACvB;AAEO,SAASK,kBAAkBA,CAAA,EAAG;EACpC,MAAMC,eAAe,GAAG,IAAAC,oFAAiD,EAAE;IAC1EC,QAAQ,EAAE;EACX,CAAE,CAAC;EACH;AACD;AACA;EACC,OAAOF,eAAe,EAAEG,MAAM,GAC3BH,eAAe,CAACZ,MAAM,CAAIgB,SAAS,IAAM;IACzC,MAAM;MAAEC,QAAQ;MAAEC,MAAM;MAAEC;IAAM,CAAC,GAAGH,SAAS;IAC7C,OACCG,KAAK,KAAK,IAAAC,QAAE,EAAE,SAAU,CAAC;IAAI;IAC7BC,MAAM,CAACC,IAAI,CAAEL,QAAS,CAAC,CAACF,MAAM,GAAG,CAAC,IAClCM,MAAM,CAACC,IAAI,CAAEJ,MAAO,CAAC,CAACH,MAAM,GAAG,CAAC;EAEjC,CAAE,CAAC,GACH,EAAE;AACN;AAEO,SAASQ,uBAAuBA,CAAA,EAAG;EACzC,MAAMC,oBAAoB,GACzB,IAAAX,oFAAiD,EAAE;IAClDC,QAAQ,EAAE;EACX,CAAE,CAAC;EACJ;AACD;AACA;EACC,OAAOU,oBAAoB,EAAET,MAAM,GAChCS,oBAAoB,CAACxB,MAAM,CAAIgB,SAAS,IAAM;IAC9C,MAAM;MAAEC,QAAQ;MAAEC,MAAM;MAAEC;IAAM,CAAC,GAAGH,SAAS;IAC7C,OACCG,KAAK,KAAK,IAAAC,QAAE,EAAE,SAAU,CAAC;IAAI;IAC7BC,MAAM,CAACC,IAAI,CAAEL,QAAS,CAAC,CAACF,MAAM,GAAG,CAAC,IAClCM,MAAM,CAACC,IAAI,CAAEJ,MAAO,CAAC,CAACH,MAAM,GAAG,CAAC;EAEjC,CAAE,CAAC,GACH,EAAE;AACN","ignoreList":[]}

package/build/components/global-styles/icon-with-current-color.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.IconWithCurrentColor = IconWithCurrentColor;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _components = require("@wordpress/components");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -20,7 +20,7 @@ function IconWithCurrentColor({
   className,
   ...props
 }) {
-  return (0, _react.createElement)(_components.Icon, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
     className: (0, _clsx.default)(className, 'edit-site-global-styles-icon-with-current-color'),
     ...props
   });

package/build/components/global-styles/icon-with-current-color.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_components","IconWithCurrentColor","className","props","_react","createElement","Icon","clsx"],"sources":["@wordpress/edit-site/src/components/global-styles/icon-with-current-color.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\n\nexport function IconWithCurrentColor( { className, ...props } ) {\n\treturn (\n\t\t<Icon\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'edit-site-global-styles-icon-with-current-color'\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGO,SAASE,oBAAoBA,CAAE;EAAEC,SAAS;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC/D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACL,WAAA,CAAAM,IAAI;IACJJ,SAAS,EAAG,IAAAK,aAAI,EACfL,SAAS,EACT,iDACD,CAAG;IAAA,GACEC;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_components","_jsxRuntime","IconWithCurrentColor","className","props","jsx","Icon","clsx"],"sources":["@wordpress/edit-site/src/components/global-styles/icon-with-current-color.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\n\nexport function IconWithCurrentColor( { className, ...props } ) {\n\treturn (\n\t\t<Icon\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'edit-site-global-styles-icon-with-current-color'\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AAA6C,IAAAE,WAAA,GAAAF,OAAA;AAR7C;AACA;AACA;;AAGA;AACA;AACA;;AAGO,SAASG,oBAAoBA,CAAE;EAAEC,SAAS;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC/D,oBACC,IAAAH,WAAA,CAAAI,GAAA,EAACL,WAAA,CAAAM,IAAI;IACJH,SAAS,EAAG,IAAAI,aAAI,EACfJ,SAAS,EACT,iDACD,CAAG;IAAA,GACEC;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}

package/build/components/global-styles/navigation-button.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationBackButtonAsItem = NavigationBackButtonAsItem;
 exports.NavigationButtonAsItem = NavigationButtonAsItem;
-var _react = require("react");
 var _components = require("@wordpress/components");
 var _iconWithCurrentColor = require("./icon-with-current-color");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -21,23 +21,27 @@ function GenericNavigationButton({
   children,
   ...props
 }) {
-  return (0, _react.createElement)(_components.__experimentalItem, {
-    ...props
-  }, icon && (0, _react.createElement)(_components.__experimentalHStack, {
-    justify: "flex-start"
-  }, (0, _react.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {
-    icon: icon,
-    size: 24
-  }), (0, _react.createElement)(_components.FlexItem, null, children)), !icon && children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalItem, {
+    ...props,
+    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      justify: "flex-start",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_iconWithCurrentColor.IconWithCurrentColor, {
+        icon: icon,
+        size: 24
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        children: children
+      })]
+    }), !icon && children]
+  });
 }
 function NavigationButtonAsItem(props) {
-  return (0, _react.createElement)(_components.__experimentalNavigatorButton, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorButton, {
     as: GenericNavigationButton,
     ...props
   });
 }
 function NavigationBackButtonAsItem(props) {
-  return (0, _react.createElement)(_components.__experimentalNavigatorToParentButton, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalNavigatorToParentButton, {
     as: GenericNavigationButton,
     ...props
   });

package/build/components/global-styles/navigation-button.js.map

@@ -1 +1 @@
-{"version":3,"names":["_components","require","_iconWithCurrentColor","GenericNavigationButton","icon","children","props","_react","createElement","__experimentalItem","__experimentalHStack","justify","IconWithCurrentColor","size","FlexItem","NavigationButtonAsItem","__experimentalNavigatorButton","as","NavigationBackButtonAsItem","__experimentalNavigatorToParentButton"],"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalItem as Item,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\n\nfunction GenericNavigationButton( { icon, children, ...props } ) {\n\treturn (\n\t\t<Item { ...props }>\n\t\t\t{ icon && (\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<IconWithCurrentColor icon={ icon } size={ 24 } />\n\t\t\t\t\t<FlexItem>{ children }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ ! icon && children }\n\t\t</Item>\n\t);\n}\n\nfunction NavigationButtonAsItem( props ) {\n\treturn <NavigatorButton as={ GenericNavigationButton } { ...props } />;\n}\n\nfunction NavigationBackButtonAsItem( props ) {\n\treturn (\n\t\t<NavigatorToParentButton as={ GenericNavigationButton } { ...props } />\n\t);\n}\n\nexport { NavigationButtonAsItem, NavigationBackButtonAsItem };\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAWA,IAAAC,qBAAA,GAAAD,OAAA;AAdA;AACA;AACA;;AASA;AACA;AACA;;AAGA,SAASE,uBAAuBA,CAAE;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAG;EAChE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAS,kBAAI;IAAA,GAAMH;EAAK,GACbF,IAAI,IACL,IAAAG,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAU,oBAAM;IAACC,OAAO,EAAC;EAAY,GAC3B,IAAAJ,MAAA,CAAAC,aAAA,EAACN,qBAAA,CAAAU,oBAAoB;IAACR,IAAI,EAAGA,IAAM;IAACS,IAAI,EAAG;EAAI,CAAE,CAAC,EAClD,IAAAN,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAc,QAAQ,QAAGT,QAAoB,CACzB,CACR,EACC,CAAED,IAAI,IAAIC,QACP,CAAC;AAET;AAEA,SAASU,sBAAsBA,CAAET,KAAK,EAAG;EACxC,OAAO,IAAAC,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAgB,6BAAe;IAACC,EAAE,EAAGd,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AACvE;AAEA,SAASY,0BAA0BA,CAAEZ,KAAK,EAAG;EAC5C,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAmB,qCAAuB;IAACF,EAAE,EAAGd,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AAEzE","ignoreList":[]}
+{"version":3,"names":["_components","require","_iconWithCurrentColor","_jsxRuntime","GenericNavigationButton","icon","children","props","jsxs","__experimentalItem","__experimentalHStack","justify","jsx","IconWithCurrentColor","size","FlexItem","NavigationButtonAsItem","__experimentalNavigatorButton","as","NavigationBackButtonAsItem","__experimentalNavigatorToParentButton"],"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalItem as Item,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\n\nfunction GenericNavigationButton( { icon, children, ...props } ) {\n\treturn (\n\t\t<Item { ...props }>\n\t\t\t{ icon && (\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<IconWithCurrentColor icon={ icon } size={ 24 } />\n\t\t\t\t\t<FlexItem>{ children }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ ! icon && children }\n\t\t</Item>\n\t);\n}\n\nfunction NavigationButtonAsItem( props ) {\n\treturn <NavigatorButton as={ GenericNavigationButton } { ...props } />;\n}\n\nfunction NavigationBackButtonAsItem( props ) {\n\treturn (\n\t\t<NavigatorToParentButton as={ GenericNavigationButton } { ...props } />\n\t);\n}\n\nexport { NavigationButtonAsItem, NavigationBackButtonAsItem };\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAWA,IAAAC,qBAAA,GAAAD,OAAA;AAAiE,IAAAE,WAAA,GAAAF,OAAA;AAdjE;AACA;AACA;;AASA;AACA;AACA;;AAGA,SAASG,uBAAuBA,CAAE;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAG;EAChE,oBACC,IAAAJ,WAAA,CAAAK,IAAA,EAACR,WAAA,CAAAS,kBAAI;IAAA,GAAMF,KAAK;IAAAD,QAAA,GACbD,IAAI,iBACL,IAAAF,WAAA,CAAAK,IAAA,EAACR,WAAA,CAAAU,oBAAM;MAACC,OAAO,EAAC,YAAY;MAAAL,QAAA,gBAC3B,IAAAH,WAAA,CAAAS,GAAA,EAACV,qBAAA,CAAAW,oBAAoB;QAACR,IAAI,EAAGA,IAAM;QAACS,IAAI,EAAG;MAAI,CAAE,CAAC,eAClD,IAAAX,WAAA,CAAAS,GAAA,EAACZ,WAAA,CAAAe,QAAQ;QAAAT,QAAA,EAAGA;MAAQ,CAAY,CAAC;IAAA,CAC1B,CACR,EACC,CAAED,IAAI,IAAIC,QAAQ;EAAA,CACf,CAAC;AAET;AAEA,SAASU,sBAAsBA,CAAET,KAAK,EAAG;EACxC,oBAAO,IAAAJ,WAAA,CAAAS,GAAA,EAACZ,WAAA,CAAAiB,6BAAe;IAACC,EAAE,EAAGd,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AACvE;AAEA,SAASY,0BAA0BA,CAAEZ,KAAK,EAAG;EAC5C,oBACC,IAAAJ,WAAA,CAAAS,GAAA,EAACZ,WAAA,CAAAoB,qCAAuB;IAACF,EAAE,EAAGd,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AAEzE","ignoreList":[]}

package/build/components/global-styles/palette.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
@@ -16,6 +15,7 @@ var _navigationButton = require("./navigation-button");
 var _hooks = require("./hooks");
 var _colorIndicatorWrapper = _interopRequireDefault(require("./color-indicator-wrapper"));
 var _lockUnlock = require("../../lock-unlock");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -38,37 +38,44 @@ function Palette({
   const [randomizeThemeColors] = (0, _hooks.useColorRandomizer)();
   const colors = (0, _element.useMemo)(() => [...(customColors || EMPTY_COLORS), ...(themeColors || EMPTY_COLORS), ...(defaultColors && defaultPaletteEnabled ? defaultColors : EMPTY_COLORS)], [customColors, themeColors, defaultColors, defaultPaletteEnabled]);
   const screenPath = !name ? '/colors/palette' : '/blocks/' + encodeURIComponent(name) + '/colors/palette';
-  const paletteButtonText = colors.length > 0 ? (0, _i18n.sprintf)(
-  // Translators: %d: Number of palette colors.
-  (0, _i18n._n)('%d color', '%d colors', colors.length), colors.length) : (0, _i18n.__)('Add custom colors');
-  return (0, _react.createElement)(_components.__experimentalVStack, {
-    spacing: 3
-  }, (0, _react.createElement)(_subtitle.default, {
-    level: 3
-  }, (0, _i18n.__)('Palette')), (0, _react.createElement)(_components.__experimentalItemGroup, {
-    isBordered: true,
-    isSeparated: true
-  }, (0, _react.createElement)(_navigationButton.NavigationButtonAsItem, {
-    path: screenPath,
-    "aria-label": (0, _i18n.__)('Color palettes')
-  }, (0, _react.createElement)(_components.__experimentalHStack, {
-    direction: colors.length === 0 ? 'row-reverse' : 'row'
-  }, (0, _react.createElement)(_components.__experimentalZStack, {
-    isLayered: false,
-    offset: -8
-  }, colors.slice(0, 5).map(({
-    color
-  }, index) => (0, _react.createElement)(_colorIndicatorWrapper.default, {
-    key: `${color}-${index}`
-  }, (0, _react.createElement)(_components.ColorIndicator, {
-    colorValue: color
-  })))), (0, _react.createElement)(_components.FlexItem, {
-    className: "edit-site-global-styles-screen-colors__palette-count"
-  }, paletteButtonText)))), window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && (0, _react.createElement)(_components.Button, {
-    variant: "secondary",
-    icon: _icons.shuffle,
-    onClick: randomizeThemeColors
-  }, (0, _i18n.__)('Randomize colors')));
+  const paletteButtonText = colors.length > 0 ? (0, _i18n.__)('Edit palette') : (0, _i18n.__)('Add colors');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    spacing: 3,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
+      level: 3,
+      children: (0, _i18n.__)('Palette')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
+      isBordered: true,
+      isSeparated: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
+        path: screenPath,
+        "aria-label": paletteButtonText,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+          direction: "row",
+          children: [colors.length <= 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+            children: (0, _i18n.__)('Add colors')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalZStack, {
+            isLayered: false,
+            offset: -8,
+            children: colors.slice(0, 5).map(({
+              color
+            }, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorIndicatorWrapper.default, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorIndicator, {
+                colorValue: color
+              })
+            }, `${color}-${index}`))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+            icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
+          })]
+        })
+      })
+    }), window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+      variant: "secondary",
+      icon: _icons.shuffle,
+      onClick: randomizeThemeColors,
+      children: (0, _i18n.__)('Randomize colors')
+    })]
+  });
 }
 var _default = exports.default = Palette;
 //# sourceMappingURL=palette.js.map