@wordpress/global-styles-ui 1.1.0

package/build/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": "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",
+  "names": ["a11yPlugin", "coreStore"]
+}

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

@@ -0,0 +1,56 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var icon_with_current_color_exports = {};
+__export(icon_with_current_color_exports, {
+  IconWithCurrentColor: () => IconWithCurrentColor
+});
+module.exports = __toCommonJS(icon_with_current_color_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_icons = require("@wordpress/icons");
+function IconWithCurrentColor({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_icons.Icon,
+    {
+      className: (0, import_clsx.default)(
+        className,
+        "global-styles-ui-icon-with-current-color"
+      ),
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconWithCurrentColor
+});
+//# sourceMappingURL=icon-with-current-color.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBE;AAnBF,kBAAiB;AAKjB,mBAAqB;AASd,SAAS,qBAAsB;AAAA,EACrC;AAAA,EACA,GAAG;AACJ,GAA+B;AAC9B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY,YAAAA;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
+  "names": ["clsx"]
+}

package/build/index.js

@@ -0,0 +1,51 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  ColorVariations: () => import_color_variations.ColorVariations,
+  GlobalStylesUI: () => import_global_styles_ui.GlobalStylesUI,
+  StyleVariations: () => import_style_variations.StyleVariations,
+  TypographyVariations: () => import_typography_variations.TypographyVariations,
+  useGlobalStylesRevisions: () => import_use_global_styles_revisions.default
+});
+module.exports = __toCommonJS(index_exports);
+var import_global_styles_ui = require("./global-styles-ui");
+var import_style_variations = require("./style-variations");
+var import_color_variations = require("./color-variations");
+var import_typography_variations = require("./typography-variations");
+var import_use_global_styles_revisions = __toESM(require("./screen-revisions/use-global-styles-revisions"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorVariations,
+  GlobalStylesUI,
+  StyleVariations,
+  TypographyVariations,
+  useGlobalStylesRevisions
+});
+//# sourceMappingURL=index.js.map

package/build/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,8BAAgC;AAChC,8BAAgC;AAChC,mCAAqC;AAGrC,yCAAoD;",
+  "names": []
+}

package/build/lock-unlock.js

@@ -0,0 +1,35 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var lock_unlock_exports = {};
+__export(lock_unlock_exports, {
+  lock: () => lock,
+  unlock: () => unlock
+});
+module.exports = __toCommonJS(lock_unlock_exports);
+var import_private_apis = require("@wordpress/private-apis");
+const { lock, unlock } = (0, import_private_apis.__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"
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  lock,
+  unlock
+});
+//# sourceMappingURL=lock-unlock.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAAiE;AAE1D,MAAM,EAAE,MAAM,OAAO,QAC3B;AAAA,EACC;AAAA,EACA;AACD;",
+  "names": []
+}

package/build/navigation-button.js

@@ -0,0 +1,52 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var navigation_button_exports = {};
+__export(navigation_button_exports, {
+  NavigationBackButtonAsItem: () => NavigationBackButtonAsItem,
+  NavigationButtonAsItem: () => NavigationButtonAsItem
+});
+module.exports = __toCommonJS(navigation_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_icon_with_current_color = require("./icon-with-current-color");
+function GenericNavigationButton({
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalItem, { ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "flex-start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_with_current_color.IconWithCurrentColor, { icon, size: 24 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children })
+    ] }),
+    !icon && children
+  ] });
+}
+function NavigationButtonAsItem(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Button, { as: GenericNavigationButton, ...props });
+}
+function NavigationBackButtonAsItem(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.BackButton, { as: GenericNavigationButton, ...props });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavigationBackButtonAsItem,
+  NavigationButtonAsItem
+});
+//# sourceMappingURL=navigation-button.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BI;AA1BJ,wBAKO;AAKP,qCAAqC;AAQrC,SAAS,wBAAyB;AAAA,EACjC;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkC;AACjC,SACC,6CAAC,kBAAAA,oBAAA,EAAO,GAAG,OACR;AAAA,YACD,6CAAC,kBAAAC,sBAAA,EAAO,SAAQ,cACf;AAAA,kDAAC,uDAAqB,MAAc,MAAO,IAAK;AAAA,MAChD,4CAAC,8BAAW,UAAU;AAAA,OACvB;AAAA,IAEC,CAAE,QAAQ;AAAA,KACb;AAEF;AASO,SAAS,uBAAwB,OAA+B;AACtE,SAAO,4CAAC,4BAAU,QAAV,EAAiB,IAAK,yBAA4B,GAAG,OAAQ;AACtE;AAEO,SAAS,2BAA4B,OAA+B;AAC1E,SAAO,4CAAC,4BAAU,YAAV,EAAqB,IAAK,yBAA4B,GAAG,OAAQ;AAC1E;",
+  "names": ["Item", "HStack"]
+}

package/build/pagination/index.js

