@wordpress/global-styles-ui 1.1.0

package/build-module/hooks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/hooks.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useContext, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tgetStyle,\n\tsetStyle,\n\tgetSetting,\n\tsetSetting,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\nimport type { StyleVariation, Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\nimport { removePropertiesFromObject, isVariationWithProperties } from './utils';\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\n/**\n * Hook to get and set style values with memoization.\n *\n * @param path               The path to the style value.\n * @param blockName          The name of the block, if applicable.\n * @param readFrom           Which source to read from: \"base\" (theme), \"user\" (customizations), or \"merged\" (final result).\n * @param shouldDecodeEncode Whether to decode and encode the style value.\n * @return An array containing the style value and a function to set the style\n * value.\n *\n * @example\n * const [ color, setColor ] = useStyle<string>( 'color.text', 'core/button', 'merged' );\n */\nexport function useStyle< T = any >(\n\tpath: string,\n\tblockName?: string,\n\treadFrom: 'base' | 'user' | 'merged' = 'merged',\n\tshouldDecodeEncode: boolean = true\n) {\n\tconst { user, base, merged, onChange } = useContext( GlobalStylesContext );\n\n\tlet sourceValue = merged;\n\tif ( readFrom === 'base' ) {\n\t\tsourceValue = base;\n\t} else if ( readFrom === 'user' ) {\n\t\tsourceValue = user;\n\t}\n\n\tconst styleValue = useMemo(\n\t\t() => getStyle< T >( sourceValue, path, blockName, shouldDecodeEncode ),\n\t\t[ sourceValue, path, blockName, shouldDecodeEncode ]\n\t);\n\n\tconst setStyleValue = useCallback(\n\t\t( newValue: T | undefined ) => {\n\t\t\tconst newGlobalStyles = setStyle< T >(\n\t\t\t\tuser,\n\t\t\t\tpath,\n\t\t\t\tnewValue,\n\t\t\t\tblockName\n\t\t\t);\n\t\t\tonChange( newGlobalStyles );\n\t\t},\n\t\t[ user, onChange, path, blockName ]\n\t);\n\n\treturn [ styleValue, setStyleValue ] as const;\n}\n\n/**\n * Hook to get and set setting values with memoization.\n *\n * @param path      The path to the setting value.\n * @param blockName The name of the block, if applicable.\n * @param readFrom  Which source to read from: \"base\" (theme), \"user\" (customizations), or \"merged\" (final result).\n * @return An array containing the setting value and a function to set the\n * setting value.\n *\n * @example\n * const [ fontSize, setFontSize ] = useSetting<string>( 'fontSize', 'core/button', 'merged' );\n */\nexport function useSetting< T = any >(\n\tpath: string,\n\tblockName?: string,\n\treadFrom: 'base' | 'user' | 'merged' = 'merged'\n) {\n\tconst { user, base, merged, onChange } = useContext( GlobalStylesContext );\n\n\tlet sourceValue = merged;\n\tif ( readFrom === 'base' ) {\n\t\tsourceValue = base;\n\t} else if ( readFrom === 'user' ) {\n\t\tsourceValue = user;\n\t}\n\tconst settingValue = useMemo(\n\t\t() => getSetting< T >( sourceValue, path, blockName ),\n\t\t[ sourceValue, path, blockName ]\n\t);\n\n\tconst setSettingValue = useCallback(\n\t\t( newValue: T | undefined ) => {\n\t\t\tconst newGlobalStyles = setSetting< T >(\n\t\t\t\tuser,\n\t\t\t\tpath,\n\t\t\t\tnewValue,\n\t\t\t\tblockName\n\t\t\t);\n\t\t\tonChange( newGlobalStyles );\n\t\t},\n\t\t[ user, onChange, path, blockName ]\n\t);\n\n\treturn [ settingValue, setSettingValue ] as const;\n}\n\nconst EMPTY_ARRAY: StyleVariation[] = [];\n\n/**\n * Checks whether a style variation is empty.\n * @param root0\n * @param root0.title\n * @param root0.settings\n * @param root0.styles\n */\nfunction hasThemeVariation( {\n\ttitle,\n\tsettings,\n\tstyles,\n}: StyleVariation ): boolean {\n\treturn (\n\t\ttitle === __( 'Default' ) ||\n\t\tObject.keys( settings || {} ).length > 0 ||\n\t\tObject.keys( styles || {} ).length > 0\n\t);\n}\n\n/**\n * Fetches the current theme style variations that contain only the specified properties\n * and merges them with the user config.\n * @param properties\n */\nexport function useCurrentMergeThemeStyleVariationsWithUserConfig(\n\tproperties: string[] = []\n): StyleVariation[] {\n\tconst { variationsFromTheme } = useSelect( ( select ) => {\n\t\tconst _variationsFromTheme =\n\t\t\tselect(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations?.();\n\n\t\treturn {\n\t\t\tvariationsFromTheme: _variationsFromTheme || EMPTY_ARRAY,\n\t\t};\n\t}, [] );\n\n\tconst { user: userVariation } = useContext( GlobalStylesContext );\n\n\treturn useMemo( () => {\n\t\t// Create default variation from base, not user - this fixes the \"Default adapts\" issue\n\t\tconst clonedUserVariation = structuredClone( userVariation );\n\t\t// Get user variation and remove the settings for the given property.\n\t\tconst userVariationWithoutProperties = removePropertiesFromObject(\n\t\t\tclonedUserVariation,\n\t\t\tproperties\n\t\t);\n\t\tuserVariationWithoutProperties.title = __( 'Default' );\n\n\t\tconst variationsWithPropertiesAndBase = (\n\t\t\tvariationsFromTheme as StyleVariation[]\n\t\t )\n\t\t\t.filter( ( variation: StyleVariation ) => {\n\t\t\t\treturn isVariationWithProperties( variation, properties );\n\t\t\t} )\n\t\t\t.map( ( variation: StyleVariation ) => {\n\t\t\t\treturn mergeGlobalStyles(\n\t\t\t\t\tuserVariationWithoutProperties,\n\t\t\t\t\tvariation\n\t\t\t\t);\n\t\t\t} );\n\n\t\tconst variationsByProperties = [\n\t\t\tuserVariationWithoutProperties,\n\t\t\t...variationsWithPropertiesAndBase,\n\t\t];\n\n\t\treturn variationsByProperties?.length\n\t\t\t? variationsByProperties.filter( hasThemeVariation )\n\t\t\t: [];\n\t}, [ properties, userVariation, variationsFromTheme ] );\n}\n\nconst propertiesToFilter = [ 'color' ];\n\n/**\n * Hook to get color variations using the full Gutenberg implementation.\n */\nexport function useColorVariations(): StyleVariation[] {\n\treturn useCurrentMergeThemeStyleVariationsWithUserConfig(\n\t\tpropertiesToFilter\n\t);\n}\n\n/**\n * Hook to randomize theme colors using color rotation.\n *\n * @param blockName The name of the block, if applicable.\n * @return Array containing the randomize function if feature is enabled, empty array otherwise.\n */\nexport function useColorRandomizer( blockName?: string ): [ () => void ] | [] {\n\tconst [ themeColors, setThemeColors ] = useSetting< Color[] >(\n\t\t'color.palette.theme',\n\t\tblockName\n\t);\n\n\tconst randomizeColors = useCallback( () => {\n\t\tif ( ! themeColors || ! themeColors.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\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}, [ themeColors, setThemeColors ] );\n\n\treturn ( window as any ).__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n"],
+  "mappings": "AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,gBAAgB;AAKvB,SAAS,aAAa,YAAY,eAAe;AACjD,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAMP,SAAS,2BAA2B;AACpC,SAAS,4BAA4B,iCAAiC;AAGtE,OAAQ,CAAE,UAAW,CAAE;AAehB,SAAS,SACf,MACA,WACA,WAAuC,UACvC,qBAA8B,MAC7B;AACD,QAAM,EAAE,MAAM,MAAM,QAAQ,SAAS,IAAI,WAAY,mBAAoB;AAEzE,MAAI,cAAc;AAClB,MAAK,aAAa,QAAS;AAC1B,kBAAc;AAAA,EACf,WAAY,aAAa,QAAS;AACjC,kBAAc;AAAA,EACf;AAEA,QAAM,aAAa;AAAA,IAClB,MAAM,SAAe,aAAa,MAAM,WAAW,kBAAmB;AAAA,IACtE,CAAE,aAAa,MAAM,WAAW,kBAAmB;AAAA,EACpD;AAEA,QAAM,gBAAgB;AAAA,IACrB,CAAE,aAA6B;AAC9B,YAAM,kBAAkB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,eAAU,eAAgB;AAAA,IAC3B;AAAA,IACA,CAAE,MAAM,UAAU,MAAM,SAAU;AAAA,EACnC;AAEA,SAAO,CAAE,YAAY,aAAc;AACpC;AAcO,SAAS,WACf,MACA,WACA,WAAuC,UACtC;AACD,QAAM,EAAE,MAAM,MAAM,QAAQ,SAAS,IAAI,WAAY,mBAAoB;AAEzE,MAAI,cAAc;AAClB,MAAK,aAAa,QAAS;AAC1B,kBAAc;AAAA,EACf,WAAY,aAAa,QAAS;AACjC,kBAAc;AAAA,EACf;AACA,QAAM,eAAe;AAAA,IACpB,MAAM,WAAiB,aAAa,MAAM,SAAU;AAAA,IACpD,CAAE,aAAa,MAAM,SAAU;AAAA,EAChC;AAEA,QAAM,kBAAkB;AAAA,IACvB,CAAE,aAA6B;AAC9B,YAAM,kBAAkB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,eAAU,eAAgB;AAAA,IAC3B;AAAA,IACA,CAAE,MAAM,UAAU,MAAM,SAAU;AAAA,EACnC;AAEA,SAAO,CAAE,cAAc,eAAgB;AACxC;AAEA,MAAM,cAAgC,CAAC;AASvC,SAAS,kBAAmB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACD,GAA6B;AAC5B,SACC,UAAU,GAAI,SAAU,KACxB,OAAO,KAAM,YAAY,CAAC,CAAE,EAAE,SAAS,KACvC,OAAO,KAAM,UAAU,CAAC,CAAE,EAAE,SAAS;AAEvC;AAOO,SAAS,kDACf,aAAuB,CAAC,GACL;AACnB,QAAM,EAAE,oBAAoB,IAAI,UAAW,CAAE,WAAY;AACxD,UAAM,uBACL;AAAA,MACC;AAAA,IACD,EAAE,sDAAsD;AAEzD,WAAO;AAAA,MACN,qBAAqB,wBAAwB;AAAA,IAC9C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,MAAM,cAAc,IAAI,WAAY,mBAAoB;AAEhE,SAAO,QAAS,MAAM;AAErB,UAAM,sBAAsB,gBAAiB,aAAc;AAE3D,UAAM,iCAAiC;AAAA,MACtC;AAAA,MACA;AAAA,IACD;AACA,mCAA+B,QAAQ,GAAI,SAAU;AAErD,UAAM,kCACL,oBAEC,OAAQ,CAAE,cAA+B;AACzC,aAAO,0BAA2B,WAAW,UAAW;AAAA,IACzD,CAAE,EACD,IAAK,CAAE,cAA+B;AACtC,aAAO;AAAA,QACN;AAAA,QACA;AAAA,MACD;AAAA,IACD,CAAE;AAEH,UAAM,yBAAyB;AAAA,MAC9B;AAAA,MACA,GAAG;AAAA,IACJ;AAEA,WAAO,wBAAwB,SAC5B,uBAAuB,OAAQ,iBAAkB,IACjD,CAAC;AAAA,EACL,GAAG,CAAE,YAAY,eAAe,mBAAoB,CAAE;AACvD;AAEA,MAAM,qBAAqB,CAAE,OAAQ;AAK9B,SAAS,qBAAuC;AACtD,SAAO;AAAA,IACN;AAAA,EACD;AACD;AAQO,SAAS,mBAAoB,WAA0C;AAC7E,QAAM,CAAE,aAAa,cAAe,IAAI;AAAA,IACvC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,kBAAkB,YAAa,MAAM;AAC1C,QAAK,CAAE,eAAe,CAAE,YAAY,QAAS;AAC5C;AAAA,IACD;AAEA,UAAM,sBAAsB,KAAK,MAAO,KAAK,OAAO,IAAI,GAAI;AAE5D,UAAM,YAAY,YAAY,IAAK,CAAE,gBAAiB;AACrD,YAAM,EAAE,MAAM,IAAI;AAClB,YAAM,WAAW,OAAQ,KAAM,EAC7B,OAAQ,mBAAoB,EAC5B,MAAM;AAER,aAAO;AAAA,QACN,GAAG;AAAA,QACH,OAAO;AAAA,MACR;AAAA,IACD,CAAE;AAEF,mBAAgB,SAAU;AAAA,EAC3B,GAAG,CAAE,aAAa,cAAe,CAAE;AAEnC,SAAS,OAAgB,sCACtB,CAAE,eAAgB,IAClB,CAAC;AACL;",
+  "names": []
+}

package/build-module/icon-with-current-color.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Icon } from "@wordpress/icons";
+function IconWithCurrentColor({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      className: clsx(
+        className,
+        "global-styles-ui-icon-with-current-color"
+      ),
+      ...props
+    }
+  );
+}
+export {
+  IconWithCurrentColor
+};
+//# sourceMappingURL=icon-with-current-color.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/icon-with-current-color.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/icons';\n\ninterface IconWithCurrentColorProps {\n\ticon: any;\n\tclassName?: string;\n\tsize?: number;\n\t[ key: string ]: any;\n}\n\nexport function IconWithCurrentColor( {\n\tclassName,\n\t...props\n}: IconWithCurrentColorProps ) {\n\treturn (\n\t\t<Icon\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'global-styles-ui-icon-with-current-color'\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
+  "mappings": "AAsBE;AAnBF,OAAO,UAAU;AAKjB,SAAS,YAAY;AASd,SAAS,qBAAsB;AAAA,EACrC;AAAA,EACA,GAAG;AACJ,GAA+B;AAC9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
+  "names": []
+}

package/build-module/index.js

@@ -0,0 +1,13 @@
+import { GlobalStylesUI } from "./global-styles-ui";
+import { StyleVariations } from "./style-variations";
+import { ColorVariations } from "./color-variations";
+import { TypographyVariations } from "./typography-variations";
+import { default as default2 } from "./screen-revisions/use-global-styles-revisions";
+export {
+  ColorVariations,
+  GlobalStylesUI,
+  StyleVariations,
+  TypographyVariations,
+  default2 as useGlobalStylesRevisions
+};
+//# sourceMappingURL=index.js.map

package/build-module/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["export { GlobalStylesUI } from './global-styles-ui';\nexport { StyleVariations } from './style-variations';\nexport { ColorVariations } from './color-variations';\nexport { TypographyVariations } from './typography-variations';\n\n// Ideally this should just be a core-data selector.\nexport { default as useGlobalStylesRevisions } from './screen-revisions/use-global-styles-revisions';\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAGrC,SAAoB,WAAXA,gBAA2C;",
+  "names": ["default"]
+}

package/build-module/lock-unlock.js

@@ -0,0 +1,10 @@
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from "@wordpress/private-apis";
+const { lock, unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+  "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
+  "@wordpress/global-styles-ui"
+);
+export {
+  lock,
+  unlock
+};
+//# sourceMappingURL=lock-unlock.js.map

package/build-module/lock-unlock.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/lock-unlock.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t\t'@wordpress/global-styles-ui'\n\t);\n"],
+  "mappings": "AAGA,SAAS,wDAAwD;AAE1D,MAAM,EAAE,MAAM,OAAO,IAC3B;AAAA,EACC;AAAA,EACA;AACD;",
+  "names": []
+}

