@wordpress/edit-site 5.35.0 → 6.0.1

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -12,6 +11,8 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import Subtitle from './subtitle';
 import { unlock } from '../../lock-unlock';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   useGlobalSetting
 } = unlock(blockEditorPrivateApis);
@@ -36,42 +37,46 @@ export default function GradientPalettePanel({
   const duotonePalette = [...(customDuotone || []), ...(themeDuotone || []), ...(defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [])];
   const isMobileViewport = useViewportMatch('small', '<');
   const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
-  return createElement(VStack, {
+  return /*#__PURE__*/_jsxs(VStack, {
     className: "edit-site-global-styles-gradient-palette-panel",
-    spacing: 8
-  }, !!themeGradients && !!themeGradients.length && createElement(PaletteEdit, {
-    canReset: themeGradients !== baseThemeGradients,
-    canOnlyChangeValues: true,
-    gradients: themeGradients,
-    onChange: setThemeGradients,
-    paletteLabel: __('Theme'),
-    paletteLabelHeadingLevel: 3,
-    popoverProps: popoverProps
-  }), !!defaultGradients && !!defaultGradients.length && !!defaultPaletteEnabled && createElement(PaletteEdit, {
-    canReset: defaultGradients !== baseDefaultGradients,
-    canOnlyChangeValues: true,
-    gradients: defaultGradients,
-    onChange: setDefaultGradients,
-    paletteLabel: __('Default'),
-    paletteLabelLevel: 3,
-    popoverProps: popoverProps
-  }), createElement(PaletteEdit, {
-    gradients: customGradients,
-    onChange: setCustomGradients,
-    paletteLabel: __('Custom'),
-    paletteLabelLevel: 3,
-    slugPrefix: "custom-",
-    popoverProps: popoverProps
-  }), !!duotonePalette && !!duotonePalette.length && createElement("div", null, createElement(Subtitle, {
-    level: 3
-  }, __('Duotone')), createElement(Spacer, {
-    margin: 3
-  }), createElement(DuotonePicker, {
-    duotonePalette: duotonePalette,
-    disableCustomDuotone: true,
-    disableCustomColors: true,
-    clearable: false,
-    onChange: noop
-  })));
+    spacing: 8,
+    children: [!!themeGradients && !!themeGradients.length && /*#__PURE__*/_jsx(PaletteEdit, {
+      canReset: themeGradients !== baseThemeGradients,
+      canOnlyChangeValues: true,
+      gradients: themeGradients,
+      onChange: setThemeGradients,
+      paletteLabel: __('Theme'),
+      paletteLabelHeadingLevel: 3,
+      popoverProps: popoverProps
+    }), !!defaultGradients && !!defaultGradients.length && !!defaultPaletteEnabled && /*#__PURE__*/_jsx(PaletteEdit, {
+      canReset: defaultGradients !== baseDefaultGradients,
+      canOnlyChangeValues: true,
+      gradients: defaultGradients,
+      onChange: setDefaultGradients,
+      paletteLabel: __('Default'),
+      paletteLabelLevel: 3,
+      popoverProps: popoverProps
+    }), /*#__PURE__*/_jsx(PaletteEdit, {
+      gradients: customGradients,
+      onChange: setCustomGradients,
+      paletteLabel: __('Custom'),
+      paletteLabelLevel: 3,
+      slugPrefix: "custom-",
+      popoverProps: popoverProps
+    }), !!duotonePalette && !!duotonePalette.length && /*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx(Subtitle, {
+        level: 3,
+        children: __('Duotone')
+      }), /*#__PURE__*/_jsx(Spacer, {
+        margin: 3
+      }), /*#__PURE__*/_jsx(DuotonePicker, {
+        duotonePalette: duotonePalette,
+        disableCustomDuotone: true,
+        disableCustomColors: true,
+        clearable: false,
+        onChange: noop
+      })]
+    })]
+  });
 }
 //# sourceMappingURL=gradients-palette-panel.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useViewportMatch","__experimentalVStack","VStack","__experimentalPaletteEdit","PaletteEdit","__experimentalSpacer","Spacer","DuotonePicker","__","privateApis","blockEditorPrivateApis","Subtitle","unlock","useGlobalSetting","mobilePopoverProps","placement","offset","noop","GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","customDuotone","defaultDuotone","themeDuotone","defaultDuotoneEnabled","duotonePalette","isMobileViewport","popoverProps","undefined","createElement","className","spacing","length","canReset","canOnlyChangeValues","gradients","onChange","paletteLabel","paletteLabelHeadingLevel","paletteLabelLevel","slugPrefix","level","margin","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":["useViewportMatch","__experimentalVStack","VStack","__experimentalPaletteEdit","PaletteEdit","__experimentalSpacer","Spacer","DuotonePicker","__","privateApis","blockEditorPrivateApis","Subtitle","unlock","jsx","_jsx","jsxs","_jsxs","useGlobalSetting","mobilePopoverProps","placement","offset","noop","GradientPalettePanel","name","themeGradients","setThemeGradients","baseThemeGradients","defaultGradients","setDefaultGradients","baseDefaultGradients","customGradients","setCustomGradients","defaultPaletteEnabled","customDuotone","defaultDuotone","themeDuotone","defaultDuotoneEnabled","duotonePalette","isMobileViewport","popoverProps","undefined","className","spacing","children","length","canReset","canOnlyChangeValues","gradients","onChange","paletteLabel","paletteLabelHeadingLevel","paletteLabelLevel","slugPrefix","level","margin","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-module/components/global-styles/header.js

