@wordpress/components 19.1.2 → 19.2.1-next.33ec3857e2.0

package/build-module/checkbox-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/checkbox-control/index.js"],"names":["classnames","useInstanceId","deprecated","Icon","check","BaseControl","CheckboxControl","label","className","heading","checked","help","onChange","props","alternative","plugin","instanceId","id","onChangeValue","event","target","undefined"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,oBAA9B;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AAEA,eAAe,SAASC,eAAT,OAQX;AAAA,MARqC;AACxCC,IAAAA,KADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,OAHwC;AAIxCC,IAAAA,OAJwC;AAKxCC,IAAAA,IALwC;AAMxCC,IAAAA,QANwC;AAOxC,OAAGC;AAPqC,GAQrC;;AACH,MAAKJ,OAAL,EAAe;AACdP,IAAAA,UAAU,CAAE,qCAAF,EAAyC;AAClDY,MAAAA,WAAW,EAAE,2CADqC;AAElDC,MAAAA,MAAM,EAAE;AAF0C,KAAzC,CAAV;AAIA;;AAED,QAAMC,UAAU,GAAGf,aAAa,CAAEK,eAAF,CAAhC;AACA,QAAMW,EAAE,GAAI,8BAA8BD,UAAY,EAAtD;;AACA,QAAME,aAAa,GAAKC,KAAF,IAAaP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaV,OAAf,CAA3C;;AAEA,SACC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGD,OADT;AAEC,IAAA,EAAE,EAAGQ,EAFN;AAGC,IAAA,IAAI,EAAGN,IAHR;AAIC,IAAA,SAAS,EAAGX,UAAU,CAAE,6BAAF,EAAiCQ,SAAjC;AAJvB,KAMC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC;AACC,IAAA,EAAE,EAAGS,EADN;AAEC,IAAA,SAAS,EAAC,oCAFX;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,KAAK,EAAC,GAJP;AAKC,IAAA,QAAQ,EAAGC,aALZ;AAMC,IAAA,OAAO,EAAGR,OANX;AAOC,wBAAmB,CAAC,CAAEC,IAAH,GAAUM,EAAE,GAAG,QAAf,GAA0BI;AAP9C,KAQMR,KARN,EADD,EAWGH,OAAO,GACR,cAAC,IAAD;AACC,IAAA,IAAI,EAAGN,KADR;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADQ,GAML,IAjBL,CAND,EAyBC;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,OAAO,EAAGa;AAFX,KAIGV,KAJH,CAzBD,CADD;AAkCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nexport default function CheckboxControl( {\n\tlabel,\n\tclassName,\n\theading,\n\tchecked,\n\thelp,\n\tonChange,\n\t...props\n} ) {\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tplugin: 'Gutenberg',\n\t\t} );\n\t}\n\n\tconst instanceId = useInstanceId( CheckboxControl );\n\tconst id = `inspector-checkbox-control-${ instanceId }`;\n\tconst onChangeValue = ( event ) => onChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\t{ checked ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t<label\n\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\thtmlFor={ id }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t</BaseControl>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/checkbox-control/index.js"],"names":["classnames","useInstanceId","deprecated","Icon","check","BaseControl","CheckboxControl","label","className","heading","checked","help","onChange","props","alternative","since","instanceId","id","onChangeValue","event","target","undefined"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,oBAA9B;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,iBAAxB;AAEA,eAAe,SAASC,eAAT,OAQX;AAAA,MARqC;AACxCC,IAAAA,KADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,OAHwC;AAIxCC,IAAAA,OAJwC;AAKxCC,IAAAA,IALwC;AAMxCC,IAAAA,QANwC;AAOxC,OAAGC;AAPqC,GAQrC;;AACH,MAAKJ,OAAL,EAAe;AACdP,IAAAA,UAAU,CAAE,qCAAF,EAAyC;AAClDY,MAAAA,WAAW,EAAE,2CADqC;AAElDC,MAAAA,KAAK,EAAE;AAF2C,KAAzC,CAAV;AAIA;;AAED,QAAMC,UAAU,GAAGf,aAAa,CAAEK,eAAF,CAAhC;AACA,QAAMW,EAAE,GAAI,8BAA8BD,UAAY,EAAtD;;AACA,QAAME,aAAa,GAAKC,KAAF,IAAaP,QAAQ,CAAEO,KAAK,CAACC,MAAN,CAAaV,OAAf,CAA3C;;AAEA,SACC,cAAC,WAAD;AACC,IAAA,KAAK,EAAGD,OADT;AAEC,IAAA,EAAE,EAAGQ,EAFN;AAGC,IAAA,IAAI,EAAGN,IAHR;AAIC,IAAA,SAAS,EAAGX,UAAU,CAAE,6BAAF,EAAiCQ,SAAjC;AAJvB,KAMC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACC;AACC,IAAA,EAAE,EAAGS,EADN;AAEC,IAAA,SAAS,EAAC,oCAFX;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,KAAK,EAAC,GAJP;AAKC,IAAA,QAAQ,EAAGC,aALZ;AAMC,IAAA,OAAO,EAAGR,OANX;AAOC,wBAAmB,CAAC,CAAEC,IAAH,GAAUM,EAAE,GAAG,QAAf,GAA0BI;AAP9C,KAQMR,KARN,EADD,EAWGH,OAAO,GACR,cAAC,IAAD;AACC,IAAA,IAAI,EAAGN,KADR;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,IAAA,IAAI,EAAC;AAHN,IADQ,GAML,IAjBL,CAND,EAyBC;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,OAAO,EAAGa;AAFX,KAIGV,KAJH,CAzBD,CADD;AAkCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\n\nexport default function CheckboxControl( {\n\tlabel,\n\tclassName,\n\theading,\n\tchecked,\n\thelp,\n\tonChange,\n\t...props\n} ) {\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst instanceId = useInstanceId( CheckboxControl );\n\tconst id = `inspector-checkbox-control-${ instanceId }`;\n\tconst onChangeValue = ( event ) => onChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t\t{ checked ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t<label\n\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\thtmlFor={ id }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t</BaseControl>\n\t);\n}\n"]}

package/build-module/clipboard-button/index.js

@@ -28,8 +28,7 @@ export default function ClipboardButton(_ref) {
     ...buttonProps
   } = _ref;
   deprecated('wp.components.ClipboardButton', {
-    since: '10.3',
-    plugin: 'Gutenberg',
+    since: '5.8',
     alternative: 'wp.compose.useCopyToClipboard'
   });
   const timeoutId = useRef();

package/build-module/clipboard-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.js"],"names":["classnames","useRef","useEffect","useCopyToClipboard","deprecated","Button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","plugin","alternative","timeoutId","ref","clearTimeout","current","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AAEA,MAAMC,OAAO,GAAG,IAAhB;AAEA,eAAe,SAASC,eAAT,OAOX;AAAA,MAPqC;AACxCC,IAAAA,SADwC;AAExCC,IAAAA,QAFwC;AAGxCC,IAAAA,MAHwC;AAIxCC,IAAAA,YAJwC;AAKxCC,IAAAA,IALwC;AAMxC,OAAGC;AANqC,GAOrC;AACHT,EAAAA,UAAU,CAAE,+BAAF,EAAmC;AAC5CU,IAAAA,KAAK,EAAE,MADqC;AAE5CC,IAAAA,MAAM,EAAE,WAFoC;AAG5CC,IAAAA,WAAW,EAAE;AAH+B,GAAnC,CAAV;AAMA,QAAMC,SAAS,GAAGhB,MAAM,EAAxB;AACA,QAAMiB,GAAG,GAAGf,kBAAkB,CAAES,IAAF,EAAQ,MAAM;AAC3CF,IAAAA,MAAM;AACNS,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;;AAEA,QAAKT,YAAL,EAAoB;AACnBM,MAAAA,SAAS,CAACG,OAAV,GAAoBC,UAAU,CAAE,MAAMV,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GAP6B,CAA9B;AASAJ,EAAAA,SAAS,CAAE,MAAM;AAChBiB,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;AACA,GAFQ,EAEN,EAFM,CAAT;AAIA,QAAME,OAAO,GAAGtB,UAAU,CAAE,6BAAF,EAAiCQ,SAAjC,CAA1B,CArBG,CAuBH;AACA;AACA;AACA;AACA;;AACA,QAAMe,sBAAsB,GAAKC,KAAF,IAAa;AAC3CA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAFD;;AAIA,SACC,cAAC,MAAD,eACMb,WADN;AAEC,IAAA,SAAS,EAAGS,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,MAMGd,QANH,CADD;AAUA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n} ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '10.3',\n\t\tplugin: 'Gutenberg',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tclearTimeout( timeoutId.current );\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tclearTimeout( timeoutId.current );\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget = ( event ) => {\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.js"],"names":["classnames","useRef","useEffect","useCopyToClipboard","deprecated","Button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","clearTimeout","current","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,SAAjB,QAAkC,oBAAlC;AACA,SAASC,kBAAT,QAAmC,oBAAnC;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AAEA,MAAMC,OAAO,GAAG,IAAhB;AAEA,eAAe,SAASC,eAAT,OAOX;AAAA,MAPqC;AACxCC,IAAAA,SADwC;AAExCC,IAAAA,QAFwC;AAGxCC,IAAAA,MAHwC;AAIxCC,IAAAA,YAJwC;AAKxCC,IAAAA,IALwC;AAMxC,OAAGC;AANqC,GAOrC;AACHT,EAAAA,UAAU,CAAE,+BAAF,EAAmC;AAC5CU,IAAAA,KAAK,EAAE,KADqC;AAE5CC,IAAAA,WAAW,EAAE;AAF+B,GAAnC,CAAV;AAKA,QAAMC,SAAS,GAAGf,MAAM,EAAxB;AACA,QAAMgB,GAAG,GAAGd,kBAAkB,CAAES,IAAF,EAAQ,MAAM;AAC3CF,IAAAA,MAAM;AACNQ,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;;AAEA,QAAKR,YAAL,EAAoB;AACnBK,MAAAA,SAAS,CAACG,OAAV,GAAoBC,UAAU,CAAE,MAAMT,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GAP6B,CAA9B;AASAJ,EAAAA,SAAS,CAAE,MAAM;AAChBgB,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;AACA,GAFQ,EAEN,EAFM,CAAT;AAIA,QAAME,OAAO,GAAGrB,UAAU,CAAE,6BAAF,EAAiCQ,SAAjC,CAA1B,CApBG,CAsBH;AACA;AACA;AACA;AACA;;AACA,QAAMc,sBAAsB,GAAKC,KAAF,IAAa;AAC3CA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAFD;;AAIA,SACC,cAAC,MAAD,eACMZ,WADN;AAEC,IAAA,SAAS,EAAGQ,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,MAMGb,QANH,CADD;AAUA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n} ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tclearTimeout( timeoutId.current );\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tclearTimeout( timeoutId.current );\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget = ( event ) => {\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"]}

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -12,7 +13,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
@@ -97,7 +98,18 @@ function MultiplePalettes(_ref3) {
   }));
 }
 