package/build-module/navigation-button.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Navigator,
+  __experimentalItem as Item,
+  FlexItem,
+  __experimentalHStack as HStack
+} from "@wordpress/components";
+import { IconWithCurrentColor } from "./icon-with-current-color";
+function GenericNavigationButton({
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Item, { ...props, children: [
+    icon && /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", children: [
+      /* @__PURE__ */ jsx(IconWithCurrentColor, { icon, size: 24 }),
+      /* @__PURE__ */ jsx(FlexItem, { children })
+    ] }),
+    !icon && children
+  ] });
+}
+function NavigationButtonAsItem(props) {
+  return /* @__PURE__ */ jsx(Navigator.Button, { as: GenericNavigationButton, ...props });
+}
+function NavigationBackButtonAsItem(props) {
+  return /* @__PURE__ */ jsx(Navigator.BackButton, { as: GenericNavigationButton, ...props });
+}
+export {
+  NavigationBackButtonAsItem,
+  NavigationButtonAsItem
+};
+//# sourceMappingURL=navigation-button.js.map

package/build-module/navigation-button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/navigation-button.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tNavigator,\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\ninterface GenericNavigationButtonProps {\n\ticon?: any;\n\tchildren: React.ReactNode;\n\t[ key: string ]: any;\n}\n\nfunction GenericNavigationButton( {\n\ticon,\n\tchildren,\n\t...props\n}: GenericNavigationButtonProps ) {\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\ninterface NavigationButtonProps {\n\tpath: string;\n\ticon?: any;\n\tchildren: React.ReactNode;\n\t[ key: string ]: any;\n}\n\nexport function NavigationButtonAsItem( props: NavigationButtonProps ) {\n\treturn <Navigator.Button as={ GenericNavigationButton } { ...props } />;\n}\n\nexport function NavigationBackButtonAsItem( props: NavigationButtonProps ) {\n\treturn <Navigator.BackButton as={ GenericNavigationButton } { ...props } />;\n}\n"],
+  "mappings": "AA6BI,SACC,KADD;AA1BJ;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA,wBAAwB;AAAA,OAClB;AAKP,SAAS,4BAA4B;AAQrC,SAAS,wBAAyB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkC;AACjC,SACC,qBAAC,QAAO,GAAG,OACR;AAAA,YACD,qBAAC,UAAO,SAAQ,cACf;AAAA,0BAAC,wBAAqB,MAAc,MAAO,IAAK;AAAA,MAChD,oBAAC,YAAW,UAAU;AAAA,OACvB;AAAA,IAEC,CAAE,QAAQ;AAAA,KACb;AAEF;AASO,SAAS,uBAAwB,OAA+B;AACtE,SAAO,oBAAC,UAAU,QAAV,EAAiB,IAAK,yBAA4B,GAAG,OAAQ;AACtE;AAEO,SAAS,2BAA4B,OAA+B;AAC1E,SAAO,oBAAC,UAAU,YAAV,EAAqB,IAAK,yBAA4B,GAAG,OAAQ;AAC1E;",
+  "names": []
+}

