@wordpress/components 23.6.0 → 23.7.0

package/build-module/custom-gradient-picker/serializer.js

@@ -1,4 +1,10 @@
-// @ts-nocheck
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
 export function serializeGradientColor(_ref) {
   let {
     type,
@@ -38,7 +44,7 @@ export function serializeGradientColorStop(_ref2) {
   })} ${serializeGradientPosition(length)}`;
 }
 export function serializeGradientOrientation(orientation) {
-  if (!orientation || orientation.type !== 'angular') {
+  if (Array.isArray(orientation) || !orientation || orientation.type !== 'angular') {
     return;
   }
 
@@ -52,9 +58,13 @@ export function serializeGradient(_ref3) {
   } = _ref3;
   const serializedOrientation = serializeGradientOrientation(orientation);
   const serializedColorStops = colorStops.sort((colorStop1, colorStop2) => {
-    var _colorStop1$length$va, _colorStop1$length, _colorStop2$length$va, _colorStop2$length;
+    const getNumericStopValue = colorStop => {
+      var _colorStop$length;
+
+      return (colorStop === null || colorStop === void 0 ? void 0 : (_colorStop$length = colorStop.length) === null || _colorStop$length === void 0 ? void 0 : _colorStop$length.value) === undefined ? 0 : parseInt(colorStop.length.value);
+    };
 
-    return ((_colorStop1$length$va = colorStop1 === null || colorStop1 === void 0 ? void 0 : (_colorStop1$length = colorStop1.length) === null || _colorStop1$length === void 0 ? void 0 : _colorStop1$length.value) !== null && _colorStop1$length$va !== void 0 ? _colorStop1$length$va : 0) - ((_colorStop2$length$va = colorStop2 === null || colorStop2 === void 0 ? void 0 : (_colorStop2$length = colorStop2.length) === null || _colorStop2$length === void 0 ? void 0 : _colorStop2$length.value) !== null && _colorStop2$length$va !== void 0 ? _colorStop2$length$va : 0);
+    return getNumericStopValue(colorStop1) - getNumericStopValue(colorStop2);
   }).map(serializeGradientColorStop);
   return `${type}(${[serializedOrientation, ...serializedColorStops].filter(Boolean).join(',')})`;
 }

package/build-module/custom-gradient-picker/serializer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/serializer.js"],"names":["serializeGradientColor","type","value","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","map","filter","Boolean"],"mappings":"AAAA;AAEA,OAAO,SAASA,sBAAT,OAAmD;AAAA,MAAlB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAkB;;AACzD,MAAKD,IAAI,KAAK,SAAd,EAA0B;AACzB,WAAOC,KAAP;AACA;;AACD,MAAKD,IAAI,KAAK,KAAd,EAAsB;AACrB,WAAQ,IAAIC,KAAO,EAAnB;AACA;;AACD,SAAQ,GAAGD,IAAM,IAAIC,KAAK,CAACC,IAAN,CAAY,GAAZ,CAAmB,GAAxC;AACA;AAED,OAAO,SAASC,yBAAT,CAAoCC,QAApC,EAA+C;AACrD,MAAK,CAAEA,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AACD,QAAM;AAAEH,IAAAA,KAAF;AAASD,IAAAA;AAAT,MAAkBI,QAAxB;AACA,SAAQ,GAAGH,KAAO,GAAGD,IAAM,EAA3B;AACA;AAED,OAAO,SAASK,0BAAT,QAA+D;AAAA,MAA1B;AAAEL,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeK,IAAAA;AAAf,GAA0B;AACrE,SAAQ,GAAGP,sBAAsB,CAAE;AAClCC,IAAAA,IADkC;AAElCC,IAAAA;AAFkC,GAAF,CAG5B,IAAIE,yBAAyB,CAAEG,MAAF,CAAY,EAH9C;AAIA;AAED,OAAO,SAASC,4BAAT,CAAuCC,WAAvC,EAAqD;AAC3D,MAAK,CAAEA,WAAF,IAAiBA,WAAW,CAACR,IAAZ,KAAqB,SAA3C,EAAuD;AACtD;AACA;;AACD,SAAQ,GAAGQ,WAAW,CAACP,KAAO,KAA9B;AACA;AAED,OAAO,SAASQ,iBAAT,QAAgE;AAAA,MAApC;AAAET,IAAAA,IAAF;AAAQQ,IAAAA,WAAR;AAAqBE,IAAAA;AAArB,GAAoC;AACtE,QAAMC,qBAAqB,GAAGJ,4BAA4B,CAAEC,WAAF,CAA1D;AACA,QAAMI,oBAAoB,GAAGF,UAAU,CACrCG,IAD2B,CACrB,CAAEC,UAAF,EAAcC,UAAd,KAA8B;AAAA;;AACpC,WACC,0BAAED,UAAF,aAAEA,UAAF,6CAAEA,UAAU,CAAER,MAAd,uDAAE,mBAAoBL,KAAtB,yEAA+B,CAA/B,8BACEc,UADF,aACEA,UADF,6CACEA,UAAU,CAAET,MADd,uDACE,mBAAoBL,KADtB,yEAC+B,CAD/B,CADD;AAIA,GAN2B,EAO3Be,GAP2B,CAOtBX,0BAPsB,CAA7B;AAQA,SAAQ,GAAGL,IAAM,IAAI,CAAEW,qBAAF,EAAyB,GAAGC,oBAA5B,EACnBK,MADmB,CACXC,OADW,EAEnBhB,IAFmB,CAEb,GAFa,CAEN,GAFf;AAGA","sourcesContent":["// @ts-nocheck\n\nexport function serializeGradientColor( { type, value } ) {\n\tif ( type === 'literal' ) {\n\t\treturn value;\n\t}\n\tif ( type === 'hex' ) {\n\t\treturn `#${ value }`;\n\t}\n\treturn `${ type }(${ value.join( ',' ) })`;\n}\n\nexport function serializeGradientPosition( position ) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( { type, value, length } ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation( orientation ) {\n\tif ( ! orientation || orientation.type !== 'angular' ) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( { type, orientation, colorStops } ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\treturn (\n\t\t\t\t( colorStop1?.length?.value ?? 0 ) -\n\t\t\t\t( colorStop2?.length?.value ?? 0 )\n\t\t\t);\n\t\t} )\n\t\t.map( serializeGradientColorStop );\n\treturn `${ type }(${ [ serializedOrientation, ...serializedColorStops ]\n\t\t.filter( Boolean )\n\t\t.join( ',' ) })`;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/serializer.ts"],"names":["serializeGradientColor","type","value","join","serializeGradientPosition","position","serializeGradientColorStop","length","serializeGradientOrientation","orientation","Array","isArray","serializeGradient","colorStops","serializedOrientation","serializedColorStops","sort","colorStop1","colorStop2","getNumericStopValue","colorStop","undefined","parseInt","map","filter","Boolean"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;AAGA,OAAO,SAASA,sBAAT,OAGoB;AAAA,MAHa;AACvCC,IAAAA,IADuC;AAEvCC,IAAAA;AAFuC,GAGb;;AAC1B,MAAKD,IAAI,KAAK,SAAd,EAA0B;AACzB,WAAOC,KAAP;AACA;;AACD,MAAKD,IAAI,KAAK,KAAd,EAAsB;AACrB,WAAQ,IAAIC,KAAO,EAAnB;AACA;;AACD,SAAQ,GAAGD,IAAM,IAAIC,KAAK,CAACC,IAAN,CAAY,GAAZ,CAAmB,GAAxC;AACA;AAED,OAAO,SAASC,yBAAT,CACNC,QADM,EAEL;AACD,MAAK,CAAEA,QAAP,EAAkB;AACjB,WAAO,EAAP;AACA;;AACD,QAAM;AAAEH,IAAAA,KAAF;AAASD,IAAAA;AAAT,MAAkBI,QAAxB;AACA,SAAQ,GAAGH,KAAO,GAAGD,IAAM,EAA3B;AACA;AAED,OAAO,SAASK,0BAAT,QAIuB;AAAA,MAJc;AAC3CL,IAAAA,IAD2C;AAE3CC,IAAAA,KAF2C;AAG3CK,IAAAA;AAH2C,GAId;AAC7B,SAAQ,GAAGP,sBAAsB,CAAE;AAClCC,IAAAA,IADkC;AAElCC,IAAAA;AAFkC,GAAF,CAGH,IAAIE,yBAAyB,CAAEG,MAAF,CAAY,EAHvE;AAIA;AAED,OAAO,SAASC,4BAAT,CACNC,WADM,EAEL;AACD,MACCC,KAAK,CAACC,OAAN,CAAeF,WAAf,KACA,CAAEA,WADF,IAEAA,WAAW,CAACR,IAAZ,KAAqB,SAHtB,EAIE;AACD;AACA;;AACD,SAAQ,GAAGQ,WAAW,CAACP,KAAO,KAA9B;AACA;AAED,OAAO,SAASU,iBAAT,QAI0B;AAAA,MAJE;AAClCX,IAAAA,IADkC;AAElCQ,IAAAA,WAFkC;AAGlCI,IAAAA;AAHkC,GAIF;AAChC,QAAMC,qBAAqB,GAAGN,4BAA4B,CAAEC,WAAF,CAA1D;AACA,QAAMM,oBAAoB,GAAGF,UAAU,CACrCG,IAD2B,CACrB,CAAEC,UAAF,EAAcC,UAAd,KAA8B;AACpC,UAAMC,mBAAmB,GACxBC,SAD2B,IAEvB;AAAA;;AACJ,aAAO,CAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,iCAAAA,SAAS,CAAEb,MAAX,wEAAmBL,KAAnB,MAA6BmB,SAA7B,GACJ,CADI,GAEJC,QAAQ,CAAEF,SAAS,CAACb,MAAV,CAAiBL,KAAnB,CAFX;AAGA,KAND;;AAQA,WACCiB,mBAAmB,CAAEF,UAAF,CAAnB,GACAE,mBAAmB,CAAED,UAAF,CAFpB;AAIA,GAd2B,EAe3BK,GAf2B,CAetBjB,0BAfsB,CAA7B;AAgBA,SAAQ,GAAGL,IAAM,IAAI,CAAEa,qBAAF,EAAyB,GAAGC,oBAA5B,EACnBS,MADmB,CACXC,OADW,EAEnBtB,IAFmB,CAEb,GAFa,CAEN,GAFf;AAGA","sourcesContent":["/**\n * External dependencies\n */\nimport type gradientParser from 'gradient-parser';\n/**\n * Internal dependencies\n */\nimport type { ColorStopTypeAndValue } from './types';\n\nexport function serializeGradientColor( {\n\ttype,\n\tvalue,\n}: ColorStopTypeAndValue ) {\n\tif ( type === 'literal' ) {\n\t\treturn value;\n\t}\n\tif ( type === 'hex' ) {\n\t\treturn `#${ value }`;\n\t}\n\treturn `${ type }(${ value.join( ',' ) })`;\n}\n\nexport function serializeGradientPosition(\n\tposition: gradientParser.ColorStop[ 'length' ]\n) {\n\tif ( ! position ) {\n\t\treturn '';\n\t}\n\tconst { value, type } = position;\n\treturn `${ value }${ type }`;\n}\n\nexport function serializeGradientColorStop( {\n\ttype,\n\tvalue,\n\tlength,\n}: gradientParser.ColorStop ) {\n\treturn `${ serializeGradientColor( {\n\t\ttype,\n\t\tvalue,\n\t} as ColorStopTypeAndValue ) } ${ serializeGradientPosition( length ) }`;\n}\n\nexport function serializeGradientOrientation(\n\torientation: gradientParser.GradientNode[ 'orientation' ]\n) {\n\tif (\n\t\tArray.isArray( orientation ) ||\n\t\t! orientation ||\n\t\torientation.type !== 'angular'\n\t) {\n\t\treturn;\n\t}\n\treturn `${ orientation.value }deg`;\n}\n\nexport function serializeGradient( {\n\ttype,\n\torientation,\n\tcolorStops,\n}: gradientParser.GradientNode ) {\n\tconst serializedOrientation = serializeGradientOrientation( orientation );\n\tconst serializedColorStops = colorStops\n\t\t.sort( ( colorStop1, colorStop2 ) => {\n\t\t\tconst getNumericStopValue = (\n\t\t\t\tcolorStop: gradientParser.ColorStop\n\t\t\t) => {\n\t\t\t\treturn colorStop?.length?.value === undefined\n\t\t\t\t\t? 0\n\t\t\t\t\t: parseInt( colorStop.length.value );\n\t\t\t};\n\n\t\t\treturn (\n\t\t\t\tgetNumericStopValue( colorStop1 ) -\n\t\t\t\tgetNumericStopValue( colorStop2 )\n\t\t\t);\n\t\t} )\n\t\t.map( serializeGradientColorStop );\n\treturn `${ type }(${ [ serializedOrientation, ...serializedColorStops ]\n\t\t.filter( Boolean )\n\t\t.join( ',' ) })`;\n}\n"]}

