@wordpress/components 24.0.0 → 25.1.0

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

@@ -15,15 +15,14 @@ import ColorIndicator from '../../color-indicator';
 import Icon from '../../icon';
 import { HStack } from '../../h-stack';
 
-function ColorOption(_ref) {
-  let {
-    label,
-    value,
-    colors,
-    disableCustomColors,
-    enableAlpha,
-    onChange
-  } = _ref;
+function ColorOption({
+  label,
+  value,
+  colors,
+  disableCustomColors,
+  enableAlpha,
+  onChange
+}) {
   const [isOpen, setIsOpen] = useState(false);
   return createElement(Fragment, null, createElement(Button, {
     className: "components-color-list-picker__swatch-button",
@@ -47,15 +46,14 @@ function ColorOption(_ref) {
   }));
 }
 
-function ColorListPicker(_ref2) {
-  let {
-    colors,
-    labels,
-    value = [],
-    disableCustomColors,
-    enableAlpha,
-    onChange
-  } = _ref2;
+function ColorListPicker({
+  colors,
+  labels,
+  value = [],
+  disableCustomColors,
+  enableAlpha,
+  onChange
+}) {
   return createElement("div", {
     className: "components-color-list-picker"
   }, labels.map((label, index) => createElement(ColorOption, {

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

@@ -1 +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"]}
+{"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,CAAsB;AACrBC,EAAAA,KADqB;AAErBC,EAAAA,KAFqB;AAGrBC,EAAAA,MAHqB;AAIrBC,EAAAA,mBAJqB;AAKrBC,EAAAA,WALqB;AAMrBC,EAAAA;AANqB,CAAtB,EAOsB;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,CAA0B;AACzBP,EAAAA,MADyB;AAEzBQ,EAAAA,MAFyB;AAGzBT,EAAAA,KAAK,GAAG,EAHiB;AAIzBE,EAAAA,mBAJyB;AAKzBC,EAAAA,WALyB;AAMzBC,EAAAA;AANyB,CAA1B,EAO0B;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/custom-duotone-bar.js

@@ -6,11 +6,10 @@ import { createElement } from "@wordpress/element";
 import CustomGradientBar from '../custom-gradient-picker/gradient-bar';
 import { getColorStopsFromColors, getGradientFromCSSColors, getColorsFromColorStops } from './utils';
 const PLACEHOLDER_VALUES = ['#333', '#CCC'];
-export default function CustomDuotoneBar(_ref) {
-  let {
-    value,
-    onChange
-  } = _ref;
+export default function CustomDuotoneBar({
+  value,
+  onChange
+}) {
   const hasGradient = !!value;
   const values = hasGradient ? value : PLACEHOLDER_VALUES;
   const background = getGradientFromCSSColors(values);

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

@@ -1 +1 @@
-{"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"]}
+{"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,CAA2B;AACzCC,EAAAA,KADyC;AAEzCC,EAAAA;AAFyC,CAA3B,EAMX;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

@@ -54,17 +54,16 @@ import { Spacer } from '../spacer';
  * };
  * ```
  */
-function DuotonePicker(_ref) {
-  let {
-    clearable = true,
-    unsetable = true,
-    colorPalette,
-    duotonePalette,
-    disableCustomColors,
-    disableCustomDuotone,
-    value,
-    onChange
-  } = _ref;
+function DuotonePicker({
+  clearable = true,
+  unsetable = true,
+  colorPalette,
+  duotonePalette,
+  disableCustomColors,
+  disableCustomDuotone,
+  value,
+  onChange
+}) {
   const [defaultDark, defaultLight] = useMemo(() => getDefaultColors(colorPalette), [colorPalette]);
   const isUnset = value === 'unset';
   const unsetOption = createElement(CircularOptionPicker.Option, {
@@ -77,12 +76,11 @@ function DuotonePicker(_ref) {
       onChange(isUnset ? undefined : 'unset');
     }
   });
-  const options = duotonePalette.map(_ref2 => {
-    let {
-      colors,
-      slug,
-      name
-    } = _ref2;
+  const options = duotonePalette.map(({
+    colors,
+    slug,
+    name
+  }) => {
     const style = {
       background: getGradientFromCSSColors(colors, '135deg'),
       color: 'transparent'

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

@@ -1 +1 @@
-{"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"]}
+{"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

@@ -12,10 +12,9 @@ import ColorIndicator from '../color-indicator';
 import Icon from '../icon';
 import { getGradientFromCSSColors } from './utils';
 
-function DuotoneSwatch(_ref) {
-  let {
-    values
-  } = _ref;
+function DuotoneSwatch({
+  values
+}) {
   return values ? createElement(ColorIndicator, {
     colorValue: getGradientFromCSSColors(values, '135deg')
   }) : createElement(Icon, {

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

@@ -1 +1 @@
-{"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"]}
+{"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,CAAwB;AAAEC,EAAAA;AAAF,CAAxB,EAAyD;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/utils.js

@@ -28,16 +28,12 @@ extend([namesPlugin]);
 export function getDefaultColors(palette) {
   // A default dark and light color are required.
   if (!palette || palette.length < 2) return ['#000', '#fff'];
-  return palette.map(_ref => {
-    let {
-      color
-    } = _ref;
-    return {
-      color,
-      brightness: colord(color).brightness()
-    };
-  }).reduce((_ref2, current) => {
-    let [min, max] = _ref2;
+  return palette.map(({
+    color
+  }) => ({
+    color,
+    brightness: colord(color).brightness()
+  })).reduce(([min, max], current) => {
     return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max];
   }, [{
     brightness: 1,
@@ -45,12 +41,9 @@ export function getDefaultColors(palette) {
   }, {
     brightness: 0,
     color: ''
-  }]).map(_ref3 => {
-    let {
-      color
-    } = _ref3;
-    return color;
-  });
+  }]).map(({
+    color
+  }) => color);
 }
 /**
  * Generate a duotone gradient from a list of colors.
@@ -61,9 +54,7 @@ export function getDefaultColors(palette) {
  * @return  CSS gradient string for the duotone swatch.
  */
 
-export function getGradientFromCSSColors() {
-  let colors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  let angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '90deg';
+export function getGradientFromCSSColors(colors = [], angle = '90deg') {
   const l = 100 / colors.length;
   const stops = colors.map((c, i) => `${c} ${i * l}%, ${c} ${(i + 1) * l}%`).join(', ');
   return `linear-gradient( ${angle}, ${stops} )`;
@@ -90,13 +81,9 @@ export function getColorStopsFromColors(colors) {
  * @return CSS colors array.
  */
 
-export function getColorsFromColorStops() {
-  let colorStops = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return colorStops.map(_ref4 => {
-    let {
-      color
-    } = _ref4;
-    return color;
-  });
+export function getColorsFromColorStops(colorStops = []) {
+  return colorStops.map(({
+    color
+  }) => color);
 }
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["@wordpress/components/src/duotone-picker/utils.ts"],"names":["colord","extend","namesPlugin","getDefaultColors","palette","length","map","color","brightness","reduce","min","max","current","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,CAAE;AAAEC,IAAAA;AAAF,GAAF,MAAmB;AACxBA,IAAAA,KADwB;AAExBC,IAAAA,UAAU,EAAER,MAAM,CAAEO,KAAF,CAAN,CAAgBC,UAAhB;AAFY,GAAnB,CADA,EAKLC,MALK,CAML,CAAE,CAAEC,GAAF,EAAOC,GAAP,CAAF,EAAgBC,OAAhB,KAA6B;AAC5B,WAAO,CACNA,OAAO,CAACJ,UAAR,IAAsBE,GAAG,CAACF,UAA1B,GAAuCI,OAAvC,GAAiDF,GAD3C,EAENE,OAAO,CAACJ,UAAR,IAAsBG,GAAG,CAACH,UAA1B,GAAuCI,OAAvC,GAAiDD,GAF3C,CAAP;AAIA,GAXI,EAYL,CACC;AAAEH,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,CAAE;AAAEC,IAAAA;AAAF,GAAF,KAAiBA,KAjBjB,CAAP;AAkBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASM,wBAAT,CACNC,MAAgB,GAAG,EADb,EAENC,KAAK,GAAG,OAFF,EAGL;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,CACNC,UAAiD,GAAG,EAD9C,EAEL;AACD,SAAOA,UAAU,CAAClB,GAAX,CAAgB,CAAE;AAAEC,IAAAA;AAAF,GAAF,KAAiBA,KAAjC,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/external-link/index.js

@@ -33,7 +33,7 @@ function UnforwardedExternalLink(props, ref) {
   This constant helps check for on page anchor links,
   to prevent them from being opened in the editor. */
 
-  const isInternalAnchor = !!(href !== null && href !== void 0 && href.startsWith('#'));
+  const isInternalAnchor = !!href?.startsWith('#');
 
   const onClickHandler = event => {
     if (isInternalAnchor) {

package/build-module/external-link/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/external-link/index.tsx"],"names":["classnames","__","forwardRef","external","VisuallyHidden","StyledIcon","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","ExternalLink"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,oBAA3B;AACA,SAASC,QAAT,QAAyB,kBAAzB;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,oBAA/B;AACA,SAASC,UAAT,QAA2B,+BAA3B;;AAIA,SAASC,uBAAT,CACCC,KADD,EAKCC,GALD,EAME;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,SAAlB;AAA6BC,IAAAA,GAAG,GAAG,EAAnC;AAAuC,OAAGC;AAA1C,MAA8DN,KAApE;AACA,QAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAJ,CACF,CACC,GAAGH,GAAG,CAACI,KAAJ,CAAW,GAAX,CADJ,EAEC,UAFD,EAGC,YAHD,EAIC,UAJD,EAKEC,MALF,CAKUC,OALV,CADE,CADiB,EASnBC,IATmB,CASb,GATa,CAArB;AAUA,QAAMC,OAAO,GAAGpB,UAAU,CAAE,0BAAF,EAA8BW,SAA9B,CAA1B;AACA;AACD;AACA;;AACC,QAAMU,gBAAgB,GAAG,CAAC,EAAEZ,IAAF,aAAEA,IAAF,eAAEA,IAAI,CAAEa,UAAN,CAAkB,GAAlB,CAAF,CAA1B;;AAEA,QAAMC,cAAc,GACnBC,KADsB,IAElB;AACJ,QAAKH,gBAAL,EAAwB;AACvBG,MAAAA,KAAK,CAACC,cAAN;AACA;;AAED,QAAKlB,KAAK,CAACmB,OAAX,EAAqB;AACpBnB,MAAAA,KAAK,CAACmB,OAAN,CAAeF,KAAf;AACA;AACD,GAVD;;AAYA;AACC;AACA,oCACMX,eADN;AAEC,MAAA,SAAS,EAAGO,OAFb;AAGC,MAAA,IAAI,EAAGX,IAHR;AAIC,MAAA,OAAO,EAAGc,cAJX;AAKC,MAAA,MAAM,EAAC,QALR;AAMC,MAAA,GAAG,EAAGT,YANP;AAOC,MAAA,GAAG,EAAGN;AAPP,QASGE,QATH,EAUC,cAAC,cAAD;AAAgB,MAAA,EAAE,EAAC;AAAnB;AAEE;AACAT,IAAAA,EAAE,CAAE,sBAAF,CAHJ,CAVD,EAgBC,cAAC,UAAD;AACC,MAAA,IAAI,EAAGE,QADR;AAEC,MAAA,SAAS,EAAC;AAFX,MAhBD;AAqBA;;AAvBD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMwB,YAAY,GAAGzB,UAAU,CAAEI,uBAAF,CAA/B;AAEP,eAAeqB,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport { external } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { StyledIcon } from './styles/external-link-styles';\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = classnames( 'components-external-link', className );\n\t/* Anchor links are perceived as external links.\n\tThis constant helps check for on page anchor links,\n\tto prevent them from being opened in the editor. */\n\tconst isInternalAnchor = !! href?.startsWith( '#' );\n\n\tconst onClickHandler = (\n\t\tevent: React.MouseEvent< HTMLAnchorElement, MouseEvent >\n\t) => {\n\t\tif ( isInternalAnchor ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\tif ( props.onClick ) {\n\t\t\tprops.onClick( event );\n\t\t}\n\t};\n\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tonClick={ onClickHandler }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t{\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t</VisuallyHidden>\n\t\t\t<StyledIcon\n\t\t\t\ticon={ external }\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t/>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"]}
+{"version":3,"sources":["@wordpress/components/src/external-link/index.tsx"],"names":["classnames","__","forwardRef","external","VisuallyHidden","StyledIcon","UnforwardedExternalLink","props","ref","href","children","className","rel","additionalProps","optimizedRel","Set","split","filter","Boolean","join","classes","isInternalAnchor","startsWith","onClickHandler","event","preventDefault","onClick","ExternalLink"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;;AAGA;AACA;AACA;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,UAAT,QAA2B,oBAA3B;AACA,SAASC,QAAT,QAAyB,kBAAzB;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,oBAA/B;AACA,SAASC,UAAT,QAA2B,+BAA3B;;AAIA,SAASC,uBAAT,CACCC,KADD,EAKCC,GALD,EAME;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,QAAR;AAAkBC,IAAAA,SAAlB;AAA6BC,IAAAA,GAAG,GAAG,EAAnC;AAAuC,OAAGC;AAA1C,MAA8DN,KAApE;AACA,QAAMO,YAAY,GAAG,CACpB,GAAG,IAAIC,GAAJ,CACF,CACC,GAAGH,GAAG,CAACI,KAAJ,CAAW,GAAX,CADJ,EAEC,UAFD,EAGC,YAHD,EAIC,UAJD,EAKEC,MALF,CAKUC,OALV,CADE,CADiB,EASnBC,IATmB,CASb,GATa,CAArB;AAUA,QAAMC,OAAO,GAAGpB,UAAU,CAAE,0BAAF,EAA8BW,SAA9B,CAA1B;AACA;AACD;AACA;;AACC,QAAMU,gBAAgB,GAAG,CAAC,CAAEZ,IAAI,EAAEa,UAAN,CAAkB,GAAlB,CAA5B;;AAEA,QAAMC,cAAc,GACnBC,KADsB,IAElB;AACJ,QAAKH,gBAAL,EAAwB;AACvBG,MAAAA,KAAK,CAACC,cAAN;AACA;;AAED,QAAKlB,KAAK,CAACmB,OAAX,EAAqB;AACpBnB,MAAAA,KAAK,CAACmB,OAAN,CAAeF,KAAf;AACA;AACD,GAVD;;AAYA;AACC;AACA,oCACMX,eADN;AAEC,MAAA,SAAS,EAAGO,OAFb;AAGC,MAAA,IAAI,EAAGX,IAHR;AAIC,MAAA,OAAO,EAAGc,cAJX;AAKC,MAAA,MAAM,EAAC,QALR;AAMC,MAAA,GAAG,EAAGT,YANP;AAOC,MAAA,GAAG,EAAGN;AAPP,QASGE,QATH,EAUC,cAAC,cAAD;AAAgB,MAAA,EAAE,EAAC;AAAnB;AAEE;AACAT,IAAAA,EAAE,CAAE,sBAAF,CAHJ,CAVD,EAgBC,cAAC,UAAD;AACC,MAAA,IAAI,EAAGE,QADR;AAEC,MAAA,SAAS,EAAC;AAFX,MAhBD;AAqBA;;AAvBD;AAyBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMwB,YAAY,GAAGzB,UAAU,CAAEI,uBAAF,CAA/B;AAEP,eAAeqB,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { forwardRef } from '@wordpress/element';\nimport { external } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport { StyledIcon } from './styles/external-link-styles';\nimport type { ExternalLinkProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nfunction UnforwardedExternalLink(\n\tprops: Omit<\n\t\tWordPressComponentProps< ExternalLinkProps, 'a', false >,\n\t\t'target'\n\t>,\n\tref: ForwardedRef< HTMLAnchorElement >\n) {\n\tconst { href, children, className, rel = '', ...additionalProps } = props;\n\tconst optimizedRel = [\n\t\t...new Set(\n\t\t\t[\n\t\t\t\t...rel.split( ' ' ),\n\t\t\t\t'external',\n\t\t\t\t'noreferrer',\n\t\t\t\t'noopener',\n\t\t\t].filter( Boolean )\n\t\t),\n\t].join( ' ' );\n\tconst classes = classnames( 'components-external-link', className );\n\t/* Anchor links are perceived as external links.\n\tThis constant helps check for on page anchor links,\n\tto prevent them from being opened in the editor. */\n\tconst isInternalAnchor = !! href?.startsWith( '#' );\n\n\tconst onClickHandler = (\n\t\tevent: React.MouseEvent< HTMLAnchorElement, MouseEvent >\n\t) => {\n\t\tif ( isInternalAnchor ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\tif ( props.onClick ) {\n\t\t\tprops.onClick( event );\n\t\t}\n\t};\n\n\treturn (\n\t\t/* eslint-disable react/jsx-no-target-blank */\n\t\t<a\n\t\t\t{ ...additionalProps }\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tonClick={ onClickHandler }\n\t\t\ttarget=\"_blank\"\n\t\t\trel={ optimizedRel }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t{\n\t\t\t\t\t/* translators: accessibility text */\n\t\t\t\t\t__( '(opens in a new tab)' )\n\t\t\t\t}\n\t\t\t</VisuallyHidden>\n\t\t\t<StyledIcon\n\t\t\t\ticon={ external }\n\t\t\t\tclassName=\"components-external-link__icon\"\n\t\t\t/>\n\t\t</a>\n\t\t/* eslint-enable react/jsx-no-target-blank */\n\t);\n}\n\n/**\n * Link to an external resource.\n *\n * ```jsx\n * import { ExternalLink } from '@wordpress/components';\n *\n * const MyExternalLink = () => (\n *   <ExternalLink href=\"https://wordpress.org\">WordPress.org</ExternalLink>\n * );\n * ```\n */\nexport const ExternalLink = forwardRef( UnforwardedExternalLink );\n\nexport default ExternalLink;\n"]}

package/build-module/external-link/index.native.js

@@ -10,11 +10,10 @@ import { TouchableOpacity, Text, Linking } from 'react-native';
 
 import { __ } from '@wordpress/i18n';
 import { external, Icon } from '@wordpress/icons';
-export function ExternalLink(_ref) {
-  let {
-    href,
-    children
-  } = _ref;
+export function ExternalLink({
+  href,
+  children
+}) {
   return createElement(TouchableOpacity, {
     onPress: () => Linking.openURL(href),
     accessibilityLabel: __('Open link in a browser')

package/build-module/external-link/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/external-link/index.native.js"],"names":["TouchableOpacity","Text","Linking","__","external","Icon","ExternalLink","href","children","openURL"],"mappings":";;AAAA;AACA;AACA;AAEA,SAASA,gBAAT,EAA2BC,IAA3B,EAAiCC,OAAjC,QAAgD,cAAhD;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,QAAT,EAAmBC,IAAnB,QAA+B,kBAA/B;AAEA,OAAO,SAASC,YAAT,OAA4C;AAAA,MAArB;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAqB;AAClD,SACC,cAAC,gBAAD;AACC,IAAA,OAAO,EAAG,MAAMN,OAAO,CAACO,OAAR,CAAiBF,IAAjB,CADjB;AAEC,IAAA,kBAAkB,EAAGJ,EAAE,CAAE,wBAAF;AAFxB,KAIC,cAAC,IAAD,QAAQK,QAAR,CAJD,EAKC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGJ;AAAb,IALD,CADD;AASA;AAED,eAAeE,YAAf","sourcesContent":["/**\n * External dependencies\n */\n\nimport { TouchableOpacity, Text, Linking } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { external, Icon } from '@wordpress/icons';\n\nexport function ExternalLink( { href, children } ) {\n\treturn (\n\t\t<TouchableOpacity\n\t\t\tonPress={ () => Linking.openURL( href ) }\n\t\t\taccessibilityLabel={ __( 'Open link in a browser' ) }\n\t\t>\n\t\t\t<Text>{ children }</Text>\n\t\t\t<Icon icon={ external } />\n\t\t</TouchableOpacity>\n\t);\n}\n\nexport default ExternalLink;\n"]}
+{"version":3,"sources":["@wordpress/components/src/external-link/index.native.js"],"names":["TouchableOpacity","Text","Linking","__","external","Icon","ExternalLink","href","children","openURL"],"mappings":";;AAAA;AACA;AACA;AAEA,SAASA,gBAAT,EAA2BC,IAA3B,EAAiCC,OAAjC,QAAgD,cAAhD;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,QAAT,EAAmBC,IAAnB,QAA+B,kBAA/B;AAEA,OAAO,SAASC,YAAT,CAAuB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAAvB,EAA4C;AAClD,SACC,cAAC,gBAAD;AACC,IAAA,OAAO,EAAG,MAAMN,OAAO,CAACO,OAAR,CAAiBF,IAAjB,CADjB;AAEC,IAAA,kBAAkB,EAAGJ,EAAE,CAAE,wBAAF;AAFxB,KAIC,cAAC,IAAD,QAAQK,QAAR,CAJD,EAKC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGJ;AAAb,IALD,CADD;AASA;AAED,eAAeE,YAAf","sourcesContent":["/**\n * External dependencies\n */\n\nimport { TouchableOpacity, Text, Linking } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { external, Icon } from '@wordpress/icons';\n\nexport function ExternalLink( { href, children } ) {\n\treturn (\n\t\t<TouchableOpacity\n\t\t\tonPress={ () => Linking.openURL( href ) }\n\t\t\taccessibilityLabel={ __( 'Open link in a browser' ) }\n\t\t>\n\t\t\t<Text>{ children }</Text>\n\t\t\t<Icon icon={ external } />\n\t\t</TouchableOpacity>\n\t);\n}\n\nexport default ExternalLink;\n"]}

package/build-module/focal-point-picker/controls.js

@@ -16,16 +16,15 @@ const TEXTCONTROL_MAX = 100;
 
 const noop = () => {};
 
-export default function FocalPointPickerControls(_ref) {
-  let {
-    __nextHasNoMarginBottom,
-    hasHelpText,
-    onChange = noop,
-    point = {
-      x: 0.5,
-      y: 0.5
-    }
-  } = _ref;
+export default function FocalPointPickerControls({
+  __nextHasNoMarginBottom,
+  hasHelpText,
+  onChange = noop,
+  point = {
+    x: 0.5,
+    y: 0.5
+  }
+}) {
   const valueX = fractionToPercentage(point.x);
   const valueY = fractionToPercentage(point.y);
 
@@ -46,11 +45,13 @@ export default function FocalPointPickerControls(_ref) {
     hasHelpText: hasHelpText
   }, createElement(FocalPointUnitControl, {
     label: __('Left'),
+    "aria-label": __('Focal point left position'),
     value: [valueX, '%'].join(''),
     onChange: next => handleChange(next, 'x'),
     dragDirection: "e"
   }), createElement(FocalPointUnitControl, {
     label: __('Top'),
+    "aria-label": __('Focal point top position'),
     value: [valueY, '%'].join(''),
     onChange: next => handleChange(next, 'y'),
     dragDirection: "s"

package/build-module/focal-point-picker/controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","join","next","FocalPointUnitControl","props","label"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SACCC,iBADD,EAECC,cAFD,QAGO,mCAHP;AAIA,SAASC,oBAAT,QAAqC,SAArC;AAOA,MAAMC,eAAe,GAAG,CAAxB;AACA,MAAMC,eAAe,GAAG,GAAxB;;AACA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,wBAAT,OAQoB;AAAA,MARe;AACjDC,IAAAA,uBADiD;AAEjDC,IAAAA,WAFiD;AAGjDC,IAAAA,QAAQ,GAAGJ,IAHsC;AAIjDK,IAAAA,KAAK,GAAG;AACPC,MAAAA,CAAC,EAAE,GADI;AAEPC,MAAAA,CAAC,EAAE;AAFI;AAJyC,GAQf;AAClC,QAAMC,MAAM,GAAGX,oBAAoB,CAAEQ,KAAK,CAACC,CAAR,CAAnC;AACA,QAAMG,MAAM,GAAGZ,oBAAoB,CAAEQ,KAAK,CAACE,CAAR,CAAnC;;AAEA,QAAMG,YAAY,GAAG,CACpBC,KADoB,EAEpBC,IAFoB,KAGhB;AACJ,QAAKD,KAAK,KAAKE,SAAf,EAA2B;AAE3B,UAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAF,EAAS,EAAT,CAApB;;AAEA,QAAK,CAAEK,KAAK,CAAEF,GAAF,CAAZ,EAAsB;AACrBV,MAAAA,QAAQ,CAAE,EAAE,GAAGC,KAAL;AAAY,SAAEO,IAAF,GAAUE,GAAG,GAAG;AAA5B,OAAF,CAAR;AACA;AACD,GAXD;;AAaA,SACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,8BADX;AAEC,IAAA,uBAAuB,EAAGZ,uBAF3B;AAGC,IAAA,WAAW,EAAGC;AAHf,KAKC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGT,EAAE,CAAE,MAAF,CADX;AAEC,IAAA,KAAK,EAAG,CAAEc,MAAF,EAAU,GAAV,EAAgBS,IAAhB,CAAsB,EAAtB,CAFT;AAGC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CALf;AAUC,IAAA,aAAa,EAAC;AAVf,IALD,EAiBC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGxB,EAAE,CAAE,KAAF,CADX;AAEC,IAAA,KAAK,EAAG,CAAEe,MAAF,EAAU,GAAV,EAAgBQ,IAAhB,CAAsB,EAAtB,CAFT;AAGC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CALf;AAUC,IAAA,aAAa,EAAC;AAVf,IAjBD,CADD;AAgCA;;AAED,SAASC,qBAAT,CAAgCC,KAAhC,EAA0D;AACzD,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,oDADX;AAEC,IAAA,aAAa,EAAC,KAFf;AAGC,IAAA,GAAG,EAAGrB,eAHP;AAIC,IAAA,GAAG,EAAGD,eAJP;AAKC,IAAA,KAAK,EAAG,CAAE;AAAEa,MAAAA,KAAK,EAAE,GAAT;AAAcU,MAAAA,KAAK,EAAE;AAArB,KAAF;AALT,KAMMD,KANN,EADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) return;\n\n\t\tconst num = parseInt( value, 10 );\n\n\t\tif ( ! isNaN( num ) ) {\n\t\t\tonChange( { ...point, [ axis ]: num / 100 } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ControlWrapper\n\t\t\tclassName=\"focal-point-picker__controls\"\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\thasHelpText={ hasHelpText }\n\t\t>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\tvalue={ [ valueX, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'x'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"e\"\n\t\t\t/>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Top' ) }\n\t\t\t\tvalue={ [ valueY, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'y'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"s\"\n\t\t\t/>\n\t\t</ControlWrapper>\n\t);\n}\n\nfunction FocalPointUnitControl( props: UnitControlProps ) {\n\treturn (\n\t\t<StyledUnitControl\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/controls.tsx"],"names":["__","StyledUnitControl","ControlWrapper","fractionToPercentage","TEXTCONTROL_MIN","TEXTCONTROL_MAX","noop","FocalPointPickerControls","__nextHasNoMarginBottom","hasHelpText","onChange","point","x","y","valueX","valueY","handleChange","value","axis","undefined","num","parseInt","isNaN","join","next","FocalPointUnitControl","props","label"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SACCC,iBADD,EAECC,cAFD,QAGO,mCAHP;AAIA,SAASC,oBAAT,QAAqC,SAArC;AAOA,MAAMC,eAAe,GAAG,CAAxB;AACA,MAAMC,eAAe,GAAG,GAAxB;;AACA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,wBAAT,CAAmC;AACjDC,EAAAA,uBADiD;AAEjDC,EAAAA,WAFiD;AAGjDC,EAAAA,QAAQ,GAAGJ,IAHsC;AAIjDK,EAAAA,KAAK,GAAG;AACPC,IAAAA,CAAC,EAAE,GADI;AAEPC,IAAAA,CAAC,EAAE;AAFI;AAJyC,CAAnC,EAQoB;AAClC,QAAMC,MAAM,GAAGX,oBAAoB,CAAEQ,KAAK,CAACC,CAAR,CAAnC;AACA,QAAMG,MAAM,GAAGZ,oBAAoB,CAAEQ,KAAK,CAACE,CAAR,CAAnC;;AAEA,QAAMG,YAAY,GAAG,CACpBC,KADoB,EAEpBC,IAFoB,KAGhB;AACJ,QAAKD,KAAK,KAAKE,SAAf,EAA2B;AAE3B,UAAMC,GAAG,GAAGC,QAAQ,CAAEJ,KAAF,EAAS,EAAT,CAApB;;AAEA,QAAK,CAAEK,KAAK,CAAEF,GAAF,CAAZ,EAAsB;AACrBV,MAAAA,QAAQ,CAAE,EAAE,GAAGC,KAAL;AAAY,SAAEO,IAAF,GAAUE,GAAG,GAAG;AAA5B,OAAF,CAAR;AACA;AACD,GAXD;;AAaA,SACC,cAAC,cAAD;AACC,IAAA,SAAS,EAAC,8BADX;AAEC,IAAA,uBAAuB,EAAGZ,uBAF3B;AAGC,IAAA,WAAW,EAAGC;AAHf,KAKC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGT,EAAE,CAAE,MAAF,CADX;AAEC,kBAAaA,EAAE,CAAE,2BAAF,CAFhB;AAGC,IAAA,KAAK,EAAG,CAAEc,MAAF,EAAU,GAAV,EAAgBS,IAAhB,CAAsB,EAAtB,CAHT;AAIC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CANf;AAWC,IAAA,aAAa,EAAC;AAXf,IALD,EAkBC,cAAC,qBAAD;AACC,IAAA,KAAK,EAAGxB,EAAE,CAAE,KAAF,CADX;AAEC,kBAAaA,EAAE,CAAE,0BAAF,CAFhB;AAGC,IAAA,KAAK,EAAG,CAAEe,MAAF,EAAU,GAAV,EAAgBQ,IAAhB,CAAsB,EAAtB,CAHT;AAIC,IAAA,QAAQ,EACHC,IAAF,IACDR,YAAY,CACXQ,IADW,EAEX,GAFW,CANf;AAWC,IAAA,aAAa,EAAC;AAXf,IAlBD,CADD;AAkCA;;AAED,SAASC,qBAAT,CAAgCC,KAAhC,EAA0D;AACzD,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAC,oDADX;AAEC,IAAA,aAAa,EAAC,KAFf;AAGC,IAAA,GAAG,EAAGrB,eAHP;AAIC,IAAA,GAAG,EAAGD,eAJP;AAKC,IAAA,KAAK,EAAG,CAAE;AAAEa,MAAAA,KAAK,EAAE,GAAT;AAAcU,MAAAA,KAAK,EAAE;AAArB,KAAF;AALT,KAMMD,KANN,EADD;AAUA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tStyledUnitControl,\n\tControlWrapper,\n} from './styles/focal-point-picker-style';\nimport { fractionToPercentage } from './utils';\nimport type {\n\tUnitControlProps,\n\tUnitControlOnChangeCallback,\n} from '../unit-control/types';\nimport type { FocalPointAxis, FocalPointPickerControlsProps } from './types';\n\nconst TEXTCONTROL_MIN = 0;\nconst TEXTCONTROL_MAX = 100;\nconst noop = () => {};\n\nexport default function FocalPointPickerControls( {\n\t__nextHasNoMarginBottom,\n\thasHelpText,\n\tonChange = noop,\n\tpoint = {\n\t\tx: 0.5,\n\t\ty: 0.5,\n\t},\n}: FocalPointPickerControlsProps ) {\n\tconst valueX = fractionToPercentage( point.x );\n\tconst valueY = fractionToPercentage( point.y );\n\n\tconst handleChange = (\n\t\tvalue: Parameters< UnitControlOnChangeCallback >[ 0 ],\n\t\taxis: FocalPointAxis\n\t) => {\n\t\tif ( value === undefined ) return;\n\n\t\tconst num = parseInt( value, 10 );\n\n\t\tif ( ! isNaN( num ) ) {\n\t\t\tonChange( { ...point, [ axis ]: num / 100 } );\n\t\t}\n\t};\n\n\treturn (\n\t\t<ControlWrapper\n\t\t\tclassName=\"focal-point-picker__controls\"\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\thasHelpText={ hasHelpText }\n\t\t>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Left' ) }\n\t\t\t\taria-label={ __( 'Focal point left position' ) }\n\t\t\t\tvalue={ [ valueX, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'x'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"e\"\n\t\t\t/>\n\t\t\t<FocalPointUnitControl\n\t\t\t\tlabel={ __( 'Top' ) }\n\t\t\t\taria-label={ __( 'Focal point top position' ) }\n\t\t\t\tvalue={ [ valueY, '%' ].join( '' ) }\n\t\t\t\tonChange={\n\t\t\t\t\t( ( next ) =>\n\t\t\t\t\t\thandleChange(\n\t\t\t\t\t\t\tnext,\n\t\t\t\t\t\t\t'y'\n\t\t\t\t\t\t) ) as UnitControlOnChangeCallback\n\t\t\t\t}\n\t\t\t\tdragDirection=\"s\"\n\t\t\t/>\n\t\t</ControlWrapper>\n\t);\n}\n\nfunction FocalPointUnitControl( props: UnitControlProps ) {\n\treturn (\n\t\t<StyledUnitControl\n\t\t\tclassName=\"focal-point-picker__controls-position-unit-control\"\n\t\t\tlabelPosition=\"top\"\n\t\t\tmax={ TEXTCONTROL_MAX }\n\t\t\tmin={ TEXTCONTROL_MIN }\n\t\t\tunits={ [ { value: '%', label: '%' } ] }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"]}

package/build-module/focal-point-picker/focal-point.js

@@ -10,12 +10,11 @@ import { PointerCircle } from './styles/focal-point-style';
  */
 
 import classnames from 'classnames';
-export default function FocalPoint(_ref) {
-  let {
-    left = '50%',
-    top = '50%',
-    ...props
-  } = _ref;
+export default function FocalPoint({
+  left = '50%',
+  top = '50%',
+  ...props
+}) {
   const classes = classnames('components-focal-point-picker__icon_container');
   const style = {
     left,

package/build-module/focal-point-picker/focal-point.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"names":["PointerCircle","classnames","FocalPoint","left","top","props","classes","style"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,4BAA9B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAIA,eAAe,SAASC,UAAT,OAIwC;AAAA,MAJnB;AACnCC,IAAAA,IAAI,GAAG,KAD4B;AAEnCC,IAAAA,GAAG,GAAG,KAF6B;AAGnC,OAAGC;AAHgC,GAImB;AACtD,QAAMC,OAAO,GAAGL,UAAU,CACzB,+CADyB,CAA1B;AAIA,QAAMM,KAAK,GAAG;AAAEJ,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAd;AAEA,SAAO,cAAC,aAAD,eAAoBC,KAApB;AAA4B,IAAA,SAAS,EAAGC,OAAxC;AAAkD,IAAA,KAAK,EAAGC;AAA1D,KAAP;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { PointerCircle } from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = { left, top };\n\n\treturn <PointerCircle { ...props } className={ classes } style={ style } />;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.tsx"],"names":["PointerCircle","classnames","FocalPoint","left","top","props","classes","style"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,4BAA9B;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAIA,eAAe,SAASC,UAAT,CAAqB;AACnCC,EAAAA,IAAI,GAAG,KAD4B;AAEnCC,EAAAA,GAAG,GAAG,KAF6B;AAGnC,KAAGC;AAHgC,CAArB,EAIwC;AACtD,QAAMC,OAAO,GAAGL,UAAU,CACzB,+CADyB,CAA1B;AAIA,QAAMM,KAAK,GAAG;AAAEJ,IAAAA,IAAF;AAAQC,IAAAA;AAAR,GAAd;AAEA,SAAO,cAAC,aAAD,eAAoBC,KAApB;AAA4B,IAAA,SAAS,EAAGC,OAAxC;AAAkD,IAAA,KAAK,EAAGC;AAA1D,KAAP;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { PointerCircle } from './styles/focal-point-style';\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { FocalPointProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport default function FocalPoint( {\n\tleft = '50%',\n\ttop = '50%',\n\t...props\n}: WordPressComponentProps< FocalPointProps, 'div' > ) {\n\tconst classes = classnames(\n\t\t'components-focal-point-picker__icon_container'\n\t);\n\n\tconst style = { left, top };\n\n\treturn <PointerCircle { ...props } className={ classes } style={ style } />;\n}\n"]}

package/build-module/focal-point-picker/focal-point.native.js

@@ -9,12 +9,11 @@ import { Path, SVG } from '@wordpress/primitives';
  */
 
 import styles from './style.scss';
-export default function FocalPoint(_ref) {
-  let {
-    height,
-    style,
-    width
-  } = _ref;
+export default function FocalPoint({
+  height,
+  style,
+  width
+}) {
   return createElement(SVG, {
     height: height,
     style: style,

package/build-module/focal-point-picker/focal-point.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"names":["Path","SVG","styles","FocalPoint","height","style","width","focalPointIconPathOutline","focalPointIconPathFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,GAAf,QAA0B,uBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AAEA,eAAe,SAASC,UAAT,OAAgD;AAAA,MAA3B;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,KAAV;AAAiBC,IAAAA;AAAjB,GAA2B;AAC9D,SACC,cAAC,GAAD;AACC,IAAA,MAAM,EAAGF,MADV;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,OAAO,EAAC,WAHT;AAIC,IAAA,KAAK,EAAGC,KAJT;AAKC,IAAA,KAAK,EAAC;AALP,KAOC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGJ,MAAM,CAACK,yBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAPD,EAWC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGL,MAAM,CAACM,sBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAXD,CADD;AAkBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default function FocalPoint( { height, style, width } ) {\n\treturn (\n\t\t<SVG\n\t\t\theight={ height }\n\t\t\tstyle={ style }\n\t\t\tviewBox=\"0 0 30 30\"\n\t\t\twidth={ width }\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathOutline }\n\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t/>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathFill }\n\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t/>\n\t\t</SVG>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/focal-point.native.js"],"names":["Path","SVG","styles","FocalPoint","height","style","width","focalPointIconPathOutline","focalPointIconPathFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,GAAf,QAA0B,uBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AAEA,eAAe,SAASC,UAAT,CAAqB;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,KAAV;AAAiBC,EAAAA;AAAjB,CAArB,EAAgD;AAC9D,SACC,cAAC,GAAD;AACC,IAAA,MAAM,EAAGF,MADV;AAEC,IAAA,KAAK,EAAGC,KAFT;AAGC,IAAA,OAAO,EAAC,WAHT;AAIC,IAAA,KAAK,EAAGC,KAJT;AAKC,IAAA,KAAK,EAAC;AALP,KAOC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGJ,MAAM,CAACK,yBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAPD,EAWC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGL,MAAM,CAACM,sBADhB;AAEC,IAAA,CAAC,EAAC;AAFH,IAXD,CADD;AAkBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Path, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nexport default function FocalPoint( { height, style, width } ) {\n\treturn (\n\t\t<SVG\n\t\t\theight={ height }\n\t\t\tstyle={ style }\n\t\t\tviewBox=\"0 0 30 30\"\n\t\t\twidth={ width }\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathOutline }\n\t\t\t\td=\"M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z\"\n\t\t\t/>\n\t\t\t<Path\n\t\t\t\tstyle={ styles.focalPointIconPathFill }\n\t\t\t\td=\"M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z\"\n\t\t\t/>\n\t\t</SVG>\n\t);\n}\n"]}

package/build-module/focal-point-picker/grid.js

@@ -5,11 +5,10 @@ import { createElement } from "@wordpress/element";
  * Internal dependencies
  */
 import { GridView, GridLineX, GridLineY } from './styles/focal-point-picker-style';
-export default function FocalPointPickerGrid(_ref) {
-  let {
-    bounds,
-    ...props
-  } = _ref;
+export default function FocalPointPickerGrid({
+  bounds,
+  ...props
+}) {
   return createElement(GridView, _extends({}, props, {
     className: "components-focal-point-picker__grid",
     style: {

package/build-module/focal-point-picker/grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"names":["GridView","GridLineX","GridLineY","FocalPointPickerGrid","bounds","props","width","height","top","left"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,QADD,EAECC,SAFD,EAGCC,SAHD,QAIO,mCAJP;AAQA,eAAe,SAASC,oBAAT,OAGkD;AAAA,MAHnB;AAC7CC,IAAAA,MAD6C;AAE7C,OAAGC;AAF0C,GAGmB;AAChE,SACC,cAAC,QAAD,eACMA,KADN;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,KAAK,EAAG;AACPC,MAAAA,KAAK,EAAEF,MAAM,CAACE,KADP;AAEPC,MAAAA,MAAM,EAAEH,MAAM,CAACG;AAFR;AAHT,MAQC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,GAAG,EAAE;AAAP;AAAnB,IARD,EASC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IATD,EAUC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAVD,EAWC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAXD,CADD;AAeA","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/focal-point-picker/grid.tsx"],"names":["GridView","GridLineX","GridLineY","FocalPointPickerGrid","bounds","props","width","height","top","left"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,QADD,EAECC,SAFD,EAGCC,SAHD,QAIO,mCAJP;AAQA,eAAe,SAASC,oBAAT,CAA+B;AAC7CC,EAAAA,MAD6C;AAE7C,KAAGC;AAF0C,CAA/B,EAGkD;AAChE,SACC,cAAC,QAAD,eACMA,KADN;AAEC,IAAA,SAAS,EAAC,qCAFX;AAGC,IAAA,KAAK,EAAG;AACPC,MAAAA,KAAK,EAAEF,MAAM,CAACE,KADP;AAEPC,MAAAA,MAAM,EAAEH,MAAM,CAACG;AAFR;AAHT,MAQC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,GAAG,EAAE;AAAP;AAAnB,IARD,EASC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,GAAG,EAAE;AAAP;AAAnB,IATD,EAUC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAVD,EAWC,cAAC,SAAD;AAAW,IAAA,KAAK,EAAG;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAnB,IAXD,CADD;AAeA","sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tGridView,\n\tGridLineX,\n\tGridLineY,\n} from './styles/focal-point-picker-style';\nimport type { FocalPointPickerGridProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context/wordpress-component';\n\nexport default function FocalPointPickerGrid( {\n\tbounds,\n\t...props\n}: WordPressComponentProps< FocalPointPickerGridProps, 'div' > ) {\n\treturn (\n\t\t<GridView\n\t\t\t{ ...props }\n\t\t\tclassName=\"components-focal-point-picker__grid\"\n\t\t\tstyle={ {\n\t\t\t\twidth: bounds.width,\n\t\t\t\theight: bounds.height,\n\t\t\t} }\n\t\t>\n\t\t\t<GridLineX style={ { top: '33%' } } />\n\t\t\t<GridLineX style={ { top: '66%' } } />\n\t\t\t<GridLineY style={ { left: '33%' } } />\n\t\t\t<GridLineY style={ { left: '66%' } } />\n\t\t</GridView>\n\t);\n}\n"]}