@@ -0,0 +1,133 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pagination_exports = {};
+__export(pagination_exports, {
+  default: () => Pagination
+});
+module.exports = __toCommonJS(pagination_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+function Pagination({
+  currentPage,
+  numPages,
+  changePage,
+  totalItems,
+  className,
+  disabled = false,
+  buttonVariant = "tertiary",
+  label = (0, import_i18n.__)("Pagination")
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalHStack,
+    {
+      expanded: false,
+      as: "nav",
+      "aria-label": label,
+      spacing: 3,
+      justify: "flex-start",
+      className: (0, import_clsx.default)("global-styles-ui-pagination", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalText,
+          {
+            variant: "muted",
+            className: "global-styles-ui-pagination__total",
+            children: (0, import_i18n.sprintf)(
+              // translators: %d: Total number of patterns.
+              (0, import_i18n._n)("%d item", "%d items", totalItems),
+              totalItems
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { expanded: false, spacing: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              variant: buttonVariant,
+              onClick: () => changePage(1),
+              accessibleWhenDisabled: true,
+              disabled: disabled || currentPage === 1,
+              label: (0, import_i18n.__)("First page"),
+              icon: (0, import_i18n.isRTL)() ? import_icons.next : import_icons.previous,
+              size: "compact"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              variant: buttonVariant,
+              onClick: () => changePage(currentPage - 1),
+              accessibleWhenDisabled: true,
+              disabled: disabled || currentPage === 1,
+              label: (0, import_i18n.__)("Previous page"),
+              icon: (0, import_i18n.isRTL)() ? import_icons.chevronRight : import_icons.chevronLeft,
+              size: "compact"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { variant: "muted", children: (0, import_i18n.sprintf)(
+          // translators: 1: Current page number. 2: Total number of pages.
+          (0, import_i18n._x)("%1$d of %2$d", "paging"),
+          currentPage,
+          numPages
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { expanded: false, spacing: 1, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              variant: buttonVariant,
+              onClick: () => changePage(currentPage + 1),
+              accessibleWhenDisabled: true,
+              disabled: disabled || currentPage === numPages,
+              label: (0, import_i18n.__)("Next page"),
+              icon: (0, import_i18n.isRTL)() ? import_icons.chevronLeft : import_icons.chevronRight,
+              size: "compact"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.Button,
+            {
+              variant: buttonVariant,
+              onClick: () => changePage(numPages),
+              accessibleWhenDisabled: true,
+              disabled: disabled || currentPage === numPages,
+              label: (0, import_i18n.__)("Last page"),
+              icon: (0, import_i18n.isRTL)() ? import_icons.previous : import_icons.next,
+              size: "compact"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+//# sourceMappingURL=index.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CG;AA3CH,kBAAiB;AAKjB,wBAIO;AACP,kBAA2C;AAC3C,mBAA0D;AAa3C,SAAR,WAA6B;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,YAAQ,gBAAI,YAAa;AAC1B,GAAqB;AACpB,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,UAAW;AAAA,MACX,IAAG;AAAA,MACH,cAAa;AAAA,MACb,SAAU;AAAA,MACV,SAAQ;AAAA,MACR,eAAY,YAAAC,SAAM,+BAA+B,SAAU;AAAA,MAE3D;AAAA;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YACA,SAAQ;AAAA,YACR,WAAU;AAAA,YAER;AAAA;AAAA,kBAED,gBAAI,WAAW,YAAY,UAAW;AAAA,cACtC;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,6CAAC,kBAAAF,sBAAA,EAAO,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,WAAQ,gBAAI,YAAa;AAAA,cACzB,UAAO,mBAAM,IAAI,oBAAO;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,WAAQ,gBAAI,eAAgB;AAAA,cAC5B,UAAO,mBAAM,IAAI,4BAAe;AAAA,cAChC,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA,QACA,4CAAC,kBAAAE,oBAAA,EAAK,SAAQ,SACX;AAAA;AAAA,cAED,gBAAI,gBAAgB,QAAS;AAAA,UAC7B;AAAA,UACA;AAAA,QACD,GACD;AAAA,QACA,6CAAC,kBAAAF,sBAAA,EAAO,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,WAAQ,gBAAI,WAAY;AAAA,cACxB,UAAO,mBAAM,IAAI,2BAAc;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,WAAQ,gBAAI,WAAY;AAAA,cACxB,UAAO,mBAAM,IAAI,wBAAW;AAAA,cAC5B,MAAK;AAAA;AAAA,UACN;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": ["HStack", "clsx", "Text"]
+}

package/build/palette.js

@@ -0,0 +1,93 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var palette_exports = {};
+__export(palette_exports, {
+  default: () => palette_default
+});
+module.exports = __toCommonJS(palette_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_element = require("@wordpress/element");
+var import_subtitle = require("./subtitle");
+var import_navigation_button = require("./navigation-button");
+var import_color_indicator_wrapper = __toESM(require("./color-indicator-wrapper"));
+var import_hooks = require("./hooks");
+const EMPTY_COLORS = [];
+function Palette({ name }) {
+  const [customColors] = (0, import_hooks.useSetting)("color.palette.custom");
+  const [themeColors] = (0, import_hooks.useSetting)("color.palette.theme");
+  const [defaultColors] = (0, import_hooks.useSetting)("color.palette.default");
+  const [defaultPaletteEnabled] = (0, import_hooks.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 = (0, import_element.useMemo)(
+    () => [
+      ...safeCustomColors,
+      ...safeThemeColors,
+      ...safeDefaultColors && safeDefaultPaletteEnabled ? safeDefaultColors : EMPTY_COLORS
+    ],
+    [
+      safeCustomColors,
+      safeThemeColors,
+      safeDefaultColors,
+      safeDefaultPaletteEnabled
+    ]
+  );
+  const screenPath = !name ? "/colors/palette" : "/blocks/" + encodeURIComponent(name) + "/colors/palette";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.Subtitle, { level: 3, children: (0, import_i18n.__)("Palette") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalItemGroup, { isBordered: true, isSeparated: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_button.NavigationButtonAsItem, { path: screenPath, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { direction: "row", children: [
+      colors.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalZStack, { isLayered: false, offset: -8, children: colors.slice(0, 5).map(({ color }, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_color_indicator_wrapper.default,
+          {
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.ColorIndicator,
+              {
+                colorValue: color
+              }
+            )
+          },
+          `${color}-${index}`
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { isBlock: true, children: (0, import_i18n.__)("Edit palette") })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: (0, import_i18n.__)("Add colors") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: (0, import_i18n.isRTL)() ? import_icons.chevronLeft : import_icons.chevronRight })
+    ] }) }) })
+  ] });
+}
+var palette_default = Palette;
+//# sourceMappingURL=palette.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkEG;AA/DH,wBAOO;AACP,kBAA0B;AAC1B,mBAAgD;AAChD,qBAAwB;AAMxB,sBAAyB;AACzB,+BAAuC;AACvC,qCAAkC;AAClC,mBAA2B;AAE3B,MAAM,eAAwB,CAAC;AAM/B,SAAS,QAAS,EAAE,KAAK,GAAkB;AAC1C,QAAM,CAAE,YAAa,QAAI,yBAAuB,sBAAuB;AACvE,QAAM,CAAE,WAAY,QAAI,yBAAuB,qBAAsB;AACrE,QAAM,CAAE,aAAc,QAAI,yBAAuB,uBAAwB;AACzE,QAAM,CAAE,qBAAsB,QAAI;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,mBAAmB,gBAAgB;AACzC,QAAM,kBAAkB,eAAe;AACvC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,4BAA4B,yBAAyB;AAE3D,QAAM,aAAS;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,6CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACjB;AAAA,gDAAC,4BAAS,OAAQ,GAAM,8BAAI,SAAU,GAAG;AAAA,IACzC,4CAAC,kBAAAC,yBAAA,EAAU,YAAU,MAAC,aAAW,MAChC,sDAAC,mDAAuB,MAAO,YAC9B,uDAAC,kBAAAC,sBAAA,EAAO,WAAU,OACf;AAAA,aAAO,SAAS,IACjB,4EACC;AAAA,oDAAC,kBAAAC,sBAAA,EAAO,WAAY,OAAQ,QAAS,IAClC,iBACA,MAAO,GAAG,CAAE,EACZ,IAAK,CAAE,EAAE,MAAM,GAAG,UAClB;AAAA,UAAC,+BAAAC;AAAA,UAAA;AAAA,YAGA;AAAA,cAAC;AAAA;AAAA,gBACA,YAAa;AAAA;AAAA,YACd;AAAA;AAAA,UAJM,GAAI,KAAM,IAAK,KAAM;AAAA,QAK5B,CACC,GACJ;AAAA,QACA,4CAAC,8BAAS,SAAO,MACd,8BAAI,cAAe,GACtB;AAAA,SACD,IAEA,4CAAC,8BAAW,8BAAI,YAAa,GAAG;AAAA,MAEjC,4CAAC,qBAAK,UAAO,mBAAM,IAAI,2BAAc,2BAAe;AAAA,OACrD,GACD,GACD;AAAA,KACD;AAEF;AAEA,IAAO,kBAAQ;",
+  "names": ["VStack", "ItemGroup", "HStack", "ZStack", "ColorIndicatorWrapper"]
+}

package/build/preset-colors.js

@@ -0,0 +1,40 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var preset_colors_exports = {};
+__export(preset_colors_exports, {
+  default: () => PresetColors
+});
+module.exports = __toCommonJS(preset_colors_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_preview_hooks = require("./preview-hooks");
+function PresetColors() {
+  const { paletteColors } = (0, import_preview_hooks.useStylesPreviewColors)();
+  return paletteColors.slice(0, 4).map(({ slug, color }, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        flexGrow: 1,
+        height: "100%",
+        background: color
+      }
+    },
+    `${slug}-${index}`
+  ));
+}
+//# sourceMappingURL=preset-colors.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE;AALF,2BAAuC;AAExB,SAAR,eAAgC;AACtC,QAAM,EAAE,cAAc,QAAI,6CAAuB;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": []
+}