package/build-module/pagination/index.js

@@ -0,0 +1,107 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  __experimentalHStack as HStack,
+  __experimentalText as Text,
+  Button
+} from "@wordpress/components";
+import { __, _x, _n, sprintf, isRTL } from "@wordpress/i18n";
+import { previous, chevronLeft, chevronRight, next } from "@wordpress/icons";
+function Pagination({
+  currentPage,
+  numPages,
+  changePage,
+  totalItems,
+  className,
+  disabled = false,
+  buttonVariant = "tertiary",
+  label = __("Pagination")
+}) {
+  return /* @__PURE__ */ jsxs(
+    HStack,
+    {
+      expanded: false,
+      as: "nav",
+      "aria-label": label,
+      spacing: 3,
+      justify: "flex-start",
+      className: clsx("global-styles-ui-pagination", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "muted",
+            className: "global-styles-ui-pagination__total",
+            children: sprintf(
+              // translators: %d: Total number of patterns.
+              _n("%d item", "%d items", totalItems),
+              totalItems
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(HStack, { expanded: false, spacing: 1, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: buttonVariant,
+              onClick: () => changePage(1),
+              accessibleWhenDisabled: true,
+              disabled: disabled || currentPage === 1,
+              label: __("First page"),
+              icon: isRTL() ? next : previous,
+              size: "compact"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: buttonVariant,
+              onClick: () => changePage(currentPage - 1),
+              accessibleWhenDisabled: true,
+              disabled: disabled || currentPage === 1,
+              label: __("Previous page"),
+              icon: isRTL() ? chevronRight : chevronLeft,
+              size: "compact"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Text, { variant: "muted", children: sprintf(
+          // translators: 1: Current page number. 2: Total number of pages.
+          _x("%1$d of %2$d", "paging"),
+          currentPage,
+          numPages
+        ) }),
+        /* @__PURE__ */ jsxs(HStack, { expanded: false, spacing: 1, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: buttonVariant,
+              onClick: () => changePage(currentPage + 1),
+              accessibleWhenDisabled: true,
+              disabled: disabled || currentPage === numPages,
+              label: __("Next page"),
+              icon: isRTL() ? chevronLeft : chevronRight,
+              size: "compact"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: buttonVariant,
+              onClick: () => changePage(numPages),
+              accessibleWhenDisabled: true,
+              disabled: disabled || currentPage === numPages,
+              label: __("Last page"),
+              icon: isRTL() ? previous : next,
+              size: "compact"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Pagination as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/pagination/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/pagination/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\tButton,\n} from '@wordpress/components';\nimport { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';\nimport { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';\n\ninterface PaginationProps {\n\tcurrentPage: number;\n\tnumPages: number;\n\tchangePage: ( page: number ) => void;\n\ttotalItems: number;\n\tclassName?: string;\n\tdisabled?: boolean;\n\tbuttonVariant?: 'primary' | 'secondary' | 'tertiary';\n\tlabel?: string;\n}\n\nexport default function Pagination( {\n\tcurrentPage,\n\tnumPages,\n\tchangePage,\n\ttotalItems,\n\tclassName,\n\tdisabled = false,\n\tbuttonVariant = 'tertiary',\n\tlabel = __( 'Pagination' ),\n}: PaginationProps ) {\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tas=\"nav\"\n\t\t\taria-label={ label }\n\t\t\tspacing={ 3 }\n\t\t\tjustify=\"flex-start\"\n\t\t\tclassName={ clsx( 'global-styles-ui-pagination', className ) }\n\t\t>\n\t\t\t<Text\n\t\t\t\tvariant=\"muted\"\n\t\t\t\tclassName=\"global-styles-ui-pagination__total\"\n\t\t\t>\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: %d: Total number of patterns.\n\t\t\t\t\t_n( '%d item', '%d items', totalItems ),\n\t\t\t\t\ttotalItems\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'First page' ) }\n\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage - 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === 1 }\n\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t\t<Text variant=\"muted\">\n\t\t\t\t{ sprintf(\n\t\t\t\t\t// translators: 1: Current page number. 2: Total number of pages.\n\t\t\t\t\t_x( '%1$d of %2$d', 'paging' ),\n\t\t\t\t\tcurrentPage,\n\t\t\t\t\tnumPages\n\t\t\t\t) }\n\t\t\t</Text>\n\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( currentPage + 1 ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\ticon={ isRTL() ? chevronLeft : chevronRight }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tvariant={ buttonVariant }\n\t\t\t\t\tonClick={ () => changePage( numPages ) }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tdisabled={ disabled || currentPage === numPages }\n\t\t\t\t\tlabel={ __( 'Last page' ) }\n\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\tsize=\"compact\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n"],
+  "mappings": "AA8CG,cAUA,YAVA;AA3CH,OAAO,UAAU;AAKjB;AAAA,EACC,wBAAwB;AAAA,EACxB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,IAAI,IAAI,IAAI,SAAS,aAAa;AAC3C,SAAS,UAAU,aAAa,cAAc,YAAY;AAa3C,SAAR,WAA6B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,QAAQ,GAAI,YAAa;AAC1B,GAAqB;AACpB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW;AAAA,MACX,IAAG;AAAA,MACH,cAAa;AAAA,MACb,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,WAAY,KAAM,+BAA+B,SAAU;AAAA,MAE3D;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,SAAQ;AAAA,YACR,WAAU;AAAA,YAER;AAAA;AAAA,cAED,GAAI,WAAW,YAAY,UAAW;AAAA,cACtC;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,CAAE;AAAA,cAC9B,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,YAAa;AAAA,cACzB,MAAO,MAAM,IAAI,OAAO;AAAA,cACxB,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,eAAgB;AAAA,cAC5B,MAAO,MAAM,IAAI,eAAe;AAAA,cAChC,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA,QACA,oBAAC,QAAK,SAAQ,SACX;AAAA;AAAA,UAED,GAAI,gBAAgB,QAAS;AAAA,UAC7B;AAAA,UACA;AAAA,QACD,GACD;AAAA,QACA,qBAAC,UAAO,UAAW,OAAQ,SAAU,GACpC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,cAAc,CAAE;AAAA,cAC5C,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,cAAc;AAAA,cAC/B,MAAK;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAU,MAAM,WAAY,QAAS;AAAA,cACrC,wBAAsB;AAAA,cACtB,UAAW,YAAY,gBAAgB;AAAA,cACvC,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,WAAW;AAAA,cAC5B,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}

package/build-module/palette.js

@@ -0,0 +1,70 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  __experimentalItemGroup as ItemGroup,
+  FlexItem,
+  __experimentalHStack as HStack,
+  __experimentalZStack as ZStack,
+  __experimentalVStack as VStack,
+  ColorIndicator
+} from "@wordpress/components";
+import { isRTL, __ } from "@wordpress/i18n";
+import { Icon, chevronLeft, chevronRight } from "@wordpress/icons";
+import { useMemo } from "@wordpress/element";
+import { Subtitle } from "./subtitle";
+import { NavigationButtonAsItem } from "./navigation-button";
+import ColorIndicatorWrapper from "./color-indicator-wrapper";
+import { useSetting } from "./hooks";
+const EMPTY_COLORS = [];
+function Palette({ name }) {
+  const [customColors] = useSetting("color.palette.custom");
+  const [themeColors] = useSetting("color.palette.theme");
+  const [defaultColors] = useSetting("color.palette.default");
+  const [defaultPaletteEnabled] = useSetting(
+    "color.defaultPalette",
+    name
+  );
+  const safeCustomColors = customColors || EMPTY_COLORS;
+  const safeThemeColors = themeColors || EMPTY_COLORS;
+  const safeDefaultColors = defaultColors || EMPTY_COLORS;
+  const safeDefaultPaletteEnabled = defaultPaletteEnabled ?? true;
+  const colors = useMemo(
+    () => [
+      ...safeCustomColors,
+      ...safeThemeColors,
+      ...safeDefaultColors && safeDefaultPaletteEnabled ? safeDefaultColors : EMPTY_COLORS
+    ],
+    [
+      safeCustomColors,
+      safeThemeColors,
+      safeDefaultColors,
+      safeDefaultPaletteEnabled
+    ]
+  );
+  const screenPath = !name ? "/colors/palette" : "/blocks/" + encodeURIComponent(name) + "/colors/palette";
+  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, children: /* @__PURE__ */ jsxs(HStack, { direction: "row", children: [
+      colors.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__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(FlexItem, { isBlock: true, children: __("Edit palette") })
+      ] }) : /* @__PURE__ */ jsx(FlexItem, { children: __("Add colors") }),
+      /* @__PURE__ */ jsx(Icon, { icon: isRTL() ? chevronLeft : chevronRight })
+    ] }) }) })
+  ] });
+}
+var palette_default = Palette;
+export {
+  palette_default as default
+};
+//# sourceMappingURL=palette.js.map

