@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.0

package/build-module/color-palette/utils.js

@@ -1,43 +1,21 @@
-/**
- * External dependencies
- */
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-import a11yPlugin from 'colord/plugins/a11y';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-
+import { colord, extend } from "colord";
+import namesPlugin from "colord/plugins/names";
+import a11yPlugin from "colord/plugins/a11y";
+import { __ } from "@wordpress/i18n";
 extend([namesPlugin, a11yPlugin]);
-
-/**
- * Checks if a color value is a simple CSS color.
- *
- * @param value The color value to check.
- * @return A boolean indicating whether the color value is a simple CSS color.
- */
-const isSimpleCSSColor = value => {
-  const valueIsCssVariable = /var\(/.test(value !== null && value !== void 0 ? value : '');
-  const valueIsColorMix = /color-mix\(/.test(value !== null && value !== void 0 ? value : '');
+const isSimpleCSSColor = (value) => {
+  const valueIsCssVariable = /var\(/.test(value !== null && value !== void 0 ? value : "");
+  const valueIsColorMix = /color-mix\(/.test(value !== null && value !== void 0 ? value : "");
   return !valueIsCssVariable && !valueIsColorMix;
 };
-export const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {
+const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {
   if (!currentValue) {
-    return '';
+    return "";
   }
   const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false;
   const normalizedCurrentValue = currentValueIsSimpleColor ? colord(currentValue).toHex() : currentValue;
-
-  // Normalize format of `colors` to simplify the following loop
-
   const colorPalettes = showMultiplePalettes ? colors : [{
-    colors: colors
+    colors
   }];
   for (const {
     colors: paletteColors
@@ -52,26 +30,13 @@ export const extractColorNameFromCurrentValue = (currentValue, colors = [], show
       }
     }
   }
-
-  // translators: shown when the user has picked a custom color (i.e not in the palette of colors).
-  return __('Custom');
+  return __("Custom");
 };
-
-// The PaletteObject type has a `colors` property (an array of ColorObject),
-// while the ColorObject type has a `color` property (the CSS color value).
-export const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);
-export const isMultiplePaletteArray = arr => {
-  return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));
+const isMultiplePaletteObject = (obj) => Array.isArray(obj.colors) && !("color" in obj);
+const isMultiplePaletteArray = (arr) => {
+  return arr.length > 0 && arr.every((colorObj) => isMultiplePaletteObject(colorObj));
 };
-
-/**
- * Transform a CSS variable used as background color into the color value itself.
- *
- * @param value   The color value that may be a CSS variable.
- * @param element The element for which to get the computed style.
- * @return The background color value computed from a element.
- */
-export const normalizeColorValue = (value, element) => {
+const normalizeColorValue = (value, element) => {
   if (!value || !element || isSimpleCSSColor(value)) {
     return value;
   }
@@ -84,4 +49,10 @@ export const normalizeColorValue = (value, element) => {
   const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;
   return computedBackgroundColor ? colord(computedBackgroundColor).toHex() : value;
 };
-//# sourceMappingURL=utils.js.map
+export {
+  extractColorNameFromCurrentValue,
+  isMultiplePaletteArray,
+  isMultiplePaletteObject,
+  normalizeColorValue
+};
+//# sourceMappingURL=utils.js.map

package/build-module/color-palette/utils.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["colord","extend","namesPlugin","a11yPlugin","__","isSimpleCSSColor","value","valueIsCssVariable","test","valueIsColorMix","extractColorNameFromCurrentValue","currentValue","colors","showMultiplePalettes","currentValueIsSimpleColor","normalizedCurrentValue","toHex","colorPalettes","paletteColors","name","colorName","color","colorValue","normalizedColorValue","isMultiplePaletteObject","obj","Array","isArray","isMultiplePaletteArray","arr","length","every","colorObj","normalizeColorValue","element","ownerDocument","defaultView","computedBackgroundColor","getComputedStyle","backgroundColor"],"sources":["@wordpress/components/src/color-palette/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { ColorObject, ColorPaletteProps, PaletteObject } from './types';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * Checks if a color value is a simple CSS color.\n *\n * @param value The color value to check.\n * @return A boolean indicating whether the color value is a simple CSS color.\n */\nconst isSimpleCSSColor = ( value: string ): boolean => {\n\tconst valueIsCssVariable = /var\\(/.test( value ?? '' );\n\tconst valueIsColorMix = /color-mix\\(/.test( value ?? '' );\n\treturn ! valueIsCssVariable && ! valueIsColorMix;\n};\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue?: ColorPaletteProps[ 'value' ],\n\tcolors: ColorPaletteProps[ 'colors' ] = [],\n\tshowMultiplePalettes: boolean = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\tconst currentValueIsSimpleColor = currentValue\n\t\t? isSimpleCSSColor( currentValue )\n\t\t: false;\n\tconst normalizedCurrentValue = currentValueIsSimpleColor\n\t\t? colord( currentValue ).toHex()\n\t\t: currentValue;\n\n\t// Normalize format of `colors` to simplify the following loop\n\ttype normalizedPaletteObject = { colors: ColorObject[] };\n\tconst colorPalettes: normalizedPaletteObject[] = showMultiplePalettes\n\t\t? ( colors as PaletteObject[] )\n\t\t: [ { colors: colors as ColorObject[] } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsSimpleColor\n\t\t\t\t? colord( colorValue ).toHex()\n\t\t\t\t: colorValue;\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = (\n\tobj: PaletteObject | ColorObject\n): obj is PaletteObject =>\n\tArray.isArray( ( obj as PaletteObject ).colors ) && ! ( 'color' in obj );\n\nexport const isMultiplePaletteArray = (\n\tarr: ( PaletteObject | ColorObject )[]\n): arr is PaletteObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( colorObj ) => isMultiplePaletteObject( colorObj ) )\n\t);\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (\n\tvalue: string | undefined,\n\telement: HTMLElement | null\n) => {\n\tif ( ! value || ! element || isSimpleCSSColor( value ) ) {\n\t\treturn value;\n\t}\n\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst computedBackgroundColor =\n\t\tdefaultView?.getComputedStyle( element ).backgroundColor;\n\n\treturn computedBackgroundColor\n\t\t? colord( computedBackgroundColor ).toHex()\n\t\t: value;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;AAC9C,OAAOC,UAAU,MAAM,qBAAqB;;AAE5C;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;;AAGAH,MAAM,CAAE,CAAEC,WAAW,EAAEC,UAAU,CAAG,CAAC;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,gBAAgB,GAAKC,KAAa,IAAe;EACtD,MAAMC,kBAAkB,GAAG,OAAO,CAACC,IAAI,CAAEF,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAG,CAAC;EACtD,MAAMG,eAAe,GAAG,aAAa,CAACD,IAAI,CAAEF,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAG,CAAC;EACzD,OAAO,CAAEC,kBAAkB,IAAI,CAAEE,eAAe;AACjD,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGA,CAC/CC,YAA2C,EAC3CC,MAAqC,GAAG,EAAE,EAC1CC,oBAA6B,GAAG,KAAK,KACjC;EACJ,IAAK,CAAEF,YAAY,EAAG;IACrB,OAAO,EAAE;EACV;EACA,MAAMG,yBAAyB,GAAGH,YAAY,GAC3CN,gBAAgB,CAAEM,YAAa,CAAC,GAChC,KAAK;EACR,MAAMI,sBAAsB,GAAGD,yBAAyB,GACrDd,MAAM,CAAEW,YAAa,CAAC,CAACK,KAAK,CAAC,CAAC,GAC9BL,YAAY;;EAEf;;EAEA,MAAMM,aAAwC,GAAGJ,oBAAoB,GAChED,MAAM,GACR,CAAE;IAAEA,MAAM,EAAEA;EAAwB,CAAC,CAAE;EAC1C,KAAM,MAAM;IAAEA,MAAM,EAAEM;EAAc,CAAC,IAAID,aAAa,EAAG;IACxD,KAAM,MAAM;MAAEE,IAAI,EAAEC,SAAS;MAAEC,KAAK,EAAEC;IAAW,CAAC,IAAIJ,aAAa,EAAG;MACrE,MAAMK,oBAAoB,GAAGT,yBAAyB,GACnDd,MAAM,CAAEsB,UAAW,CAAC,CAACN,KAAK,CAAC,CAAC,GAC5BM,UAAU;MAEb,IAAKP,sBAAsB,KAAKQ,oBAAoB,EAAG;QACtD,OAAOH,SAAS;MACjB;IACD;EACD;;EAEA;EACA,OAAOhB,EAAE,CAAE,QAAS,CAAC;AACtB,CAAC;;AAED;AACA;AACA,OAAO,MAAMoB,uBAAuB,GACnCC,GAAgC,IAEhCC,KAAK,CAACC,OAAO,CAAIF,GAAG,CAAoBb,MAAO,CAAC,IAAI,EAAI,OAAO,IAAIa,GAAG,CAAE;AAEzE,OAAO,MAAMG,sBAAsB,GAClCC,GAAsC,IACV;EAC5B,OACCA,GAAG,CAACC,MAAM,GAAG,CAAC,IACdD,GAAG,CAACE,KAAK,CAAIC,QAAQ,IAAMR,uBAAuB,CAAEQ,QAAS,CAAE,CAAC;AAElE,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,mBAAmB,GAAGA,CAClC3B,KAAyB,EACzB4B,OAA2B,KACvB;EACJ,IAAK,CAAE5B,KAAK,IAAI,CAAE4B,OAAO,IAAI7B,gBAAgB,CAAEC,KAAM,CAAC,EAAG;IACxD,OAAOA,KAAK;EACb;EAEA,MAAM;IAAE6B;EAAc,CAAC,GAAGD,OAAO;EACjC,MAAM;IAAEE;EAAY,CAAC,GAAGD,aAAa;EACrC,MAAME,uBAAuB,GAC5BD,WAAW,EAAEE,gBAAgB,CAAEJ,OAAQ,CAAC,CAACK,eAAe;EAEzD,OAAOF,uBAAuB,GAC3BrC,MAAM,CAAEqC,uBAAwB,CAAC,CAACrB,KAAK,CAAC,CAAC,GACzCV,KAAK;AACT,CAAC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/color-palette/utils.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\n\nextend([namesPlugin, a11yPlugin]);\n\n/**\n * Checks if a color value is a simple CSS color.\n *\n * @param value The color value to check.\n * @return A boolean indicating whether the color value is a simple CSS color.\n */\nconst isSimpleCSSColor = value => {\n  const valueIsCssVariable = /var\\(/.test(value !== null && value !== void 0 ? value : '');\n  const valueIsColorMix = /color-mix\\(/.test(value !== null && value !== void 0 ? value : '');\n  return !valueIsCssVariable && !valueIsColorMix;\n};\nexport const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {\n  if (!currentValue) {\n    return '';\n  }\n  const currentValueIsSimpleColor = currentValue ? isSimpleCSSColor(currentValue) : false;\n  const normalizedCurrentValue = currentValueIsSimpleColor ? colord(currentValue).toHex() : currentValue;\n\n  // Normalize format of `colors` to simplify the following loop\n\n  const colorPalettes = showMultiplePalettes ? colors : [{\n    colors: colors\n  }];\n  for (const {\n    colors: paletteColors\n  } of colorPalettes) {\n    for (const {\n      name: colorName,\n      color: colorValue\n    } of paletteColors) {\n      const normalizedColorValue = currentValueIsSimpleColor ? colord(colorValue).toHex() : colorValue;\n      if (normalizedCurrentValue === normalizedColorValue) {\n        return colorName;\n      }\n    }\n  }\n\n  // translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n  return __('Custom');\n};\n\n// The PaletteObject type has a `colors` property (an array of ColorObject),\n// while the ColorObject type has a `color` property (the CSS color value).\nexport const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);\nexport const isMultiplePaletteArray = arr => {\n  return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));\n};\n\n/**\n * Transform a CSS variable used as background color into the color value itself.\n *\n * @param value   The color value that may be a CSS variable.\n * @param element The element for which to get the computed style.\n * @return The background color value computed from a element.\n */\nexport const normalizeColorValue = (value, element) => {\n  if (!value || !element || isSimpleCSSColor(value)) {\n    return value;\n  }\n  const {\n    ownerDocument\n  } = element;\n  const {\n    defaultView\n  } = ownerDocument;\n  const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;\n  return computedBackgroundColor ? colord(computedBackgroundColor).toHex() : value;\n};"],
+  "mappings": "AAGA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AACxB,OAAO,gBAAgB;AAKvB,SAAS,UAAU;AAMnB,OAAO,CAAC,aAAa,UAAU,CAAC;AAQhC,MAAM,mBAAmB,WAAS;AAChC,QAAM,qBAAqB,QAAQ,KAAK,UAAU,QAAQ,UAAU,SAAS,QAAQ,EAAE;AACvF,QAAM,kBAAkB,cAAc,KAAK,UAAU,QAAQ,UAAU,SAAS,QAAQ,EAAE;AAC1F,SAAO,CAAC,sBAAsB,CAAC;AACjC;AACO,MAAM,mCAAmC,CAAC,cAAc,SAAS,CAAC,GAAG,uBAAuB,UAAU;AAC3G,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AACA,QAAM,4BAA4B,eAAe,iBAAiB,YAAY,IAAI;AAClF,QAAM,yBAAyB,4BAA4B,OAAO,YAAY,EAAE,MAAM,IAAI;AAI1F,QAAM,gBAAgB,uBAAuB,SAAS,CAAC;AAAA,IACrD;AAAA,EACF,CAAC;AACD,aAAW;AAAA,IACT,QAAQ;AAAA,EACV,KAAK,eAAe;AAClB,eAAW;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,IACT,KAAK,eAAe;AAClB,YAAM,uBAAuB,4BAA4B,OAAO,UAAU,EAAE,MAAM,IAAI;AACtF,UAAI,2BAA2B,sBAAsB;AACnD,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAGA,SAAO,GAAG,QAAQ;AACpB;AAIO,MAAM,0BAA0B,SAAO,MAAM,QAAQ,IAAI,MAAM,KAAK,EAAE,WAAW;AACjF,MAAM,yBAAyB,SAAO;AAC3C,SAAO,IAAI,SAAS,KAAK,IAAI,MAAM,cAAY,wBAAwB,QAAQ,CAAC;AAClF;AASO,MAAM,sBAAsB,CAAC,OAAO,YAAY;AACrD,MAAI,CAAC,SAAS,CAAC,WAAW,iBAAiB,KAAK,GAAG;AACjD,WAAO;AAAA,EACT;AACA,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,EACF,IAAI;AACJ,QAAM,0BAA0B,aAAa,iBAAiB,OAAO,EAAE;AACvE,SAAO,0BAA0B,OAAO,uBAAuB,EAAE,MAAM,IAAI;AAC7E;",
+  "names": []
+}

package/build-module/color-picker/color-copy-button.js

@@ -1,18 +1,11 @@
-/**
- * WordPress dependencies
- */
-import { useCopyToClipboard } from '@wordpress/compose';
-import { useState, useEffect, useRef } from '@wordpress/element';
-import { copy, check } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { Button } from '../button';
-import Tooltip from '../tooltip';
+import { useCopyToClipboard } from "@wordpress/compose";
+import { useState, useEffect, useRef } from "@wordpress/element";
+import { copy, check } from "@wordpress/icons";
+import { __ } from "@wordpress/i18n";
+import { Button } from "../button";
+import Tooltip from "../tooltip";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ColorCopyButton = props => {
+const ColorCopyButton = (props) => {
   const {
     color,
     colorType
@@ -21,19 +14,16 @@ export const ColorCopyButton = props => {
   const copyTimerRef = useRef();
   const copyRef = useCopyToClipboard(() => {
     switch (colorType) {
-      case 'hsl':
-        {
-          return color.toHslString();
-        }
-      case 'rgb':
-        {
-          return color.toRgbString();
-        }
+      case "hsl": {
+        return color.toHslString();
+      }
+      case "rgb": {
+        return color.toRgbString();
+      }
       default:
-      case 'hex':
-        {
-          return color.toHex();
-        }
+      case "hex": {
+        return color.toHex();
+      }
     }
   }, () => {
     if (copyTimerRef.current) {
@@ -42,11 +32,10 @@ export const ColorCopyButton = props => {
     setCopiedColor(color.toHex());
     copyTimerRef.current = setTimeout(() => {
       setCopiedColor(null);
-      copyTimerRef.current = undefined;
-    }, 3000);
+      copyTimerRef.current = void 0;
+    }, 3e3);
   });
   useEffect(() => {
-    // Clear copyTimerRef on component unmount.
     return () => {
       if (copyTimerRef.current) {
         clearTimeout(copyTimerRef.current);
@@ -54,12 +43,12 @@ export const ColorCopyButton = props => {
     };
   }, []);
   const isCopied = copiedColor === color.toHex();
-  const label = isCopied ? __('Copied!') : __('Copy');
-  return /*#__PURE__*/_jsx(Tooltip, {
+  const label = isCopied ? __("Copied!") : __("Copy");
+  return /* @__PURE__ */ _jsx(Tooltip, {
     delay: 0,
     hideOnClick: false,
     text: label,
-    children: /*#__PURE__*/_jsx(Button, {
+    children: /* @__PURE__ */ _jsx(Button, {
       size: "compact",
       "aria-label": label,
       ref: copyRef,
@@ -68,4 +57,7 @@ export const ColorCopyButton = props => {
     })
   });
 };
-//# sourceMappingURL=color-copy-button.js.map
+export {
+  ColorCopyButton
+};
+//# sourceMappingURL=color-copy-button.js.map

package/build-module/color-picker/color-copy-button.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useCopyToClipboard","useState","useEffect","useRef","copy","check","__","Button","Tooltip","jsx","_jsx","ColorCopyButton","props","color","colorType","copiedColor","setCopiedColor","copyTimerRef","copyRef","toHslString","toRgbString","toHex","current","clearTimeout","setTimeout","undefined","isCopied","label","delay","hideOnClick","text","children","size","ref","icon","showTooltip"],"sources":["@wordpress/components/src/color-picker/color-copy-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy, check } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport Tooltip from '../tooltip';\n\nimport type { ColorCopyButtonProps } from './types';\n\nexport const ColorCopyButton = ( props: ColorCopyButtonProps ) => {\n\tconst { color, colorType } = props;\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimerRef = useRef<\n\t\tReturnType< typeof setTimeout > | undefined\n\t>();\n\tconst copyRef = useCopyToClipboard< HTMLDivElement >(\n\t\t() => {\n\t\t\tswitch ( colorType ) {\n\t\t\t\tcase 'hsl': {\n\t\t\t\t\treturn color.toHslString();\n\t\t\t\t}\n\t\t\t\tcase 'rgb': {\n\t\t\t\t\treturn color.toRgbString();\n\t\t\t\t}\n\t\t\t\tdefault:\n\t\t\t\tcase 'hex': {\n\t\t\t\t\treturn color.toHex();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t() => {\n\t\t\tif ( copyTimerRef.current ) {\n\t\t\t\tclearTimeout( copyTimerRef.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimerRef.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimerRef.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// Clear copyTimerRef on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimerRef.current ) {\n\t\t\t\tclearTimeout( copyTimerRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst isCopied = copiedColor === color.toHex();\n\tconst label = isCopied ? __( 'Copied!' ) : __( 'Copy' );\n\n\treturn (\n\t\t<Tooltip delay={ 0 } hideOnClick={ false } text={ label }>\n\t\t\t<Button\n\t\t\t\tsize=\"compact\"\n\t\t\t\taria-label={ label }\n\t\t\t\tref={ copyRef }\n\t\t\t\ticon={ isCopied ? check : copy }\n\t\t\t\tshowTooltip={ false }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,QAAQ,EAAEC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AAChE,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC9C,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,MAAM,QAAQ,WAAW;AAClC,OAAOC,OAAO,MAAM,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIjC,OAAO,MAAMC,eAAe,GAAKC,KAA2B,IAAM;EACjE,MAAM;IAAEC,KAAK;IAAEC;EAAU,CAAC,GAAGF,KAAK;EAClC,MAAM,CAAEG,WAAW,EAAEC,cAAc,CAAE,GAAGf,QAAQ,CAAmB,IAAK,CAAC;EACzE,MAAMgB,YAAY,GAAGd,MAAM,CAEzB,CAAC;EACH,MAAMe,OAAO,GAAGlB,kBAAkB,CACjC,MAAM;IACL,QAASc,SAAS;MACjB,KAAK,KAAK;QAAE;UACX,OAAOD,KAAK,CAACM,WAAW,CAAC,CAAC;QAC3B;MACA,KAAK,KAAK;QAAE;UACX,OAAON,KAAK,CAACO,WAAW,CAAC,CAAC;QAC3B;MACA;MACA,KAAK,KAAK;QAAE;UACX,OAAOP,KAAK,CAACQ,KAAK,CAAC,CAAC;QACrB;IACD;EACD,CAAC,EACD,MAAM;IACL,IAAKJ,YAAY,CAACK,OAAO,EAAG;MAC3BC,YAAY,CAAEN,YAAY,CAACK,OAAQ,CAAC;IACrC;IACAN,cAAc,CAAEH,KAAK,CAACQ,KAAK,CAAC,CAAE,CAAC;IAC/BJ,YAAY,CAACK,OAAO,GAAGE,UAAU,CAAE,MAAM;MACxCR,cAAc,CAAE,IAAK,CAAC;MACtBC,YAAY,CAACK,OAAO,GAAGG,SAAS;IACjC,CAAC,EAAE,IAAK,CAAC;EACV,CACD,CAAC;EACDvB,SAAS,CAAE,MAAM;IAChB;IACA,OAAO,MAAM;MACZ,IAAKe,YAAY,CAACK,OAAO,EAAG;QAC3BC,YAAY,CAAEN,YAAY,CAACK,OAAQ,CAAC;MACrC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMI,QAAQ,GAAGX,WAAW,KAAKF,KAAK,CAACQ,KAAK,CAAC,CAAC;EAC9C,MAAMM,KAAK,GAAGD,QAAQ,GAAGpB,EAAE,CAAE,SAAU,CAAC,GAAGA,EAAE,CAAE,MAAO,CAAC;EAEvD,oBACCI,IAAA,CAACF,OAAO;IAACoB,KAAK,EAAG,CAAG;IAACC,WAAW,EAAG,KAAO;IAACC,IAAI,EAAGH,KAAO;IAAAI,QAAA,eACxDrB,IAAA,CAACH,MAAM;MACNyB,IAAI,EAAC,SAAS;MACd,cAAaL,KAAO;MACpBM,GAAG,EAAGf,OAAS;MACfgB,IAAI,EAAGR,QAAQ,GAAGrB,KAAK,GAAGD,IAAM;MAChC+B,WAAW,EAAG;IAAO,CACrB;EAAC,CACM,CAAC;AAEZ,CAAC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/color-picker/color-copy-button.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { copy, check } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../button';\nimport Tooltip from '../tooltip';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorCopyButton = props => {\n  const {\n    color,\n    colorType\n  } = props;\n  const [copiedColor, setCopiedColor] = useState(null);\n  const copyTimerRef = useRef();\n  const copyRef = useCopyToClipboard(() => {\n    switch (colorType) {\n      case 'hsl':\n        {\n          return color.toHslString();\n        }\n      case 'rgb':\n        {\n          return color.toRgbString();\n        }\n      default:\n      case 'hex':\n        {\n          return color.toHex();\n        }\n    }\n  }, () => {\n    if (copyTimerRef.current) {\n      clearTimeout(copyTimerRef.current);\n    }\n    setCopiedColor(color.toHex());\n    copyTimerRef.current = setTimeout(() => {\n      setCopiedColor(null);\n      copyTimerRef.current = undefined;\n    }, 3000);\n  });\n  useEffect(() => {\n    // Clear copyTimerRef on component unmount.\n    return () => {\n      if (copyTimerRef.current) {\n        clearTimeout(copyTimerRef.current);\n      }\n    };\n  }, []);\n  const isCopied = copiedColor === color.toHex();\n  const label = isCopied ? __('Copied!') : __('Copy');\n  return /*#__PURE__*/_jsx(Tooltip, {\n    delay: 0,\n    hideOnClick: false,\n    text: label,\n    children: /*#__PURE__*/_jsx(Button, {\n      size: \"compact\",\n      \"aria-label\": label,\n      ref: copyRef,\n      icon: isCopied ? check : copy,\n      showTooltip: false\n    })\n  });\n};"],
+  "mappings": "AAGA,SAAS,0BAA0B;AACnC,SAAS,UAAU,WAAW,cAAc;AAC5C,SAAS,MAAM,aAAa;AAC5B,SAAS,UAAU;AAKnB,SAAS,cAAc;AACvB,OAAO,aAAa;AACpB,SAAS,OAAO,YAAY;AACrB,MAAM,kBAAkB,WAAS;AACtC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,eAAe,OAAO;AAC5B,QAAM,UAAU,mBAAmB,MAAM;AACvC,YAAQ,WAAW;AAAA,MACjB,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF,KAAK,OACH;AACE,eAAO,MAAM,YAAY;AAAA,MAC3B;AAAA,MACF;AAAA,MACA,KAAK,OACH;AACE,eAAO,MAAM,MAAM;AAAA,MACrB;AAAA,IACJ;AAAA,EACF,GAAG,MAAM;AACP,QAAI,aAAa,SAAS;AACxB,mBAAa,aAAa,OAAO;AAAA,IACnC;AACA,mBAAe,MAAM,MAAM,CAAC;AAC5B,iBAAa,UAAU,WAAW,MAAM;AACtC,qBAAe,IAAI;AACnB,mBAAa,UAAU;AAAA,IACzB,GAAG,GAAI;AAAA,EACT,CAAC;AACD,YAAU,MAAM;AAEd,WAAO,MAAM;AACX,UAAI,aAAa,SAAS;AACxB,qBAAa,aAAa,OAAO;AAAA,MACnC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,WAAW,gBAAgB,MAAM,MAAM;AAC7C,QAAM,QAAQ,WAAW,GAAG,SAAS,IAAI,GAAG,MAAM;AAClD,SAAoB,qBAAK,SAAS;AAAA,IAChC,OAAO;AAAA,IACP,aAAa;AAAA,IACb,MAAM;AAAA,IACN,UAAuB,qBAAK,QAAQ;AAAA,MAClC,MAAM;AAAA,MACN,cAAc;AAAA,MACd,KAAK;AAAA,MACL,MAAM,WAAW,QAAQ;AAAA,MACzB,aAAa;AAAA,IACf,CAAC;AAAA,EACH,CAAC;AACH;",
+  "names": []
+}

package/build-module/color-picker/color-input.js

@@ -1,11 +1,8 @@
-/**
- * Internal dependencies
- */
-import { RgbInput } from './rgb-input';
-import { HslInput } from './hsl-input';
-import { HexInput } from './hex-input';
+import { RgbInput } from "./rgb-input";
+import { HslInput } from "./hsl-input";
+import { HexInput } from "./hex-input";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const ColorInput = ({
+const ColorInput = ({
   colorType,
   color,
   onChange,
@@ -17,19 +14,22 @@ export const ColorInput = ({
     enableAlpha
   };
   switch (colorType) {
-    case 'hsl':
-      return /*#__PURE__*/_jsx(HslInput, {
+    case "hsl":
+      return /* @__PURE__ */ _jsx(HslInput, {
         ...props
       });
-    case 'rgb':
-      return /*#__PURE__*/_jsx(RgbInput, {
+    case "rgb":
+      return /* @__PURE__ */ _jsx(RgbInput, {
         ...props
       });
     default:
-    case 'hex':
-      return /*#__PURE__*/_jsx(HexInput, {
+    case "hex":
+      return /* @__PURE__ */ _jsx(HexInput, {
         ...props
       });
   }
 };
-//# sourceMappingURL=color-input.js.map
+export {
+  ColorInput
+};
+//# sourceMappingURL=color-input.js.map

package/build-module/color-picker/color-input.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["RgbInput","HslInput","HexInput","jsx","_jsx","ColorInput","colorType","color","onChange","enableAlpha","props"],"sources":["@wordpress/components/src/color-picker/color-input.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport type { ColorInputProps } from './types';\n\nexport const ColorInput = ( {\n\tcolorType,\n\tcolor,\n\tonChange,\n\tenableAlpha,\n}: ColorInputProps ) => {\n\tconst props = { color, onChange, enableAlpha };\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn <HslInput { ...props } />;\n\t\tcase 'rgb':\n\t\t\treturn <RgbInput { ...props } />;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn <HexInput { ...props } />;\n\t}\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,aAAa;AACtC,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,QAAQ,QAAQ,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGvC,OAAO,MAAMC,UAAU,GAAGA,CAAE;EAC3BC,SAAS;EACTC,KAAK;EACLC,QAAQ;EACRC;AACgB,CAAC,KAAM;EACvB,MAAMC,KAAK,GAAG;IAAEH,KAAK;IAAEC,QAAQ;IAAEC;EAAY,CAAC;EAC9C,QAASH,SAAS;IACjB,KAAK,KAAK;MACT,oBAAOF,IAAA,CAACH,QAAQ;QAAA,GAAMS;MAAK,CAAI,CAAC;IACjC,KAAK,KAAK;MACT,oBAAON,IAAA,CAACJ,QAAQ;QAAA,GAAMU;MAAK,CAAI,CAAC;IACjC;IACA,KAAK,KAAK;MACT,oBAAON,IAAA,CAACF,QAAQ;QAAA,GAAMQ;MAAK,CAAI,CAAC;EAClC;AACD,CAAC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/color-picker/color-input.tsx"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorInput = ({\n  colorType,\n  color,\n  onChange,\n  enableAlpha\n}) => {\n  const props = {\n    color,\n    onChange,\n    enableAlpha\n  };\n  switch (colorType) {\n    case 'hsl':\n      return /*#__PURE__*/_jsx(HslInput, {\n        ...props\n      });\n    case 'rgb':\n      return /*#__PURE__*/_jsx(RgbInput, {\n        ...props\n      });\n    default:\n    case 'hex':\n      return /*#__PURE__*/_jsx(HexInput, {\n        ...props\n      });\n  }\n};"],
+  "mappings": "AAGA,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,OAAO,YAAY;AACrB,MAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAoB,qBAAK,UAAU;AAAA,QACjC,GAAG;AAAA,MACL,CAAC;AAAA,IACH,KAAK;AACH,aAAoB,qBAAK,UAAU;AAAA,QACjC,GAAG;AAAA,MACL,CAAC;AAAA,IACH;AAAA,IACA,KAAK;AACH,aAAoB,qBAAK,UAAU;AAAA,QACjC,GAAG;AAAA,MACL,CAAC;AAAA,EACL;AACF;",
+  "names": []
+}

package/build-module/color-picker/component.js

@@ -1,98 +1,88 @@
-/**
- * External dependencies
- */
-
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-
-/**
- * WordPress dependencies
- */
-import { useCallback, useState, useMemo } from '@wordpress/element';
-import { useDebounce } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { useContextSystem, contextConnect } from '../context';
-import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';
-import { ColorCopyButton } from './color-copy-button';
-import { ColorInput } from './color-input';
-import { Picker } from './picker';
-import { useControlledValue } from '../utils/hooks';
+import { colord, extend } from "colord";
+import namesPlugin from "colord/plugins/names";
+import { useCallback, useState, useMemo } from "@wordpress/element";
+import { useDebounce } from "@wordpress/compose";
+import { __ } from "@wordpress/i18n";
+import { useContextSystem, contextConnect } from "../context";
+import { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from "./styles";
+import { ColorCopyButton } from "./color-copy-button";
+import { ColorInput } from "./color-input";
+import { Picker } from "./picker";
+import { useControlledValue } from "../utils/hooks";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 extend([namesPlugin]);
 const options = [{
-  label: 'RGB',
-  value: 'rgb'
+  label: "RGB",
+  value: "rgb"
 }, {
-  label: 'HSL',
-  value: 'hsl'
+  label: "HSL",
+  value: "hsl"
 }, {
-  label: 'Hex',
-  value: 'hex'
+  label: "Hex",
+  value: "hex"
 }];
 const UnconnectedColorPicker = (props, forwardedRef) => {
   const {
     enableAlpha = false,
     color: colorProp,
     onChange,
-    defaultValue = '#fff',
+    defaultValue = "#fff",
     copyFormat,
     ...divProps
-  } = useContextSystem(props, 'ColorPicker');
-
-  // Use a safe default value for the color and remove the possibility of `undefined`.
+  } = useContextSystem(props, "ColorPicker");
   const [color, setColor] = useControlledValue({
     onChange,
     value: colorProp,
     defaultValue
   });
   const safeColordColor = useMemo(() => {
-    return colord(color || '');
+    return colord(color || "");
   }, [color]);
   const debouncedSetColor = useDebounce(setColor);
-  const handleChange = useCallback(nextValue => {
+  const handleChange = useCallback((nextValue) => {
     debouncedSetColor(nextValue.toHex());
   }, [debouncedSetColor]);
-  const [colorType, setColorType] = useState(copyFormat || 'hex');
-  return /*#__PURE__*/_jsxs(ColorfulWrapper, {
+  const [colorType, setColorType] = useState(copyFormat || "hex");
+  return /* @__PURE__ */ _jsxs(ColorfulWrapper, {
     ref: forwardedRef,
     ...divProps,
-    children: [/*#__PURE__*/_jsx(Picker, {
+    children: [/* @__PURE__ */ _jsx(Picker, {
       onChange: handleChange,
       color: safeColordColor,
-      enableAlpha: enableAlpha
-    }), /*#__PURE__*/_jsxs(AuxiliaryColorArtefactWrapper, {
-      children: [/*#__PURE__*/_jsxs(AuxiliaryColorArtefactHStackHeader, {
+      enableAlpha
+    }), /* @__PURE__ */ _jsxs(AuxiliaryColorArtefactWrapper, {
+      children: [/* @__PURE__ */ _jsxs(AuxiliaryColorArtefactHStackHeader, {
         justify: "space-between",
-        children: [/*#__PURE__*/_jsx(SelectControl, {
+        children: [/* @__PURE__ */ _jsx(SelectControl, {
           __nextHasNoMarginBottom: true,
           size: "compact",
-          options: options,
+          options,
           value: colorType,
-          onChange: nextColorType => setColorType(nextColorType),
-          label: __('Color format'),
+          onChange: (nextColorType) => setColorType(nextColorType),
+          label: __("Color format"),
           hideLabelFromVision: true,
           variant: "minimal"
-        }), /*#__PURE__*/_jsx(ColorCopyButton, {
+        }), /* @__PURE__ */ _jsx(ColorCopyButton, {
           color: safeColordColor,
           colorType: copyFormat || colorType
         })]
-      }), /*#__PURE__*/_jsx(ColorInputWrapper, {
+      }), /* @__PURE__ */ _jsx(ColorInputWrapper, {
         direction: "column",
         gap: 2,
-        children: /*#__PURE__*/_jsx(ColorInput, {
-          colorType: colorType,
+        children: /* @__PURE__ */ _jsx(ColorInput, {
+          colorType,
           color: safeColordColor,
           onChange: handleChange,
-          enableAlpha: enableAlpha
+          enableAlpha
         })
       })]
     })]
   });
 };
-export const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');
-export default ColorPicker;
-//# sourceMappingURL=component.js.map
+const ColorPicker = contextConnect(UnconnectedColorPicker, "ColorPicker");
+var component_default = ColorPicker;
+export {
+  ColorPicker,
+  component_default as default
+};
+//# sourceMappingURL=component.js.map

package/build-module/color-picker/component.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["colord","extend","namesPlugin","useCallback","useState","useMemo","useDebounce","__","useContextSystem","contextConnect","ColorfulWrapper","SelectControl","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","ColorInputWrapper","ColorCopyButton","ColorInput","Picker","useControlledValue","jsx","_jsx","jsxs","_jsxs","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","ref","children","justify","__nextHasNoMarginBottom","size","nextColorType","hideLabelFromVision","variant","direction","gap","ColorPicker"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/color-picker/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin]);\nconst options = [{\n  label: 'RGB',\n  value: 'rgb'\n}, {\n  label: 'HSL',\n  value: 'hsl'\n}, {\n  label: 'Hex',\n  value: 'hex'\n}];\nconst UnconnectedColorPicker = (props, forwardedRef) => {\n  const {\n    enableAlpha = false,\n    color: colorProp,\n    onChange,\n    defaultValue = '#fff',\n    copyFormat,\n    ...divProps\n  } = useContextSystem(props, 'ColorPicker');\n\n  // Use a safe default value for the color and remove the possibility of `undefined`.\n  const [color, setColor] = useControlledValue({\n    onChange,\n    value: colorProp,\n    defaultValue\n  });\n  const safeColordColor = useMemo(() => {\n    return colord(color || '');\n  }, [color]);\n  const debouncedSetColor = useDebounce(setColor);\n  const handleChange = useCallback(nextValue => {\n    debouncedSetColor(nextValue.toHex());\n  }, [debouncedSetColor]);\n  const [colorType, setColorType] = useState(copyFormat || 'hex');\n  return /*#__PURE__*/_jsxs(ColorfulWrapper, {\n    ref: forwardedRef,\n    ...divProps,\n    children: [/*#__PURE__*/_jsx(Picker, {\n      onChange: handleChange,\n      color: safeColordColor,\n      enableAlpha: enableAlpha\n    }), /*#__PURE__*/_jsxs(AuxiliaryColorArtefactWrapper, {\n      children: [/*#__PURE__*/_jsxs(AuxiliaryColorArtefactHStackHeader, {\n        justify: \"space-between\",\n        children: [/*#__PURE__*/_jsx(SelectControl, {\n          __nextHasNoMarginBottom: true,\n          size: \"compact\",\n          options: options,\n          value: colorType,\n          onChange: nextColorType => setColorType(nextColorType),\n          label: __('Color format'),\n          hideLabelFromVision: true,\n          variant: \"minimal\"\n        }), /*#__PURE__*/_jsx(ColorCopyButton, {\n          color: safeColordColor,\n          colorType: copyFormat || colorType\n        })]\n      }), /*#__PURE__*/_jsx(ColorInputWrapper, {\n        direction: \"column\",\n        gap: 2,\n        children: /*#__PURE__*/_jsx(ColorInput, {\n          colorType: colorType,\n          color: safeColordColor,\n          onChange: handleChange,\n          enableAlpha: enableAlpha\n        })\n      })]\n    })]\n  });\n};\nexport const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');\nexport default ColorPicker;"],
+  "mappings": "AAIA,SAAS,QAAQ,cAAc;AAC/B,OAAO,iBAAiB;AAKxB,SAAS,aAAa,UAAU,eAAe;AAC/C,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAKnB,SAAS,kBAAkB,sBAAsB;AACjD,SAAS,iBAAiB,eAAe,+BAA+B,oCAAoC,yBAAyB;AACrI,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,OAAO,CAAC,WAAW,CAAC;AACpB,MAAM,UAAU,CAAC;AAAA,EACf,OAAO;AAAA,EACP,OAAO;AACT,GAAG;AAAA,EACD,OAAO;AAAA,EACP,OAAO;AACT,GAAG;AAAA,EACD,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AACD,MAAM,yBAAyB,CAAC,OAAO,iBAAiB;AACtD,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,aAAa;AAGzC,QAAM,CAAC,OAAO,QAAQ,IAAI,mBAAmB;AAAA,IAC3C;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACD,QAAM,kBAAkB,QAAQ,MAAM;AACpC,WAAO,OAAO,SAAS,EAAE;AAAA,EAC3B,GAAG,CAAC,KAAK,CAAC;AACV,QAAM,oBAAoB,YAAY,QAAQ;AAC9C,QAAM,eAAe,YAAY,eAAa;AAC5C,sBAAkB,UAAU,MAAM,CAAC;AAAA,EACrC,GAAG,CAAC,iBAAiB,CAAC;AACtB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,cAAc,KAAK;AAC9D,SAAoB,sBAAM,iBAAiB;AAAA,IACzC,KAAK;AAAA,IACL,GAAG;AAAA,IACH,UAAU,CAAc,qBAAK,QAAQ;AAAA,MACnC,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,IACF,CAAC,GAAgB,sBAAM,+BAA+B;AAAA,MACpD,UAAU,CAAc,sBAAM,oCAAoC;AAAA,QAChE,SAAS;AAAA,QACT,UAAU,CAAc,qBAAK,eAAe;AAAA,UAC1C,yBAAyB;AAAA,UACzB,MAAM;AAAA,UACN;AAAA,UACA,OAAO;AAAA,UACP,UAAU,mBAAiB,aAAa,aAAa;AAAA,UACrD,OAAO,GAAG,cAAc;AAAA,UACxB,qBAAqB;AAAA,UACrB,SAAS;AAAA,QACX,CAAC,GAAgB,qBAAK,iBAAiB;AAAA,UACrC,OAAO;AAAA,UACP,WAAW,cAAc;AAAA,QAC3B,CAAC,CAAC;AAAA,MACJ,CAAC,GAAgB,qBAAK,mBAAmB;AAAA,QACvC,WAAW;AAAA,QACX,KAAK;AAAA,QACL,UAAuB,qBAAK,YAAY;AAAA,UACtC;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,QACF,CAAC;AAAA,MACH,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,MAAM,cAAc,eAAe,wBAAwB,aAAa;AAC/E,IAAO,oBAAQ;",
+  "names": []
+}

package/build-module/color-picker/hex-input.js

@@ -1,49 +1,38 @@
-/**
- * External dependencies
- */
-import { colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { InputControl } from '../input-control';
-import { Text } from '../text';
-import { COLORS } from '../utils/colors-values';
-import InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';
+import { colord } from "colord";
+import { __ } from "@wordpress/i18n";
+import { InputControl } from "../input-control";
+import { Text } from "../text";
+import { COLORS } from "../utils/colors-values";
+import InputControlPrefixWrapper from "../input-control/input-prefix-wrapper";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const HexInput = ({
+const HexInput = ({
   color,
   onChange,
   enableAlpha
 }) => {
-  const handleChange = nextValue => {
+  const handleChange = (nextValue) => {
     if (!nextValue) {
       return;
     }
-    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;
+    const hexValue = nextValue.startsWith("#") ? nextValue : "#" + nextValue;
     onChange(colord(hexValue));
   };
   const stateReducer = (state, action) => {
     const nativeEvent = action.payload?.event?.nativeEvent;
-    if ('insertFromPaste' !== nativeEvent?.inputType) {
+    if ("insertFromPaste" !== nativeEvent?.inputType) {
       return {
         ...state
       };
     }
-    const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();
+    const value = state.value?.startsWith("#") ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();
     return {
       ...state,
       value
     };
   };
-  return /*#__PURE__*/_jsx(InputControl, {
-    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {
-      children: /*#__PURE__*/_jsx(Text, {
+  return /* @__PURE__ */ _jsx(InputControl, {
+    prefix: /* @__PURE__ */ _jsx(InputControlPrefixWrapper, {
+      children: /* @__PURE__ */ _jsx(Text, {
         color: COLORS.theme.accent,
         lineHeight: 1,
         children: "#"
@@ -52,11 +41,14 @@ export const HexInput = ({
     value: color.toHex().slice(1).toUpperCase(),
     onChange: handleChange,
     maxLength: enableAlpha ? 9 : 7,
-    label: __('Hex color'),
+    label: __("Hex color"),
     hideLabelFromVision: true,
     size: "__unstable-large",
     __unstableStateReducer: stateReducer,
     __unstableInputWidth: "9em"
   });
 };
-//# sourceMappingURL=hex-input.js.map
+export {
+  HexInput
+};
+//# sourceMappingURL=hex-input.js.map

package/build-module/color-picker/hex-input.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["colord","__","InputControl","Text","COLORS","InputControlPrefixWrapper","jsx","_jsx","HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","prefix","children","theme","accent","lineHeight","toHex","maxLength","label","hideLabelFromVision","size","__unstableStateReducer","__unstableInputWidth"],"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\nimport type { HexInputProps } from './types';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) {\n\t\t\treturn;\n\t\t}\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<InputControl\n\t\t\tprefix={\n\t\t\t\t<InputControlPrefixWrapper>\n\t\t\t\t\t<Text color={ COLORS.theme.accent } lineHeight={ 1 }>\n\t\t\t\t\t\t#\n\t\t\t\t\t</Text>\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t__unstableInputWidth=\"9em\"\n\t\t/>\n\t);\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,QAAQ;;AAE/B;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAG/C,OAAOC,yBAAyB,MAAM,uCAAuC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE9E,OAAO,MAAMC,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAMC,YAAY,GAAKC,SAA6B,IAAM;IACzD,IAAK,CAAEA,SAAS,EAAG;MAClB;IACD;IACA,MAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAU,CAAE,GAAI,CAAC,GACzCF,SAAS,GACT,GAAG,GAAGA,SAAS;IAElBH,QAAQ,CAAEV,MAAM,CAAEc,QAAS,CAAE,CAAC;EAC/B,CAAC;EAED,MAAME,YAA0B,GAAGA,CAAEC,KAAK,EAAEC,MAAM,KAAM;IACvD,MAAMC,WAAW,GAAGD,MAAM,CAACE,OAAO,EAAEC,KAAK,EAAEF,WAAyB;IAEpE,IAAK,iBAAiB,KAAKA,WAAW,EAAEG,SAAS,EAAG;MACnD,OAAO;QAAE,GAAGL;MAAM,CAAC;IACpB;IAEA,MAAMM,KAAK,GAAGN,KAAK,CAACM,KAAK,EAAER,UAAU,CAAE,GAAI,CAAC,GACzCE,KAAK,CAACM,KAAK,CAACC,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAC,GACpCR,KAAK,CAACM,KAAK,EAAEE,WAAW,CAAC,CAAC;IAE7B,OAAO;MAAE,GAAGR,KAAK;MAAEM;IAAM,CAAC;EAC3B,CAAC;EAED,oBACChB,IAAA,CAACL,YAAY;IACZwB,MAAM,eACLnB,IAAA,CAACF,yBAAyB;MAAAsB,QAAA,eACzBpB,IAAA,CAACJ,IAAI;QAACM,KAAK,EAAGL,MAAM,CAACwB,KAAK,CAACC,MAAQ;QAACC,UAAU,EAAG,CAAG;QAAAH,QAAA,EAAC;MAErD,CAAM;IAAC,CACmB,CAC3B;IACDJ,KAAK,EAAGd,KAAK,CAACsB,KAAK,CAAC,CAAC,CAACP,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAG;IAChDf,QAAQ,EAAGE,YAAc;IACzBoB,SAAS,EAAGrB,WAAW,GAAG,CAAC,GAAG,CAAG;IACjCsB,KAAK,EAAGhC,EAAE,CAAE,WAAY,CAAG;IAC3BiC,mBAAmB;IACnBC,IAAI,EAAC,kBAAkB;IACvBC,sBAAsB,EAAGpB,YAAc;IACvCqB,oBAAoB,EAAC;EAAK,CAC1B,CAAC;AAEJ,CAAC","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/color-picker/hex-input.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { COLORS } from '../utils/colors-values';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const HexInput = ({\n  color,\n  onChange,\n  enableAlpha\n}) => {\n  const handleChange = nextValue => {\n    if (!nextValue) {\n      return;\n    }\n    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;\n    onChange(colord(hexValue));\n  };\n  const stateReducer = (state, action) => {\n    const nativeEvent = action.payload?.event?.nativeEvent;\n    if ('insertFromPaste' !== nativeEvent?.inputType) {\n      return {\n        ...state\n      };\n    }\n    const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();\n    return {\n      ...state,\n      value\n    };\n  };\n  return /*#__PURE__*/_jsx(InputControl, {\n    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n      children: /*#__PURE__*/_jsx(Text, {\n        color: COLORS.theme.accent,\n        lineHeight: 1,\n        children: \"#\"\n      })\n    }),\n    value: color.toHex().slice(1).toUpperCase(),\n    onChange: handleChange,\n    maxLength: enableAlpha ? 9 : 7,\n    label: __('Hex color'),\n    hideLabelFromVision: true,\n    size: \"__unstable-large\",\n    __unstableStateReducer: stateReducer,\n    __unstableInputWidth: \"9em\"\n  });\n};"],
+  "mappings": "AAGA,SAAS,cAAc;AAKvB,SAAS,UAAU;AAKnB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,OAAO,+BAA+B;AACtC,SAAS,OAAO,YAAY;AACrB,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,eAAa;AAChC,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AACA,UAAM,WAAW,UAAU,WAAW,GAAG,IAAI,YAAY,MAAM;AAC/D,aAAS,OAAO,QAAQ,CAAC;AAAA,EAC3B;AACA,QAAM,eAAe,CAAC,OAAO,WAAW;AACtC,UAAM,cAAc,OAAO,SAAS,OAAO;AAC3C,QAAI,sBAAsB,aAAa,WAAW;AAChD,aAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,OAAO,WAAW,GAAG,IAAI,MAAM,MAAM,MAAM,CAAC,EAAE,YAAY,IAAI,MAAM,OAAO,YAAY;AAC3G,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACA,SAAoB,qBAAK,cAAc;AAAA,IACrC,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,UAAuB,qBAAK,MAAM;AAAA,QAChC,OAAO,OAAO,MAAM;AAAA,QACpB,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ,CAAC;AAAA,IACH,CAAC;AAAA,IACD,OAAO,MAAM,MAAM,EAAE,MAAM,CAAC,EAAE,YAAY;AAAA,IAC1C,UAAU;AAAA,IACV,WAAW,cAAc,IAAI;AAAA,IAC7B,OAAO,GAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,MAAM;AAAA,IACN,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,EACxB,CAAC;AACH;",
+  "names": []
+}