@wordpress/components 23.6.0 → 23.8.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["namesPlugin","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","nextColorType","ConnectedColorPicker"],"mappings":";;;;;;;;;AAUA;;;;AANA;;AACA;;AAMA;;AACA;;AAKA;;AAKA;;AAOA;;AACA;;AACA;;AACA;;AAhCA;AACA;AACA;;AAKA;AACA;AACA;;AAKA;AACA;AACA;AAoBA,oBAAQ,CAAEA,cAAF,CAAR;AAUA,MAAMC,OAAO,GAAG,CACf;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CADe,EAEf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAFe,EAGf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAHe,CAAhB;;AAMA,MAAMC,WAAW,GAAG,CACnBC,KADmB,EAEnBC,YAFmB,KAGf;AACJ,QAAM;AACLC,IAAAA,WAAW,GAAG,KADT;AAELC,IAAAA,KAAK,EAAEC,SAFF;AAGLC,IAAAA,QAHK;AAILC,IAAAA,YAAY,GAAG,MAJV;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOF,+BAAkBR,KAAlB,EAAyB,aAAzB,CAPJ,CADI,CAUJ;;AACA,QAAM,CAAEG,KAAF,EAASM,QAAT,IAAsB,+BAAoB;AAC/CJ,IAAAA,QAD+C;AAE/CP,IAAAA,KAAK,EAAEM,SAFwC;AAG/CE,IAAAA;AAH+C,GAApB,CAA5B;AAMA,QAAMI,eAAe,GAAG,sBAAS,MAAM;AACtC,WAAO,oBAAQP,KAAK,IAAI,EAAjB,CAAP;AACA,GAFuB,EAErB,CAAEA,KAAF,CAFqB,CAAxB;AAIA,QAAMQ,iBAAiB,GAAG,0BAAaF,QAAb,CAA1B;AAEA,QAAMG,YAAY,GAAG,0BAClBC,SAAF,IAAyB;AACxBF,IAAAA,iBAAiB,CAAEE,SAAS,CAACC,KAAV,EAAF,CAAjB;AACA,GAHmB,EAIpB,CAAEH,iBAAF,CAJoB,CAArB;AAOA,QAAM,CAAEI,SAAF,EAAaC,YAAb,IAA8B,uBACnCT,UAAU,IAAI,KADqB,CAApC;AAIA,SACC,4BAAC,uBAAD;AAAiB,IAAA,GAAG,EAAGN;AAAvB,KAA2CO,QAA3C,GACC,4BAAC,cAAD;AACC,IAAA,QAAQ,EAAGI,YADZ;AAEC,IAAA,KAAK,EAAGF,eAFT;AAGC,IAAA,WAAW,EAAGR;AAHf,IADD,EAMC,4BAAC,qCAAD,QACC,4BAAC,0CAAD;AAAoC,IAAA,OAAO,EAAC;AAA5C,KACC,4BAAC,qBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,OAAO,EAAGN,OAFX;AAGC,IAAA,KAAK,EAAGmB,SAHT;AAIC,IAAA,QAAQ,EAAKE,aAAF,IACVD,YAAY,CAAEC,aAAF,CALd;AAOC,IAAA,KAAK,EAAG,cAAI,cAAJ,CAPT;AAQC,IAAA,mBAAmB;AARpB,IADD,EAWC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAGP,eADT;AAEC,IAAA,SAAS,EAAGH,UAAU,IAAIQ;AAF3B,IAXD,CADD,EAiBC,4BAAC,yBAAD;AAAmB,IAAA,SAAS,EAAC,QAA7B;AAAsC,IAAA,GAAG,EAAG;AAA5C,KACC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAGA,SADb;AAEC,IAAA,KAAK,EAAGL,eAFT;AAGC,IAAA,QAAQ,EAAGE,YAHZ;AAIC,IAAA,WAAW,EAAGV;AAJf,IADD,CAjBD,CAND,CADD;AAmCA,CAxED;;AA0EA,MAAMgB,oBAAoB,GAAG,6BAAgBnB,WAAhB,EAA6B,aAA7B,CAA7B;eAEemB,oB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["namesPlugin","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","nextColorType","ColorPicker"],"mappings":";;;;;;;;;AAUA;;;;AANA;;AACA;;AAMA;;AACA;;AAKA;;AACA;;AAOA;;AACA;;AACA;;AACA;;AA5BA;AACA;AACA;;AAKA;AACA;AACA;;AAKA;AACA;AACA;AAgBA,oBAAQ,CAAEA,cAAF,CAAR;AAEA,MAAMC,OAAO,GAAG,CACf;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CADe,EAEf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAFe,EAGf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAHe,CAAhB;;AAMA,MAAMC,sBAAsB,GAAG,CAC9BC,KAD8B,EAE9BC,YAF8B,KAG1B;AACJ,QAAM;AACLC,IAAAA,WAAW,GAAG,KADT;AAELC,IAAAA,KAAK,EAAEC,SAFF;AAGLC,IAAAA,QAHK;AAILC,IAAAA,YAAY,GAAG,MAJV;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOF,+BAAkBR,KAAlB,EAAyB,aAAzB,CAPJ,CADI,CAUJ;;AACA,QAAM,CAAEG,KAAF,EAASM,QAAT,IAAsB,+BAAoB;AAC/CJ,IAAAA,QAD+C;AAE/CP,IAAAA,KAAK,EAAEM,SAFwC;AAG/CE,IAAAA;AAH+C,GAApB,CAA5B;AAMA,QAAMI,eAAe,GAAG,sBAAS,MAAM;AACtC,WAAO,oBAAQP,KAAK,IAAI,EAAjB,CAAP;AACA,GAFuB,EAErB,CAAEA,KAAF,CAFqB,CAAxB;AAIA,QAAMQ,iBAAiB,GAAG,0BAAaF,QAAb,CAA1B;AAEA,QAAMG,YAAY,GAAG,0BAClBC,SAAF,IAAyB;AACxBF,IAAAA,iBAAiB,CAAEE,SAAS,CAACC,KAAV,EAAF,CAAjB;AACA,GAHmB,EAIpB,CAAEH,iBAAF,CAJoB,CAArB;AAOA,QAAM,CAAEI,SAAF,EAAaC,YAAb,IAA8B,uBACnCT,UAAU,IAAI,KADqB,CAApC;AAIA,SACC,4BAAC,uBAAD;AAAiB,IAAA,GAAG,EAAGN;AAAvB,KAA2CO,QAA3C,GACC,4BAAC,cAAD;AACC,IAAA,QAAQ,EAAGI,YADZ;AAEC,IAAA,KAAK,EAAGF,eAFT;AAGC,IAAA,WAAW,EAAGR;AAHf,IADD,EAMC,4BAAC,qCAAD,QACC,4BAAC,0CAAD;AAAoC,IAAA,OAAO,EAAC;AAA5C,KACC,4BAAC,qBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,OAAO,EAAGN,OAFX;AAGC,IAAA,KAAK,EAAGmB,SAHT;AAIC,IAAA,QAAQ,EAAKE,aAAF,IACVD,YAAY,CAAEC,aAAF,CALd;AAOC,IAAA,KAAK,EAAG,cAAI,cAAJ,CAPT;AAQC,IAAA,mBAAmB;AARpB,IADD,EAWC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAGP,eADT;AAEC,IAAA,SAAS,EAAGH,UAAU,IAAIQ;AAF3B,IAXD,CADD,EAiBC,4BAAC,yBAAD;AAAmB,IAAA,SAAS,EAAC,QAA7B;AAAsC,IAAA,GAAG,EAAG;AAA5C,KACC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAGA,SADb;AAEC,IAAA,KAAK,EAAGL,eAFT;AAGC,IAAA,QAAQ,EAAGE,YAHZ;AAIC,IAAA,WAAW,EAAGV;AAJf,IADD,CAjBD,CAND,CADD;AAmCA,CAxED;;AA0EO,MAAMgB,WAAW,GAAG,6BAC1BnB,sBAD0B,EAE1B,aAF0B,CAApB;;eAKQmB,W","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../ui/context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","Text","COLORS","ui","theme","toHex"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAcO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,YAAY,GAAKC,SAAF,IAAqC;AACzD,QAAK,CAAEA,SAAP,EAAmB;AACnB,UAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAV,CAAsB,GAAtB,IACdF,SADc,GAEd,MAAMA,SAFT;AAIAH,IAAAA,QAAQ,CAAE,oBAAQI,QAAR,CAAF,CAAR;AACA,GAPD;;AASA,QAAME,YAA0B,GAAG,CAAEC,KAAF,EAASC,MAAT,KAAqB;AAAA;;AACvD,UAAMC,WAAW,sBAAGD,MAAM,CAACE,OAAV,6EAAG,gBAAgBC,KAAnB,0DAAG,sBAAuBF,WAA3C;;AAEA,QAAK,uBAAsBA,WAAtB,aAAsBA,WAAtB,uBAAsBA,WAAW,CAAEG,SAAnC,CAAL,EAAoD;AACnD,aAAO,EAAE,GAAGL;AAAL,OAAP;AACA;;AAED,UAAMM,KAAK,GAAG,gBAAAN,KAAK,CAACM,KAAN,sDAAaR,UAAb,CAAyB,GAAzB,IACXE,KAAK,CAACM,KAAN,CAAYC,KAAZ,CAAmB,CAAnB,EAAuBC,WAAvB,EADW,oBAEXR,KAAK,CAACM,KAFK,kDAEX,cAAaE,WAAb,EAFH;AAIA,WAAO,EAAE,GAAGR,KAAL;AAAYM,MAAAA;AAAZ,KAAP;AACA,GAZD;;AAcA,SACC,4BAAC,0BAAD;AACC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGG,UADN;AAEC,MAAA,UAAU,EAAG,kBAAO,CAAP,CAFd;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGpB,KAAK,CAACqB,KAAN,GAAcN,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAGb,YAZZ;AAaC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAb/B;AAcC,IAAA,KAAK,EAAG,cAAI,WAAJ,CAdT;AAeC,IAAA,mBAAmB,MAfpB;AAgBC,IAAA,IAAI,EAAC,kBAhBN;AAiBC,IAAA,sBAAsB,EAAGK,YAjB1B;AAkBC,IAAA,oBAAoB,EAAC;AAlBtB,IADD;AAsBA,CA9CM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\n\ninterface HexInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) return;\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<InputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 4 ) }\n\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t__unstableInputWidth=\"9em\"\n\t\t/>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/hex-input.tsx"],"names":["HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","Text","COLORS","ui","theme","toHex"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;;AAC9E,QAAMC,YAAY,GAAKC,SAAF,IAAqC;AACzD,QAAK,CAAEA,SAAP,EAAmB;AACnB,UAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAV,CAAsB,GAAtB,IACdF,SADc,GAEd,MAAMA,SAFT;AAIAH,IAAAA,QAAQ,CAAE,oBAAQI,QAAR,CAAF,CAAR;AACA,GAPD;;AASA,QAAME,YAA0B,GAAG,CAAEC,KAAF,EAASC,MAAT,KAAqB;AAAA;;AACvD,UAAMC,WAAW,sBAAGD,MAAM,CAACE,OAAV,6EAAG,gBAAgBC,KAAnB,0DAAG,sBAAuBF,WAA3C;;AAEA,QAAK,uBAAsBA,WAAtB,aAAsBA,WAAtB,uBAAsBA,WAAW,CAAEG,SAAnC,CAAL,EAAoD;AACnD,aAAO,EAAE,GAAGL;AAAL,OAAP;AACA;;AAED,UAAMM,KAAK,GAAG,gBAAAN,KAAK,CAACM,KAAN,sDAAaR,UAAb,CAAyB,GAAzB,IACXE,KAAK,CAACM,KAAN,CAAYC,KAAZ,CAAmB,CAAnB,EAAuBC,WAAvB,EADW,oBAEXR,KAAK,CAACM,KAFK,kDAEX,cAAaE,WAAb,EAFH;AAIA,WAAO,EAAE,GAAGR,KAAL;AAAYM,MAAAA;AAAZ,KAAP;AACA,GAZD;;AAcA,SACC,4BAAC,0BAAD;AACC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGG,UADN;AAEC,MAAA,UAAU,EAAG,kBAAO,CAAP,CAFd;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,WAFF;AAWC,IAAA,KAAK,EAAGpB,KAAK,CAACqB,KAAN,GAAcN,KAAd,CAAqB,CAArB,EAAyBC,WAAzB,EAXT;AAYC,IAAA,QAAQ,EAAGb,YAZZ;AAaC,IAAA,SAAS,EAAGD,WAAW,GAAG,CAAH,GAAO,CAb/B;AAcC,IAAA,KAAK,EAAG,cAAI,WAAJ,CAdT;AAeC,IAAA,mBAAmB,MAfpB;AAgBC,IAAA,IAAI,EAAC,kBAhBN;AAiBC,IAAA,sBAAsB,EAAGK,YAjB1B;AAkBC,IAAA,oBAAoB,EAAC;AAlBtB,IADD;AAsBA,CA9CM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { COLORS } from '../utils/colors-values';\nimport type { StateReducer } from '../input-control/reducer/state';\nimport type { HexInputProps } from './types';\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) return;\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<InputControl\n\t\t\tprefix={\n\t\t\t\t<Spacer\n\t\t\t\t\tas={ Text }\n\t\t\t\t\tmarginLeft={ space( 4 ) }\n\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t>\n\t\t\t\t\t#\n\t\t\t\t</Spacer>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t__unstableInputWidth=\"9em\"\n\t\t/>\n\t);\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/hsl-input.tsx"],"names":["HslInput","color","onChange","enableAlpha","h","s","l","a","toHsl","nextH","nextS","nextL","Math","trunc","nextA"],"mappings":";;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AASO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;AAC9E,QAAM;AAAEC,IAAAA,CAAF;AAAKC,IAAAA,CAAL;AAAQC,IAAAA,CAAR;AAAWC,IAAAA;AAAX,MAAiBN,KAAK,CAACO,KAAN,EAAvB;AAEA,SACC,qDACC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,KAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGJ,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BP,MAAAA,QAAQ,CAAE,oBAAQ;AAAEE,QAAAA,CAAC,EAAEK,KAAL;AAAYJ,QAAAA,CAAZ;AAAeC,QAAAA,CAAf;AAAkBC,QAAAA;AAAlB,OAAR,CAAF,CAAR;AACA;AARF,IADD,EAWC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,YAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGF,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BR,MAAAA,QAAQ,CACP,oBAAQ;AACPE,QAAAA,CADO;AAEPC,QAAAA,CAAC,EAAEK,KAFI;AAGPJ,QAAAA,CAHO;AAIPC,QAAAA;AAJO,OAAR,CADO,CAAR;AAQA;AAfF,IAXD,EA4BC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,WAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGD,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BT,MAAAA,QAAQ,CACP,oBAAQ;AACPE,QAAAA,CADO;AAEPC,QAAAA,CAFO;AAGPC,QAAAA,CAAC,EAAEK,KAHI;AAIPJ,QAAAA;AAJO,OAAR,CADO,CAAR;AAQA;AAfF,IA5BD,EA6CGJ,WAAW,IACZ,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,OAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGS,IAAI,CAACC,KAAL,CAAY,MAAMN,CAAlB,CALT;AAMC,IAAA,QAAQ,EAAKO,KAAF,IAAqB;AAC/BZ,MAAAA,QAAQ,CACP,oBAAQ;AACPE,QAAAA,CADO;AAEPC,QAAAA,CAFO;AAGPC,QAAAA,CAHO;AAIPC,QAAAA,CAAC,EAAEO,KAAK,GAAG;AAJJ,OAAR,CADO,CAAR;AAQA;AAfF,IA9CF,CADD;AAmEA,CAtEM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\n\ninterface HslInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 359 }\n\t\t\t\tlabel=\"Hue\"\n\t\t\t\tabbreviation=\"H\"\n\t\t\t\tvalue={ h }\n\t\t\t\tonChange={ ( nextH: number ) => {\n\t\t\t\t\tonChange( colord( { h: nextH, s, l, a } ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Saturation\"\n\t\t\t\tabbreviation=\"S\"\n\t\t\t\tvalue={ s }\n\t\t\t\tonChange={ ( nextS: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts: nextS,\n\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\ta,\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Lightness\"\n\t\t\t\tabbreviation=\"L\"\n\t\t\t\tvalue={ l }\n\t\t\t\tonChange={ ( nextL: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\tl: nextL,\n\t\t\t\t\t\t\ta,\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( 100 * a ) }\n\t\t\t\t\tonChange={ ( nextA: number ) => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\t\ta: nextA / 100,\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/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/hsl-input.tsx"],"names":["HslInput","color","onChange","enableAlpha","h","s","l","a","toHsl","nextH","nextS","nextL","Math","trunc","nextA"],"mappings":";;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAIO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;AAC9E,QAAM;AAAEC,IAAAA,CAAF;AAAKC,IAAAA,CAAL;AAAQC,IAAAA,CAAR;AAAWC,IAAAA;AAAX,MAAiBN,KAAK,CAACO,KAAN,EAAvB;AAEA,SACC,qDACC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,KAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGJ,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BP,MAAAA,QAAQ,CAAE,oBAAQ;AAAEE,QAAAA,CAAC,EAAEK,KAAL;AAAYJ,QAAAA,CAAZ;AAAeC,QAAAA,CAAf;AAAkBC,QAAAA;AAAlB,OAAR,CAAF,CAAR;AACA;AARF,IADD,EAWC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,YAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGF,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BR,MAAAA,QAAQ,CACP,oBAAQ;AACPE,QAAAA,CADO;AAEPC,QAAAA,CAAC,EAAEK,KAFI;AAGPJ,QAAAA,CAHO;AAIPC,QAAAA;AAJO,OAAR,CADO,CAAR;AAQA;AAfF,IAXD,EA4BC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,WAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGD,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IAAqB;AAC/BT,MAAAA,QAAQ,CACP,oBAAQ;AACPE,QAAAA,CADO;AAEPC,QAAAA,CAFO;AAGPC,QAAAA,CAAC,EAAEK,KAHI;AAIPJ,QAAAA;AAJO,OAAR,CADO,CAAR;AAQA;AAfF,IA5BD,EA6CGJ,WAAW,IACZ,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,OAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGS,IAAI,CAACC,KAAL,CAAY,MAAMN,CAAlB,CALT;AAMC,IAAA,QAAQ,EAAKO,KAAF,IAAqB;AAC/BZ,MAAAA,QAAQ,CACP,oBAAQ;AACPE,QAAAA,CADO;AAEPC,QAAAA,CAFO;AAGPC,QAAAA,CAHO;AAIPC,QAAAA,CAAC,EAAEO,KAAK,GAAG;AAJJ,OAAR,CADO,CAAR;AAQA;AAfF,IA9CF,CADD;AAmEA,CAtEM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport type { HslInputProps } from './types';\n\nexport const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {\n\tconst { h, s, l, a } = color.toHsl();\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 359 }\n\t\t\t\tlabel=\"Hue\"\n\t\t\t\tabbreviation=\"H\"\n\t\t\t\tvalue={ h }\n\t\t\t\tonChange={ ( nextH: number ) => {\n\t\t\t\t\tonChange( colord( { h: nextH, s, l, a } ) );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Saturation\"\n\t\t\t\tabbreviation=\"S\"\n\t\t\t\tvalue={ s }\n\t\t\t\tonChange={ ( nextS: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts: nextS,\n\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\ta,\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Lightness\"\n\t\t\t\tabbreviation=\"L\"\n\t\t\t\tvalue={ l }\n\t\t\t\tonChange={ ( nextL: number ) => {\n\t\t\t\t\tonChange(\n\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\tl: nextL,\n\t\t\t\t\t\t\ta,\n\t\t\t\t\t\t} )\n\t\t\t\t\t);\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( 100 * a ) }\n\t\t\t\t\tonChange={ ( nextA: number ) => {\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\t\th,\n\t\t\t\t\t\t\t\ts,\n\t\t\t\t\t\t\t\tl,\n\t\t\t\t\t\t\t\ta: nextA / 100,\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/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["InputWithSlider","min","max","label","abbreviation","onChange","value","onNumberControlChange","newValue","parseInt","Text","COLORS","ui","theme"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AARA;AACA;AACA;AAiBO,MAAMA,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;;AAC5B,QAAMC,qBAAqB,GAAKC,QAAF,IAAkC;AAC/D,QAAK,CAAEA,QAAP,EAAkB;AACjBH,MAAAA,QAAQ,CAAE,CAAF,CAAR;AACA;AACA;;AACD,QAAK,OAAOG,QAAP,KAAoB,QAAzB,EAAoC;AACnCH,MAAAA,QAAQ,CAAEI,QAAQ,CAAED,QAAF,EAAY,EAAZ,CAAV,CAAR;AACA;AACA;;AACDH,IAAAA,QAAQ,CAAEG,QAAF,CAAR;AACA,GAVD;;AAYA,SACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,4BAAD;AACC,IAAA,GAAG,EAAGP,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGC,qBANZ;AAOC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGG,UADN;AAEC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAFf;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGT,YANH,CARF;AAiBC,IAAA,YAAY,EAAC,MAjBd;AAkBC,IAAA,IAAI,EAAC;AAlBN,IADD,EAqBC,4BAAC,oBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,KAAK,EAAGD,KAFT;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,GAAG,EAAGF,GAJP;AAKC,IAAA,GAAG,EAAGC,GALP;AAMC,IAAA,KAAK,EAAGI,KANT,CAOC;AACA;AARD;AASC,IAAA,QAAQ,EAAGD,QATZ;AAUC,IAAA,cAAc,EAAG;AAVlB,IArBD,CADD;AAoCA,CAxDM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\n\ninterface InputWithSliderProps {\n\tmin: number;\n\tmax: number;\n\tvalue: number;\n\tlabel: string;\n\tabbreviation: string;\n\tonChange: ( value: number ) => void;\n}\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\tconst onNumberControlChange = ( newValue?: number | string ) => {\n\t\tif ( ! newValue ) {\n\t\t\tonChange( 0 );\n\t\t\treturn;\n\t\t}\n\t\tif ( typeof newValue === 'string' ) {\n\t\t\tonChange( parseInt( newValue, 10 ) );\n\t\t\treturn;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onNumberControlChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 4 ) }\n\t\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\tspinControls=\"none\"\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/input-with-slider.tsx"],"names":["InputWithSlider","min","max","label","abbreviation","onChange","value","onNumberControlChange","newValue","parseInt","Text","COLORS","ui","theme"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AACA;;AACA;;AARA;AACA;AACA;AASO,MAAMA,eAAe,GAAG,QAOF;AAAA,MAPI;AAChCC,IAAAA,GADgC;AAEhCC,IAAAA,GAFgC;AAGhCC,IAAAA,KAHgC;AAIhCC,IAAAA,YAJgC;AAKhCC,IAAAA,QALgC;AAMhCC,IAAAA;AANgC,GAOJ;;AAC5B,QAAMC,qBAAqB,GAAKC,QAAF,IAAkC;AAC/D,QAAK,CAAEA,QAAP,EAAkB;AACjBH,MAAAA,QAAQ,CAAE,CAAF,CAAR;AACA;AACA;;AACD,QAAK,OAAOG,QAAP,KAAoB,QAAzB,EAAoC;AACnCH,MAAAA,QAAQ,CAAEI,QAAQ,CAAED,QAAF,EAAY,EAAZ,CAAV,CAAR;AACA;AACA;;AACDH,IAAAA,QAAQ,CAAEG,QAAF,CAAR;AACA,GAVD;;AAYA,SACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,4BAAD;AACC,IAAA,GAAG,EAAGP,GADP;AAEC,IAAA,GAAG,EAAGC,GAFP;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,mBAAmB,MAJpB;AAKC,IAAA,KAAK,EAAGG,KALT;AAMC,IAAA,QAAQ,EAAGC,qBANZ;AAOC,IAAA,MAAM,EACL,4BAAC,cAAD;AACC,MAAA,EAAE,EAAGG,UADN;AAEC,MAAA,WAAW,EAAG,kBAAO,CAAP,CAFf;AAGC,MAAA,KAAK,EAAGC,qBAAOC,EAAP,CAAUC,KAHnB;AAIC,MAAA,UAAU,EAAG;AAJd,OAMGT,YANH,CARF;AAiBC,IAAA,YAAY,EAAC,MAjBd;AAkBC,IAAA,IAAI,EAAC;AAlBN,IADD,EAqBC,4BAAC,oBAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,KAAK,EAAGD,KAFT;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,GAAG,EAAGF,GAJP;AAKC,IAAA,GAAG,EAAGC,GALP;AAMC,IAAA,KAAK,EAAGI,KANT,CAOC;AACA;AARD;AASC,IAAA,QAAQ,EAAGD,QATZ;AAUC,IAAA,cAAc,EAAG;AAVlB,IArBD,CADD;AAoCA,CAxDM","sourcesContent":["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { space } from '../ui/utils/space';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport type { InputWithSliderProps } from './types';\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\tconst onNumberControlChange = ( newValue?: number | string ) => {\n\t\tif ( ! newValue ) {\n\t\t\tonChange( 0 );\n\t\t\treturn;\n\t\t}\n\t\tif ( typeof newValue === 'string' ) {\n\t\t\tonChange( parseInt( newValue, 10 ) );\n\t\t\treturn;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onNumberControlChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<Spacer\n\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\tpaddingLeft={ space( 4 ) }\n\t\t\t\t\t\tcolor={ COLORS.ui.theme }\n\t\t\t\t\t\tlineHeight={ 1 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t</Spacer>\n\t\t\t\t}\n\t\t\t\tspinControls=\"none\"\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"]}

package/build/color-picker/legacy-adapter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/legacy-adapter.tsx"],"names":["LegacyAdapter","props"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAMO,MAAMA,aAAa,GAAKC,KAAF,IAAiC;AAC7D,SAAO,4BAAC,kBAAD,EAAkB,4CAAoBA,KAApB,CAAlB,CAAP;AACA,CAFM","sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorPicker from './component';\nimport { useDeprecatedProps } from './use-deprecated-props';\n\ntype LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];\n\nexport const LegacyAdapter = ( props: LegacyAdapterProps ) => {\n\treturn <ColorPicker { ...useDeprecatedProps( props ) } />;\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/legacy-adapter.tsx"],"names":["LegacyAdapter","props"],"mappings":";;;;;;;;;;;AAGA;;AAEA;;AALA;AACA;AACA;AAKO,MAAMA,aAAa,GAAKC,KAAF,IAAiC;AAC7D,SAAO,4BAAC,kBAAD,EAAkB,4CAAoBA,KAApB,CAAlB,CAAP;AACA,CAFM","sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorPicker from './component';\nimport type { LegacyAdapterProps } from './types';\nimport { useDeprecatedProps } from './use-deprecated-props';\n\nexport const LegacyAdapter = ( props: LegacyAdapterProps ) => {\n\treturn <ColorPicker { ...useDeprecatedProps( props ) } />;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/picker.tsx"],"names":["Picker","color","enableAlpha","onChange","Component","RgbaStringColorPicker","RgbStringColorPicker","rgbColor","toRgbString","nextColor"],"mappings":";;;;;;;AASA;;AANA;;AACA;;AAJA;AACA;AACA;;AAIA;AACA;AACA;AAQO,MAAMA,MAAM,GAAG,QAAqD;AAAA,MAAnD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,WAAT;AAAsBC,IAAAA;AAAtB,GAAmD;AAC1E,QAAMC,SAAS,GAAGF,WAAW,GAC1BG,oCAD0B,GAE1BC,mCAFH;AAGA,QAAMC,QAAQ,GAAG,sBAAS,MAAMN,KAAK,CAACO,WAAN,EAAf,EAAoC,CAAEP,KAAF,CAApC,CAAjB;AAEA,SACC,4BAAC,SAAD;AACC,IAAA,KAAK,EAAGM,QADT;AAEC,IAAA,QAAQ,EAAKE,SAAF,IAAiB;AAC3BN,MAAAA,QAAQ,CAAE,oBAAQM,SAAR,CAAF,CAAR;AACA;AAJF,IADD;AAQA,CAdM","sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord, Colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\ninterface PickerProps {\n\tcolor: Colord;\n\tenableAlpha: boolean;\n\tonChange: ( nextColor: Colord ) => void;\n}\n\nexport const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/picker.tsx"],"names":["Picker","color","enableAlpha","onChange","Component","RgbaStringColorPicker","RgbStringColorPicker","rgbColor","toRgbString","nextColor"],"mappings":";;;;;;;AASA;;AANA;;AACA;;AAJA;AACA;AACA;;AAIA;AACA;AACA;AAOO,MAAMA,MAAM,GAAG,QAAqD;AAAA,MAAnD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,WAAT;AAAsBC,IAAAA;AAAtB,GAAmD;AAC1E,QAAMC,SAAS,GAAGF,WAAW,GAC1BG,oCAD0B,GAE1BC,mCAFH;AAGA,QAAMC,QAAQ,GAAG,sBAAS,MAAMN,KAAK,CAACO,WAAN,EAAf,EAAoC,CAAEP,KAAF,CAApC,CAAjB;AAEA,SACC,4BAAC,SAAD;AACC,IAAA,KAAK,EAAGM,QADT;AAEC,IAAA,QAAQ,EAAKE,SAAF,IAAiB;AAC3BN,MAAAA,QAAQ,CAAE,oBAAQM,SAAR,CAAF,CAAR;AACA;AAJF,IADD;AAQA,CAdM","sourcesContent":["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport type { PickerProps } from './types';\n\nexport const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {\n\tconst Component = enableAlpha\n\t\t? RgbaStringColorPicker\n\t\t: RgbStringColorPicker;\n\tconst rgbColor = useMemo( () => color.toRgbString(), [ color ] );\n\n\treturn (\n\t\t<Component\n\t\t\tcolor={ rgbColor }\n\t\t\tonChange={ ( nextColor ) => {\n\t\t\t\tonChange( colord( nextColor ) );\n\t\t\t} }\n\t\t/>\n\t);\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/rgb-input.tsx"],"names":["RgbInput","color","onChange","enableAlpha","r","g","b","a","toRgb","nextR","nextG","nextB","Math","trunc","nextA"],"mappings":";;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AASO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;AAC9E,QAAM;AAAEC,IAAAA,CAAF;AAAKC,IAAAA,CAAL;AAAQC,IAAAA,CAAR;AAAWC,IAAAA;AAAX,MAAiBN,KAAK,CAACO,KAAN,EAAvB;AAEA,SACC,qDACC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,KAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGJ,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IACVP,QAAQ,CAAE,oBAAQ;AAAEE,MAAAA,CAAC,EAAEK,KAAL;AAAYJ,MAAAA,CAAZ;AAAeC,MAAAA,CAAf;AAAkBC,MAAAA;AAAlB,KAAR,CAAF;AAPV,IADD,EAWC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,OAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGF,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IACVR,QAAQ,CAAE,oBAAQ;AAAEE,MAAAA,CAAF;AAAKC,MAAAA,CAAC,EAAEK,KAAR;AAAeJ,MAAAA,CAAf;AAAkBC,MAAAA;AAAlB,KAAR,CAAF;AAPV,IAXD,EAqBC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,MAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGD,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IACVT,QAAQ,CAAE,oBAAQ;AAAEE,MAAAA,CAAF;AAAKC,MAAAA,CAAL;AAAQC,MAAAA,CAAC,EAAEK,KAAX;AAAkBJ,MAAAA;AAAlB,KAAR,CAAF;AAPV,IArBD,EA+BGJ,WAAW,IACZ,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,OAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGS,IAAI,CAACC,KAAL,CAAYN,CAAC,GAAG,GAAhB,CALT;AAMC,IAAA,QAAQ,EAAKO,KAAF,IACVZ,QAAQ,CACP,oBAAQ;AACPE,MAAAA,CADO;AAEPC,MAAAA,CAFO;AAGPC,MAAAA,CAHO;AAIPC,MAAAA,CAAC,EAAEO,KAAK,GAAG;AAJJ,KAAR,CADO;AAPV,IAhCF,CADD;AAqDA,CAxDM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, Colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\n\ninterface RgbInputProps {\n\tcolor: Colord;\n\tonChange: ( nextColor: Colord ) => void;\n\tenableAlpha: boolean;\n}\n\nexport const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Red\"\n\t\t\t\tabbreviation=\"R\"\n\t\t\t\tvalue={ r }\n\t\t\t\tonChange={ ( nextR: number ) =>\n\t\t\t\t\tonChange( colord( { r: nextR, g, b, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Green\"\n\t\t\t\tabbreviation=\"G\"\n\t\t\t\tvalue={ g }\n\t\t\t\tonChange={ ( nextG: number ) =>\n\t\t\t\t\tonChange( colord( { r, g: nextG, b, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Blue\"\n\t\t\t\tabbreviation=\"B\"\n\t\t\t\tvalue={ b }\n\t\t\t\tonChange={ ( nextB: number ) =>\n\t\t\t\t\tonChange( colord( { r, g, b: nextB, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( a * 100 ) }\n\t\t\t\t\tonChange={ ( nextA: number ) =>\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\t\tr,\n\t\t\t\t\t\t\t\tg,\n\t\t\t\t\t\t\t\tb,\n\t\t\t\t\t\t\t\ta: nextA / 100,\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/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/rgb-input.tsx"],"names":["RgbInput","color","onChange","enableAlpha","r","g","b","a","toRgb","nextR","nextG","nextB","Math","trunc","nextA"],"mappings":";;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAIO,MAAMA,QAAQ,GAAG,QAAuD;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,QAAT;AAAmBC,IAAAA;AAAnB,GAAqD;AAC9E,QAAM;AAAEC,IAAAA,CAAF;AAAKC,IAAAA,CAAL;AAAQC,IAAAA,CAAR;AAAWC,IAAAA;AAAX,MAAiBN,KAAK,CAACO,KAAN,EAAvB;AAEA,SACC,qDACC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,KAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGJ,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IACVP,QAAQ,CAAE,oBAAQ;AAAEE,MAAAA,CAAC,EAAEK,KAAL;AAAYJ,MAAAA,CAAZ;AAAeC,MAAAA,CAAf;AAAkBC,MAAAA;AAAlB,KAAR,CAAF;AAPV,IADD,EAWC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,OAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGF,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IACVR,QAAQ,CAAE,oBAAQ;AAAEE,MAAAA,CAAF;AAAKC,MAAAA,CAAC,EAAEK,KAAR;AAAeJ,MAAAA,CAAf;AAAkBC,MAAAA;AAAlB,KAAR,CAAF;AAPV,IAXD,EAqBC,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,MAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGD,CALT;AAMC,IAAA,QAAQ,EAAKK,KAAF,IACVT,QAAQ,CAAE,oBAAQ;AAAEE,MAAAA,CAAF;AAAKC,MAAAA,CAAL;AAAQC,MAAAA,CAAC,EAAEK,KAAX;AAAkBJ,MAAAA;AAAlB,KAAR,CAAF;AAPV,IArBD,EA+BGJ,WAAW,IACZ,4BAAC,gCAAD;AACC,IAAA,GAAG,EAAG,CADP;AAEC,IAAA,GAAG,EAAG,GAFP;AAGC,IAAA,KAAK,EAAC,OAHP;AAIC,IAAA,YAAY,EAAC,GAJd;AAKC,IAAA,KAAK,EAAGS,IAAI,CAACC,KAAL,CAAYN,CAAC,GAAG,GAAhB,CALT;AAMC,IAAA,QAAQ,EAAKO,KAAF,IACVZ,QAAQ,CACP,oBAAQ;AACPE,MAAAA,CADO;AAEPC,MAAAA,CAFO;AAGPC,MAAAA,CAHO;AAIPC,MAAAA,CAAC,EAAEO,KAAK,GAAG;AAJJ,KAAR,CADO;AAPV,IAhCF,CADD;AAqDA,CAxDM","sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport type { RgbInputProps } from './types';\n\nexport const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {\n\tconst { r, g, b, a } = color.toRgb();\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Red\"\n\t\t\t\tabbreviation=\"R\"\n\t\t\t\tvalue={ r }\n\t\t\t\tonChange={ ( nextR: number ) =>\n\t\t\t\t\tonChange( colord( { r: nextR, g, b, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Green\"\n\t\t\t\tabbreviation=\"G\"\n\t\t\t\tvalue={ g }\n\t\t\t\tonChange={ ( nextG: number ) =>\n\t\t\t\t\tonChange( colord( { r, g: nextG, b, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 255 }\n\t\t\t\tlabel=\"Blue\"\n\t\t\t\tabbreviation=\"B\"\n\t\t\t\tvalue={ b }\n\t\t\t\tonChange={ ( nextB: number ) =>\n\t\t\t\t\tonChange( colord( { r, g, b: nextB, a } ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( a * 100 ) }\n\t\t\t\t\tonChange={ ( nextA: number ) =>\n\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\tcolord( {\n\t\t\t\t\t\t\t\tr,\n\t\t\t\t\t\t\t\tg,\n\t\t\t\t\t\t\t\tb,\n\t\t\t\t\t\t\t\ta: nextA / 100,\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/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"]}