package/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js

@@ -11,9 +11,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { FlexBlock } from '../../flex';
 export const SelectWrapper = /*#__PURE__*/_styled(FlexBlock, process.env.NODE_ENV === "production" ? {
-  target: "e99xvul1"
+  target: "e10bzpgi1"
 } : {
-  target: "e99xvul1",
+  target: "e10bzpgi1",
   label: "SelectWrapper"
 })(process.env.NODE_ENV === "production" ? {
   name: "1gvx10y",
@@ -21,13 +21,13 @@ export const SelectWrapper = /*#__PURE__*/_styled(FlexBlock, process.env.NODE_EN
 } : {
   name: "1gvx10y",
   styles: "flex-grow:5",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci9zdHlsZXMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBU2dEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci9zdHlsZXMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4QmxvY2sgfSBmcm9tICcuLi8uLi9mbGV4JztcblxuZXhwb3J0IGNvbnN0IFNlbGVjdFdyYXBwZXIgPSBzdHlsZWQoIEZsZXhCbG9jayApYFxuXHRmbGV4LWdyb3c6IDU7XG5gO1xuXG5leHBvcnQgY29uc3QgQWNjZXNzb3J5V3JhcHBlciA9IHN0eWxlZCggRmxleEJsb2NrIClgXG5cdGZsZXgtZ3JvdzogNTtcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci9zdHlsZXMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNnRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2N1c3RvbS1ncmFkaWVudC1waWNrZXIvc3R5bGVzL2N1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0V3JhcHBlciA9IHN0eWxlZCggRmxleEJsb2NrIClgXG5cdGZsZXgtZ3JvdzogNTtcbmA7XG5cbmV4cG9ydCBjb25zdCBBY2Nlc3NvcnlXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const AccessoryWrapper = /*#__PURE__*/_styled(FlexBlock, process.env.NODE_ENV === "production" ? {
-  target: "e99xvul0"
+  target: "e10bzpgi0"
 } : {
-  target: "e99xvul0",
+  target: "e10bzpgi0",
   label: "AccessoryWrapper"
 })(process.env.NODE_ENV === "production" ? {
   name: "1gvx10y",
@@ -35,7 +35,7 @@ export const AccessoryWrapper = /*#__PURE__*/_styled(FlexBlock, process.env.NODE
 } : {
   name: "1gvx10y",
   styles: "flex-grow:5",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci9zdHlsZXMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBYW1EIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci9zdHlsZXMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMuanMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4QmxvY2sgfSBmcm9tICcuLi8uLi9mbGV4JztcblxuZXhwb3J0IGNvbnN0IFNlbGVjdFdyYXBwZXIgPSBzdHlsZWQoIEZsZXhCbG9jayApYFxuXHRmbGV4LWdyb3c6IDU7XG5gO1xuXG5leHBvcnQgY29uc3QgQWNjZXNzb3J5V3JhcHBlciA9IHN0eWxlZCggRmxleEJsb2NrIClgXG5cdGZsZXgtZ3JvdzogNTtcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci9zdHlsZXMvY3VzdG9tLWdyYWRpZW50LXBpY2tlci1zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWFtRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2N1c3RvbS1ncmFkaWVudC1waWNrZXIvc3R5bGVzL2N1c3RvbS1ncmFkaWVudC1waWNrZXItc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXhCbG9jayB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0V3JhcHBlciA9IHN0eWxlZCggRmxleEJsb2NrIClgXG5cdGZsZXgtZ3JvdzogNTtcbmA7XG5cbmV4cG9ydCBjb25zdCBBY2Nlc3NvcnlXcmFwcGVyID0gc3R5bGVkKCBGbGV4QmxvY2sgKWBcblx0ZmxleC1ncm93OiA1O1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 //# sourceMappingURL=custom-gradient-picker-styles.js.map

package/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.js"],"names":["FlexBlock","SelectWrapper","AccessoryWrapper"],"mappings":";;;;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,YAA1B;AAEA,OAAO,MAAMC,aAAa,GAAG,qBAAQD,SAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAnB;AAIP,OAAO,MAAME,gBAAgB,GAAG,qBAAQF,SAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../../flex';\n\nexport const SelectWrapper = styled( FlexBlock )`\n\tflex-grow: 5;\n`;\n\nexport const AccessoryWrapper = styled( FlexBlock )`\n\tflex-grow: 5;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/styles/custom-gradient-picker-styles.tsx"],"names":["FlexBlock","SelectWrapper","AccessoryWrapper"],"mappings":";;;;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,YAA1B;AAEA,OAAO,MAAMC,aAAa,GAAG,qBAAQD,SAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAnB;AAIP,OAAO,MAAME,gBAAgB,GAAG,qBAAQF,SAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { FlexBlock } from '../../flex';\n\nexport const SelectWrapper = styled( FlexBlock )`\n\tflex-grow: 5;\n`;\n\nexport const AccessoryWrapper = styled( FlexBlock )`\n\tflex-grow: 5;\n`;\n"]}

package/build-module/custom-gradient-picker/types.js

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

package/build-module/custom-gradient-picker/utils.js

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -31,18 +29,23 @@ export function getGradientAstWithDefault(value) {
   // gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
   // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
   let gradientAST;
+  let hasGradient = !!value;
+  const valueToParse = value !== null && value !== void 0 ? value : DEFAULT_GRADIENT;
 
   try {
-    gradientAST = gradientParser.parse(value)[0];
-    gradientAST.value = value;
+    gradientAST = gradientParser.parse(valueToParse)[0];
   } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn('wp.components.CustomGradientPicker failed to parse the gradient with error', error);
     gradientAST = gradientParser.parse(DEFAULT_GRADIENT)[0];
-    gradientAST.value = DEFAULT_GRADIENT;
+    hasGradient = false;
   }
 
-  if (((_gradientAST$orientat = gradientAST.orientation) === null || _gradientAST$orientat === void 0 ? void 0 : _gradientAST$orientat.type) === 'directional') {
-    gradientAST.orientation.type = 'angular';
-    gradientAST.orientation.value = DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString();
+  if (!Array.isArray(gradientAST.orientation) && ((_gradientAST$orientat = gradientAST.orientation) === null || _gradientAST$orientat === void 0 ? void 0 : _gradientAST$orientat.type) === 'directional') {
+    gradientAST.orientation = {
+      type: 'angular',
+      value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString()
+    };
   }
 
   if (gradientAST.colorStops.some(hasUnsupportedLength)) {
@@ -52,14 +55,16 @@ export function getGradientAstWithDefault(value) {
     const step = 100 / (colorStops.length - 1);
     colorStops.forEach((stop, index) => {
       stop.length = {
-        value: step * index,
+        value: `${step * index}`,
         type: '%'
       };
     });
-    gradientAST.value = serializeGradient(gradientAST);
   }
 
-  return gradientAST;
+  return {
+    gradientAST,
+    hasGradient
+  };
 }
 export function getGradientAstWithControlPoints(gradientAST, newControlPoints) {
   return { ...gradientAST,
@@ -80,7 +85,7 @@ export function getGradientAstWithControlPoints(gradientAST, newControlPoints) {
           value: position === null || position === void 0 ? void 0 : position.toString()
         },
         type: a < 1 ? 'rgba' : 'rgb',
-        value: a < 1 ? [r, g, b, a] : [r, g, b]
+        value: a < 1 ? [`${r}`, `${g}`, `${b}`, `${a}`] : [`${r}`, `${g}`, `${b}`]
       };
     })
   };

package/build-module/custom-gradient-picker/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/utils.js"],"names":["gradientParser","colord","extend","namesPlugin","DEFAULT_GRADIENT","HORIZONTAL_GRADIENT_ORIENTATION","DIRECTIONAL_ORIENTATION_ANGLE_MAP","serializeGradient","getLinearGradientRepresentation","gradientAST","type","orientation","colorStops","hasUnsupportedLength","item","length","undefined","getGradientAstWithDefault","value","parse","error","toString","some","step","forEach","stop","index","getGradientAstWithControlPoints","newControlPoints","map","position","color","r","g","b","a","toRgb","getStopCssColor","colorStop","join"],"mappings":"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","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport {\n\tDEFAULT_GRADIENT,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tDIRECTIONAL_ORIENTATION_ANGLE_MAP,\n} from './constants';\nimport { serializeGradient } from './serializer';\n\nextend( [ namesPlugin ] );\n\nexport function getLinearGradientRepresentation( gradientAST ) {\n\treturn serializeGradient( {\n\t\ttype: 'linear-gradient',\n\t\torientation: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\tcolorStops: gradientAST.colorStops,\n\t} );\n}\n\nfunction hasUnsupportedLength( item ) {\n\treturn item.length === undefined || item.length.type !== '%';\n}\n\nexport function getGradientAstWithDefault( value ) {\n\t// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n\t// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n\tlet gradientAST;\n\n\ttry {\n\t\tgradientAST = gradientParser.parse( value )[ 0 ];\n\t\tgradientAST.value = value;\n\t} catch ( error ) {\n\t\tgradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];\n\t\tgradientAST.value = DEFAULT_GRADIENT;\n\t}\n\n\tif ( gradientAST.orientation?.type === 'directional' ) {\n\t\tgradientAST.orientation.type = 'angular';\n\t\tgradientAST.orientation.value =\n\t\t\tDIRECTIONAL_ORIENTATION_ANGLE_MAP[\n\t\t\t\tgradientAST.orientation.value\n\t\t\t].toString();\n\t}\n\n\tif ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {\n\t\tconst { colorStops } = gradientAST;\n\t\tconst step = 100 / ( colorStops.length - 1 );\n\t\tcolorStops.forEach( ( stop, index ) => {\n\t\t\tstop.length = {\n\t\t\t\tvalue: step * index,\n\t\t\t\ttype: '%',\n\t\t\t};\n\t\t} );\n\t\tgradientAST.value = serializeGradient( gradientAST );\n\t}\n\n\treturn gradientAST;\n}\n\nexport function getGradientAstWithControlPoints(\n\tgradientAST,\n\tnewControlPoints\n) {\n\treturn {\n\t\t...gradientAST,\n\t\tcolorStops: newControlPoints.map( ( { position, color } ) => {\n\t\t\tconst { r, g, b, a } = colord( color ).toRgb();\n\t\t\treturn {\n\t\t\t\tlength: {\n\t\t\t\t\ttype: '%',\n\t\t\t\t\tvalue: position?.toString(),\n\t\t\t\t},\n\t\t\t\ttype: a < 1 ? 'rgba' : 'rgb',\n\t\t\t\tvalue: a < 1 ? [ r, g, b, a ] : [ r, g, b ],\n\t\t\t};\n\t\t} ),\n\t};\n}\n\nexport function getStopCssColor( colorStop ) {\n\tswitch ( colorStop.type ) {\n\t\tcase 'hex':\n\t\t\treturn `#${ colorStop.value }`;\n\t\tcase 'literal':\n\t\t\treturn colorStop.value;\n\t\tcase 'rgb':\n\t\tcase 'rgba':\n\t\t\treturn `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;\n\t\tdefault:\n\t\t\t// Should be unreachable if passing an AST from gradient-parser.\n\t\t\t// See https://github.com/rafaelcaricio/gradient-parser#ast.\n\t\t\treturn 'transparent';\n\t}\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/utils.ts"],"names":["gradientParser","colord","extend","namesPlugin","DEFAULT_GRADIENT","HORIZONTAL_GRADIENT_ORIENTATION","DIRECTIONAL_ORIENTATION_ANGLE_MAP","serializeGradient","getLinearGradientRepresentation","gradientAST","type","orientation","colorStops","hasUnsupportedLength","item","length","undefined","getGradientAstWithDefault","value","hasGradient","valueToParse","parse","error","console","warn","Array","isArray","toString","some","step","forEach","stop","index","getGradientAstWithControlPoints","newControlPoints","map","position","color","r","g","b","a","toRgb","getStopCssColor","colorStop","join"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,cAAP,MAA2B,iBAA3B;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AAEA;AACA;AACA;;AACA,SACCC,gBADD,EAECC,+BAFD,EAGCC,iCAHD,QAIO,aAJP;AAKA,SAASC,iBAAT,QAAkC,cAAlC;AAGAL,MAAM,CAAE,CAAEC,WAAF,CAAF,CAAN;AAEA,OAAO,SAASK,+BAAT,CACNC,WADM,EAEL;AACD,SAAOF,iBAAiB,CAAE;AACzBG,IAAAA,IAAI,EAAE,iBADmB;AAEzBC,IAAAA,WAAW,EAAEN,+BAFY;AAGzBO,IAAAA,UAAU,EAAEH,WAAW,CAACG;AAHC,GAAF,CAAxB;AAKA;;AAED,SAASC,oBAAT,CAA+BC,IAA/B,EAAgE;AAC/D,SAAOA,IAAI,CAACC,MAAL,KAAgBC,SAAhB,IAA6BF,IAAI,CAACC,MAAL,CAAYL,IAAZ,KAAqB,GAAzD;AACA;;AAED,OAAO,SAASO,yBAAT,CAAoCC,KAApC,EAA4D;AAAA;;AAClE;AACA;AACA,MAAIT,WAAJ;AACA,MAAIU,WAAW,GAAG,CAAC,CAAED,KAArB;AAEA,QAAME,YAAY,GAAGF,KAAH,aAAGA,KAAH,cAAGA,KAAH,GAAYd,gBAA9B;;AAEA,MAAI;AACHK,IAAAA,WAAW,GAAGT,cAAc,CAACqB,KAAf,CAAsBD,YAAtB,EAAsC,CAAtC,CAAd;AACA,GAFD,CAEE,OAAQE,KAAR,EAAgB;AACjB;AACAC,IAAAA,OAAO,CAACC,IAAR,CACC,4EADD,EAECF,KAFD;AAKAb,IAAAA,WAAW,GAAGT,cAAc,CAACqB,KAAf,CAAsBjB,gBAAtB,EAA0C,CAA1C,CAAd;AACAe,IAAAA,WAAW,GAAG,KAAd;AACA;;AAED,MACC,CAAEM,KAAK,CAACC,OAAN,CAAejB,WAAW,CAACE,WAA3B,CAAF,IACA,0BAAAF,WAAW,CAACE,WAAZ,gFAAyBD,IAAzB,MAAkC,aAFnC,EAGE;AACDD,IAAAA,WAAW,CAACE,WAAZ,GAA0B;AACzBD,MAAAA,IAAI,EAAE,SADmB;AAEzBQ,MAAAA,KAAK,EAAEZ,iCAAiC,CACvCG,WAAW,CAACE,WAAZ,CAAwBO,KADe,CAAjC,CAELS,QAFK;AAFkB,KAA1B;AAMA;;AAED,MAAKlB,WAAW,CAACG,UAAZ,CAAuBgB,IAAvB,CAA6Bf,oBAA7B,CAAL,EAA2D;AAC1D,UAAM;AAAED,MAAAA;AAAF,QAAiBH,WAAvB;AACA,UAAMoB,IAAI,GAAG,OAAQjB,UAAU,CAACG,MAAX,GAAoB,CAA5B,CAAb;AACAH,IAAAA,UAAU,CAACkB,OAAX,CAAoB,CAAEC,IAAF,EAAQC,KAAR,KAAmB;AACtCD,MAAAA,IAAI,CAAChB,MAAL,GAAc;AACbG,QAAAA,KAAK,EAAG,GAAGW,IAAI,GAAGG,KAAO,EADZ;AAEbtB,QAAAA,IAAI,EAAE;AAFO,OAAd;AAIA,KALD;AAMA;;AAED,SAAO;AAAED,IAAAA,WAAF;AAAeU,IAAAA;AAAf,GAAP;AACA;AAED,OAAO,SAASc,+BAAT,CACNxB,WADM,EAENyB,gBAFM,EAGL;AACD,SAAO,EACN,GAAGzB,WADG;AAENG,IAAAA,UAAU,EAAEsB,gBAAgB,CAACC,GAAjB,CAAsB,QAA2B;AAAA,UAAzB;AAAEC,QAAAA,QAAF;AAAYC,QAAAA;AAAZ,OAAyB;AAC5D,YAAM;AAAEC,QAAAA,CAAF;AAAKC,QAAAA,CAAL;AAAQC,QAAAA,CAAR;AAAWC,QAAAA;AAAX,UAAiBxC,MAAM,CAAEoC,KAAF,CAAN,CAAgBK,KAAhB,EAAvB;AACA,aAAO;AACN3B,QAAAA,MAAM,EAAE;AACPL,UAAAA,IAAI,EAAE,GADC;AAEPQ,UAAAA,KAAK,EAAEkB,QAAF,aAAEA,QAAF,uBAAEA,QAAQ,CAAET,QAAV;AAFA,SADF;AAKNjB,QAAAA,IAAI,EAAE+B,CAAC,GAAG,CAAJ,GAAQ,MAAR,GAAiB,KALjB;AAMNvB,QAAAA,KAAK,EACJuB,CAAC,GAAG,CAAJ,GACG,CAAG,GAAGH,CAAG,EAAT,EAAa,GAAGC,CAAG,EAAnB,EAAuB,GAAGC,CAAG,EAA7B,EAAiC,GAAGC,CAAG,EAAvC,CADH,GAEG,CAAG,GAAGH,CAAG,EAAT,EAAa,GAAGC,CAAG,EAAnB,EAAuB,GAAGC,CAAG,EAA7B;AATE,OAAP;AAWA,KAbW;AAFN,GAAP;AAiBA;AAED,OAAO,SAASG,eAAT,CAA0BC,SAA1B,EAAgE;AACtE,UAASA,SAAS,CAAClC,IAAnB;AACC,SAAK,KAAL;AACC,aAAQ,IAAIkC,SAAS,CAAC1B,KAAO,EAA7B;;AACD,SAAK,SAAL;AACC,aAAO0B,SAAS,CAAC1B,KAAjB;;AACD,SAAK,KAAL;AACA,SAAK,MAAL;AACC,aAAQ,GAAG0B,SAAS,CAAClC,IAAM,IAAIkC,SAAS,CAAC1B,KAAV,CAAgB2B,IAAhB,CAAsB,GAAtB,CAA6B,GAA5D;;AACD;AACC;AACA;AACA,aAAO,aAAP;AAXF;AAaA","sourcesContent":["/**\n * External dependencies\n */\nimport gradientParser from 'gradient-parser';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport {\n\tDEFAULT_GRADIENT,\n\tHORIZONTAL_GRADIENT_ORIENTATION,\n\tDIRECTIONAL_ORIENTATION_ANGLE_MAP,\n} from './constants';\nimport { serializeGradient } from './serializer';\nimport type { ControlPoint } from './types';\n\nextend( [ namesPlugin ] );\n\nexport function getLinearGradientRepresentation(\n\tgradientAST: gradientParser.GradientNode\n) {\n\treturn serializeGradient( {\n\t\ttype: 'linear-gradient',\n\t\torientation: HORIZONTAL_GRADIENT_ORIENTATION,\n\t\tcolorStops: gradientAST.colorStops,\n\t} );\n}\n\nfunction hasUnsupportedLength( item: gradientParser.ColorStop ) {\n\treturn item.length === undefined || item.length.type !== '%';\n}\n\nexport function getGradientAstWithDefault( value?: string | null ) {\n\t// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.\n\t// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.\n\tlet gradientAST: gradientParser.GradientNode | undefined;\n\tlet hasGradient = !! value;\n\n\tconst valueToParse = value ?? DEFAULT_GRADIENT;\n\n\ttry {\n\t\tgradientAST = gradientParser.parse( valueToParse )[ 0 ];\n\t} catch ( error ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t'wp.components.CustomGradientPicker failed to parse the gradient with error',\n\t\t\terror\n\t\t);\n\n\t\tgradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];\n\t\thasGradient = false;\n\t}\n\n\tif (\n\t\t! Array.isArray( gradientAST.orientation ) &&\n\t\tgradientAST.orientation?.type === 'directional'\n\t) {\n\t\tgradientAST.orientation = {\n\t\t\ttype: 'angular',\n\t\t\tvalue: DIRECTIONAL_ORIENTATION_ANGLE_MAP[\n\t\t\t\tgradientAST.orientation.value\n\t\t\t].toString(),\n\t\t};\n\t}\n\n\tif ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {\n\t\tconst { colorStops } = gradientAST;\n\t\tconst step = 100 / ( colorStops.length - 1 );\n\t\tcolorStops.forEach( ( stop, index ) => {\n\t\t\tstop.length = {\n\t\t\t\tvalue: `${ step * index }`,\n\t\t\t\ttype: '%',\n\t\t\t};\n\t\t} );\n\t}\n\n\treturn { gradientAST, hasGradient };\n}\n\nexport function getGradientAstWithControlPoints(\n\tgradientAST: gradientParser.GradientNode,\n\tnewControlPoints: ControlPoint[]\n) {\n\treturn {\n\t\t...gradientAST,\n\t\tcolorStops: newControlPoints.map( ( { position, color } ) => {\n\t\t\tconst { r, g, b, a } = colord( color ).toRgb();\n\t\t\treturn {\n\t\t\t\tlength: {\n\t\t\t\t\ttype: '%',\n\t\t\t\t\tvalue: position?.toString(),\n\t\t\t\t},\n\t\t\t\ttype: a < 1 ? 'rgba' : 'rgb',\n\t\t\t\tvalue:\n\t\t\t\t\ta < 1\n\t\t\t\t\t\t? [ `${ r }`, `${ g }`, `${ b }`, `${ a }` ]\n\t\t\t\t\t\t: [ `${ r }`, `${ g }`, `${ b }` ],\n\t\t\t};\n\t\t} ),\n\t} as gradientParser.GradientNode;\n}\n\nexport function getStopCssColor( colorStop: gradientParser.ColorStop ) {\n\tswitch ( colorStop.type ) {\n\t\tcase 'hex':\n\t\t\treturn `#${ colorStop.value }`;\n\t\tcase 'literal':\n\t\t\treturn colorStop.value;\n\t\tcase 'rgb':\n\t\tcase 'rgba':\n\t\t\treturn `${ colorStop.type }(${ colorStop.value.join( ',' ) })`;\n\t\tdefault:\n\t\t\t// Should be unreachable if passing an AST from gradient-parser.\n\t\t\t// See https://github.com/rafaelcaricio/gradient-parser#ast.\n\t\t\treturn 'transparent';\n\t}\n}\n"]}

package/build-module/{color-list-picker → duotone-picker/color-list-picker}/index.js

@@ -9,11 +9,11 @@ import { swatch } from '@wordpress/icons';
  * Internal dependencies
  */
 
-import Button from '../button';
-import ColorPalette from '../color-palette';
-import ColorIndicator from '../color-indicator';
-import Icon from '../icon';
-import { HStack } from '../h-stack';
+import Button from '../../button';
+import ColorPalette from '../../color-palette';
+import ColorIndicator from '../../color-indicator';
+import Icon from '../../icon';
+import { HStack } from '../../h-stack';
 
 function ColorOption(_ref) {
   let {

package/build-module/duotone-picker/color-list-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/color-list-picker/index.tsx"],"names":["useState","swatch","Button","ColorPalette","ColorIndicator","Icon","HStack","ColorOption","label","value","colors","disableCustomColors","enableAlpha","onChange","isOpen","setIsOpen","prev","ColorListPicker","labels","map","index","newColor","newColors","slice"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AACA,SAASC,MAAT,QAAuB,kBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,YAAP,MAAyB,qBAAzB;AACA,OAAOC,cAAP,MAA2B,uBAA3B;AACA,OAAOC,IAAP,MAAiB,YAAjB;AACA,SAASC,MAAT,QAAuB,eAAvB;;AAGA,SAASC,WAAT,OAOsB;AAAA,MAPA;AACrBC,IAAAA,KADqB;AAErBC,IAAAA,KAFqB;AAGrBC,IAAAA,MAHqB;AAIrBC,IAAAA,mBAJqB;AAKrBC,IAAAA,WALqB;AAMrBC,IAAAA;AANqB,GAOA;AACrB,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwBf,QAAQ,CAAE,KAAF,CAAtC;AACA,SACC,8BACC,cAAC,MAAD;AACC,IAAA,SAAS,EAAC,6CADX;AAEC,IAAA,OAAO,EAAG,MAAMe,SAAS,CAAIC,IAAF,IAAY,CAAEA,IAAhB;AAF1B,KAIC,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC,YAAhB;AAA6B,IAAA,OAAO,EAAG;AAAvC,KACGP,KAAK,GACN,cAAC,cAAD;AACC,IAAA,UAAU,EAAGA,KADd;AAEC,IAAA,SAAS,EAAC;AAFX,IADM,GAMN,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGR;AAAb,IAPF,EASC,4BAAQO,KAAR,CATD,CAJD,CADD,EAiBGM,MAAM,IACP,cAAC,YAAD;AACC,IAAA,SAAS,EAAC,4CADX;AAEC,IAAA,MAAM,EAAGJ,MAFV;AAGC,IAAA,KAAK,EAAGD,KAHT;AAIC,IAAA,SAAS,EAAG,KAJb;AAKC,IAAA,QAAQ,EAAGI,QALZ;AAMC,IAAA,mBAAmB,EAAGF,mBANvB;AAOC,IAAA,WAAW,EAAGC;AAPf,IAlBF,CADD;AA+BA;;AAED,SAASK,eAAT,QAO0B;AAAA,MAPA;AACzBP,IAAAA,MADyB;AAEzBQ,IAAAA,MAFyB;AAGzBT,IAAAA,KAAK,GAAG,EAHiB;AAIzBE,IAAAA,mBAJyB;AAKzBC,IAAAA,WALyB;AAMzBC,IAAAA;AANyB,GAOA;AACzB,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGK,MAAM,CAACC,GAAP,CAAY,CAAEX,KAAF,EAASY,KAAT,KACb,cAAC,WAAD;AACC,IAAA,GAAG,EAAGA,KADP;AAEC,IAAA,KAAK,EAAGZ,KAFT;AAGC,IAAA,KAAK,EAAGC,KAAK,CAAEW,KAAF,CAHd;AAIC,IAAA,MAAM,EAAGV,MAJV;AAKC,IAAA,mBAAmB,EAAGC,mBALvB;AAMC,IAAA,WAAW,EAAGC,WANf;AAOC,IAAA,QAAQ,EAAKS,QAAF,IAAgB;AAC1B,YAAMC,SAAmC,GACxCb,KAAK,CAACc,KAAN,EADD;AAEAD,MAAAA,SAAS,CAAEF,KAAF,CAAT,GAAqBC,QAArB;AACAR,MAAAA,QAAQ,CAAES,SAAF,CAAR;AACA;AAZF,IADC,CADH,CADD;AAoBA;;AAED,eAAeL,eAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport ColorPalette from '../../color-palette';\nimport ColorIndicator from '../../color-indicator';\nimport Icon from '../../icon';\nimport { HStack } from '../../h-stack';\nimport type { ColorListPickerProps, ColorOptionProps } from './types';\n\nfunction ColorOption( {\n\tlabel,\n\tvalue,\n\tcolors,\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorOptionProps ) {\n\tconst [ isOpen, setIsOpen ] = useState( false );\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\tclassName=\"components-color-list-picker__swatch-button\"\n\t\t\t\tonClick={ () => setIsOpen( ( prev ) => ! prev ) }\n\t\t\t>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 2 }>\n\t\t\t\t\t{ value ? (\n\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\tcolorValue={ value }\n\t\t\t\t\t\t\tclassName=\"components-color-list-picker__swatch-color\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon icon={ swatch } />\n\t\t\t\t\t) }\n\t\t\t\t\t<span>{ label }</span>\n\t\t\t\t</HStack>\n\t\t\t</Button>\n\t\t\t{ isOpen && (\n\t\t\t\t<ColorPalette\n\t\t\t\t\tclassName=\"components-color-list-picker__color-picker\"\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tclearable={ false }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ColorListPicker( {\n\tcolors,\n\tlabels,\n\tvalue = [],\n\tdisableCustomColors,\n\tenableAlpha,\n\tonChange,\n}: ColorListPickerProps ) {\n\treturn (\n\t\t<div className=\"components-color-list-picker\">\n\t\t\t{ labels.map( ( label, index ) => (\n\t\t\t\t<ColorOption\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tvalue={ value[ index ] }\n\t\t\t\t\tcolors={ colors }\n\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\tonChange={ ( newColor ) => {\n\t\t\t\t\t\tconst newColors: ( string | undefined )[] =\n\t\t\t\t\t\t\tvalue.slice();\n\t\t\t\t\t\tnewColors[ index ] = newColor;\n\t\t\t\t\t\tonChange( newColors );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default ColorListPicker;\n"]}

package/build-module/duotone-picker/color-list-picker/types.js

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

package/build-module/duotone-picker/color-list-picker/types.js.map

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

package/build-module/duotone-picker/custom-duotone-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/custom-duotone-bar.js"],"names":["CustomGradientBar","getColorStopsFromColors","getGradientFromCSSColors","getColorsFromColorStops","PLACEHOLDER_VALUES","CustomDuotoneBar","value","onChange","hasGradient","values","background","controlPoints","newColorStops","newValue"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,iBAAP,MAA8B,wCAA9B;AAEA,SACCC,uBADD,EAECC,wBAFD,EAGCC,uBAHD,QAIO,SAJP;AAMA,MAAMC,kBAAkB,GAAG,CAAE,MAAF,EAAU,MAAV,CAA3B;AAEA,eAAe,SAASC,gBAAT,OAAiD;AAAA,MAAtB;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAsB;AAC/D,QAAMC,WAAW,GAAG,CAAC,CAAEF,KAAvB;AACA,QAAMG,MAAM,GAAGD,WAAW,GAAGF,KAAH,GAAWF,kBAArC;AACA,QAAMM,UAAU,GAAGR,wBAAwB,CAAEO,MAAF,CAA3C;AACA,QAAME,aAAa,GAAGV,uBAAuB,CAAEQ,MAAF,CAA7C;AACA,SACC,cAAC,iBAAD;AACC,IAAA,eAAe,MADhB;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,WAAW,EAAGF,WAHf;AAIC,IAAA,KAAK,EAAGG,aAJT;AAKC,IAAA,QAAQ,EAAKC,aAAF,IAAqB;AAC/B,YAAMC,QAAQ,GAAGV,uBAAuB,CAAES,aAAF,CAAxC;AACAL,MAAAA,QAAQ,CAAEM,QAAF,CAAR;AACA;AARF,IADD;AAYA","sourcesContent":["/**\n * Internal dependencies\n */\nimport CustomGradientBar from '../custom-gradient-picker/gradient-bar';\n\nimport {\n\tgetColorStopsFromColors,\n\tgetGradientFromCSSColors,\n\tgetColorsFromColorStops,\n} from './utils';\n\nconst PLACEHOLDER_VALUES = [ '#333', '#CCC' ];\n\nexport default function CustomDuotoneBar( { value, onChange } ) {\n\tconst hasGradient = !! value;\n\tconst values = hasGradient ? value : PLACEHOLDER_VALUES;\n\tconst background = getGradientFromCSSColors( values );\n\tconst controlPoints = getColorStopsFromColors( values );\n\treturn (\n\t\t<CustomGradientBar\n\t\t\tdisableInserter\n\t\t\tbackground={ background }\n\t\t\thasGradient={ hasGradient }\n\t\t\tvalue={ controlPoints }\n\t\t\tonChange={ ( newColorStops ) => {\n\t\t\t\tconst newValue = getColorsFromColorStops( newColorStops );\n\t\t\t\tonChange( newValue );\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/custom-duotone-bar.tsx"],"names":["CustomGradientBar","getColorStopsFromColors","getGradientFromCSSColors","getColorsFromColorStops","PLACEHOLDER_VALUES","CustomDuotoneBar","value","onChange","hasGradient","values","background","controlPoints","newColorStops","newValue"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,iBAAP,MAA8B,wCAA9B;AAEA,SACCC,uBADD,EAECC,wBAFD,EAGCC,uBAHD,QAIO,SAJP;AAMA,MAAMC,kBAAkB,GAAG,CAAE,MAAF,EAAU,MAAV,CAA3B;AAEA,eAAe,SAASC,gBAAT,OAMX;AAAA,MANsC;AACzCC,IAAAA,KADyC;AAEzCC,IAAAA;AAFyC,GAMtC;AACH,QAAMC,WAAW,GAAG,CAAC,CAAEF,KAAvB;AACA,QAAMG,MAAM,GAAGD,WAAW,GAAGF,KAAH,GAAWF,kBAArC;AACA,QAAMM,UAAU,GAAGR,wBAAwB,CAAEO,MAAF,CAA3C;AACA,QAAME,aAAa,GAAGV,uBAAuB,CAAEQ,MAAF,CAA7C;AACA,SACC,cAAC,iBAAD;AACC,IAAA,eAAe,MADhB;AAEC,IAAA,UAAU,EAAGC,UAFd;AAGC,IAAA,WAAW,EAAGF,WAHf;AAIC,IAAA,KAAK,EAAGG,aAJT;AAKC,IAAA,QAAQ,EAAKC,aAAF,IAAqB;AAC/B,YAAMC,QAAQ,GAAGV,uBAAuB,CAAES,aAAF,CAAxC;AACAL,MAAAA,QAAQ,CAAEM,QAAF,CAAR;AACA;AARF,IADD;AAYA","sourcesContent":["/**\n * Internal dependencies\n */\nimport CustomGradientBar from '../custom-gradient-picker/gradient-bar';\n\nimport {\n\tgetColorStopsFromColors,\n\tgetGradientFromCSSColors,\n\tgetColorsFromColorStops,\n} from './utils';\n\nconst PLACEHOLDER_VALUES = [ '#333', '#CCC' ];\n\nexport default function CustomDuotoneBar( {\n\tvalue,\n\tonChange,\n}: {\n\tvalue?: string[];\n\tonChange: ( value?: string[] ) => void;\n} ) {\n\tconst hasGradient = !! value;\n\tconst values = hasGradient ? value : PLACEHOLDER_VALUES;\n\tconst background = getGradientFromCSSColors( values );\n\tconst controlPoints = getColorStopsFromColors( values );\n\treturn (\n\t\t<CustomGradientBar\n\t\t\tdisableInserter\n\t\t\tbackground={ background }\n\t\t\thasGradient={ hasGradient }\n\t\t\tvalue={ controlPoints }\n\t\t\tonChange={ ( newColorStops ) => {\n\t\t\t\tconst newValue = getColorsFromColorStops( newColorStops );\n\t\t\t\tonChange( newValue );\n\t\t\t} }\n\t\t/>\n\t);\n}\n"]}

package/build-module/duotone-picker/duotone-picker.js

@@ -14,13 +14,46 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 
-import ColorListPicker from '../color-list-picker';
+import ColorListPicker from './color-list-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
 import { Spacer } from '../spacer';
 
+/**
+ * ```jsx
+ * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const DUOTONE_PALETTE = [
+ * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
+ * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
+ * ];
+ *
+ * const COLOR_PALETTE = [
+ * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
+ * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+ * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
+ * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+ * ];
+ *
+ * const Example = () => {
+ * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
+ * 	return (
+ * 		<>
+ * 			<DuotonePicker
+ * 				duotonePalette={ DUOTONE_PALETTE }
+ * 				colorPalette={ COLOR_PALETTE }
+ * 				value={ duotone }
+ * 				onChange={ setDuotone }
+ * 			/>
+ * 			<DuotoneSwatch values={ duotone } />
+ * 		</>
+ * 	);
+ * };
+ * ```
+ */
 function DuotonePicker(_ref) {
   let {
     clearable = true,
@@ -98,7 +131,10 @@ function DuotonePicker(_ref) {
         newColors[1] = defaultLight;
       }
 
-      const newValue = newColors.length >= 2 ? newColors : undefined;
+      const newValue = newColors.length >= 2 ? newColors : undefined; // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
+      // but it's currently typed as a string[].
+      // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
+
       onChange(newValue);
     }
   }))));

package/build-module/duotone-picker/duotone-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-picker.js"],"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","DuotonePicker","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","defaultDark","defaultLight","isUnset","unsetOption","undefined","options","map","colors","slug","name","style","background","color","tooltipText","label","isSelected","newColors","newValue","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from '../color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\n\nfunction DuotonePicker( {\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n} ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ __( 'Unset' ) }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst options = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t  )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\toptions={ unsetable ? [ unsetOption, ...options ] : options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-picker.tsx"],"names":["fastDeepEqual","useMemo","__","sprintf","ColorListPicker","CircularOptionPicker","VStack","CustomDuotoneBar","getDefaultColors","getGradientFromCSSColors","Spacer","DuotonePicker","clearable","unsetable","colorPalette","duotonePalette","disableCustomColors","disableCustomDuotone","value","onChange","defaultDark","defaultLight","isUnset","unsetOption","undefined","options","map","colors","slug","name","style","background","color","tooltipText","label","isSelected","newColors","newValue","length"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ColorListPicker from './color-list-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\n\nimport CustomDuotoneBar from './custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from './utils';\nimport { Spacer } from '../spacer';\nimport type { DuotonePickerProps } from './types';\n\n/**\n * ```jsx\n * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const DUOTONE_PALETTE = [\n * \t{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },\n * \t{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },\n * ];\n *\n * const COLOR_PALETTE = [\n * \t{ color: '#ff4747', name: 'Red', slug: 'red' },\n * \t{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },\n * \t{ color: '#000097', name: 'Blue', slug: 'blue' },\n * \t{ color: '#8c00b7', name: 'Purple', slug: 'purple' },\n * ];\n *\n * const Example = () => {\n * \tconst [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );\n * \treturn (\n * \t\t<>\n * \t\t\t<DuotonePicker\n * \t\t\t\tduotonePalette={ DUOTONE_PALETTE }\n * \t\t\t\tcolorPalette={ COLOR_PALETTE }\n * \t\t\t\tvalue={ duotone }\n * \t\t\t\tonChange={ setDuotone }\n * \t\t\t/>\n * \t\t\t<DuotoneSwatch values={ duotone } />\n * \t\t</>\n * \t);\n * };\n * ```\n */\nfunction DuotonePicker( {\n\tclearable = true,\n\tunsetable = true,\n\tcolorPalette,\n\tduotonePalette,\n\tdisableCustomColors,\n\tdisableCustomDuotone,\n\tvalue,\n\tonChange,\n}: DuotonePickerProps ) {\n\tconst [ defaultDark, defaultLight ] = useMemo(\n\t\t() => getDefaultColors( colorPalette ),\n\t\t[ colorPalette ]\n\t);\n\n\tconst isUnset = value === 'unset';\n\n\tconst unsetOption = (\n\t\t<CircularOptionPicker.Option\n\t\t\tkey=\"unset\"\n\t\t\tvalue=\"unset\"\n\t\t\tisSelected={ isUnset }\n\t\t\ttooltipText={ __( 'Unset' ) }\n\t\t\tclassName=\"components-duotone-picker__color-indicator\"\n\t\t\tonClick={ () => {\n\t\t\t\tonChange( isUnset ? undefined : 'unset' );\n\t\t\t} }\n\t\t/>\n\t);\n\n\tconst options = duotonePalette.map( ( { colors, slug, name } ) => {\n\t\tconst style = {\n\t\t\tbackground: getGradientFromCSSColors( colors, '135deg' ),\n\t\t\tcolor: 'transparent',\n\t\t};\n\t\tconst tooltipText =\n\t\t\tname ??\n\t\t\tsprintf(\n\t\t\t\t// translators: %s: duotone code e.g: \"dark-grayscale\" or \"7f7f7f-ffffff\".\n\t\t\t\t__( 'Duotone code: %s' ),\n\t\t\t\tslug\n\t\t\t);\n\t\tconst label = name\n\t\t\t? sprintf(\n\t\t\t\t\t// translators: %s: The name of the option e.g: \"Dark grayscale\".\n\t\t\t\t\t__( 'Duotone: %s' ),\n\t\t\t\t\tname\n\t\t\t  )\n\t\t\t: tooltipText;\n\t\tconst isSelected = fastDeepEqual( colors, value );\n\n\t\treturn (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ colors }\n\t\t\t\tisSelected={ isSelected }\n\t\t\t\taria-label={ label }\n\t\t\t\ttooltipText={ tooltipText }\n\t\t\t\tstyle={ style }\n\t\t\t\tonClick={ () => {\n\t\t\t\t\tonChange( isSelected ? undefined : colors );\n\t\t\t\t} }\n\t\t\t/>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\toptions={ unsetable ? [ unsetOption, ...options ] : options }\n\t\t\tactions={\n\t\t\t\t!! clearable && (\n\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t)\n\t\t\t}\n\t\t>\n\t\t\t<Spacer paddingTop={ 4 }>\n\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t{ ! disableCustomColors && ! disableCustomDuotone && (\n\t\t\t\t\t\t<CustomDuotoneBar\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! disableCustomDuotone && (\n\t\t\t\t\t\t<ColorListPicker\n\t\t\t\t\t\t\tlabels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tvalue={ isUnset ? undefined : value }\n\t\t\t\t\t\t\tdisableCustomColors={ disableCustomColors }\n\t\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t\tonChange={ ( newColors ) => {\n\t\t\t\t\t\t\t\tif ( ! newColors[ 0 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 0 ] = defaultDark;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( ! newColors[ 1 ] ) {\n\t\t\t\t\t\t\t\t\tnewColors[ 1 ] = defaultLight;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tconst newValue =\n\t\t\t\t\t\t\t\t\tnewColors.length >= 2\n\t\t\t\t\t\t\t\t\t\t? newColors\n\t\t\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\t\t// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,\n\t\t\t\t\t\t\t\t// but it's currently typed as a string[].\n\t\t\t\t\t\t\t\t// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035\n\t\t\t\t\t\t\t\tonChange( newValue );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\n\t\t\t</Spacer>\n\t\t</CircularOptionPicker>\n\t);\n}\n\nexport default DuotonePicker;\n"]}

package/build-module/duotone-picker/duotone-swatch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-swatch.js"],"names":["swatch","ColorIndicator","Icon","getGradientFromCSSColors","DuotoneSwatch","values"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,kBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,SAASC,wBAAT,QAAyC,SAAzC;;AAEA,SAASC,aAAT,OAAqC;AAAA,MAAb;AAAEC,IAAAA;AAAF,GAAa;AACpC,SAAOA,MAAM,GACZ,cAAC,cAAD;AACC,IAAA,UAAU,EAAGF,wBAAwB,CAAEE,MAAF,EAAU,QAAV;AADtC,IADY,GAKZ,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGL;AAAb,IALD;AAOA;;AAED,eAAeI,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { getGradientFromCSSColors } from './utils';\n\nfunction DuotoneSwatch( { values } ) {\n\treturn values ? (\n\t\t<ColorIndicator\n\t\t\tcolorValue={ getGradientFromCSSColors( values, '135deg' ) }\n\t\t/>\n\t) : (\n\t\t<Icon icon={ swatch } />\n\t);\n}\n\nexport default DuotoneSwatch;\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/duotone-swatch.tsx"],"names":["swatch","ColorIndicator","Icon","getGradientFromCSSColors","DuotoneSwatch","values"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,kBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,oBAA3B;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,SAASC,wBAAT,QAAyC,SAAzC;;AAGA,SAASC,aAAT,OAAyD;AAAA,MAAjC;AAAEC,IAAAA;AAAF,GAAiC;AACxD,SAAOA,MAAM,GACZ,cAAC,cAAD;AACC,IAAA,UAAU,EAAGF,wBAAwB,CAAEE,MAAF,EAAU,QAAV;AADtC,IADY,GAKZ,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGL;AAAb,IALD;AAOA;;AAED,eAAeI,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { swatch } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport ColorIndicator from '../color-indicator';\nimport Icon from '../icon';\nimport { getGradientFromCSSColors } from './utils';\nimport type { DuotoneSwatchProps } from './types';\n\nfunction DuotoneSwatch( { values }: DuotoneSwatchProps ) {\n\treturn values ? (\n\t\t<ColorIndicator\n\t\t\tcolorValue={ getGradientFromCSSColors( values, '135deg' ) }\n\t\t/>\n\t) : (\n\t\t<Icon icon={ swatch } />\n\t);\n}\n\nexport default DuotoneSwatch;\n"]}

package/build-module/duotone-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/index.js"],"names":["default","DuotonePicker","DuotoneSwatch"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,kBAAzC;AACA,SAASD,OAAO,IAAIE,aAApB,QAAyC,kBAAzC","sourcesContent":["export { default as DuotonePicker } from './duotone-picker';\nexport { default as DuotoneSwatch } from './duotone-swatch';\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/index.ts"],"names":["default","DuotonePicker","DuotoneSwatch"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,kBAAzC;AACA,SAASD,OAAO,IAAIE,aAApB,QAAyC,kBAAzC","sourcesContent":["export { default as DuotonePicker } from './duotone-picker';\nexport { default as DuotoneSwatch } from './duotone-swatch';\n"]}

package/build-module/duotone-picker/types.js

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

package/build-module/duotone-picker/types.js.map

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

package/build-module/duotone-picker/utils.js

@@ -3,6 +3,10 @@
  */
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
+/**
+ * Internal dependencies
+ */
+
 extend([namesPlugin]);
 /**
  * Object representation for a color.
@@ -16,9 +20,9 @@ extend([namesPlugin]);
 /**
  * Calculate the brightest and darkest values from a color palette.
  *
- * @param {Object[]} palette Color palette for the theme.
+ * @param palette Color palette for the theme.
  *
- * @return {string[]} Tuple of the darkest color and brightest color.
+ * @return Tuple of the darkest color and brightest color.
  */
 
 export function getDefaultColors(palette) {
@@ -36,9 +40,11 @@ export function getDefaultColors(palette) {
     let [min, max] = _ref2;
     return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max];
   }, [{
-    brightness: 1
+    brightness: 1,
+    color: ''
   }, {
-    brightness: 0
+    brightness: 0,
+    color: ''
   }]).map(_ref3 => {
     let {
       color
@@ -49,10 +55,10 @@ export function getDefaultColors(palette) {
 /**
  * Generate a duotone gradient from a list of colors.
  *
- * @param {string[]} colors CSS color strings.
- * @param {string}   angle  CSS gradient angle.
+ * @param colors CSS color strings.
+ * @param angle  CSS gradient angle.
  *
- * @return {string} CSS gradient string for the duotone swatch.
+ * @return  CSS gradient string for the duotone swatch.
  */
 
 export function getGradientFromCSSColors() {
@@ -65,9 +71,9 @@ export function getGradientFromCSSColors() {
 /**
  * Convert a color array to an array of color stops.
  *
- * @param {string[]} colors CSS colors array
+ * @param colors CSS colors array
  *
- * @return {Object[]} Color stop information.
+ * @return Color stop information.
  */
 
 export function getColorStopsFromColors(colors) {
@@ -79,9 +85,9 @@ export function getColorStopsFromColors(colors) {
 /**
  * Convert a color stop array to an array colors.
  *
- * @param {Object[]} colorStops Color stop information.
+ * @param colorStops Color stop information.
  *
- * @return {string[]} CSS colors array.
+ * @return CSS colors array.
  */
 
 export function getColorsFromColorStops() {

package/build-module/duotone-picker/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/duotone-picker/utils.js"],"names":["colord","extend","namesPlugin","getDefaultColors","palette","length","map","color","brightness","reduce","current","min","max","getGradientFromCSSColors","colors","angle","l","stops","c","i","join","getColorStopsFromColors","position","getColorsFromColorStops","colorStops"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AAEAD,MAAM,CAAE,CAAEC,WAAF,CAAF,CAAN;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,gBAAT,CAA2BC,OAA3B,EAAqC;AAC3C;AACA,MAAK,CAAEA,OAAF,IAAaA,OAAO,CAACC,MAAR,GAAiB,CAAnC,EAAuC,OAAO,CAAE,MAAF,EAAU,MAAV,CAAP;AAEvC,SAAOD,OAAO,CACZE,GADK,CACA;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAmB;AACxBA,MAAAA,KADwB;AAExBC,MAAAA,UAAU,EAAER,MAAM,CAAEO,KAAF,CAAN,CAAgBC,UAAhB;AAFY,KAAnB;AAAA,GADA,EAKLC,MALK,CAML,QAAgBC,OAAhB,KAA6B;AAAA,QAA3B,CAAEC,GAAF,EAAOC,GAAP,CAA2B;AAC5B,WAAO,CACNF,OAAO,CAACF,UAAR,IAAsBG,GAAG,CAACH,UAA1B,GAAuCE,OAAvC,GAAiDC,GAD3C,EAEND,OAAO,CAACF,UAAR,IAAsBI,GAAG,CAACJ,UAA1B,GAAuCE,OAAvC,GAAiDE,GAF3C,CAAP;AAIA,GAXI,EAYL,CAAE;AAAEJ,IAAAA,UAAU,EAAE;AAAd,GAAF,EAAqB;AAAEA,IAAAA,UAAU,EAAE;AAAd,GAArB,CAZK,EAcLF,GAdK,CAcA;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAjB;AAAA,GAdA,CAAP;AAeA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASM,wBAAT,GAAkE;AAAA,MAA/BC,MAA+B,uEAAtB,EAAsB;AAAA,MAAlBC,KAAkB,uEAAV,OAAU;AACxE,QAAMC,CAAC,GAAG,MAAMF,MAAM,CAACT,MAAvB;AAEA,QAAMY,KAAK,GAAGH,MAAM,CAClBR,GADY,CACP,CAAEY,CAAF,EAAKC,CAAL,KAAa,GAAGD,CAAG,IAAIC,CAAC,GAAGH,CAAG,MAAME,CAAG,IAAI,CAAEC,CAAC,GAAG,CAAN,IAAYH,CAAG,GADnD,EAEZI,IAFY,CAEN,IAFM,CAAd;AAIA,SAAQ,oBAAoBL,KAAO,KAAKE,KAAO,IAA/C;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASI,uBAAT,CAAkCP,MAAlC,EAA2C;AACjD,SAAOA,MAAM,CAACR,GAAP,CAAY,CAAEC,KAAF,EAASY,CAAT,MAAkB;AACpCG,IAAAA,QAAQ,EAAIH,CAAC,GAAG,GAAN,IAAgBL,MAAM,CAACT,MAAP,GAAgB,CAAhC,CAD0B;AAEpCE,IAAAA;AAFoC,GAAlB,CAAZ,CAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASgB,uBAAT,GAAoD;AAAA,MAAlBC,UAAkB,uEAAL,EAAK;AAC1D,SAAOA,UAAU,CAAClB,GAAX,CAAgB;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAjB;AAAA,GAAhB,CAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\nextend( [ namesPlugin ] );\n\n/**\n * Object representation for a color.\n *\n * @typedef {Object} RGBColor\n * @property {number} r Red component of the color in the range [0,1].\n * @property {number} g Green component of the color in the range [0,1].\n * @property {number} b Blue component of the color in the range [0,1].\n */\n\n/**\n * Calculate the brightest and darkest values from a color palette.\n *\n * @param {Object[]} palette Color palette for the theme.\n *\n * @return {string[]} Tuple of the darkest color and brightest color.\n */\nexport function getDefaultColors( palette ) {\n\t// A default dark and light color are required.\n\tif ( ! palette || palette.length < 2 ) return [ '#000', '#fff' ];\n\n\treturn palette\n\t\t.map( ( { color } ) => ( {\n\t\t\tcolor,\n\t\t\tbrightness: colord( color ).brightness(),\n\t\t} ) )\n\t\t.reduce(\n\t\t\t( [ min, max ], current ) => {\n\t\t\t\treturn [\n\t\t\t\t\tcurrent.brightness <= min.brightness ? current : min,\n\t\t\t\t\tcurrent.brightness >= max.brightness ? current : max,\n\t\t\t\t];\n\t\t\t},\n\t\t\t[ { brightness: 1 }, { brightness: 0 } ]\n\t\t)\n\t\t.map( ( { color } ) => color );\n}\n\n/**\n * Generate a duotone gradient from a list of colors.\n *\n * @param {string[]} colors CSS color strings.\n * @param {string}   angle  CSS gradient angle.\n *\n * @return {string} CSS gradient string for the duotone swatch.\n */\nexport function getGradientFromCSSColors( colors = [], angle = '90deg' ) {\n\tconst l = 100 / colors.length;\n\n\tconst stops = colors\n\t\t.map( ( c, i ) => `${ c } ${ i * l }%, ${ c } ${ ( i + 1 ) * l }%` )\n\t\t.join( ', ' );\n\n\treturn `linear-gradient( ${ angle }, ${ stops } )`;\n}\n\n/**\n * Convert a color array to an array of color stops.\n *\n * @param {string[]} colors CSS colors array\n *\n * @return {Object[]} Color stop information.\n */\nexport function getColorStopsFromColors( colors ) {\n\treturn colors.map( ( color, i ) => ( {\n\t\tposition: ( i * 100 ) / ( colors.length - 1 ),\n\t\tcolor,\n\t} ) );\n}\n\n/**\n * Convert a color stop array to an array colors.\n *\n * @param {Object[]} colorStops Color stop information.\n *\n * @return {string[]} CSS colors array.\n */\nexport function getColorsFromColorStops( colorStops = [] ) {\n\treturn colorStops.map( ( { color } ) => color );\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/utils.ts"],"names":["colord","extend","namesPlugin","getDefaultColors","palette","length","map","color","brightness","reduce","current","min","max","getGradientFromCSSColors","colors","angle","l","stops","c","i","join","getColorStopsFromColors","position","getColorsFromColorStops","colorStops"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,WAAP,MAAwB,sBAAxB;AAEA;AACA;AACA;;AAGAD,MAAM,CAAE,CAAEC,WAAF,CAAF,CAAN;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,gBAAT,CACNC,OADM,EAEL;AACD;AACA,MAAK,CAAEA,OAAF,IAAaA,OAAO,CAACC,MAAR,GAAiB,CAAnC,EAAuC,OAAO,CAAE,MAAF,EAAU,MAAV,CAAP;AAEvC,SAAOD,OAAO,CACZE,GADK,CACA;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAmB;AACxBA,MAAAA,KADwB;AAExBC,MAAAA,UAAU,EAAER,MAAM,CAAEO,KAAF,CAAN,CAAgBC,UAAhB;AAFY,KAAnB;AAAA,GADA,EAKLC,MALK,CAML,QAAgBC,OAAhB,KAA6B;AAAA,QAA3B,CAAEC,GAAF,EAAOC,GAAP,CAA2B;AAC5B,WAAO,CACNF,OAAO,CAACF,UAAR,IAAsBG,GAAG,CAACH,UAA1B,GAAuCE,OAAvC,GAAiDC,GAD3C,EAEND,OAAO,CAACF,UAAR,IAAsBI,GAAG,CAACJ,UAA1B,GAAuCE,OAAvC,GAAiDE,GAF3C,CAAP;AAIA,GAXI,EAYL,CACC;AAAEJ,IAAAA,UAAU,EAAE,CAAd;AAAiBD,IAAAA,KAAK,EAAE;AAAxB,GADD,EAEC;AAAEC,IAAAA,UAAU,EAAE,CAAd;AAAiBD,IAAAA,KAAK,EAAE;AAAxB,GAFD,CAZK,EAiBLD,GAjBK,CAiBA;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAjB;AAAA,GAjBA,CAAP;AAkBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASM,wBAAT,GAGL;AAAA,MAFDC,MAEC,uEAFkB,EAElB;AAAA,MADDC,KACC,uEADO,OACP;AACD,QAAMC,CAAC,GAAG,MAAMF,MAAM,CAACT,MAAvB;AAEA,QAAMY,KAAK,GAAGH,MAAM,CAClBR,GADY,CACP,CAAEY,CAAF,EAAKC,CAAL,KAAa,GAAGD,CAAG,IAAIC,CAAC,GAAGH,CAAG,MAAME,CAAG,IAAI,CAAEC,CAAC,GAAG,CAAN,IAAYH,CAAG,GADnD,EAEZI,IAFY,CAEN,IAFM,CAAd;AAIA,SAAQ,oBAAoBL,KAAO,KAAKE,KAAO,IAA/C;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASI,uBAAT,CAAkCP,MAAlC,EAAqD;AAC3D,SAAOA,MAAM,CAACR,GAAP,CAAY,CAAEC,KAAF,EAASY,CAAT,MAAkB;AACpCG,IAAAA,QAAQ,EAAIH,CAAC,GAAG,GAAN,IAAgBL,MAAM,CAACT,MAAP,GAAgB,CAAhC,CAD0B;AAEpCE,IAAAA;AAFoC,GAAlB,CAAZ,CAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASgB,uBAAT,GAEL;AAAA,MADDC,UACC,uEADmD,EACnD;AACD,SAAOA,UAAU,CAAClB,GAAX,CAAgB;AAAA,QAAE;AAAEC,MAAAA;AAAF,KAAF;AAAA,WAAiBA,KAAjB;AAAA,GAAhB,CAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport type { DuotonePickerProps } from './types';\n\nextend( [ namesPlugin ] );\n\n/**\n * Object representation for a color.\n *\n * @typedef {Object} RGBColor\n * @property {number} r Red component of the color in the range [0,1].\n * @property {number} g Green component of the color in the range [0,1].\n * @property {number} b Blue component of the color in the range [0,1].\n */\n\n/**\n * Calculate the brightest and darkest values from a color palette.\n *\n * @param palette Color palette for the theme.\n *\n * @return Tuple of the darkest color and brightest color.\n */\nexport function getDefaultColors(\n\tpalette: DuotonePickerProps[ 'colorPalette' ]\n) {\n\t// A default dark and light color are required.\n\tif ( ! palette || palette.length < 2 ) return [ '#000', '#fff' ];\n\n\treturn palette\n\t\t.map( ( { color } ) => ( {\n\t\t\tcolor,\n\t\t\tbrightness: colord( color ).brightness(),\n\t\t} ) )\n\t\t.reduce(\n\t\t\t( [ min, max ], current ) => {\n\t\t\t\treturn [\n\t\t\t\t\tcurrent.brightness <= min.brightness ? current : min,\n\t\t\t\t\tcurrent.brightness >= max.brightness ? current : max,\n\t\t\t\t];\n\t\t\t},\n\t\t\t[\n\t\t\t\t{ brightness: 1, color: '' },\n\t\t\t\t{ brightness: 0, color: '' },\n\t\t\t]\n\t\t)\n\t\t.map( ( { color } ) => color );\n}\n\n/**\n * Generate a duotone gradient from a list of colors.\n *\n * @param colors CSS color strings.\n * @param angle  CSS gradient angle.\n *\n * @return  CSS gradient string for the duotone swatch.\n */\nexport function getGradientFromCSSColors(\n\tcolors: string[] = [],\n\tangle = '90deg'\n) {\n\tconst l = 100 / colors.length;\n\n\tconst stops = colors\n\t\t.map( ( c, i ) => `${ c } ${ i * l }%, ${ c } ${ ( i + 1 ) * l }%` )\n\t\t.join( ', ' );\n\n\treturn `linear-gradient( ${ angle }, ${ stops } )`;\n}\n\n/**\n * Convert a color array to an array of color stops.\n *\n * @param colors CSS colors array\n *\n * @return Color stop information.\n */\nexport function getColorStopsFromColors( colors: string[] ) {\n\treturn colors.map( ( color, i ) => ( {\n\t\tposition: ( i * 100 ) / ( colors.length - 1 ),\n\t\tcolor,\n\t} ) );\n}\n\n/**\n * Convert a color stop array to an array colors.\n *\n * @param colorStops Color stop information.\n *\n * @return CSS colors array.\n */\nexport function getColorsFromColorStops(\n\tcolorStops: { position: number; color: string }[] = []\n) {\n\treturn colorStops.map( ( { color } ) => color );\n}\n"]}

package/build-module/form-token-field/index.js

@@ -23,7 +23,8 @@ import TokenInput from './token-input';
 import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
 import { FlexItem } from '../flex';
-import { StyledLabel } from '../base-control/styles/base-control-styles';
+import { StyledHelp, StyledLabel } from '../base-control/styles/base-control-styles';
+import { Spacer } from '../spacer';
 
 const identity = value => value;
 /**
@@ -68,7 +69,8 @@ export function FormTokenField(props) {
     __experimentalValidateInput = () => true,
     __experimentalShowHowTo = true,
     __next36pxDefaultSize = false,
-    __experimentalAutoSelectFirstMatch = false
+    __experimentalAutoSelectFirstMatch = false,
+    __nextHasNoMarginBottom = false
   } = props;
   const instanceId = useInstanceId(FormTokenField); // We reset to these initial values again in the onBlur
 
@@ -633,9 +635,12 @@ export function FormTokenField(props) {
     onHover: onSuggestionHovered,
     onSelect: onSuggestionSelected,
     __experimentalRenderItem: __experimentalRenderItem
-  })), __experimentalShowHowTo && createElement("p", {
+  })), !__nextHasNoMarginBottom && createElement(Spacer, {
+    marginBottom: 2
+  }), __experimentalShowHowTo && createElement(StyledHelp, {
     id: `components-form-token-suggestions-howto-${instanceId}`,
-    className: "components-form-token-field__help"
+    className: "components-form-token-field__help",
+    __nextHasNoMarginBottom: __nextHasNoMarginBottom
   }, tokenizeOnSpace ? __('Separate with commas, spaces, or the Enter key.') : __('Separate with commas or the Enter key.')));
   /* eslint-enable jsx-a11y/no-static-element-interactions */
 }