@@ -1,42 +1,52 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
 import { __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalSpacer as Spacer, __experimentalHeading as Heading, __experimentalView as View, __experimentalNavigatorToParentButton as NavigatorToParentButton } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function ScreenHeader({
   title,
   description,
   onBack
 }) {
-  return createElement(VStack, {
-    spacing: 0
-  }, createElement(View, null, createElement(Spacer, {
-    marginBottom: 0,
-    paddingX: 4,
-    paddingY: 3
-  }, createElement(HStack, {
-    spacing: 2
-  }, createElement(NavigatorToParentButton, {
-    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: isRTL() ? chevronRight : chevronLeft,
-    size: "small",
-    label: __('Back'),
-    onClick: onBack
-  }), createElement(Spacer, null, createElement(Heading, {
-    className: "edit-site-global-styles-header",
-    level: 2,
-    size: 13
-  }, title))))), description && createElement("p", {
-    className: "edit-site-global-styles-header__description"
-  }, description));
+  return /*#__PURE__*/_jsxs(VStack, {
+    spacing: 0,
+    children: [/*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(Spacer, {
+        marginBottom: 0,
+        paddingX: 4,
+        paddingY: 3,
+        children: /*#__PURE__*/_jsxs(HStack, {
+          spacing: 2,
+          children: [/*#__PURE__*/_jsx(NavigatorToParentButton, {
+            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: isRTL() ? chevronRight : chevronLeft,
+            size: "small",
+            label: __('Back'),
+            onClick: onBack
+          }), /*#__PURE__*/_jsx(Spacer, {
+            children: /*#__PURE__*/_jsx(Heading, {
+              className: "edit-site-global-styles-header",
+              level: 2,
+              size: 13,
+              children: title
+            })
+          })]
+        })
+      })
+    }), description && /*#__PURE__*/_jsx("p", {
+      className: "edit-site-global-styles-header__description",
+      children: description
+    })]
+  });
 }
 export default ScreenHeader;
 //# sourceMappingURL=header.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalSpacer","Spacer","__experimentalHeading","Heading","__experimentalView","View","__experimentalNavigatorToParentButton","NavigatorToParentButton","isRTL","__","chevronRight","chevronLeft","ScreenHeader","title","description","onBack","createElement","spacing","marginBottom","paddingX","paddingY","style","minWidth","padding","icon","size","label","onClick","className","level"],"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":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,qBAAqB,IAAIC,OAAO,EAChCC,kBAAkB,IAAIC,IAAI,EAC1BC,qCAAqC,IAAIC,uBAAuB,QAC1D,uBAAuB;AAC9B,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;AAC3C,SAASC,YAAY,EAAEC,WAAW,QAAQ,kBAAkB;AAE5D,SAASC,YAAYA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAO,CAAC,EAAG;EACvD,OACCC,aAAA,CAACjB,MAAM;IAACkB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACX,IAAI,QACJW,aAAA,CAACf,MAAM;IAACiB,YAAY,EAAG,CAAG;IAACC,QAAQ,EAAG,CAAG;IAACC,QAAQ,EAAG;EAAG,GACvDJ,aAAA,CAACnB,MAAM;IAACoB,OAAO,EAAG;EAAG,GACpBD,aAAA,CAACT,uBAAuB;IACvBc,KAAK;IACJ;IACA;IACA;MAAEC,QAAQ,EAAE,EAAE;MAAEC,OAAO,EAAE;IAAE,CAC3B;IACDC,IAAI,EAAGhB,KAAK,CAAC,CAAC,GAAGE,YAAY,GAAGC,WAAa;IAC7Cc,IAAI,EAAC,OAAO;IACZC,KAAK,EAAGjB,EAAE,CAAE,MAAO,CAAG;IACtBkB,OAAO,EAAGZ;EAAQ,CAClB,CAAC,EACFC,aAAA,CAACf,MAAM,QACNe,aAAA,CAACb,OAAO;IACPyB,SAAS,EAAC,gCAAgC;IAC1CC,KAAK,EAAG,CAAG;IACXJ,IAAI,EAAG;EAAI,GAETZ,KACM,CACF,CACD,CACD,CACH,CAAC,EACLC,WAAW,IACZE,aAAA;IAAGY,SAAS,EAAC;EAA6C,GACvDd,WACA,CAEG,CAAC;AAEX;AAEA,eAAeF,YAAY","ignoreList":[]}