package/build/color-picker/use-deprecated-props.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/use-deprecated-props.ts"],"names":["isLegacyProps","props","onChangeComplete","disableAlpha","color","hex","getColorFromLegacyProps","undefined","transformColorStringToLegacyColor","colordColor","toHex","rgb","toRgb","hsv","toHsv","hsl","toHsl","source","oldHue","h","useDeprecatedProps","legacyChangeHandler","enableAlpha","onChange"],"mappings":";;;;;;;;;AAGA;;AAUA;;AAKA;;AAlBA;AACA;AACA;;AAaA;AACA;AACA;AAkDA,SAASA,aAAT,CAAwBC,KAAxB,EAA2D;AAAA;;AAC1D,SACC,OAAOA,KAAK,CAACC,gBAAb,KAAkC,WAAlC,IACA,OAAOD,KAAK,CAACE,YAAb,KAA8B,WAD9B,IAEA,wBAAOF,KAAK,CAACG,KAAb,iDAAO,aAAaC,GAApB,MAA4B,QAH7B;AAKA;;AAED,SAASC,uBAAT,CACCF,KADD,EAEsB;AACrB,MAAKA,KAAK,KAAKG,SAAf,EAA2B;AAE3B,MAAK,OAAOH,KAAP,KAAiB,QAAtB,EAAiC,OAAOA,KAAP;AAEjC,MAAKA,KAAK,CAACC,GAAX,EAAiB,OAAOD,KAAK,CAACC,GAAb;AAEjB,SAAOE,SAAP;AACA;;AAED,MAAMC,iCAAiC,GAAG,qBACvCJ,KAAF,IAAkC;AACjC,QAAMK,WAAW,GAAG,oBAAQL,KAAR,CAApB;AACA,QAAMC,GAAG,GAAGI,WAAW,CAACC,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGF,WAAW,CAACG,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGJ,WAAW,CAACK,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGN,WAAW,CAACO,KAAZ,EAAZ;AAEA,SAAO;AACNX,IAAAA,GADM;AAENM,IAAAA,GAFM;AAGNE,IAAAA,GAHM;AAINE,IAAAA,GAJM;AAKNE,IAAAA,MAAM,EAAE,KALF;AAMNC,IAAAA,MAAM,EAAEH,GAAG,CAACI;AANN,GAAP;AAQA,CAhBwC,CAA1C;;AAmBO,SAASC,kBAAT,CACNnB,KADM,EAEa;AACnB,QAAM;AAAEC,IAAAA;AAAF,MAAuBD,KAA7B;AACA,QAAMoB,mBAAmB,GAAG,0BACzBjB,KAAF,IAAqB;AACpBF,IAAAA,gBAAgB,CAAEM,iCAAiC,CAAEJ,KAAF,CAAnC,CAAhB;AACA,GAH0B,EAI3B,CAAEF,gBAAF,CAJ2B,CAA5B;;AAMA,MAAKF,aAAa,CAAEC,KAAF,CAAlB,EAA8B;AAC7B,WAAO;AACNG,MAAAA,KAAK,EAAEE,uBAAuB,CAAEL,KAAK,CAACG,KAAR,CADxB;AAENkB,MAAAA,WAAW,EAAE,CAAErB,KAAK,CAACE,YAFf;AAGNoB,MAAAA,QAAQ,EAAEF;AAHJ,KAAP;AAKA;;AACD,SAAO,EACN,GAAGpB,KADG;AAENG,IAAAA,KAAK,EAAEH,KAAK,CAACG,KAFP;AAGNkB,IAAAA,WAAW,EAAIrB,KAAF,CAA8BqB,WAHrC;AAINC,IAAAA,QAAQ,EAAItB,KAAF,CAA8BsB;AAJlC,GAAP;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tcolord,\n\tHslColor,\n\tHslaColor,\n\tHsvColor,\n\tHsvaColor,\n\tRgbColor,\n\tRgbaColor,\n} from 'colord';\nimport type { ComponentProps } from 'react';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type ColorPicker from './component';\n\ntype ColorPickerProps = ComponentProps< typeof ColorPicker >;\n\n/**\n * @deprecated\n */\ntype LegacyColor =\n\t| string\n\t| {\n\t\t\thex: string;\n\t\t\thsl: HslColor | HslaColor;\n\t\t\thsv: HsvColor | HsvaColor;\n\t\t\trgb: RgbColor | RgbaColor;\n\t\t\t/**\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\toldHue: number;\n\t\t\t/**\n\t\t\t * @deprecated\n\t\t\t */\n\t\t\tsource: 'hex';\n\t  };\n\n/**\n * @deprecated\n */\nexport interface LegacyProps {\n\tcolor?: LegacyColor;\n\t/**\n\t * @deprecated\n\t */\n\tonChangeComplete: ( colors: LegacyColor ) => void;\n\t/**\n\t * @deprecated\n\t */\n\toldHue: string;\n\tclassName: string;\n\t/**\n\t * @deprecated\n\t */\n\tdisableAlpha: boolean;\n}\n\nfunction isLegacyProps( props: any ): props is LegacyProps {\n\treturn (\n\t\ttypeof props.onChangeComplete !== 'undefined' ||\n\t\ttypeof props.disableAlpha !== 'undefined' ||\n\t\ttypeof props.color?.hex === 'string'\n\t);\n}\n\nfunction getColorFromLegacyProps(\n\tcolor: LegacyProps[ 'color' ]\n): string | undefined {\n\tif ( color === undefined ) return;\n\n\tif ( typeof color === 'string' ) return color;\n\n\tif ( color.hex ) return color.hex;\n\n\treturn undefined;\n}\n\nconst transformColorStringToLegacyColor = memoize(\n\t( color: string ): LegacyColor => {\n\t\tconst colordColor = colord( color );\n\t\tconst hex = colordColor.toHex();\n\t\tconst rgb = colordColor.toRgb();\n\t\tconst hsv = colordColor.toHsv();\n\t\tconst hsl = colordColor.toHsl();\n\n\t\treturn {\n\t\t\thex,\n\t\t\trgb,\n\t\t\thsv,\n\t\t\thsl,\n\t\t\tsource: 'hex',\n\t\t\toldHue: hsl.h,\n\t\t};\n\t}\n);\n\nexport function useDeprecatedProps(\n\tprops: LegacyProps | ColorPickerProps\n): ColorPickerProps {\n\tconst { onChangeComplete } = props as LegacyProps;\n\tconst legacyChangeHandler = useCallback(\n\t\t( color: string ) => {\n\t\t\tonChangeComplete( transformColorStringToLegacyColor( color ) );\n\t\t},\n\t\t[ onChangeComplete ]\n\t);\n\tif ( isLegacyProps( props ) ) {\n\t\treturn {\n\t\t\tcolor: getColorFromLegacyProps( props.color ),\n\t\t\tenableAlpha: ! props.disableAlpha,\n\t\t\tonChange: legacyChangeHandler,\n\t\t};\n\t}\n\treturn {\n\t\t...props,\n\t\tcolor: props.color as ColorPickerProps[ 'color' ],\n\t\tenableAlpha: ( props as ColorPickerProps ).enableAlpha,\n\t\tonChange: ( props as ColorPickerProps ).onChange,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/use-deprecated-props.ts"],"names":["isLegacyProps","props","onChangeComplete","disableAlpha","color","hex","getColorFromLegacyProps","undefined","transformColorStringToLegacyColor","colordColor","toHex","rgb","toRgb","hsv","toHsv","hsl","toHsl","source","oldHue","h","useDeprecatedProps","legacyChangeHandler","enableAlpha","onChange"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAQA,SAASA,aAAT,CAAwBC,KAAxB,EAA2D;AAAA;;AAC1D,SACC,OAAOA,KAAK,CAACC,gBAAb,KAAkC,WAAlC,IACA,OAAOD,KAAK,CAACE,YAAb,KAA8B,WAD9B,IAEA,wBAAOF,KAAK,CAACG,KAAb,iDAAO,aAAaC,GAApB,MAA4B,QAH7B;AAKA;;AAED,SAASC,uBAAT,CACCF,KADD,EAEsB;AACrB,MAAKA,KAAK,KAAKG,SAAf,EAA2B;AAE3B,MAAK,OAAOH,KAAP,KAAiB,QAAtB,EAAiC,OAAOA,KAAP;AAEjC,MAAKA,KAAK,CAACC,GAAX,EAAiB,OAAOD,KAAK,CAACC,GAAb;AAEjB,SAAOE,SAAP;AACA;;AAED,MAAMC,iCAAiC,GAAG,qBACvCJ,KAAF,IAAkC;AACjC,QAAMK,WAAW,GAAG,oBAAQL,KAAR,CAApB;AACA,QAAMC,GAAG,GAAGI,WAAW,CAACC,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGF,WAAW,CAACG,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGJ,WAAW,CAACK,KAAZ,EAAZ;AACA,QAAMC,GAAG,GAAGN,WAAW,CAACO,KAAZ,EAAZ;AAEA,SAAO;AACNX,IAAAA,GADM;AAENM,IAAAA,GAFM;AAGNE,IAAAA,GAHM;AAINE,IAAAA,GAJM;AAKNE,IAAAA,MAAM,EAAE,KALF;AAMNC,IAAAA,MAAM,EAAEH,GAAG,CAACI;AANN,GAAP;AAQA,CAhBwC,CAA1C;;AAmBO,SAASC,kBAAT,CACNnB,KADM,EAEa;AACnB,QAAM;AAAEC,IAAAA;AAAF,MAAuBD,KAA7B;AACA,QAAMoB,mBAAmB,GAAG,0BACzBjB,KAAF,IAAqB;AACpBF,IAAAA,gBAAgB,CAAEM,iCAAiC,CAAEJ,KAAF,CAAnC,CAAhB;AACA,GAH0B,EAI3B,CAAEF,gBAAF,CAJ2B,CAA5B;;AAMA,MAAKF,aAAa,CAAEC,KAAF,CAAlB,EAA8B;AAC7B,WAAO;AACNG,MAAAA,KAAK,EAAEE,uBAAuB,CAAEL,KAAK,CAACG,KAAR,CADxB;AAENkB,MAAAA,WAAW,EAAE,CAAErB,KAAK,CAACE,YAFf;AAGNoB,MAAAA,QAAQ,EAAEF;AAHJ,KAAP;AAKA;;AACD,SAAO,EACN,GAAGpB,KADG;AAENG,IAAAA,KAAK,EAAEH,KAAK,CAACG,KAFP;AAGNkB,IAAAA,WAAW,EAAIrB,KAAF,CAA8BqB,WAHrC;AAINC,IAAAA,QAAQ,EAAItB,KAAF,CAA8BsB;AAJlC,GAAP;AAMA","sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\nimport memoize from 'memize';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ColorPickerProps, LegacyColor, LegacyProps } from './types';\n\nfunction isLegacyProps( props: any ): props is LegacyProps {\n\treturn (\n\t\ttypeof props.onChangeComplete !== 'undefined' ||\n\t\ttypeof props.disableAlpha !== 'undefined' ||\n\t\ttypeof props.color?.hex === 'string'\n\t);\n}\n\nfunction getColorFromLegacyProps(\n\tcolor: LegacyProps[ 'color' ]\n): string | undefined {\n\tif ( color === undefined ) return;\n\n\tif ( typeof color === 'string' ) return color;\n\n\tif ( color.hex ) return color.hex;\n\n\treturn undefined;\n}\n\nconst transformColorStringToLegacyColor = memoize(\n\t( color: string ): LegacyColor => {\n\t\tconst colordColor = colord( color );\n\t\tconst hex = colordColor.toHex();\n\t\tconst rgb = colordColor.toRgb();\n\t\tconst hsv = colordColor.toHsv();\n\t\tconst hsl = colordColor.toHsl();\n\n\t\treturn {\n\t\t\thex,\n\t\t\trgb,\n\t\t\thsv,\n\t\t\thsl,\n\t\t\tsource: 'hex',\n\t\t\toldHue: hsl.h,\n\t\t};\n\t}\n);\n\nexport function useDeprecatedProps(\n\tprops: LegacyProps | ColorPickerProps\n): ColorPickerProps {\n\tconst { onChangeComplete } = props as LegacyProps;\n\tconst legacyChangeHandler = useCallback(\n\t\t( color: string ) => {\n\t\t\tonChangeComplete( transformColorStringToLegacyColor( color ) );\n\t\t},\n\t\t[ onChangeComplete ]\n\t);\n\tif ( isLegacyProps( props ) ) {\n\t\treturn {\n\t\t\tcolor: getColorFromLegacyProps( props.color ),\n\t\t\tenableAlpha: ! props.disableAlpha,\n\t\t\tonChange: legacyChangeHandler,\n\t\t};\n\t}\n\treturn {\n\t\t...props,\n\t\tcolor: props.color as ColorPickerProps[ 'color' ],\n\t\tenableAlpha: ( props as ColorPickerProps ).enableAlpha,\n\t\tonChange: ( props as ColorPickerProps ).onChange,\n\t};\n}\n"]}