package/build-module/palette.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/palette.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport type { Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { useSetting } from './hooks';\n\nconst EMPTY_COLORS: Color[] = [];\n\ninterface PaletteProps {\n\tname?: string;\n}\n\nfunction Palette( { name }: PaletteProps ) {\n\tconst [ customColors ] = useSetting< Color[] >( 'color.palette.custom' );\n\tconst [ themeColors ] = useSetting< Color[] >( 'color.palette.theme' );\n\tconst [ defaultColors ] = useSetting< Color[] >( 'color.palette.default' );\n\tconst [ defaultPaletteEnabled ] = useSetting< boolean >(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst safeCustomColors = customColors || EMPTY_COLORS;\n\tconst safeThemeColors = themeColors || EMPTY_COLORS;\n\tconst safeDefaultColors = defaultColors || EMPTY_COLORS;\n\tconst safeDefaultPaletteEnabled = defaultPaletteEnabled ?? true;\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...safeCustomColors,\n\t\t\t...safeThemeColors,\n\t\t\t...( safeDefaultColors && safeDefaultPaletteEnabled\n\t\t\t\t? safeDefaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[\n\t\t\tsafeCustomColors,\n\t\t\tsafeThemeColors,\n\t\t\tsafeDefaultColors,\n\t\t\tsafeDefaultPaletteEnabled,\n\t\t]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem path={ screenPath }>\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t{ colors.length > 0 ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolorValue={ color }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t\t\t<FlexItem isBlock>\n\t\t\t\t\t\t\t\t\t{ __( 'Edit palette' ) }\n\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Add colors' ) }</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"],
+  "mappings": "AAkEG,SAKI,UALJ,KAKI,YALJ;AA/DH;AAAA,EACC,2BAA2B;AAAA,EAC3B;AAAA,EACA,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,MAAM,aAAa,oBAAoB;AAChD,SAAS,eAAe;AAMxB,SAAS,gBAAgB;AACzB,SAAS,8BAA8B;AACvC,OAAO,2BAA2B;AAClC,SAAS,kBAAkB;AAE3B,MAAM,eAAwB,CAAC;AAM/B,SAAS,QAAS,EAAE,KAAK,GAAkB;AAC1C,QAAM,CAAE,YAAa,IAAI,WAAuB,sBAAuB;AACvE,QAAM,CAAE,WAAY,IAAI,WAAuB,qBAAsB;AACrE,QAAM,CAAE,aAAc,IAAI,WAAuB,uBAAwB;AACzE,QAAM,CAAE,qBAAsB,IAAI;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,mBAAmB,gBAAgB;AACzC,QAAM,kBAAkB,eAAe;AACvC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,4BAA4B,yBAAyB;AAE3D,QAAM,SAAS;AAAA,IACd,MAAM;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAK,qBAAqB,4BACvB,oBACA;AAAA,IACJ;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,QAAM,aAAa,CAAE,OAClB,oBACA,aAAa,mBAAoB,IAAK,IAAI;AAE7C,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA,wBAAC,YAAS,OAAQ,GAAM,aAAI,SAAU,GAAG;AAAA,IACzC,oBAAC,aAAU,YAAU,MAAC,aAAW,MAChC,8BAAC,0BAAuB,MAAO,YAC9B,+BAAC,UAAO,WAAU,OACf;AAAA,aAAO,SAAS,IACjB,iCACC;AAAA,4BAAC,UAAO,WAAY,OAAQ,QAAS,IAClC,iBACA,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,EAAE,MAAM,GAAG,UAClB;AAAA,UAAC;AAAA;AAAA,YAGA;AAAA,cAAC;AAAA;AAAA,gBACA,YAAa;AAAA;AAAA,YACd;AAAA;AAAA,UAJM,GAAI,KAAM,IAAK,KAAM;AAAA,QAK5B,CACC,GACJ;AAAA,QACA,oBAAC,YAAS,SAAO,MACd,aAAI,cAAe,GACtB;AAAA,SACD,IAEA,oBAAC,YAAW,aAAI,YAAa,GAAG;AAAA,MAEjC,oBAAC,QAAK,MAAO,MAAM,IAAI,cAAc,cAAe;AAAA,OACrD,GACD,GACD;AAAA,KACD;AAEF;AAEA,IAAO,kBAAQ;",
+  "names": []
+}

package/build-module/preset-colors.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { useStylesPreviewColors } from "./preview-hooks";
+function PresetColors() {
+  const { paletteColors } = useStylesPreviewColors();
+  return paletteColors.slice(0, 4).map(({ slug, color }, index) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        flexGrow: 1,
+        height: "100%",
+        background: color
+      }
+    },
+    `${slug}-${index}`
+  ));
+}
+export {
+  PresetColors as default
+};
+//# sourceMappingURL=preset-colors.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preset-colors.tsx"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './preview-hooks';\n\nexport default function PresetColors() {\n\tconst { paletteColors } = useStylesPreviewColors();\n\treturn paletteColors.slice( 0, 4 ).map( ( { slug, color }, index ) => (\n\t\t<div\n\t\t\tkey={ `${ slug }-${ index }` }\n\t\t\tstyle={ {\n\t\t\t\tflexGrow: 1,\n\t\t\t\theight: '100%',\n\t\t\t\tbackground: color,\n\t\t\t} }\n\t\t/>\n\t) );\n}\n"],
+  "mappings": "AAQE;AALF,SAAS,8BAA8B;AAExB,SAAR,eAAgC;AACtC,QAAM,EAAE,cAAc,IAAI,uBAAuB;AACjD,SAAO,cAAc,MAAO,GAAG,CAAE,EAAE,IAAK,CAAE,EAAE,MAAM,MAAM,GAAG,UAC1D;AAAA,IAAC;AAAA;AAAA,MAEA,OAAQ;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,YAAY;AAAA,MACb;AAAA;AAAA,IALM,GAAI,IAAK,IAAK,KAAM;AAAA,EAM3B,CACC;AACH;",
+  "names": []
+}

