@wordpress/global-styles-ui 1.1.0

package/build-module/font-sizes/rename-font-size-dialog.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  __experimentalInputControl as InputControl,
+  __experimentalVStack as VStack,
+  __experimentalHStack as HStack,
+  Button,
+  Modal
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { useState } from "@wordpress/element";
+function RenameFontSizeDialog({
+  fontSize,
+  toggleOpen,
+  handleRename
+}) {
+  const [newName, setNewName] = useState(
+    fontSize.name
+  );
+  const handleConfirm = () => {
+    if (newName && newName.trim()) {
+      handleRename(newName);
+    }
+    toggleOpen();
+  };
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      onRequestClose: toggleOpen,
+      focusOnMount: "firstContentElement",
+      title: __("Rename"),
+      size: "small",
+      children: /* @__PURE__ */ jsx(
+        "form",
+        {
+          onSubmit: (event) => {
+            event.preventDefault();
+            handleConfirm();
+            toggleOpen();
+          },
+          children: /* @__PURE__ */ jsxs(VStack, { spacing: "3", children: [
+            /* @__PURE__ */ jsx(
+              InputControl,
+              {
+                __next40pxDefaultSize: true,
+                autoComplete: "off",
+                value: newName,
+                onChange: setNewName,
+                label: __("Name"),
+                placeholder: __("Font size preset name")
+              }
+            ),
+            /* @__PURE__ */ jsxs(HStack, { justify: "right", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  __next40pxDefaultSize: true,
+                  variant: "tertiary",
+                  onClick: toggleOpen,
+                  children: __("Cancel")
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  __next40pxDefaultSize: true,
+                  variant: "primary",
+                  type: "submit",
+                  children: __("Save")
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+var rename_font_size_dialog_default = RenameFontSizeDialog;
+export {
+  rename_font_size_dialog_default as default
+};
+//# sourceMappingURL=rename-font-size-dialog.js.map

package/build-module/font-sizes/rename-font-size-dialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/font-sizes/rename-font-size-dialog.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalInputControl as InputControl,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tButton,\n\tModal,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport type { FontSize } from '@wordpress/global-styles-engine';\n\ninterface RenameFontSizeDialogProps {\n\tfontSize: FontSize;\n\ttoggleOpen: () => void;\n\thandleRename: ( newName: string ) => void;\n}\n\nfunction RenameFontSizeDialog( {\n\tfontSize,\n\ttoggleOpen,\n\thandleRename,\n}: RenameFontSizeDialogProps ) {\n\tconst [ newName, setNewName ] = useState< string | undefined >(\n\t\tfontSize.name\n\t);\n\n\tconst handleConfirm = () => {\n\t\t// If the new name is not empty, call the handleRename function\n\t\tif ( newName && newName.trim() ) {\n\t\t\thandleRename( newName );\n\t\t}\n\t\ttoggleOpen();\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\tonRequestClose={ toggleOpen }\n\t\t\tfocusOnMount=\"firstContentElement\"\n\t\t\ttitle={ __( 'Rename' ) }\n\t\t\tsize=\"small\"\n\t\t>\n\t\t\t<form\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleConfirm();\n\t\t\t\t\ttoggleOpen();\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<VStack spacing=\"3\">\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\tvalue={ newName }\n\t\t\t\t\t\tonChange={ setNewName }\n\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\tplaceholder={ __( 'Font size preset name' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<HStack justify=\"right\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ toggleOpen }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</HStack>\n\t\t\t\t</VStack>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n\nexport default RenameFontSizeDialog;\n"],
+  "mappings": "AAoDK,cAQA,YARA;AAjDL;AAAA,EACC,8BAA8B;AAAA,EAC9B,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB,SAAS,gBAAgB;AASzB,SAAS,qBAAsB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACD,GAA+B;AAC9B,QAAM,CAAE,SAAS,UAAW,IAAI;AAAA,IAC/B,SAAS;AAAA,EACV;AAEA,QAAM,gBAAgB,MAAM;AAE3B,QAAK,WAAW,QAAQ,KAAK,GAAI;AAChC,mBAAc,OAAQ;AAAA,IACvB;AACA,eAAW;AAAA,EACZ;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,gBAAiB;AAAA,MACjB,cAAa;AAAA,MACb,OAAQ,GAAI,QAAS;AAAA,MACrB,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACA,UAAW,CAAE,UAAW;AACvB,kBAAM,eAAe;AACrB,0BAAc;AACd,uBAAW;AAAA,UACZ;AAAA,UAEA,+BAAC,UAAO,SAAQ,KACf;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,uBAAqB;AAAA,gBACrB,cAAa;AAAA,gBACb,OAAQ;AAAA,gBACR,UAAW;AAAA,gBACX,OAAQ,GAAI,MAAO;AAAA,gBACnB,aAAc,GAAI,uBAAwB;AAAA;AAAA,YAC3C;AAAA,YACA,qBAAC,UAAO,SAAQ,SACf;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,SAAQ;AAAA,kBACR,SAAU;AAAA,kBAER,aAAI,QAAS;AAAA;AAAA,cAChB;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,SAAQ;AAAA,kBACR,MAAK;AAAA,kBAEH,aAAI,MAAO;AAAA;AAAA,cACd;AAAA,eACD;AAAA,aACD;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEA,IAAO,kCAAQ;",
+  "names": []
+}

package/build-module/global-styles-ui.js

@@ -0,0 +1,182 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Navigator, useNavigator } from "@wordpress/components";
+import { getBlockTypes, store as blocksStore } from "@wordpress/blocks";
+import { useSelect } from "@wordpress/data";
+import { BlockEditorProvider } from "@wordpress/block-editor";
+import { useMemo, useEffect } from "@wordpress/element";
+import { usePrevious } from "@wordpress/compose";
+import {
+  generateGlobalStyles,
+  mergeGlobalStyles
+} from "@wordpress/global-styles-engine";
+import { GlobalStylesProvider } from "./provider";
+import ScreenRoot from "./screen-root";
+import ScreenBlockList from "./screen-block-list";
+import ScreenBlock from "./screen-block";
+import ScreenTypography from "./screen-typography";
+import ScreenTypographyElement from "./screen-typography-element";
+import ScreenColors from "./screen-colors";
+import ScreenColorPalette from "./screen-color-palette";
+import ScreenBackground from "./screen-background";
+import { ScreenShadows, ScreenShadowsEdit } from "./screen-shadows";
+import ScreenLayout from "./screen-layout";
+import ScreenStyleVariations from "./screen-style-variations";
+import ScreenCSS from "./screen-css";
+import ScreenRevisions from "./screen-revisions";
+import FontSizes from "./font-sizes/font-sizes";
+import FontSize from "./font-sizes/font-size";
+function BlockStylesNavigationScreens({
+  parentMenu,
+  blockStyles,
+  blockName
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: blockStyles.map((style, index) => /* @__PURE__ */ jsx(
+    Navigator.Screen,
+    {
+      path: parentMenu + "/variations/" + style.name,
+      children: /* @__PURE__ */ jsx(ScreenBlock, { name: blockName, variation: style.name })
+    },
+    index
+  )) });
+}
+function ContextScreens({ name, parentMenu = "" }) {
+  const blockStyleVariations = useSelect(
+    (select) => {
+      if (!name) {
+        return [];
+      }
+      const { getBlockStyles } = select(blocksStore);
+      return getBlockStyles(name);
+    },
+    [name]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Navigator.Screen, { path: parentMenu + "/colors/palette", children: /* @__PURE__ */ jsx(ScreenColorPalette, { name }) }),
+    !!blockStyleVariations?.length && /* @__PURE__ */ jsx(
+      BlockStylesNavigationScreens,
+      {
+        parentMenu,
+        blockStyles: blockStyleVariations,
+        blockName: name || ""
+      }
+    )
+  ] });
+}
+function GlobalStylesUI({
+  value,
+  baseValue,
+  onChange,
+  path,
+  onPathChange,
+  fontLibraryEnabled = false,
+  serverCSS,
+  serverSettings
+}) {
+  const blocks = getBlockTypes();
+  const mergedValue = useMemo(() => {
+    return mergeGlobalStyles(baseValue, value);
+  }, [baseValue, value]);
+  const [globalStylesCSS, globalSettings] = generateGlobalStyles(mergedValue);
+  const styles = useMemo(
+    () => [...serverCSS ?? [], ...globalStylesCSS ?? []],
+    [serverCSS, globalStylesCSS]
+  );
+  const settings = useMemo(() => {
+    return {
+      ...serverSettings,
+      __experimentalFeatures: globalSettings,
+      styles
+    };
+  }, [globalSettings, serverSettings, styles]);
+  return /* @__PURE__ */ jsx(
+    GlobalStylesProvider,
+    {
+      value,
+      baseValue,
+      onChange,
+      fontLibraryEnabled,
+      children: /* @__PURE__ */ jsx(BlockEditorProvider, { settings, children: /* @__PURE__ */ jsxs(
+        Navigator,
+        {
+          className: "global-styles-ui-sidebar__navigator-provider",
+          initialPath: path || "/",
+          children: [
+            (path || onPathChange) && /* @__PURE__ */ jsx(
+              PathSynchronizer,
+              {
+                path,
+                onPathChange
+              }
+            ),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/", children: /* @__PURE__ */ jsx(ScreenRoot, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/colors", children: /* @__PURE__ */ jsx(ScreenColors, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/typography", children: /* @__PURE__ */ jsx(ScreenTypography, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/typography/font-sizes", children: /* @__PURE__ */ jsx(FontSizes, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/typography/font-sizes/:origin/:slug", children: /* @__PURE__ */ jsx(FontSize, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/layout", children: /* @__PURE__ */ jsx(ScreenLayout, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/colors/palette", children: /* @__PURE__ */ jsx(ScreenColorPalette, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/variations", children: /* @__PURE__ */ jsx(ScreenStyleVariations, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/css", children: /* @__PURE__ */ jsx(ScreenCSS, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/revisions/:revisionId?", children: /* @__PURE__ */ jsx(ScreenRevisions, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/shadows", children: /* @__PURE__ */ jsx(ScreenShadows, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/shadows/edit/:category/:slug", children: /* @__PURE__ */ jsx(ScreenShadowsEdit, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/background", children: /* @__PURE__ */ jsx(ScreenBackground, {}) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/typography/text", children: /* @__PURE__ */ jsx(ScreenTypographyElement, { element: "text" }) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/typography/link", children: /* @__PURE__ */ jsx(ScreenTypographyElement, { element: "link" }) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/typography/heading", children: /* @__PURE__ */ jsx(ScreenTypographyElement, { element: "heading" }) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/typography/caption", children: /* @__PURE__ */ jsx(ScreenTypographyElement, { element: "caption" }) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/typography/button", children: /* @__PURE__ */ jsx(ScreenTypographyElement, { element: "button" }) }),
+            /* @__PURE__ */ jsx(Navigator.Screen, { path: "/blocks", children: /* @__PURE__ */ jsx(ScreenBlockList, {}) }),
+            blocks.map((block) => /* @__PURE__ */ jsx(
+              Navigator.Screen,
+              {
+                path: "/blocks/" + encodeURIComponent(block.name),
+                children: /* @__PURE__ */ jsx(ScreenBlock, { name: block.name })
+              },
+              "menu-block-" + block.name
+            )),
+            /* @__PURE__ */ jsx(ContextScreens, {}),
+            blocks.map((block) => /* @__PURE__ */ jsx(
+              ContextScreens,
+              {
+                name: block.name,
+                parentMenu: "/blocks/" + encodeURIComponent(block.name)
+              },
+              "screens-block-" + block.name
+            ))
+          ]
+        }
+      ) })
+    }
+  );
+}
+function PathSynchronizer({
+  path,
+  onPathChange
+}) {
+  const navigator = useNavigator();
+  const { path: childPath } = navigator.location;
+  const previousParentPath = usePrevious(path);
+  const previousChildPath = usePrevious(childPath);
+  useEffect(() => {
+    if (path && path !== childPath) {
+      if (path !== previousParentPath) {
+        navigator.goTo(path);
+      } else if (childPath !== previousChildPath && onPathChange) {
+        onPathChange(childPath ?? "/");
+      }
+    }
+  }, [
+    onPathChange,
+    path,
+    previousChildPath,
+    previousParentPath,
+    childPath,
+    navigator
+  ]);
+  return null;
+}
+export {
+  GlobalStylesUI
+};
+//# sourceMappingURL=global-styles-ui.js.map

package/build-module/global-styles-ui.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/global-styles-ui.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Navigator, useNavigator } from '@wordpress/components';\n// @ts-expect-error: Not typed yet.\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\n// @ts-expect-error: Not typed yet.\nimport { BlockEditorProvider } from '@wordpress/block-editor';\nimport { useMemo, useEffect } from '@wordpress/element';\nimport { usePrevious } from '@wordpress/compose';\nimport {\n\tgenerateGlobalStyles,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\nimport type {\n\tGlobalStylesConfig,\n\tBlockType,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesProvider } from './provider';\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackground from './screen-background';\nimport { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport ScreenCSS from './screen-css';\nimport ScreenRevisions from './screen-revisions';\nimport FontSizes from './font-sizes/font-sizes';\nimport FontSize from './font-sizes/font-size';\ninterface BlockStylesNavigationScreensProps {\n\tparentMenu: string;\n\tblockStyles: any[];\n\tblockName: string;\n}\n\nfunction BlockStylesNavigationScreens( {\n\tparentMenu,\n\tblockStyles,\n\tblockName,\n}: BlockStylesNavigationScreensProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ blockStyles.map( ( style, index ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ blockName } variation={ style.name } />\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\ninterface ContextScreensProps {\n\tname?: string;\n\tparentMenu?: string;\n}\n\nfunction ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! name ) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Navigator.Screen path={ parentMenu + '/colors/palette' }>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</Navigator.Screen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name || '' }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\ninterface GlobalStylesUIProps {\n\t/** User global styles object (what gets edited) */\n\tvalue: GlobalStylesConfig;\n\t/** Base global styles object (theme default) */\n\tbaseValue: GlobalStylesConfig;\n\t/** Callback when global styles change */\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\t/** Current navigation path (optional) */\n\tpath?: string;\n\t/** Callback when navigation path changes (optional) */\n\tonPathChange?: ( path: string ) => void;\n\t/** Whether font library is enabled (optional) */\n\tfontLibraryEnabled?: boolean;\n\t/** Server CSS styles for BlockEditorProvider (optional) */\n\tserverCSS?: { isGlobalStyles?: boolean }[];\n\t/** Server settings for BlockEditorProvider (optional) */\n\tserverSettings?: { __unstableResolvedAssets: Record< string, unknown > };\n}\n\nexport function GlobalStylesUI( {\n\tvalue,\n\tbaseValue,\n\tonChange,\n\tpath,\n\tonPathChange,\n\tfontLibraryEnabled = false,\n\tserverCSS,\n\tserverSettings,\n}: GlobalStylesUIProps ) {\n\tconst blocks = getBlockTypes();\n\n\t// Compute merged value for CSS generation\n\tconst mergedValue = useMemo( () => {\n\t\treturn mergeGlobalStyles( baseValue, value );\n\t}, [ baseValue, value ] );\n\n\tconst [ globalStylesCSS, globalSettings ] =\n\t\tgenerateGlobalStyles( mergedValue );\n\tconst styles = useMemo(\n\t\t() => [ ...( serverCSS ?? [] ), ...( globalStylesCSS ?? [] ) ],\n\t\t[ serverCSS, globalStylesCSS ]\n\t);\n\n\tconst settings = useMemo( () => {\n\t\treturn {\n\t\t\t...serverSettings,\n\t\t\t__experimentalFeatures: globalSettings,\n\t\t\tstyles,\n\t\t};\n\t}, [ globalSettings, serverSettings, styles ] );\n\n\treturn (\n\t\t<GlobalStylesProvider\n\t\t\tvalue={ value }\n\t\t\tbaseValue={ baseValue }\n\t\t\tonChange={ onChange }\n\t\t\tfontLibraryEnabled={ fontLibraryEnabled }\n\t\t>\n\t\t\t<BlockEditorProvider settings={ settings }>\n\t\t\t\t<Navigator\n\t\t\t\t\tclassName=\"global-styles-ui-sidebar__navigator-provider\"\n\t\t\t\t\tinitialPath={ path || '/' }\n\t\t\t\t>\n\t\t\t\t\t{ ( path || onPathChange ) && (\n\t\t\t\t\t\t<PathSynchronizer\n\t\t\t\t\t\t\tpath={ path }\n\t\t\t\t\t\t\tonPathChange={ onPathChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t<ScreenRoot />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/colors\">\n\t\t\t\t\t\t<ScreenColors />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography\">\n\t\t\t\t\t\t<ScreenTypography />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/font-sizes\">\n\t\t\t\t\t\t<FontSizes />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/font-sizes/:origin/:slug\">\n\t\t\t\t\t\t<FontSize />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/layout\">\n\t\t\t\t\t\t<ScreenLayout />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/colors/palette\">\n\t\t\t\t\t\t<ScreenColorPalette />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/variations\">\n\t\t\t\t\t\t<ScreenStyleVariations />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/css\">\n\t\t\t\t\t\t<ScreenCSS />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/revisions/:revisionId?\">\n\t\t\t\t\t\t<ScreenRevisions />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/shadows\">\n\t\t\t\t\t\t<ScreenShadows />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/shadows/edit/:category/:slug\">\n\t\t\t\t\t\t<ScreenShadowsEdit />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/background\">\n\t\t\t\t\t\t<ScreenBackground />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/text\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"text\" />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/link\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"link\" />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/heading\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"heading\" />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/caption\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"caption\" />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/button\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"button\" />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/blocks\">\n\t\t\t\t\t\t<ScreenBlockList />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<Navigator.Screen\n\t\t\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t) ) }\n\n\t\t\t\t\t<ContextScreens />\n\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<ContextScreens\n\t\t\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\t\t\tname={ block.name }\n\t\t\t\t\t\t\tparentMenu={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Navigator>\n\t\t\t</BlockEditorProvider>\n\t\t</GlobalStylesProvider>\n\t);\n}\n\n/*\n * Component that handles path synchronization between external path prop and Navigator's internal path.\n */\nfunction PathSynchronizer( {\n\tpath,\n\tonPathChange,\n}: {\n\tpath?: string;\n\tonPathChange?: ( path: string ) => void;\n} ) {\n\tconst navigator = useNavigator();\n\tconst { path: childPath } = navigator.location;\n\tconst previousParentPath = usePrevious( path );\n\tconst previousChildPath = usePrevious( childPath );\n\n\tuseEffect( () => {\n\t\t// Only sync when parent and child paths are out of sync\n\t\tif ( path && path !== childPath ) {\n\t\t\t// If parent path changed, update the Navigator\n\t\t\tif ( path !== previousParentPath ) {\n\t\t\t\tnavigator.goTo( path );\n\t\t\t}\n\t\t\t// If child path changed, notify parent via onPathChange\n\t\t\telse if ( childPath !== previousChildPath && onPathChange ) {\n\t\t\t\tonPathChange( childPath ?? '/' );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tonPathChange,\n\t\tpath,\n\t\tpreviousChildPath,\n\t\tpreviousParentPath,\n\t\tchildPath,\n\t\tnavigator,\n\t] );\n\n\t// This component only handles synchronization logic. It doesn't render anything.\n\t// We use it to run the effect inside the Navigator context.\n\treturn null;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/gradients-palette-panel.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useViewportMatch } from "@wordpress/compose";
+import {
+  __experimentalVStack as VStack,
+  __experimentalPaletteEdit as PaletteEdit,
+  __experimentalSpacer as Spacer,
+  DuotonePicker
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { Subtitle } from "./subtitle";
+import { useSetting } from "./hooks";
+const mobilePopoverProps = { placement: "bottom-start", offset: 8 };
+const noop = () => {
+};
+function GradientPalettePanel({
+  name
+}) {
+  const [themeGradients, setThemeGradients] = useSetting(
+    "color.gradients.theme",
+    name
+  );
+  const [baseThemeGradients] = useSetting(
+    "color.gradients.theme",
+    name,
+    "base"
+  );
+  const [defaultGradients, setDefaultGradients] = useSetting(
+    "color.gradients.default",
+    name
+  );
+  const [baseDefaultGradients] = useSetting(
+    "color.gradients.default",
+    name,
+    "base"
+  );
+  const [customGradients, setCustomGradients] = useSetting(
+    "color.gradients.custom",
+    name
+  );
+  const [defaultPaletteEnabled] = useSetting(
+    "color.defaultGradients",
+    name
+  );
+  const [customDuotone] = useSetting("color.duotone.custom") || [];
+  const [defaultDuotone] = useSetting("color.duotone.default") || [];
+  const [themeDuotone] = useSetting("color.duotone.theme") || [];
+  const [defaultDuotoneEnabled] = useSetting("color.defaultDuotone");
+  const duotonePalette = [
+    ...customDuotone || [],
+    ...themeDuotone || [],
+    ...defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : []
+  ];
+  const isMobileViewport = useViewportMatch("small", "<");
+  const popoverProps = isMobileViewport ? mobilePopoverProps : void 0;
+  return /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      className: "global-styles-ui-gradient-palette-panel",
+      spacing: 8,
+      children: [
+        !!themeGradients && !!themeGradients.length && /* @__PURE__ */ jsx(
+          PaletteEdit,
+          {
+            canReset: themeGradients !== baseThemeGradients,
+            canOnlyChangeValues: true,
+            gradients: themeGradients,
+            onChange: setThemeGradients,
+            paletteLabel: __("Theme"),
+            paletteLabelHeadingLevel: 3,
+            popoverProps
+          }
+        ),
+        !!defaultGradients && !!defaultGradients.length && !!defaultPaletteEnabled && /* @__PURE__ */ jsx(
+          PaletteEdit,
+          {
+            canReset: defaultGradients !== baseDefaultGradients,
+            canOnlyChangeValues: true,
+            gradients: defaultGradients,
+            onChange: setDefaultGradients,
+            paletteLabel: __("Default"),
+            paletteLabelHeadingLevel: 3,
+            popoverProps
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PaletteEdit,
+          {
+            gradients: customGradients,
+            onChange: setCustomGradients,
+            paletteLabel: __("Custom"),
+            paletteLabelHeadingLevel: 3,
+            slugPrefix: "custom-",
+            popoverProps
+          }
+        ),
+        !!duotonePalette && !!duotonePalette.length && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Subtitle, { level: 3, children: __("Duotone") }),
+          /* @__PURE__ */ jsx(Spacer, { margin: 3 }),
+          /* @__PURE__ */ jsx(
+            DuotonePicker,
+            {
+              duotonePalette,
+              disableCustomDuotone: true,
+              disableCustomColors: true,
+              clearable: false,
+              onChange: noop,
+              colorPalette: []
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  GradientPalettePanel as default
+};
+//# sourceMappingURL=gradients-palette-panel.js.map

package/build-module/gradients-palette-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/gradients-palette-panel.tsx"],
+  "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 type { Gradient } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { useSetting } from './hooks';\n\nconst mobilePopoverProps = { placement: 'bottom-start' as const, offset: 8 };\n\nconst noop = () => {};\n\ninterface GradientPalettePanelProps {\n\tname?: string;\n}\n\nexport default function GradientPalettePanel( {\n\tname,\n}: GradientPalettePanelProps ) {\n\tconst [ themeGradients, setThemeGradients ] = useSetting< Gradient[] >(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useSetting< Gradient[] >(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useSetting< Gradient[] >(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useSetting< Gradient[] >(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useSetting< Gradient[] >(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useSetting< boolean >(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\n\tconst [ customDuotone ] = useSetting( 'color.duotone.custom' ) || [];\n\tconst [ defaultDuotone ] = useSetting( 'color.duotone.default' ) || [];\n\tconst [ themeDuotone ] = useSetting( 'color.duotone.theme' ) || [];\n\tconst [ defaultDuotoneEnabled ] = useSetting( 'color.defaultDuotone' );\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=\"global-styles-ui-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\tpaletteLabelHeadingLevel={ 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\tpaletteLabelHeadingLevel={ 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\tcolorPalette={ [] }\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": "AA8EI,cAgCA,YAhCA;AA3EJ,SAAS,wBAAwB;AACjC;AAAA,EACC,wBAAwB;AAAA,EACxB,6BAA6B;AAAA,EAC7B,wBAAwB;AAAA,EACxB;AAAA,OACM;AACP,SAAS,UAAU;AAMnB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAE3B,MAAM,qBAAqB,EAAE,WAAW,gBAAyB,QAAQ,EAAE;AAE3E,MAAM,OAAO,MAAM;AAAC;AAML,SAAR,qBAAuC;AAAA,EAC7C;AACD,GAA+B;AAC9B,QAAM,CAAE,gBAAgB,iBAAkB,IAAI;AAAA,IAC7C;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,kBAAmB,IAAI;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,kBAAkB,mBAAoB,IAAI;AAAA,IACjD;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,oBAAqB,IAAI;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,iBAAiB,kBAAmB,IAAI;AAAA,IAC/C;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,qBAAsB,IAAI;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,aAAc,IAAI,WAAY,sBAAuB,KAAK,CAAC;AACnE,QAAM,CAAE,cAAe,IAAI,WAAY,uBAAwB,KAAK,CAAC;AACrE,QAAM,CAAE,YAAa,IAAI,WAAY,qBAAsB,KAAK,CAAC;AACjE,QAAM,CAAE,qBAAsB,IAAI,WAAY,sBAAuB;AAErE,QAAM,iBAAiB;AAAA,IACtB,GAAK,iBAAiB,CAAC;AAAA,IACvB,GAAK,gBAAgB,CAAC;AAAA,IACtB,GAAK,kBAAkB,wBAAwB,iBAAiB,CAAC;AAAA,EAClE;AAEA,QAAM,mBAAmB,iBAAkB,SAAS,GAAI;AACxD,QAAM,eAAe,mBAAmB,qBAAqB;AAE7D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MAER;AAAA,SAAC,CAAE,kBAAkB,CAAC,CAAE,eAAe,UACxC;AAAA,UAAC;AAAA;AAAA,YACA,UAAW,mBAAmB;AAAA,YAC9B,qBAAmB;AAAA,YACnB,WAAY;AAAA,YACZ,UAAW;AAAA,YACX,cAAe,GAAI,OAAQ;AAAA,YAC3B,0BAA2B;AAAA,YAC3B;AAAA;AAAA,QACD;AAAA,QAEC,CAAC,CAAE,oBACJ,CAAC,CAAE,iBAAiB,UACpB,CAAC,CAAE,yBACF;AAAA,UAAC;AAAA;AAAA,YACA,UAAW,qBAAqB;AAAA,YAChC,qBAAmB;AAAA,YACnB,WAAY;AAAA,YACZ,UAAW;AAAA,YACX,cAAe,GAAI,SAAU;AAAA,YAC7B,0BAA2B;AAAA,YAC3B;AAAA;AAAA,QACD;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACA,WAAY;AAAA,YACZ,UAAW;AAAA,YACX,cAAe,GAAI,QAAS;AAAA,YAC5B,0BAA2B;AAAA,YAC3B,YAAW;AAAA,YACX;AAAA;AAAA,QACD;AAAA,QACE,CAAC,CAAE,kBAAkB,CAAC,CAAE,eAAe,UACxC,qBAAC,SACA;AAAA,8BAAC,YAAS,OAAQ,GAAM,aAAI,SAAU,GAAG;AAAA,UACzC,oBAAC,UAAO,QAAS,GAAI;AAAA,UACrB;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,sBAAoB;AAAA,cACpB,qBAAmB;AAAA,cACnB,WAAY;AAAA,cACZ,UAAW;AAAA,cACX,cAAe,CAAC;AAAA;AAAA,UACjB;AAAA,WACD;AAAA;AAAA;AAAA,EAEF;AAEF;",
+  "names": []
+}

package/build-module/highlighted-colors.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { __unstableMotion as motion } from "@wordpress/components";
+import { useStylesPreviewColors } from "./preview-hooks";
+function HighlightedColors({
+  normalizedColorSwatchSize,
+  ratio
+}) {
+  const { highlightedColors } = useStylesPreviewColors();
+  const scaledSwatchSize = normalizedColorSwatchSize * ratio;
+  return highlightedColors.map(({ slug, color }, index) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      style: {
+        height: scaledSwatchSize,
+        width: scaledSwatchSize,
+        background: color,
+        borderRadius: scaledSwatchSize / 2
+      },
+      animate: {
+        scale: 1,
+        opacity: 1
+      },
+      initial: {
+        scale: 0.1,
+        opacity: 0
+      },
+      transition: {
+        delay: index === 1 ? 0.2 : 0.1
+      }
+    },
+    `${slug}-${index}`
+  ));
+}
+export {
+  HighlightedColors as default
+};
+//# sourceMappingURL=highlighted-colors.js.map

package/build-module/highlighted-colors.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/highlighted-colors.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './preview-hooks';\n\ninterface HighlightedColorsProps {\n\tnormalizedColorSwatchSize: number;\n\tratio: number;\n}\n\nexport default function HighlightedColors( {\n\tnormalizedColorSwatchSize,\n\tratio,\n}: HighlightedColorsProps ) {\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": "AAsBE;AAnBF,SAAS,oBAAoB,cAAc;AAK3C,SAAS,8BAA8B;AAOxB,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,EAAE,kBAAkB,IAAI,uBAAuB;AACrD,QAAM,mBAAmB,4BAA4B;AACrD,SAAO,kBAAkB,IAAK,CAAE,EAAE,MAAM,MAAM,GAAG,UAChD;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MAEA,OAAQ;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,cAAc,mBAAmB;AAAA,MAClC;AAAA,MACA,SAAU;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,SAAU;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,YAAa;AAAA,QACZ,OAAO,UAAU,IAAI,MAAM;AAAA,MAC5B;AAAA;AAAA,IAjBM,GAAI,IAAK,IAAK,KAAM;AAAA,EAkB3B,CACC;AACH;",
+  "names": []
+}

package/build-module/hooks.js

@@ -0,0 +1,144 @@
+import { colord, extend } from "colord";
+import a11yPlugin from "colord/plugins/a11y";
+import { useCallback, useContext, useMemo } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+import { store as coreStore } from "@wordpress/core-data";
+import { __ } from "@wordpress/i18n";
+import {
+  getStyle,
+  setStyle,
+  getSetting,
+  setSetting,
+  mergeGlobalStyles
+} from "@wordpress/global-styles-engine";
+import { GlobalStylesContext } from "./context";
+import { removePropertiesFromObject, isVariationWithProperties } from "./utils";
+extend([a11yPlugin]);
+function useStyle(path, blockName, readFrom = "merged", shouldDecodeEncode = true) {
+  const { user, base, merged, onChange } = useContext(GlobalStylesContext);
+  let sourceValue = merged;
+  if (readFrom === "base") {
+    sourceValue = base;
+  } else if (readFrom === "user") {
+    sourceValue = user;
+  }
+  const styleValue = useMemo(
+    () => getStyle(sourceValue, path, blockName, shouldDecodeEncode),
+    [sourceValue, path, blockName, shouldDecodeEncode]
+  );
+  const setStyleValue = useCallback(
+    (newValue) => {
+      const newGlobalStyles = setStyle(
+        user,
+        path,
+        newValue,
+        blockName
+      );
+      onChange(newGlobalStyles);
+    },
+    [user, onChange, path, blockName]
+  );
+  return [styleValue, setStyleValue];
+}
+function useSetting(path, blockName, readFrom = "merged") {
+  const { user, base, merged, onChange } = useContext(GlobalStylesContext);
+  let sourceValue = merged;
+  if (readFrom === "base") {
+    sourceValue = base;
+  } else if (readFrom === "user") {
+    sourceValue = user;
+  }
+  const settingValue = useMemo(
+    () => getSetting(sourceValue, path, blockName),
+    [sourceValue, path, blockName]
+  );
+  const setSettingValue = useCallback(
+    (newValue) => {
+      const newGlobalStyles = setSetting(
+        user,
+        path,
+        newValue,
+        blockName
+      );
+      onChange(newGlobalStyles);
+    },
+    [user, onChange, path, blockName]
+  );
+  return [settingValue, setSettingValue];
+}
+const EMPTY_ARRAY = [];
+function hasThemeVariation({
+  title,
+  settings,
+  styles
+}) {
+  return title === __("Default") || Object.keys(settings || {}).length > 0 || Object.keys(styles || {}).length > 0;
+}
+function useCurrentMergeThemeStyleVariationsWithUserConfig(properties = []) {
+  const { variationsFromTheme } = useSelect((select) => {
+    const _variationsFromTheme = select(
+      coreStore
+    ).__experimentalGetCurrentThemeGlobalStylesVariations?.();
+    return {
+      variationsFromTheme: _variationsFromTheme || EMPTY_ARRAY
+    };
+  }, []);
+  const { user: userVariation } = useContext(GlobalStylesContext);
+  return useMemo(() => {
+    const clonedUserVariation = structuredClone(userVariation);
+    const userVariationWithoutProperties = removePropertiesFromObject(
+      clonedUserVariation,
+      properties
+    );
+    userVariationWithoutProperties.title = __("Default");
+    const variationsWithPropertiesAndBase = variationsFromTheme.filter((variation) => {
+      return isVariationWithProperties(variation, properties);
+    }).map((variation) => {
+      return mergeGlobalStyles(
+        userVariationWithoutProperties,
+        variation
+      );
+    });
+    const variationsByProperties = [
+      userVariationWithoutProperties,
+      ...variationsWithPropertiesAndBase
+    ];
+    return variationsByProperties?.length ? variationsByProperties.filter(hasThemeVariation) : [];
+  }, [properties, userVariation, variationsFromTheme]);
+}
+const propertiesToFilter = ["color"];
+function useColorVariations() {
+  return useCurrentMergeThemeStyleVariationsWithUserConfig(
+    propertiesToFilter
+  );
+}
+function useColorRandomizer(blockName) {
+  const [themeColors, setThemeColors] = useSetting(
+    "color.palette.theme",
+    blockName
+  );
+  const randomizeColors = useCallback(() => {
+    if (!themeColors || !themeColors.length) {
+      return;
+    }
+    const randomRotationValue = Math.floor(Math.random() * 225);
+    const newColors = themeColors.map((colorObject) => {
+      const { color } = colorObject;
+      const newColor = colord(color).rotate(randomRotationValue).toHex();
+      return {
+        ...colorObject,
+        color: newColor
+      };
+    });
+    setThemeColors(newColors);
+  }, [themeColors, setThemeColors]);
+  return window.__experimentalEnableColorRandomizer ? [randomizeColors] : [];
+}
+export {
+  useColorRandomizer,
+  useColorVariations,
+  useCurrentMergeThemeStyleVariationsWithUserConfig,
+  useSetting,
+  useStyle
+};
+//# sourceMappingURL=hooks.js.map