package/build/custom-gradient-picker/constants.js

@@ -16,7 +16,7 @@ const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
 exports.DEFAULT_LINEAR_GRADIENT_ANGLE = DEFAULT_LINEAR_GRADIENT_ANGLE;
 const HORIZONTAL_GRADIENT_ORIENTATION = {
   type: 'angular',
-  value: 90
+  value: '90'
 };
 exports.HORIZONTAL_GRADIENT_ORIENTATION = HORIZONTAL_GRADIENT_ORIENTATION;
 const GRADIENT_OPTIONS = [{

package/build/custom-gradient-picker/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/constants.js"],"names":["DEFAULT_GRADIENT","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","type","value","GRADIENT_OPTIONS","label","DIRECTIONAL_ORIENTATION_ANGLE_MAP","top","right","bottom","left"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,gBAAgB,GAC5B,0EADM;;AAGA,MAAMC,6BAA6B,GAAG,GAAtC;;AAEA,MAAMC,+BAA+B,GAAG;AAC9CC,EAAAA,IAAI,EAAE,SADwC;AAE9CC,EAAAA,KAAK,EAAE;AAFuC,CAAxC;;AAKA,MAAMC,gBAAgB,GAAG,CAC/B;AAAED,EAAAA,KAAK,EAAE,iBAAT;AAA4BE,EAAAA,KAAK,EAAE,cAAI,QAAJ;AAAnC,CAD+B,EAE/B;AAAEF,EAAAA,KAAK,EAAE,iBAAT;AAA4BE,EAAAA,KAAK,EAAE,cAAI,QAAJ;AAAnC,CAF+B,CAAzB;;AAKA,MAAMC,iCAAiC,GAAG;AAChDC,EAAAA,GAAG,EAAE,CAD2C;AAEhD,eAAa,EAFmC;AAGhD,eAAa,EAHmC;AAIhDC,EAAAA,KAAK,EAAE,EAJyC;AAKhD,kBAAgB,GALgC;AAMhD,kBAAgB,GANgC;AAOhDC,EAAAA,MAAM,EAAE,GAPwC;AAQhD,iBAAe,GARiC;AAShD,iBAAe,GATiC;AAUhDC,EAAAA,IAAI,EAAE,GAV0C;AAWhD,cAAY,GAXoC;AAYhD,cAAY;AAZoC,CAA1C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const DEFAULT_GRADIENT =\n\t'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';\n\nexport const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;\n\nexport const HORIZONTAL_GRADIENT_ORIENTATION = {\n\ttype: 'angular',\n\tvalue: 90,\n};\n\nexport const GRADIENT_OPTIONS = [\n\t{ value: 'linear-gradient', label: __( 'Linear' ) },\n\t{ value: 'radial-gradient', label: __( 'Radial' ) },\n];\n\nexport const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {\n\ttop: 0,\n\t'top right': 45,\n\t'right top': 45,\n\tright: 90,\n\t'right bottom': 135,\n\t'bottom right': 135,\n\tbottom: 180,\n\t'bottom left': 225,\n\t'left bottom': 225,\n\tleft: 270,\n\t'top left': 315,\n\t'left top': 315,\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/constants.ts"],"names":["DEFAULT_GRADIENT","DEFAULT_LINEAR_GRADIENT_ANGLE","HORIZONTAL_GRADIENT_ORIENTATION","type","value","GRADIENT_OPTIONS","label","DIRECTIONAL_ORIENTATION_ANGLE_MAP","top","right","bottom","left"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,MAAMA,gBAAgB,GAC5B,0EADM;;AAGA,MAAMC,6BAA6B,GAAG,GAAtC;;AAEA,MAAMC,+BAA+B,GAAG;AAC9CC,EAAAA,IAAI,EAAE,SADwC;AAE9CC,EAAAA,KAAK,EAAE;AAFuC,CAAxC;;AAKA,MAAMC,gBAAgB,GAAG,CAC/B;AAAED,EAAAA,KAAK,EAAE,iBAAT;AAA4BE,EAAAA,KAAK,EAAE,cAAI,QAAJ;AAAnC,CAD+B,EAE/B;AAAEF,EAAAA,KAAK,EAAE,iBAAT;AAA4BE,EAAAA,KAAK,EAAE,cAAI,QAAJ;AAAnC,CAF+B,CAAzB;;AAKA,MAAMC,iCAAiC,GAAG;AAChDC,EAAAA,GAAG,EAAE,CAD2C;AAEhD,eAAa,EAFmC;AAGhD,eAAa,EAHmC;AAIhDC,EAAAA,KAAK,EAAE,EAJyC;AAKhD,kBAAgB,GALgC;AAMhD,kBAAgB,GANgC;AAOhDC,EAAAA,MAAM,EAAE,GAPwC;AAQhD,iBAAe,GARiC;AAShD,iBAAe,GATiC;AAUhDC,EAAAA,IAAI,EAAE,GAV0C;AAWhD,cAAY,GAXoC;AAYhD,cAAY;AAZoC,CAA1C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nexport const DEFAULT_GRADIENT =\n\t'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)';\n\nexport const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;\n\nexport const HORIZONTAL_GRADIENT_ORIENTATION = {\n\ttype: 'angular',\n\tvalue: '90',\n} as const;\n\nexport const GRADIENT_OPTIONS = [\n\t{ value: 'linear-gradient', label: __( 'Linear' ) },\n\t{ value: 'radial-gradient', label: __( 'Radial' ) },\n];\n\nexport const DIRECTIONAL_ORIENTATION_ANGLE_MAP = {\n\ttop: 0,\n\t'top right': 45,\n\t'right top': 45,\n\tright: 90,\n\t'right bottom': 135,\n\t'bottom right': 135,\n\tbottom: 180,\n\t'bottom left': 225,\n\t'left bottom': 225,\n\tleft: 270,\n\t'top left': 315,\n\t'left top': 315,\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/constants.js"],"names":["GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"mappings":";;;;;;AAAO,MAAMA,sBAAsB,GAAG,EAA/B;;AACA,MAAMC,kBAAkB,GAAG,EAA3B;;AACA,MAAMC,2CAA2C,GAAG,EAApD;;AACA,MAAMC,+BAA+B,GAAG,CAAxC;;AACA,MAAMC,wBAAwB,GAAG,CAAjC;;AAEA,MAAMC,gCAAgC,GAC5CH,2CADM;;AAEA,MAAMI,4CAA4C,GACxD,CAAEL,kBAAkB,GAAGD,sBAAvB,IAAkD,CAD5C","sourcesContent":["export const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION =\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/constants.ts"],"names":["GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"mappings":";;;;;;AAAO,MAAMA,sBAAsB,GAAG,EAA/B;;AACA,MAAMC,kBAAkB,GAAG,EAA3B;;AACA,MAAMC,2CAA2C,GAAG,EAApD;;AACA,MAAMC,+BAA+B,GAAG,CAAxC;;AACA,MAAMC,wBAAwB,GAAG,CAAjC;;AAEA,MAAMC,gCAAgC,GAC5CH,2CADM;;AAEA,MAAMI,4CAA4C,GACxD,CAAEL,kBAAkB,GAAGD,sBAAvB,IAAkD,CAD5C","sourcesContent":["export const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION =\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"]}

package/build/custom-gradient-picker/gradient-bar/control-points.js

@@ -35,8 +35,6 @@ var _utils = require("./utils");
 
 var _constants = require("./constants");
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -105,6 +103,10 @@ function ControlPoints(_ref3) {
   const controlPointMoveState = (0, _element.useRef)();
 
   const onMouseMove = event => {
+    if (controlPointMoveState.current === undefined || gradientPickerDomRef.current === null) {
+      return;
+    }
+
     const relativePosition = (0, _utils.getHorizontalRelativeGradientPosition)(event.clientX, gradientPickerDomRef.current);
     const {
       initialPosition,
@@ -135,10 +137,12 @@ function ControlPoints(_ref3) {
   cleanEventListenersRef.current = cleanEventListeners;
   (0, _element.useEffect)(() => {
     return () => {
-      cleanEventListenersRef.current();
+      var _cleanEventListenersR;
+
+      (_cleanEventListenersR = cleanEventListenersRef.current) === null || _cleanEventListenersR === void 0 ? void 0 : _cleanEventListenersR.call(cleanEventListenersRef);
     };
   }, []);
-  return controlPoints.map((point, index) => {
+  return (0, _element.createElement)(_element.Fragment, null, controlPoints.map((point, index) => {
     const initialPosition = point === null || point === void 0 ? void 0 : point.position;
     return ignoreMarkerPosition !== initialPosition && (0, _element.createElement)(GradientColorPickerDropdown, {
       isRenderedInSidebar: __experimentalIsRenderedInSidebar,
@@ -221,7 +225,7 @@ function ControlPoints(_ref3) {
         transform: 'translateX( -50% )'
       }
     });
-  });
+  }));
 }
 
 function InsertPoint(_ref6) {

package/build/custom-gradient-picker/gradient-bar/control-points.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.js"],"names":["ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","GradientColorPickerDropdown","isRenderedInSidebar","className","props","popoverProps","placement","offset","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","onMouseMove","event","relativePosition","clientX","current","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onToggle","addEventListener","code","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","onClose","toRgbString","length","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","plus","undefined"],"mappings":"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","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\n\nfunction ControlPointButton( { isOpen, position, color, ...additionalProps } ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n} ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() => ( {\n\t\t\tplacement: 'bottom',\n\t\t\toffset: 8,\n\t\t} ),\n\t\t[]\n\t);\n\n\tconst mergedClassName = classnames(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst controlPointMoveState = useRef();\n\n\tconst onMouseMove = ( event ) => {\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.current;\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current();\n\t\t};\n\t}, [] );\n\n\treturn controlPoints.map( ( point, index ) => {\n\t\tconst initialPosition = point?.position;\n\t\treturn (\n\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\tif ( window && window.addEventListener ) {\n\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else if ( event.code === 'ArrowRight' ) {\n\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ ! disableRemove && controlPoints.length > 2 && (\n\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Remove Control Point' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</HStack>\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\tstyle={ {\n\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t)\n\t\t);\n\t} );\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\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/>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/control-points.tsx"],"names":["ControlPointButton","isOpen","position","color","additionalProps","instanceId","descriptionId","GradientColorPickerDropdown","isRenderedInSidebar","className","props","popoverProps","placement","offset","mergedClassName","ControlPoints","disableRemove","disableAlpha","gradientPickerDomRef","ignoreMarkerPosition","value","controlPoints","onChange","onStartControlPointChange","onStopControlPointChange","__experimentalIsRenderedInSidebar","controlPointMoveState","onMouseMove","event","current","undefined","relativePosition","clientX","initialPosition","index","significantMoveHappened","Math","abs","MINIMUM_SIGNIFICANT_MOVE","cleanEventListeners","window","removeEventListener","listenersActivated","cleanEventListenersRef","map","point","onToggle","addEventListener","code","stopPropagation","KEYBOARD_CONTROL_POINT_VARIATION","onClose","toRgbString","length","left","transform","InsertPoint","onOpenInserter","onCloseInserter","insertPosition","alreadyInsertedPoint","setAlreadyInsertedPoint","plus"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport { ColorPicker } from '../../color-picker';\nimport { VisuallyHidden } from '../../visually-hidden';\nimport { CustomColorPickerDropdown } from '../../color-palette';\n\nimport {\n\taddControlPoint,\n\tclampPercent,\n\tremoveControlPoint,\n\tupdateControlPointColor,\n\tupdateControlPointColorByPosition,\n\tupdateControlPointPosition,\n\tgetHorizontalRelativeGradientPosition,\n} from './utils';\nimport {\n\tMINIMUM_SIGNIFICANT_MOVE,\n\tKEYBOARD_CONTROL_POINT_VARIATION,\n} from './constants';\nimport type { WordPressComponentProps } from '../../ui/context';\nimport type {\n\tControlPointButtonProps,\n\tControlPointMoveState,\n\tControlPointsProps,\n\tInsertPointProps,\n} from '../types';\nimport type { CustomColorPickerDropdownProps } from '../../color-palette/types';\n\nfunction ControlPointButton( {\n\tisOpen,\n\tposition,\n\tcolor,\n\t...additionalProps\n}: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {\n\tconst instanceId = useInstanceId( ControlPointButton );\n\tconst descriptionId = `components-custom-gradient-picker__control-point-button-description-${ instanceId }`;\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t// translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).\n\t\t\t\t\t__(\n\t\t\t\t\t\t'Gradient control point at position %1$s%% with color code %2$s.'\n\t\t\t\t\t),\n\t\t\t\t\tposition,\n\t\t\t\t\tcolor\n\t\t\t\t) }\n\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'components-custom-gradient-picker__control-point-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-active': isOpen,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\t{ ...additionalProps }\n\t\t\t/>\n\t\t\t<VisuallyHidden id={ descriptionId }>\n\t\t\t\t{ __(\n\t\t\t\t\t'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'\n\t\t\t\t) }\n\t\t\t</VisuallyHidden>\n\t\t</>\n\t);\n}\n\nfunction GradientColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tclassName,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\t// Open the popover below the gradient control/insertion point\n\tconst popoverProps = useMemo(\n\t\t() =>\n\t\t\t( {\n\t\t\t\tplacement: 'bottom',\n\t\t\t\toffset: 8,\n\t\t\t} as const ),\n\t\t[]\n\t);\n\n\tconst mergedClassName = classnames(\n\t\t'components-custom-gradient-picker__control-point-dropdown',\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<CustomColorPickerDropdown\n\t\t\tisRenderedInSidebar={ isRenderedInSidebar }\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName={ mergedClassName }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction ControlPoints( {\n\tdisableRemove,\n\tdisableAlpha,\n\tgradientPickerDomRef,\n\tignoreMarkerPosition,\n\tvalue: controlPoints,\n\tonChange,\n\tonStartControlPointChange,\n\tonStopControlPointChange,\n\t__experimentalIsRenderedInSidebar,\n}: ControlPointsProps ) {\n\tconst controlPointMoveState = useRef< ControlPointMoveState >();\n\n\tconst onMouseMove = ( event: MouseEvent ) => {\n\t\tif (\n\t\t\tcontrolPointMoveState.current === undefined ||\n\t\t\tgradientPickerDomRef.current === null\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst relativePosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientPickerDomRef.current\n\t\t);\n\n\t\tconst { initialPosition, index, significantMoveHappened } =\n\t\t\tcontrolPointMoveState.current;\n\n\t\tif (\n\t\t\t! significantMoveHappened &&\n\t\t\tMath.abs( initialPosition - relativePosition ) >=\n\t\t\t\tMINIMUM_SIGNIFICANT_MOVE\n\t\t) {\n\t\t\tcontrolPointMoveState.current.significantMoveHappened = true;\n\t\t}\n\n\t\tonChange(\n\t\t\tupdateControlPointPosition( controlPoints, index, relativePosition )\n\t\t);\n\t};\n\n\tconst cleanEventListeners = () => {\n\t\tif (\n\t\t\twindow &&\n\t\t\twindow.removeEventListener &&\n\t\t\tcontrolPointMoveState.current &&\n\t\t\tcontrolPointMoveState.current.listenersActivated\n\t\t) {\n\t\t\twindow.removeEventListener( 'mousemove', onMouseMove );\n\t\t\twindow.removeEventListener( 'mouseup', cleanEventListeners );\n\t\t\tonStopControlPointChange();\n\t\t\tcontrolPointMoveState.current.listenersActivated = false;\n\t\t}\n\t};\n\n\t// Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`\n\t// This memoization would prevent the event listeners from being properly cleaned.\n\t// Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.\n\tconst cleanEventListenersRef = useRef< () => void >();\n\tcleanEventListenersRef.current = cleanEventListeners;\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tcleanEventListenersRef.current?.();\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t{ controlPoints.map( ( point, index ) => {\n\t\t\t\tconst initialPosition = point?.position;\n\t\t\t\treturn (\n\t\t\t\t\tignoreMarkerPosition !== initialPosition && (\n\t\t\t\t\t\t<GradientColorPickerDropdown\n\t\t\t\t\t\t\tisRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonClose={ onStopControlPointChange }\n\t\t\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t\t\t<ControlPointButton\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current &&\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current\n\t\t\t\t\t\t\t\t\t\t\t\t.significantMoveHappened\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\t\t\t\t\tonStopControlPointChange();\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonMouseDown={ () => {\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\twindow &&\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tcontrolPointMoveState.current = {\n\t\t\t\t\t\t\t\t\t\t\t\tinitialPosition,\n\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\tsignificantMoveHappened: false,\n\t\t\t\t\t\t\t\t\t\t\t\tlistenersActivated: true,\n\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\tonStartControlPointChange();\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mousemove',\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseMove\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\twindow.addEventListener(\n\t\t\t\t\t\t\t\t\t\t\t\t'mouseup',\n\t\t\t\t\t\t\t\t\t\t\t\tcleanEventListeners\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tif ( event.code === 'ArrowLeft' ) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position -\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} else if (\n\t\t\t\t\t\t\t\t\t\t\tevent.code === 'ArrowRight'\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t// Stop propagation of the key press event to avoid focus moving\n\t\t\t\t\t\t\t\t\t\t\t// to another editor area.\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointPosition(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tclampPercent(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tpoint.position +\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tKEYBOARD_CONTROL_POINT_VARIATION\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t\t\t\t\t\tposition={ point.position }\n\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\trenderContent={ ( { onClose } ) => (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\t\t\t\t\t\tcolor={ point.color }\n\t\t\t\t\t\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\tupdateControlPointColor(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolord(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor\n\t\t\t\t\t\t\t\t\t\t\t\t\t).toRgbString()\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{ ! disableRemove &&\n\t\t\t\t\t\t\t\t\t\tcontrolPoints.length > 2 && (\n\t\t\t\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-custom-gradient-picker__remove-control-point-wrapper\"\n\t\t\t\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tremoveControlPoint(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Remove Control Point'\n\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tleft: `${ point.position }%`,\n\t\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\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);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nfunction InsertPoint( {\n\tvalue: controlPoints,\n\tonChange,\n\tonOpenInserter,\n\tonCloseInserter,\n\tinsertPosition,\n\tdisableAlpha,\n\t__experimentalIsRenderedInSidebar,\n}: InsertPointProps ) {\n\tconst [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );\n\treturn (\n\t\t<GradientColorPickerDropdown\n\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\tclassName=\"components-custom-gradient-picker__inserter\"\n\t\t\tonClose={ () => {\n\t\t\t\tonCloseInserter();\n\t\t\t} }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonCloseInserter();\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( false );\n\t\t\t\t\t\t\tonOpenInserter();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName=\"components-custom-gradient-picker__insert-point-dropdown\"\n\t\t\t\t\ticon={ plus }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<ColorPicker\n\t\t\t\t\tenableAlpha={ ! disableAlpha }\n\t\t\t\t\tonChange={ ( color ) => {\n\t\t\t\t\t\tif ( ! alreadyInsertedPoint ) {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\taddControlPoint(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tsetAlreadyInsertedPoint( true );\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tonChange(\n\t\t\t\t\t\t\t\tupdateControlPointColorByPosition(\n\t\t\t\t\t\t\t\t\tcontrolPoints,\n\t\t\t\t\t\t\t\t\tinsertPosition,\n\t\t\t\t\t\t\t\t\tcolord( color ).toRgbString()\n\t\t\t\t\t\t\t\t)\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/>\n\t\t\t) }\n\t\t\tstyle={\n\t\t\t\tinsertPosition !== null\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tleft: `${ insertPosition }%`,\n\t\t\t\t\t\t\ttransform: 'translateX( -50% )',\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t/>\n\t);\n}\nControlPoints.InsertPoint = InsertPoint;\n\nexport default ControlPoints;\n"]}

package/build/custom-gradient-picker/gradient-bar/index.js

@@ -17,8 +17,6 @@ var _utils = require("./utils");
 
 var _constants = require("./constants");
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -30,7 +28,7 @@ var _constants = require("./constants");
 /**
  * Internal dependencies
  */
-function customGradientBarReducer(state, action) {
+const customGradientBarReducer = (state, action) => {
   switch (action.type) {
     case 'MOVE_INSERTER':
       if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {
@@ -90,7 +88,7 @@ function customGradientBarReducer(state, action) {
   }
 
   return state;
-}
+};
 
 const customGradientBarReducerInitialState = {
   id: 'IDLE'
@@ -104,12 +102,16 @@ function CustomGradientBar(_ref) {
     onChange,
     disableInserter = false,
     disableAlpha = false,
-    __experimentalIsRenderedInSidebar
+    __experimentalIsRenderedInSidebar = false
   } = _ref;
-  const gradientMarkersContainerDomRef = (0, _element.useRef)();
+  const gradientMarkersContainerDomRef = (0, _element.useRef)(null);
   const [gradientBarState, gradientBarStateDispatch] = (0, _element.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState);
 
   const onMouseEnterAndMove = event => {
+    if (!gradientMarkersContainerDomRef.current) {
+      return;
+    }
+
     const insertPosition = (0, _utils.getHorizontalRelativeGradientPosition)(event.clientX, gradientMarkersContainerDomRef.current); // If the insert point is close to an existing control point don't show it.
 
     if (controlPoints.some(_ref2 => {
@@ -147,11 +149,14 @@ function CustomGradientBar(_ref) {
     }),
     onMouseEnter: onMouseEnterAndMove,
     onMouseMove: onMouseEnterAndMove,
-    style: {
-      background
-    },
     onMouseLeave: onMouseLeave
   }, (0, _element.createElement)("div", {
+    className: "components-custom-gradient-picker__gradient-bar-background",
+    style: {
+      background,
+      opacity: hasGradient ? 1 : 0.4
+    }
+  }), (0, _element.createElement)("div", {
     ref: gradientMarkersContainerDomRef,
     className: "components-custom-gradient-picker__markers-container"
   }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0, _element.createElement)(_controlPoints.default.InsertPoint, {

package/build/custom-gradient-picker/gradient-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/index.js"],"names":["customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientMarkersContainerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","clientX","current","some","position","Math","abs","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","onMouseLeave","isMovingInserter","isInsertingControlPoint","undefined"],"mappings":"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","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\n\nfunction customGradientBarReducer( state, action ) {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n}\nconst customGradientBarReducerInitialState = { id: 'IDLE' };\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n\t__experimentalIsRenderedInSidebar,\n} ) {\n\tconst gradientMarkersContainerDomRef = useRef();\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove = ( event ) => {\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientMarkersContainerDomRef.current\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tcontrolPoints.some( ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tstyle={ { background } }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div\n\t\t\t\tref={ gradientMarkersContainerDomRef }\n\t\t\t\tclassName=\"components-custom-gradient-picker__markers-container\"\n\t\t\t>\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\tinsertPosition={ gradientBarState.insertPosition }\n\t\t\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonOpenInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'OPEN_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCloseInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'CLOSE_INSERTER',\n\t\t\t\t\t\t\t\t} );\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<ControlPoints\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientMarkersContainerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/index.tsx"],"names":["customGradientBarReducer","state","action","type","id","insertPosition","customGradientBarReducerInitialState","CustomGradientBar","background","hasGradient","value","controlPoints","onChange","disableInserter","disableAlpha","__experimentalIsRenderedInSidebar","gradientMarkersContainerDomRef","gradientBarState","gradientBarStateDispatch","onMouseEnterAndMove","event","current","clientX","some","position","Math","abs","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","onMouseLeave","isMovingInserter","isInsertingControlPoint","opacity","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useReducer } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ControlPoints from './control-points';\nimport { getHorizontalRelativeGradientPosition } from './utils';\nimport { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';\nimport type {\n\tCustomGradientBarProps,\n\tCustomGradientBarReducerState,\n\tCustomGradientBarReducerAction,\n\tCustomGradientBarIdleState,\n} from '../types';\nimport type { MouseEventHandler } from 'react';\n\nconst customGradientBarReducer = (\n\tstate: CustomGradientBarReducerState,\n\taction: CustomGradientBarReducerAction\n): CustomGradientBarReducerState => {\n\tswitch ( action.type ) {\n\t\tcase 'MOVE_INSERTER':\n\t\t\tif ( state.id === 'IDLE' || state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_INSERTER',\n\t\t\t\t\tinsertPosition: action.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_INSERTER_MOVE':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'OPEN_INSERTER':\n\t\t\tif ( state.id === 'MOVING_INSERTER' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'INSERTING_CONTROL_POINT',\n\t\t\t\t\tinsertPosition: state.insertPosition,\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'CLOSE_INSERTER':\n\t\t\tif ( state.id === 'INSERTING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'START_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'IDLE' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'MOVING_CONTROL_POINT',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t\tcase 'STOP_CONTROL_CHANGE':\n\t\t\tif ( state.id === 'MOVING_CONTROL_POINT' ) {\n\t\t\t\treturn {\n\t\t\t\t\tid: 'IDLE',\n\t\t\t\t};\n\t\t\t}\n\t\t\tbreak;\n\t}\n\treturn state;\n};\nconst customGradientBarReducerInitialState: CustomGradientBarIdleState = {\n\tid: 'IDLE',\n};\n\nexport default function CustomGradientBar( {\n\tbackground,\n\thasGradient,\n\tvalue: controlPoints,\n\tonChange,\n\tdisableInserter = false,\n\tdisableAlpha = false,\n\t__experimentalIsRenderedInSidebar = false,\n}: CustomGradientBarProps ) {\n\tconst gradientMarkersContainerDomRef = useRef< HTMLDivElement >( null );\n\n\tconst [ gradientBarState, gradientBarStateDispatch ] = useReducer(\n\t\tcustomGradientBarReducer,\n\t\tcustomGradientBarReducerInitialState\n\t);\n\tconst onMouseEnterAndMove: MouseEventHandler< HTMLDivElement > = (\n\t\tevent\n\t) => {\n\t\tif ( ! gradientMarkersContainerDomRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst insertPosition = getHorizontalRelativeGradientPosition(\n\t\t\tevent.clientX,\n\t\t\tgradientMarkersContainerDomRef.current\n\t\t);\n\n\t\t// If the insert point is close to an existing control point don't show it.\n\t\tif (\n\t\t\tcontrolPoints.some( ( { position } ) => {\n\t\t\t\treturn (\n\t\t\t\t\tMath.abs( insertPosition - position ) <\n\t\t\t\t\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT\n\t\t\t\t);\n\t\t\t} )\n\t\t) {\n\t\t\tif ( gradientBarState.id === 'MOVING_INSERTER' ) {\n\t\t\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tgradientBarStateDispatch( { type: 'MOVE_INSERTER', insertPosition } );\n\t};\n\n\tconst onMouseLeave = () => {\n\t\tgradientBarStateDispatch( { type: 'STOP_INSERTER_MOVE' } );\n\t};\n\n\tconst isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';\n\tconst isInsertingControlPoint =\n\t\tgradientBarState.id === 'INSERTING_CONTROL_POINT';\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-custom-gradient-picker__gradient-bar',\n\t\t\t\t{ 'has-gradient': hasGradient }\n\t\t\t) }\n\t\t\tonMouseEnter={ onMouseEnterAndMove }\n\t\t\tonMouseMove={ onMouseEnterAndMove }\n\t\t\tonMouseLeave={ onMouseLeave }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName=\"components-custom-gradient-picker__gradient-bar-background\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tbackground,\n\t\t\t\t\topacity: hasGradient ? 1 : 0.4,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ gradientMarkersContainerDomRef }\n\t\t\t\tclassName=\"components-custom-gradient-picker__markers-container\"\n\t\t\t>\n\t\t\t\t{ ! disableInserter &&\n\t\t\t\t\t( isMovingInserter || isInsertingControlPoint ) && (\n\t\t\t\t\t\t<ControlPoints.InsertPoint\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\t\t\tinsertPosition={ gradientBarState.insertPosition }\n\t\t\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tonOpenInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'OPEN_INSERTER',\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tonCloseInserter={ () => {\n\t\t\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\t\t\ttype: 'CLOSE_INSERTER',\n\t\t\t\t\t\t\t\t} );\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<ControlPoints\n\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t}\n\t\t\t\t\tdisableAlpha={ disableAlpha }\n\t\t\t\t\tdisableRemove={ disableInserter }\n\t\t\t\t\tgradientPickerDomRef={ gradientMarkersContainerDomRef }\n\t\t\t\t\tignoreMarkerPosition={\n\t\t\t\t\t\tisInsertingControlPoint\n\t\t\t\t\t\t\t? gradientBarState.insertPosition\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tvalue={ controlPoints }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonStartControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'START_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tonStopControlPointChange={ () => {\n\t\t\t\t\t\tgradientBarStateDispatch( {\n\t\t\t\t\t\t\ttype: 'STOP_CONTROL_CHANGE',\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}