+{"version":3,"names":["__experimentalHStack","HStack","__experimentalVStack","VStack","__experimentalSpacer","Spacer","__experimentalHeading","Heading","__experimentalView","View","__experimentalNavigatorToParentButton","NavigatorToParentButton","isRTL","__","chevronRight","chevronLeft","jsx","_jsx","jsxs","_jsxs","ScreenHeader","title","description","onBack","spacing","children","marginBottom","paddingX","paddingY","style","minWidth","padding","icon","size","label","onClick","className","level"],"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":"AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,oBAAoB,IAAIC,MAAM,EAC9BC,qBAAqB,IAAIC,OAAO,EAChCC,kBAAkB,IAAIC,IAAI,EAC1BC,qCAAqC,IAAIC,uBAAuB,QAC1D,uBAAuB;AAC9B,SAASC,KAAK,EAAEC,EAAE,QAAQ,iBAAiB;AAC3C,SAASC,YAAY,EAAEC,WAAW,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE7D,SAASC,YAAYA,CAAE;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAO,CAAC,EAAG;EACvD,oBACCJ,KAAA,CAAChB,MAAM;IAACqB,OAAO,EAAG,CAAG;IAAAC,QAAA,gBACpBR,IAAA,CAACR,IAAI;MAAAgB,QAAA,eACJR,IAAA,CAACZ,MAAM;QAACqB,YAAY,EAAG,CAAG;QAACC,QAAQ,EAAG,CAAG;QAACC,QAAQ,EAAG,CAAG;QAAAH,QAAA,eACvDN,KAAA,CAAClB,MAAM;UAACuB,OAAO,EAAG,CAAG;UAAAC,QAAA,gBACpBR,IAAA,CAACN,uBAAuB;YACvBkB,KAAK;YACJ;YACA;YACA;cAAEC,QAAQ,EAAE,EAAE;cAAEC,OAAO,EAAE;YAAE,CAC3B;YACDC,IAAI,EAAGpB,KAAK,CAAC,CAAC,GAAGE,YAAY,GAAGC,WAAa;YAC7CkB,IAAI,EAAC,OAAO;YACZC,KAAK,EAAGrB,EAAE,CAAE,MAAO,CAAG;YACtBsB,OAAO,EAAGZ;UAAQ,CAClB,CAAC,eACFN,IAAA,CAACZ,MAAM;YAAAoB,QAAA,eACNR,IAAA,CAACV,OAAO;cACP6B,SAAS,EAAC,gCAAgC;cAC1CC,KAAK,EAAG,CAAG;cACXJ,IAAI,EAAG,EAAI;cAAAR,QAAA,EAETJ;YAAK,CACC;UAAC,CACH,CAAC;QAAA,CACF;MAAC,CACF;IAAC,CACJ,CAAC,EACLC,WAAW,iBACZL,IAAA;MAAGmB,SAAS,EAAC,6CAA6C;MAAAX,QAAA,EACvDH;IAAW,CACX,CACH;EAAA,CACM,CAAC;AAEX;AAEA,eAAeF,YAAY","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -8,6 +7,7 @@ import { __unstableMotion as motion } from '@wordpress/components';
  * Internal dependencies
  */
 import { useStylesPreviewColors } from './hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function HighlightedColors({
   normalizedColorSwatchSize,
   ratio
@@ -19,8 +19,7 @@ export default function HighlightedColors({
   return highlightedColors.map(({
     slug,
     color
-  }, index) => createElement(motion.div, {
-    key: `${slug}-${index}`,
+  }, index) => /*#__PURE__*/_jsx(motion.div, {
     style: {
       height: scaledSwatchSize,
       width: scaledSwatchSize,
@@ -38,6 +37,6 @@ export default function HighlightedColors({
     transition: {
       delay: index === 1 ? 0.2 : 0.1
     }
-  }));
+  }, `${slug}-${index}`));
 }
 //# sourceMappingURL=highlighted-colors.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__unstableMotion","motion","useStylesPreviewColors","HighlightedColors","normalizedColorSwatchSize","ratio","highlightedColors","scaledSwatchSize","map","slug","color","index","createElement","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":";AAAA;AACA;AACA;AACA,SAASA,gBAAgB,IAAIC,MAAM,QAAQ,uBAAuB;;AAElE;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,SAAS;AAEhD,eAAe,SAASC,iBAAiBA,CAAE;EAC1CC,yBAAyB;EACzBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAkB,CAAC,GAAGJ,sBAAsB,CAAC,CAAC;EACtD,MAAMK,gBAAgB,GAAGH,yBAAyB,GAAGC,KAAK;EAC1D,OAAOC,iBAAiB,CAACE,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,EAAEC,KAAK,KACrDC,aAAA,CAACX,MAAM,CAACY,GAAG;IACVC,GAAG,EAAI,GAAGL,IAAM,IAAIE,KAAO,EAAG;IAC9BI,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,CACH,CACA,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["__unstableMotion","motion","useStylesPreviewColors","jsx","_jsx","HighlightedColors","normalizedColorSwatchSize","ratio","highlightedColors","scaledSwatchSize","map","slug","color","index","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":"AAAA;AACA;AACA;AACA,SAASA,gBAAgB,IAAIC,MAAM,QAAQ,uBAAuB;;AAElE;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjD,eAAe,SAASC,iBAAiBA,CAAE;EAC1CC,yBAAyB;EACzBC;AACD,CAAC,EAAG;EACH,MAAM;IAAEC;EAAkB,CAAC,GAAGN,sBAAsB,CAAC,CAAC;EACtD,MAAMO,gBAAgB,GAAGH,yBAAyB,GAAGC,KAAK;EAC1D,OAAOC,iBAAiB,CAACE,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,EAAEC,KAAK,kBACrDT,IAAA,CAACH,MAAM,CAACa,GAAG;IAEVC,KAAK,EAAG;MACPC,MAAM,EAAEP,gBAAgB;MACxBQ,KAAK,EAAER,gBAAgB;MACvBS,UAAU,EAAEN,KAAK;MACjBO,YAAY,EAAEV,gBAAgB,GAAG;IAClC,CAAG;IACHW,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,EAAEZ,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG;IAC5B;EAAG,GAjBI,GAAGF,IAAM,IAAIE,KAAO,EAkB3B,CACA,CAAC;AACJ","ignoreList":[]}

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

@@ -9,24 +9,17 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
-const {
-  mergeBaseAndUserConfigs
-} = unlock(editorPrivateApis);
 const {
   useGlobalSetting,
-  useGlobalStyle,
-  GlobalStylesContext
+  useGlobalStyle
 } = unlock(blockEditorPrivateApis);
 
 // Enable colord's a11y plugin.
@@ -110,23 +103,18 @@ export function useTypographyVariations() {
   const typographyVariations = useCurrentMergeThemeStyleVariationsWithUserConfig({
     property: 'typography'
   });
-  const {
-    base
-  } = 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] = getFontFamilies(mergeBaseAndUserConfigs(base, variation));
-
+  return typographyVariations?.length ? typographyVariations.filter(variation => {
+    const {
+      settings,
+      styles,
+      title
+    } = variation;
+    return title === __('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-module/components/global-styles/hooks.js.map

@@ -1 +1 @@
-{"version":3,"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","editorPrivateApis","useContext","__","useCurrentMergeThemeStyleVariationsWithUserConfig","getFontFamilies","unlock","useSelect","mergeBaseAndUserConfigs","useGlobalSetting","useGlobalStyle","GlobalStylesContext","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","linkColor","buttonBackgroundColor","coreColors","customColors","paletteColors","concat","textColorObject","filter","buttonBackgroundColorObject","highlightedColors","slice","useSupportedStyles","element","supportedPanels","select","getSupportedStyles","useColorVariations","colorVariations","property","length","variation","settings","styles","title","Object","keys","useTypographyVariations","typographyVariations","base","values","reduce","acc","bodyFontFamily","headingFontFamily"],"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","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","__","useCurrentMergeThemeStyleVariationsWithUserConfig","unlock","useSelect","useGlobalSetting","useGlobalStyle","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","linkColor","buttonBackgroundColor","coreColors","customColors","paletteColors","concat","textColorObject","filter","buttonBackgroundColorObject","highlightedColors","slice","useSupportedStyles","element","supportedPanels","select","getSupportedStyles","useColorVariations","colorVariations","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":"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","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -8,11 +7,12 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { Icon } from '@wordpress/components';
+import { jsx as _jsx } from "react/jsx-runtime";
 export function IconWithCurrentColor({
   className,
   ...props
 }) {
-  return createElement(Icon, {
+  return /*#__PURE__*/_jsx(Icon, {
     className: clsx(className, 'edit-site-global-styles-icon-with-current-color'),
     ...props
   });

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","Icon","IconWithCurrentColor","className","props","createElement"],"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":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,IAAI,QAAQ,uBAAuB;AAE5C,OAAO,SAASC,oBAAoBA,CAAE;EAAEC,SAAS;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC/D,OACCC,aAAA,CAACJ,IAAI;IACJE,SAAS,EAAGH,IAAI,CACfG,SAAS,EACT,iDACD,CAAG;IAAA,GACEC;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}
+{"version":3,"names":["clsx","Icon","jsx","_jsx","IconWithCurrentColor","className","props"],"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":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,IAAI,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,OAAO,SAASC,oBAAoBA,CAAE;EAAEC,SAAS;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC/D,oBACCH,IAAA,CAACF,IAAI;IACJI,SAAS,EAAGL,IAAI,CACfK,SAAS,EACT,iDACD,CAAG;IAAA,GACEC;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -8,28 +7,34 @@ import { __experimentalNavigatorButton as NavigatorButton, __experimentalNavigat
  * Internal dependencies
  */
 import { IconWithCurrentColor } from './icon-with-current-color';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function GenericNavigationButton({
   icon,
   children,
   ...props
 }) {
-  return createElement(Item, {
-    ...props
-  }, icon && createElement(HStack, {
-    justify: "flex-start"
-  }, createElement(IconWithCurrentColor, {
-    icon: icon,
-    size: 24
-  }), createElement(FlexItem, null, children)), !icon && children);
+  return /*#__PURE__*/_jsxs(Item, {
+    ...props,
+    children: [icon && /*#__PURE__*/_jsxs(HStack, {
+      justify: "flex-start",
+      children: [/*#__PURE__*/_jsx(IconWithCurrentColor, {
+        icon: icon,
+        size: 24
+      }), /*#__PURE__*/_jsx(FlexItem, {
+        children: children
+      })]
+    }), !icon && children]
+  });
 }
 function NavigationButtonAsItem(props) {
-  return createElement(NavigatorButton, {
+  return /*#__PURE__*/_jsx(NavigatorButton, {
     as: GenericNavigationButton,
     ...props
   });
 }
 function NavigationBackButtonAsItem(props) {
-  return createElement(NavigatorToParentButton, {
+  return /*#__PURE__*/_jsx(NavigatorToParentButton, {
     as: GenericNavigationButton,
     ...props
   });

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorToParentButton","NavigatorToParentButton","__experimentalItem","Item","FlexItem","__experimentalHStack","HStack","IconWithCurrentColor","GenericNavigationButton","icon","children","props","createElement","justify","size","NavigationButtonAsItem","as","NavigationBackButtonAsItem"],"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":";AAAA;AACA;AACA;AACA,SACCA,6BAA6B,IAAIC,eAAe,EAChDC,qCAAqC,IAAIC,uBAAuB,EAChEC,kBAAkB,IAAIC,IAAI,EAC1BC,QAAQ,EACRC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE,SAASC,uBAAuBA,CAAE;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAG;EAChE,OACCC,aAAA,CAACT,IAAI;IAAA,GAAMQ;EAAK,GACbF,IAAI,IACLG,aAAA,CAACN,MAAM;IAACO,OAAO,EAAC;EAAY,GAC3BD,aAAA,CAACL,oBAAoB;IAACE,IAAI,EAAGA,IAAM;IAACK,IAAI,EAAG;EAAI,CAAE,CAAC,EAClDF,aAAA,CAACR,QAAQ,QAAGM,QAAoB,CACzB,CACR,EACC,CAAED,IAAI,IAAIC,QACP,CAAC;AAET;AAEA,SAASK,sBAAsBA,CAAEJ,KAAK,EAAG;EACxC,OAAOC,aAAA,CAACb,eAAe;IAACiB,EAAE,EAAGR,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AACvE;AAEA,SAASM,0BAA0BA,CAAEN,KAAK,EAAG;EAC5C,OACCC,aAAA,CAACX,uBAAuB;IAACe,EAAE,EAAGR,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AAEzE;AAEA,SAASI,sBAAsB,EAAEE,0BAA0B","ignoreList":[]}
+{"version":3,"names":["__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorToParentButton","NavigatorToParentButton","__experimentalItem","Item","FlexItem","__experimentalHStack","HStack","IconWithCurrentColor","jsx","_jsx","jsxs","_jsxs","GenericNavigationButton","icon","children","props","justify","size","NavigationButtonAsItem","as","NavigationBackButtonAsItem"],"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":"AAAA;AACA;AACA;AACA,SACCA,6BAA6B,IAAIC,eAAe,EAChDC,qCAAqC,IAAIC,uBAAuB,EAChEC,kBAAkB,IAAIC,IAAI,EAC1BC,QAAQ,EACRC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,oBAAoB,QAAQ,2BAA2B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEjE,SAASC,uBAAuBA,CAAE;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAG;EAChE,oBACCJ,KAAA,CAACR,IAAI;IAAA,GAAMY,KAAK;IAAAD,QAAA,GACbD,IAAI,iBACLF,KAAA,CAACL,MAAM;MAACU,OAAO,EAAC,YAAY;MAAAF,QAAA,gBAC3BL,IAAA,CAACF,oBAAoB;QAACM,IAAI,EAAGA,IAAM;QAACI,IAAI,EAAG;MAAI,CAAE,CAAC,eAClDR,IAAA,CAACL,QAAQ;QAAAU,QAAA,EAAGA;MAAQ,CAAY,CAAC;IAAA,CAC1B,CACR,EACC,CAAED,IAAI,IAAIC,QAAQ;EAAA,CACf,CAAC;AAET;AAEA,SAASI,sBAAsBA,CAAEH,KAAK,EAAG;EACxC,oBAAON,IAAA,CAACV,eAAe;IAACoB,EAAE,EAAGP,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AACvE;AAEA,SAASK,0BAA0BA,CAAEL,KAAK,EAAG;EAC5C,oBACCN,IAAA,CAACR,uBAAuB;IAACkB,EAAE,EAAGP,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AAEzE;AAEA,SAASG,sBAAsB,EAAEE,0BAA0B","ignoreList":[]}

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

@@ -1,10 +1,9 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup, FlexItem, __experimentalHStack as HStack, __experimentalZStack as ZStack, __experimentalVStack as VStack, ColorIndicator, Button } from '@wordpress/components';
-import { __, _n, sprintf } from '@wordpress/i18n';
-import { shuffle } from '@wordpress/icons';
+import { isRTL, __ } from '@wordpress/i18n';
+import { Icon, shuffle, chevronLeft, chevronRight } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -16,6 +15,8 @@ import { NavigationButtonAsItem } from './navigation-button';
 import { useColorRandomizer } from './hooks';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
 import { unlock } from '../../lock-unlock';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   useGlobalSetting
 } = unlock(blockEditorPrivateApis);
@@ -30,37 +31,44 @@ function Palette({
   const [randomizeThemeColors] = useColorRandomizer();
   const colors = 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 ? sprintf(
-  // Translators: %d: Number of palette colors.
-  _n('%d color', '%d colors', colors.length), colors.length) : __('Add custom colors');
-  return createElement(VStack, {
-    spacing: 3
-  }, createElement(Subtitle, {
-    level: 3
-  }, __('Palette')), createElement(ItemGroup, {
-    isBordered: true,
-    isSeparated: true
-  }, createElement(NavigationButtonAsItem, {
-    path: screenPath,
-    "aria-label": __('Color palettes')
-  }, createElement(HStack, {
-    direction: colors.length === 0 ? 'row-reverse' : 'row'
-  }, createElement(ZStack, {
-    isLayered: false,
-    offset: -8
-  }, colors.slice(0, 5).map(({
-    color
-  }, index) => createElement(ColorIndicatorWrapper, {
-    key: `${color}-${index}`
-  }, createElement(ColorIndicator, {
-    colorValue: color
-  })))), createElement(FlexItem, {
-    className: "edit-site-global-styles-screen-colors__palette-count"
-  }, paletteButtonText)))), window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && createElement(Button, {
-    variant: "secondary",
-    icon: shuffle,
-    onClick: randomizeThemeColors
-  }, __('Randomize colors')));
+  const paletteButtonText = colors.length > 0 ? __('Edit palette') : __('Add colors');
+  return /*#__PURE__*/_jsxs(VStack, {
+    spacing: 3,
+    children: [/*#__PURE__*/_jsx(Subtitle, {
+      level: 3,
+      children: __('Palette')
+    }), /*#__PURE__*/_jsx(ItemGroup, {
+      isBordered: true,
+      isSeparated: true,
+      children: /*#__PURE__*/_jsx(NavigationButtonAsItem, {
+        path: screenPath,
+        "aria-label": paletteButtonText,
+        children: /*#__PURE__*/_jsxs(HStack, {
+          direction: "row",
+          children: [colors.length <= 0 && /*#__PURE__*/_jsx(FlexItem, {
+            children: __('Add colors')
+          }), /*#__PURE__*/_jsx(ZStack, {
+            isLayered: false,
+            offset: -8,
+            children: colors.slice(0, 5).map(({
+              color
+            }, index) => /*#__PURE__*/_jsx(ColorIndicatorWrapper, {
+              children: /*#__PURE__*/_jsx(ColorIndicator, {
+                colorValue: color
+              })
+            }, `${color}-${index}`))
+          }), /*#__PURE__*/_jsx(Icon, {
+            icon: isRTL() ? chevronLeft : chevronRight
+          })]
+        })
+      })
+    }), window.__experimentalEnableColorRandomizer && themeColors?.length > 0 && /*#__PURE__*/_jsx(Button, {
+      variant: "secondary",
+      icon: shuffle,
+      onClick: randomizeThemeColors,
+      children: __('Randomize colors')
+    })]
+  });
 }
 export default Palette;
 //# sourceMappingURL=palette.js.map