package/build-module/preview-colors.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  __experimentalHStack as HStack,
+  __unstableMotion as motion
+} from "@wordpress/components";
+import PresetColors from "./preset-colors";
+import PreviewWrapper from "./preview-wrapper";
+const firstFrameVariants = {
+  start: {
+    scale: 1,
+    opacity: 1
+  },
+  hover: {
+    scale: 0,
+    opacity: 0
+  }
+};
+const StylesPreviewColors = ({
+  label,
+  isFocused,
+  withHoverView
+}) => {
+  return /* @__PURE__ */ jsx(
+    PreviewWrapper,
+    {
+      label,
+      isFocused,
+      withHoverView,
+      children: ({ key }) => /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          variants: firstFrameVariants,
+          style: {
+            height: "100%",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx(
+            HStack,
+            {
+              spacing: 0,
+              justify: "center",
+              style: {
+                height: "100%",
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsx(PresetColors, {})
+            }
+          )
+        },
+        key
+      )
+    }
+  );
+};
+var preview_colors_default = StylesPreviewColors;
+export {
+  preview_colors_default as default
+};
+//# sourceMappingURL=preview-colors.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-colors.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport PresetColors from './preset-colors';\nimport PreviewWrapper from './preview-wrapper';\n\nconst firstFrameVariants = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\ninterface StylesPreviewColorsProps {\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nconst StylesPreviewColors = ( {\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: StylesPreviewColorsProps ) => {\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<PresetColors />\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default StylesPreviewColors;\n"],
+  "mappings": "AA2DM;AAxDN;AAAA,EACC,wBAAwB;AAAA,EACxB,oBAAoB;AAAA,OACd;AAKP,OAAO,kBAAkB;AACzB,OAAO,oBAAoB;AAE3B,MAAM,qBAAqB;AAAA,EAC1B,OAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,EACV;AACD;AAQA,MAAM,sBAAsB,CAAE;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACD,MAAiC;AAChC,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEE,WAAE,EAAE,IAAI,MACT;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UAEA,UAAW;AAAA,UACX,OAAQ;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,UACX;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU;AAAA,cACV,SAAQ;AAAA,cACR,OAAQ;AAAA,gBACP,QAAQ;AAAA,gBACR,UAAU;AAAA,cACX;AAAA,cAEA,8BAAC,gBAAa;AAAA;AAAA,UACf;AAAA;AAAA,QAhBM;AAAA,MAiBP;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,yBAAQ;",
+  "names": []
+}