-export default function ColorPalette(_ref5) {
+export function CustomColorPickerDropdown(_ref5) {
+  let {
+    isRenderedInSidebar,
+    ...props
+  } = _ref5;
+  return createElement(Dropdown, _extends({
+    contentClassName: classnames('components-color-palette__custom-color-dropdown-content', {
+      'is-rendered-in-sidebar': isRenderedInSidebar
+    })
+  }, props));
+}
+export default function ColorPalette(_ref6) {
   let {
     clearable = true,
     className,
@@ -108,7 +120,7 @@ export default function ColorPalette(_ref5) {
     value,
     __experimentalHasMultipleOrigins = false,
     __experimentalIsRenderedInSidebar = false
-  } = _ref5;
+  } = _ref6;
   const clearColor = useCallback(() => onChange(undefined), [onChange]);
   const Component = __experimentalHasMultipleOrigins ? MultiplePalettes : SinglePalette;
 
@@ -118,19 +130,30 @@ export default function ColorPalette(_ref5) {
     enableAlpha: enableAlpha
   });
 
+  let dropdownPosition;
+  let popoverProps;
+
+  if (__experimentalIsRenderedInSidebar) {
+    dropdownPosition = isRTL() ? 'bottom right' : 'bottom left';
+    popoverProps = {
+      __unstableForcePosition: true
+    };
+  }
+
+  const colordColor = colord(value);
   return createElement(VStack, {
     spacing: 3,
     className: className
-  }, !disableCustomColors && createElement(Dropdown, {
-    contentClassName: classnames('components-color-palette__custom-color-dropdown-content', {
-      'is-rendered-in-sidebar': __experimentalIsRenderedInSidebar
-    }),
+  }, !disableCustomColors && createElement(CustomColorPickerDropdown, {
+    position: dropdownPosition,
+    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     renderContent: renderCustomColorPicker,
-    renderToggle: _ref6 => {
+    popoverProps: popoverProps,
+    renderToggle: _ref7 => {
       let {
         isOpen,
         onToggle
-      } = _ref6;
+      } = _ref7;
       return createElement("button", {
         className: "components-color-palette__custom-color",
         "aria-expanded": isOpen,
@@ -138,7 +161,8 @@ export default function ColorPalette(_ref5) {
         onClick: onToggle,
         "aria-label": __('Custom color picker'),
         style: {
-          background: value
+          background: value,
+          color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
         }
       }, value);
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["map","colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","ColorHeading","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","index","colorPalette","length","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvalue === color ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component = __experimentalHasMultipleOrigins\n\t\t? MultiplePalettes\n\t\t: SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tcontentClassName={ classnames(\n\t\t\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-rendered-in-sidebar': __experimentalIsRenderedInSidebar,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ { background: value } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["map","colord","extend","namesPlugin","a11yPlugin","classnames","__","sprintf","isRTL","useCallback","useMemo","Dropdown","ColorPicker","CircularOptionPicker","VStack","ColorHeading","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","undefined","Component","renderCustomColorPicker","dropdownPosition","popoverProps","__unstableForcePosition","isOpen","onToggle","background"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvalue === color ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName={ classnames(\n\t\t\t\t'components-color-palette__custom-color-dropdown-content',\n\t\t\t\t{\n\t\t\t\t\t'is-rendered-in-sidebar': isRenderedInSidebar,\n\t\t\t\t}\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst Component = __experimentalHasMultipleOrigins\n\t\t? MultiplePalettes\n\t\t: SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tlet dropdownPosition;\n\tlet popoverProps;\n\tif ( __experimentalIsRenderedInSidebar ) {\n\t\tdropdownPosition = isRTL() ? 'bottom right' : 'bottom left';\n\t\tpopoverProps = { __unstableForcePosition: true };\n\t}\n\n\tconst colordColor = colord( value );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tposition={ dropdownPosition }\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ __( 'Custom color picker' ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ value }\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}

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

@@ -18,6 +18,7 @@ import { Text } from '../text';
 import { Flex, FlexItem } from '../flex';
 import { Tooltip } from '../ui/tooltip';
 import { space } from '../ui/utils/space';
+import { COLORS } from '../utils/colors-values';
 
 const ValueDisplay = _ref => {
   let {
@@ -30,7 +31,7 @@ const ValueDisplay = _ref => {
       isBlock: true,
       display: "flex"
     }, createElement(Text, {
-      color: "blue"
+      color: COLORS.ui.theme
     }, abbreviation), createElement(Text, null, value));
   }));
 };
@@ -85,7 +86,7 @@ const HexDisplay = _ref5 => {
   } = _ref5;
   const colorWithoutHash = color.toHex().slice(1).toUpperCase();
   return createElement(FlexItem, null, createElement(Text, {
-    color: "blue"
+    color: COLORS.ui.theme
   }, "#"), createElement(Text, null, colorWithoutHash));
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","__","Text","Flex","FlexItem","Tooltip","space","ValueDisplay","values","map","value","abbreviation","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color=\"blue\">{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s * 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color=\"blue\">#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\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 ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/color-display.tsx"],"names":["useCopyToClipboard","useState","useEffect","useRef","__","Text","Flex","FlexItem","Tooltip","space","COLORS","ValueDisplay","values","map","value","abbreviation","ui","theme","HslDisplay","color","enableAlpha","h","s","l","a","toHsl","Math","floor","round","push","RgbDisplay","r","g","b","toRgb","HexDisplay","colorWithoutHash","toHex","slice","toUpperCase","getComponent","colorType","ColorDisplay","copiedColor","setCopiedColor","copyTimer","props","Component","copyRef","toHslString","toRgbString","current","clearTimeout","setTimeout","undefined","height"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport { useState, useEffect, useRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Flex, FlexItem } from '../flex';\nimport { Tooltip } from '../ui/tooltip';\nimport type { ColorType } from './types';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\n\ninterface ColorDisplayProps {\n\tcolor: Colord;\n\tcolorType: ColorType;\n\tenableAlpha: boolean;\n}\n\ninterface DisplayProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n}\n\ntype Values = [ number, string ][];\n\ninterface ValueDisplayProps {\n\tvalues: Values;\n}\n\nconst ValueDisplay = ( { values }: ValueDisplayProps ) => (\n\t<>\n\t\t{ values.map( ( [ value, abbreviation ] ) => {\n\t\t\treturn (\n\t\t\t\t<FlexItem key={ abbreviation } isBlock display=\"flex\">\n\t\t\t\t\t<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>\n\t\t\t\t\t<Text>{ value }</Text>\n\t\t\t\t</FlexItem>\n\t\t\t);\n\t\t} ) }\n\t</>\n);\n\nconst HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\tconst values: Values = [\n\t\t[ Math.floor( h ), 'H' ],\n\t\t[ Math.round( s * 100 ), 'S' ],\n\t\t[ Math.round( l * 100 ), 'L' ],\n\t];\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\tconst values: Values = [\n\t\t[ r, 'R' ],\n\t\t[ g, 'G' ],\n\t\t[ b, 'B' ],\n\t];\n\n\tif ( enableAlpha ) {\n\t\tvalues.push( [ Math.round( a * 100 ), 'A' ] );\n\t}\n\n\treturn <ValueDisplay values={ values } />;\n};\n\nconst HexDisplay = ( { color }: DisplayProps ) => {\n\tconst colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();\n\treturn (\n\t\t<FlexItem>\n\t\t\t<Text color={ COLORS.ui.theme }>#</Text>\n\t\t\t<Text>{ colorWithoutHash }</Text>\n\t\t</FlexItem>\n\t);\n};\n\nconst getComponent = ( colorType: ColorType ) => {\n\tswitch ( colorType ) {\n\t\tcase 'hsl':\n\t\t\treturn HslDisplay;\n\t\tcase 'rgb':\n\t\t\treturn RgbDisplay;\n\t\tdefault:\n\t\tcase 'hex':\n\t\t\treturn HexDisplay;\n\t}\n};\n\nexport const ColorDisplay = ( {\n\tcolor,\n\tcolorType,\n\tenableAlpha,\n}: ColorDisplayProps ) => {\n\tconst [ copiedColor, setCopiedColor ] = useState< string | null >( null );\n\tconst copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();\n\tconst props = { color, enableAlpha };\n\tconst Component = getComponent( colorType );\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 ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t\tsetCopiedColor( color.toHex() );\n\t\t\tcopyTimer.current = setTimeout( () => {\n\t\t\t\tsetCopiedColor( null );\n\t\t\t\tcopyTimer.current = undefined;\n\t\t\t}, 3000 );\n\t\t}\n\t);\n\tuseEffect( () => {\n\t\t// clear copyTimer on component unmount.\n\t\treturn () => {\n\t\t\tif ( copyTimer.current ) {\n\t\t\t\tclearTimeout( copyTimer.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\treturn (\n\t\t<Tooltip\n\t\t\tcontent={\n\t\t\t\t<Text color=\"white\">\n\t\t\t\t\t{ copiedColor === color.toHex()\n\t\t\t\t\t\t? __( 'Copied!' )\n\t\t\t\t\t\t: __( 'Copy' ) }\n\t\t\t\t</Text>\n\t\t\t}\n\t\t>\n\t\t\t<Flex\n\t\t\t\tjustify=\"flex-start\"\n\t\t\t\tgap={ space( 1 ) }\n\t\t\t\tref={ copyRef }\n\t\t\t\tstyle={ { height: 30 } }\n\t\t\t>\n\t\t\t\t<Component { ...props } />\n\t\t\t</Flex>\n\t\t</Tooltip>\n\t);\n};\n"]}

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

@@ -17,6 +17,7 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { ColorHexInputControl } from './styles';
+import { COLORS } from '../utils/colors-values';
 export const HexInput = _ref => {
   let {
     color,
@@ -34,7 +35,7 @@ export const HexInput = _ref => {
     prefix: createElement(Spacer, {
       as: Text,
       marginLeft: space(3.5),
-      color: "blue",
+      color: COLORS.ui.theme,
       lineHeight: 1
     }, "#"),
     value: color.toHex().slice(1).toUpperCase(),

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["colord","__","Text","Spacer","space","ColorHexInputControl","HexInput","color","onChange","enableAlpha","handleValidate","value","isValid","Error","toHex","slice","toUpperCase","nextValue"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,oBAAT,QAAqC,UAArC;AAQA,OAAO,MAAMC,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,cAAc,GAAKC,KAAF,IAAqB;AAC3C,QAAK,CAAEX,MAAM,CAAE,MAAMW,KAAR,CAAN,CAAsBC,OAAtB,EAAP,EAAyC;AACxC,YAAM,IAAIC,KAAJ,CAAW,yBAAX,CAAN;AACA;AACD,GAJD;;AAMA,SACC,cAAC,oBAAD;AACC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGX,IADN;AAEC,MAAA,UAAU,EAAGE,KAAK,CAAE,GAAF,CAFnB;AAGC,MAAA,KAAK,EAAC,MAHP;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGG,KAAK,CAACO,KAAN,GAAcC,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAKC,SAAF,IAAiB;AAC3BT,MAAAA,QAAQ,CAAER,MAAM,CAAE,MAAMiB,SAAR,CAAR,CAAR;AACA,KAdF;AAeC,IAAA,UAAU,EAAGP,cAfd;AAgBC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAhB/B;AAiBC,IAAA,KAAK,EAAGR,EAAE,CAAE,WAAF,CAjBX;AAkBC,IAAA,mBAAmB;AAlBpB,IADD;AAsBA,CA7BM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleValidate = ( value: string ) => {\n\t\tif ( ! colord( '#' + value ).isValid() ) {\n\t\t\tthrow new Error( 'Invalid hex color input' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\n\t\t\t\t\tcolor=\"blue\"\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tonChange( colord( '#' + nextValue ) );\n\t\t\t} }\n\t\t\tonValidate={ handleValidate }\n\t\t\tmaxLength={ enableAlpha ? 8 : 6 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t/>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["colord","__","Text","Spacer","space","ColorHexInputControl","COLORS","HexInput","color","onChange","enableAlpha","handleValidate","value","isValid","Error","ui","theme","toHex","slice","toUpperCase","nextValue"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,oBAAT,QAAqC,UAArC;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAQA,OAAO,MAAMC,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,cAAc,GAAKC,KAAF,IAAqB;AAC3C,QAAK,CAAEZ,MAAM,CAAE,MAAMY,KAAR,CAAN,CAAsBC,OAAtB,EAAP,EAAyC;AACxC,YAAM,IAAIC,KAAJ,CAAW,yBAAX,CAAN;AACA;AACD,GAJD;;AAMA,SACC,cAAC,oBAAD;AACC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGZ,IADN;AAEC,MAAA,UAAU,EAAGE,KAAK,CAAE,GAAF,CAFnB;AAGC,MAAA,KAAK,EAAGE,MAAM,CAACS,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGR,KAAK,CAACS,KAAN,GAAcC,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAKC,SAAF,IAAiB;AAC3BX,MAAAA,QAAQ,CAAET,MAAM,CAAE,MAAMoB,SAAR,CAAR,CAAR;AACA,KAdF;AAeC,IAAA,UAAU,EAAGT,cAfd;AAgBC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAhB/B;AAiBC,IAAA,KAAK,EAAGT,EAAE,CAAE,WAAF,CAjBX;AAkBC,IAAA,mBAAmB;AAlBpB,IADD;AAsBA,CA7BM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { ColorHexInputControl } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleValidate = ( value: string ) => {\n\t\tif ( ! colord( '#' + value ).isValid() ) {\n\t\t\tthrow new Error( 'Invalid hex color input' );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ColorHexInputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 3.5 ) }\n\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\tonChange( colord( '#' + nextValue ) );\n\t\t\t} }\n\t\t\tonValidate={ handleValidate }\n\t\t\tmaxLength={ enableAlpha ? 8 : 6 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t/>\n\t);\n};\n"]}

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

@@ -8,6 +8,7 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
+import { COLORS } from '../utils/colors-values';
 export const InputWithSlider = _ref => {
   let {
     min,
@@ -30,7 +31,7 @@ export const InputWithSlider = _ref => {
     prefix: createElement(Spacer, {
       as: Text,
       paddingLeft: space(3.5),
-      color: "blue",
+      color: COLORS.ui.theme,
       lineHeight: 1
     }, abbreviation),
     hideHTMLArrows: true

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["HStack","Text","Spacer","space","RangeControl","NumberControlWrapper","InputWithSlider","min","max","label","abbreviation","onChange","value"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,YAAvB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,YAAT,EAAuBC,oBAAvB,QAAmD,UAAnD;AAWA,OAAO,MAAMC,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;AAC5B,SACC,cAAC,MAAD;AAAQ,IAAA,EAAE,EAAGZ,MAAb;AAAsB,IAAA,OAAO,EAAG;AAAhC,KACC,cAAC,oBAAD;AACC,IAAA,GAAG,EAAGO,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGV,IADN;AAEC,MAAA,WAAW,EAAGE,KAAK,CAAE,GAAF,CAFpB;AAGC,MAAA,KAAK,EAAC,MAHP;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGO,YANH,CARF;AAiBC,IAAA,cAAc;AAjBf,IADD,EAoBC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,cAAc,EAAG;AAPlB,IApBD,CADD;AAgCA,CAxCM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\treturn (\n\t\t<Spacer as={ HStack } spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 3.5 ) }\n\t\t\t\t\t\tcolor=\"blue\"\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\thideHTMLArrows\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</Spacer>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["HStack","Text","Spacer","space","RangeControl","NumberControlWrapper","COLORS","InputWithSlider","min","max","label","abbreviation","onChange","value","ui","theme"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,YAAvB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,YAAT,EAAuBC,oBAAvB,QAAmD,UAAnD;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAWA,OAAO,MAAMC,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;AAC5B,SACC,cAAC,MAAD;AAAQ,IAAA,EAAE,EAAGb,MAAb;AAAsB,IAAA,OAAO,EAAG;AAAhC,KACC,cAAC,oBAAD;AACC,IAAA,GAAG,EAAGQ,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGX,IADN;AAEC,MAAA,WAAW,EAAGE,KAAK,CAAE,GAAF,CAFpB;AAGC,MAAA,KAAK,EAAGG,MAAM,CAACQ,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGJ,YANH,CARF;AAiBC,IAAA,cAAc;AAjBf,IADD,EAoBC,cAAC,YAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,mBAAmB,MAFpB;AAGC,IAAA,GAAG,EAAGF,GAHP;AAIC,IAAA,GAAG,EAAGC,GAJP;AAKC,IAAA,KAAK,EAAGI,KALT;AAMC,IAAA,QAAQ,EAAGD,QANZ;AAOC,IAAA,cAAc,EAAG;AAPlB,IApBD,CADD;AAgCA,CAxCM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\treturn (\n\t\t<Spacer as={ HStack } spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 3.5 ) }\n\t\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\thideHTMLArrows\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</Spacer>\n\t);\n};\n"]}

package/build-module/confirm-dialog/component.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import React, { useEffect, useState } from 'react'; // eslint-disable-next-line no-restricted-imports
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import Modal from '../modal';
+import { useContextSystem, contextConnect } from '../ui/context';
+import { Flex } from '../flex';
+import Button from '../button';
+import { Text } from '../text';
+import { VStack } from '../v-stack';
+
+function ConfirmDialog(props, forwardedRef) {
+  const {
+    isOpen: isOpenProp,
+    onConfirm,
+    onCancel,
+    children,
+    ...otherProps
+  } = useContextSystem(props, 'ConfirmDialog');
+  const [isOpen, setIsOpen] = useState();
+  const [shouldSelfClose, setShouldSelfClose] = useState();
+  useEffect(() => {
+    // We only allow the dialog to close itself if `isOpenProp` is *not* set.
+    // If `isOpenProp` is set, then it (probably) means it's controlled by a
+    // parent component. In that case, `shouldSelfClose` might do more harm than
+    // good, so we disable it.
+    const isIsOpenSet = typeof isOpenProp !== 'undefined';
+    setIsOpen(isIsOpenSet ? isOpenProp : true);
+    setShouldSelfClose(!isIsOpenSet);
+  }, [isOpenProp]);
+  const handleEvent = useCallback(callback => event => {
+    callback === null || callback === void 0 ? void 0 : callback(event);
+
+    if (shouldSelfClose) {
+      setIsOpen(false);
+    }
+  }, [shouldSelfClose, setIsOpen]);
+  const handleEnter = useCallback(event => {
+    if (event.key === 'Enter') {
+      handleEvent(onConfirm)(event);
+    }
+  }, [handleEvent, onConfirm]);
+
+  const cancelLabel = __('Cancel');
+
+  const confirmLabel = __('OK');
+
+  return createElement(Fragment, null, isOpen && createElement(Modal, _extends({
+    onRequestClose: handleEvent(onCancel),
+    onKeyDown: handleEnter,
+    closeButtonLabel: cancelLabel,
+    isDismissible: true,
+    ref: forwardedRef,
+    __experimentalHideHeader: true
+  }, otherProps), createElement(VStack, {
+    spacing: 8
+  }, createElement(Text, null, children), createElement(Flex, {
+    direction: "row",
+    justify: "flex-end"
+  }, createElement(Button, {
+    variant: "tertiary",
+    onClick: handleEvent(onCancel)
+  }, cancelLabel), createElement(Button, {
+    variant: "primary",
+    onClick: handleEvent(onConfirm)
+  }, confirmLabel)))));
+}
+
+export default contextConnect(ConfirmDialog, 'ConfirmDialog');
+//# sourceMappingURL=component.js.map

package/build-module/confirm-dialog/component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/confirm-dialog/component.tsx"],"names":["React","useEffect","useState","__","useCallback","Modal","useContextSystem","contextConnect","Flex","Button","Text","VStack","ConfirmDialog","props","forwardedRef","isOpen","isOpenProp","onConfirm","onCancel","children","otherProps","setIsOpen","shouldSelfClose","setShouldSelfClose","isIsOpenSet","handleEvent","callback","event","handleEnter","key","cancelLabel","confirmLabel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport React, { useEffect, useState } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref, KeyboardEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport type { OwnProps, DialogInputEvent } from './types';\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\n\nfunction ConfirmDialog(\n\tprops: WordPressComponentProps< OwnProps, 'div', false >,\n\tforwardedRef: Ref< any >\n) {\n\tconst {\n\t\tisOpen: isOpenProp,\n\t\tonConfirm,\n\t\tonCancel,\n\t\tchildren,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ConfirmDialog' );\n\n\tconst [ isOpen, setIsOpen ] = useState< boolean >();\n\tconst [ shouldSelfClose, setShouldSelfClose ] = useState< boolean >();\n\n\tuseEffect( () => {\n\t\t// We only allow the dialog to close itself if `isOpenProp` is *not* set.\n\t\t// If `isOpenProp` is set, then it (probably) means it's controlled by a\n\t\t// parent component. In that case, `shouldSelfClose` might do more harm than\n\t\t// good, so we disable it.\n\t\tconst isIsOpenSet = typeof isOpenProp !== 'undefined';\n\t\tsetIsOpen( isIsOpenSet ? isOpenProp : true );\n\t\tsetShouldSelfClose( ! isIsOpenSet );\n\t}, [ isOpenProp ] );\n\n\tconst handleEvent = useCallback(\n\t\t( callback?: ( event: DialogInputEvent ) => void ) => (\n\t\t\tevent: DialogInputEvent\n\t\t) => {\n\t\t\tcallback?.( event );\n\t\t\tif ( shouldSelfClose ) {\n\t\t\t\tsetIsOpen( false );\n\t\t\t}\n\t\t},\n\t\t[ shouldSelfClose, setIsOpen ]\n\t);\n\n\tconst handleEnter = useCallback(\n\t\t( event: KeyboardEvent< HTMLDivElement > ) => {\n\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\thandleEvent( onConfirm )( event );\n\t\t\t}\n\t\t},\n\t\t[ handleEvent, onConfirm ]\n\t);\n\n\tconst cancelLabel = __( 'Cancel' );\n\tconst confirmLabel = __( 'OK' );\n\n\treturn (\n\t\t<>\n\t\t\t{ isOpen && (\n\t\t\t\t<Modal\n\t\t\t\t\tonRequestClose={ handleEvent( onCancel ) }\n\t\t\t\t\tonKeyDown={ handleEnter }\n\t\t\t\t\tcloseButtonLabel={ cancelLabel }\n\t\t\t\t\tisDismissible={ true }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t\t__experimentalHideHeader\n\t\t\t\t\t{ ...otherProps }\n\t\t\t\t>\n\t\t\t\t\t<VStack spacing={ 8 }>\n\t\t\t\t\t\t<Text>{ children }</Text>\n\t\t\t\t\t\t<Flex direction=\"row\" justify=\"flex-end\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onCancel ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ cancelLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleEvent( onConfirm ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ confirmLabel }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</VStack>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default contextConnect( ConfirmDialog, 'ConfirmDialog' );\n"]}

package/build-module/confirm-dialog/index.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import ConfirmDialog from './component';
+export { ConfirmDialog };
+//# sourceMappingURL=index.js.map

package/build-module/confirm-dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/confirm-dialog/index.tsx"],"names":["ConfirmDialog"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,aAAP,MAA0B,aAA1B;AAEA,SAASA,aAAT","sourcesContent":["/**\n * Internal dependencies\n */\nimport ConfirmDialog from './component';\n\nexport { ConfirmDialog };\n"]}

package/build-module/confirm-dialog/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-module/confirm-dialog/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build-module/custom-gradient-bar/constants.js

@@ -1,7 +1,3 @@
-export const COLOR_POPOVER_PROPS = {
-  className: 'components-custom-gradient-picker__color-picker-popover',
-  position: 'top'
-};
 export const GRADIENT_MARKERS_WIDTH = 16;
 export const INSERT_POINT_WIDTH = 16;
 export const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;

package/build-module/custom-gradient-bar/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/constants.js"],"names":["COLOR_POPOVER_PROPS","className","position","GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_ABSOLUTE_LEFT_POSITION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,GAAG;AAClCC,EAAAA,SAAS,EAAE,yDADuB;AAElCC,EAAAA,QAAQ,EAAE;AAFwB,CAA5B;AAKP,OAAO,MAAMC,sBAAsB,GAAG,EAA/B;AACP,OAAO,MAAMC,kBAAkB,GAAG,EAA3B;AACP,OAAO,MAAMC,8BAA8B,GAAG,CAAvC;AACP,OAAO,MAAMC,2CAA2C,GAAG,EAApD;AACP,OAAO,MAAMC,+BAA+B,GAAG,CAAxC;AACP,OAAO,MAAMC,wBAAwB,GAAG,CAAjC;AAEP,OAAO,MAAMC,gCAAgC,GAAGH,2CAAzC;AACP,OAAO,MAAMI,4CAA4C,GACxD,CAAEN,kBAAkB,GAAGD,sBAAvB,IAAkD,CAD5C","sourcesContent":["export const COLOR_POPOVER_PROPS = {\n\tclassName: 'components-custom-gradient-picker__color-picker-popover',\n\tposition: 'top',\n};\n\nexport const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-bar/constants.js"],"names":["GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_ABSOLUTE_LEFT_POSITION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"mappings":"AAAA,OAAO,MAAMA,sBAAsB,GAAG,EAA/B;AACP,OAAO,MAAMC,kBAAkB,GAAG,EAA3B;AACP,OAAO,MAAMC,8BAA8B,GAAG,CAAvC;AACP,OAAO,MAAMC,2CAA2C,GAAG,EAApD;AACP,OAAO,MAAMC,+BAA+B,GAAG,CAAxC;AACP,OAAO,MAAMC,wBAAwB,GAAG,CAAjC;AAEP,OAAO,MAAMC,gCAAgC,GAAGH,2CAAzC;AACP,OAAO,MAAMI,4CAA4C,GACxD,CAAEN,kBAAkB,GAAGD,sBAAvB,IAAkD,CAD5C","sourcesContent":["export const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"]}