package/build-module/preview-hooks.js

@@ -0,0 +1,36 @@
+import { useSetting, useStyle } from "./hooks";
+function useStylesPreviewColors() {
+  const [textColor = "black"] = useStyle("color.text");
+  const [backgroundColor = "white"] = useStyle("color.background");
+  const [headingColor = textColor] = useStyle(
+    "elements.h1.color.text"
+  );
+  const [linkColor = headingColor] = useStyle(
+    "elements.link.color.text"
+  );
+  const [buttonBackgroundColor = linkColor] = useStyle(
+    "elements.button.color.background"
+  );
+  const [coreColors] = useSetting("color.palette.core") || [];
+  const [themeColors] = useSetting("color.palette.theme") || [];
+  const [customColors] = useSetting("color.palette.custom") || [];
+  const paletteColors = (themeColors ?? []).concat(customColors ?? []).concat(coreColors ?? []);
+  const textColorObject = paletteColors.filter(
+    ({ color }) => color === textColor
+  );
+  const buttonBackgroundColorObject = paletteColors.filter(
+    ({ color }) => color === buttonBackgroundColor
+  );
+  const highlightedColors = textColorObject.concat(buttonBackgroundColorObject).concat(paletteColors).filter(
+    // we exclude these background color because it is already visible in the preview.
+    ({ color }) => color !== backgroundColor
+  ).slice(0, 2);
+  return {
+    paletteColors,
+    highlightedColors
+  };
+}
+export {
+  useStylesPreviewColors
+};
+//# sourceMappingURL=preview-hooks.js.map

package/build-module/preview-hooks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-hooks.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport type { Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { useSetting, useStyle } from './hooks';\n\nexport function useStylesPreviewColors(): {\n\tpaletteColors: Color[];\n\thighlightedColors: Color[];\n} {\n\tconst [ textColor = 'black' ] = useStyle< string >( 'color.text' );\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ headingColor = textColor ] = useStyle< string >(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ linkColor = headingColor ] = useStyle< string >(\n\t\t'elements.link.color.text'\n\t);\n\tconst [ buttonBackgroundColor = linkColor ] = useStyle< string >(\n\t\t'elements.button.color.background'\n\t);\n\n\tconst [ coreColors ] = useSetting< Color[] >( 'color.palette.core' ) || [];\n\tconst [ themeColors ] =\n\t\tuseSetting< Color[] >( 'color.palette.theme' ) || [];\n\tconst [ customColors ] =\n\t\tuseSetting< Color[] >( 'color.palette.custom' ) || [];\n\n\tconst paletteColors: Color[] = ( 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"],
+  "mappings": "AAQA,SAAS,YAAY,gBAAgB;AAE9B,SAAS,yBAGd;AACD,QAAM,CAAE,YAAY,OAAQ,IAAI,SAAoB,YAAa;AACjE,QAAM,CAAE,kBAAkB,OAAQ,IACjC,SAAoB,kBAAmB;AACxC,QAAM,CAAE,eAAe,SAAU,IAAI;AAAA,IACpC;AAAA,EACD;AACA,QAAM,CAAE,YAAY,YAAa,IAAI;AAAA,IACpC;AAAA,EACD;AACA,QAAM,CAAE,wBAAwB,SAAU,IAAI;AAAA,IAC7C;AAAA,EACD;AAEA,QAAM,CAAE,UAAW,IAAI,WAAuB,oBAAqB,KAAK,CAAC;AACzE,QAAM,CAAE,WAAY,IACnB,WAAuB,qBAAsB,KAAK,CAAC;AACpD,QAAM,CAAE,YAAa,IACpB,WAAuB,sBAAuB,KAAK,CAAC;AAErD,QAAM,iBAA2B,eAAe,CAAC,GAC/C,OAAQ,gBAAgB,CAAC,CAAE,EAC3B,OAAQ,cAAc,CAAC,CAAE;AAE3B,QAAM,kBAAkB,cAAc;AAAA,IACrC,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B;AACA,QAAM,8BAA8B,cAAc;AAAA,IACjD,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B;AAEA,QAAM,oBAAoB,gBACxB,OAAQ,2BAA4B,EACpC,OAAQ,aAAc,EACtB;AAAA;AAAA,IAEA,CAAE,EAAE,MAAM,MAAO,UAAU;AAAA,EAC5B,EACC,MAAO,GAAG,CAAE;AAEd,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;",
+  "names": []
+}