npm - @wordpress/components - Versions diffs - 28.11.0 → 28.13.1-next.082ed6819.0 - Mend

@wordpress/components 28.11.0 → 28.13.1-next.082ed6819.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (514) hide show

package/build-module/gradient-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","sprintf","useInstanceId","useCallback","useMemo","CircularOptionPicker","CustomGradientPicker","VStack","ColorHeading","jsx","_jsx","jsxs","_jsxs","isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","additionalProps","gradientOptions","map","gradient","name","slug","index","Option","isSelected","tooltipText","style","color","background","onClick","OptionGroup","options","MultipleOrigin","headingLevel","instanceId","spacing","children","gradientSet","id","level","Component","props","asButtons","loop","actions","ariaLabel","ariaLabelledby","metaProps","_metaProps","GradientPicker","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","undefined","ButtonAction"],"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name, slug }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname \|\|\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\tconst instanceId = useInstanceId( MultipleOrigin );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\tconst id = `color-palette-${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel } id={ id }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nfunction Component( props: PickerProps< any > ) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tactions,\n\t\theadingLevel,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst options = isMultipleOriginArray( props.gradients ) ? (\n\t\t<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />\n\t) : (\n\t\t<SingleOrigin { ...additionalProps } />\n\t);\n\n\tlet metaProps:\n\t\t\| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t\| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t\| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...metaProps }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t/>\n\t);\n}\n\n/\n GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n \n ```jsx\n import { GradientPicker } from '@wordpress/components';\n import { useState } from '@wordpress/element';\n \n const myGradientPicker = () => {\n \tconst [ gradient, setGradient ] = useState( null );\n \n \treturn (\n \t\t<GradientPicker\n \t\t\tvalue={ gradient }\n \t\t\tonChange={ ( currentGradient ) => setGradient( currentGradient ) }\n \t\t\tgradients={ [\n \t\t\t\t{\n \t\t\t\t\tname: 'JShine',\n \t\t\t\t\tgradient:\n \t\t\t\t\t\t'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n \t\t\t\t\tslug: 'jshine',\n \t\t\t\t},\n \t\t\t\t{\n \t\t\t\t\tname: 'Moonlit Asteroid',\n \t\t\t\t\tgradient:\n \t\t\t\t\t\t'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n \t\t\t\t\tslug: 'moonlit-asteroid',\n \t\t\t\t},\n \t\t\t\t{\n \t\t\t\t\tname: 'Rastafarie',\n \t\t\t\t\tgradient:\n \t\t\t\t\t\t'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n \t\t\t\t\tslug: 'rastafari',\n \t\t\t\t},\n \t\t\t] }\n \t\t/>\n \t);\n };\n ```\n \n /\nexport function GradientPicker( {\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n\t...additionalProps\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t<CustomGradientPicker\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\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( gradients.length > 0 \|\| clearable ) && (\n\t\t\t\t<Component\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tactions={\n\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default GradientPicker;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;AAC7C,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,WAAW,EAAEC,OAAO,QAAQ,oBAAoB;;AAEzD;AACA;AACA;AACA,OAAOC,oBAAoB,MAAM,2BAA2B;AAC5D,OAAOC,oBAAoB,MAAM,2BAA2B;AAC5D,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,YAAY,QAAQ,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAQvD;AACA;AACA,MAAMC,sBAAsB,GAC3BC,GAA0B,IAE1BC,KAAK,CAACC,OAAO,CAAEF,GAAG,CAACG,SAAU,CAAC,IAAI,EAAI,UAAU,IAAIH,GAAG,CAAE;AAE1D,MAAMI,qBAAqB,GAAKC,GAAU,IAA6B;EACtE,OACCA,GAAG,CAACC,MAAM,GAAG,CAAC,IACdD,GAAG,CAACE,KAAK,CAAIC,WAAW,IAAMT,sBAAsB,CAAES,WAAY,CAAE,CAAC;AAEvE,CAAC;AAED,SAASC,YAAYA,CAAE;EACtBC,SAAS;EACTC,aAAa;EACbR,SAAS;EACTS,QAAQ;EACRC,KAAK;EACL,GAAGC;AAC2B,CAAC,EAAG;EAClC,MAAMC,eAAe,GAAGzB,OAAO,CAAE,MAAM;IACtC,OAAOa,SAAS,CAACa,GAAG,CAAE,CAAE;MAAEC,QAAQ;MAAEC,IAAI;MAAEC;IAAK,CAAC,EAAEC,KAAK,kBACtDxB,IAAA,CAACL,oBAAoB,CAAC8B,MAAM;MAE3BR,KAAK,EAAGI,QAAU;MAClBK,UAAU,EAAGT,KAAK,KAAKI,QAAU;MACjCM,WAAW,EACVL,IAAI;MACJ;MACA/B,OAAO,CAAED,EAAE,CAAE,mBAAoB,CAAC,EAAE+B,QAAS,CAC7C;MACDO,KAAK,EAAG;QAAEC,KAAK,EAAE,iBAAiB;QAAEC,UAAU,EAAET;MAAS,CAAG;MAC5DU,OAAO,EACNd,KAAK,KAAKI,QAAQ,GACfN,aAAa,GACb,MAAMC,QAAQ,CAAEK,QAAQ,EAAEG,KAAM,CACnC;MACD,cACCF,IAAI;MACD;MACA/B,OAAO,CAAED,EAAE,CAAE,cAAe,CAAC,EAAEgC,IAAK,CAAC;MACrC;MACA/B,OAAO,CAAED,EAAE,CAAE,mBAAoB,CAAC,EAAE+B,QAAS;IAChD,GApBKE,IAqBN,CACA,CAAC;EACJ,CAAC,EAAE,CAAEhB,SAAS,EAAEU,KAAK,EAAED,QAAQ,EAAED,aAAa,CAAG,CAAC;EAClD,oBACCf,IAAA,CAACL,oBAAoB,CAACqC,WAAW;IAChClB,SAAS,EAAGA,SAAW;IACvBmB,OAAO,EAAGd,eAAiB;IAAA,GACtBD;EAAe,CACpB,CAAC;AAEJ;AAEA,SAASgB,cAAcA,CAAE;EACxBpB,SAAS;EACTC,aAAa;EACbR,SAAS;EACTS,QAAQ;EACRC,KAAK;EACLkB;AAC4B,CAAC,EAAG;EAChC,MAAMC,UAAU,GAAG5C,aAAa,CAAE0C,cAAe,CAAC;EAElD,oBACClC,IAAA,CAACH,MAAM;IAACwC,OAAO,EAAG,CAAG;IAACvB,SAAS,EAAGA,SAAW;IAAAwB,QAAA,EAC1C/B,SAAS,CAACa,GAAG,CAAE,CAAE;MAAEE,IAAI;MAAEf,SAAS,EAAEgC;IAAY,CAAC,EAAEf,KAAK,KAAM;MAC/D,MAAMgB,EAAE,GAAG,iBAAkBJ,UAAU,IAAMZ,KAAK,EAAG;MACrD,oBACCtB,KAAA,CAACL,MAAM;QAACwC,OAAO,EAAG,CAAG;QAAAC,QAAA,gBACpBtC,IAAA,CAACF,YAAY;UAAC2C,KAAK,EAAGN,YAAc;UAACK,EAAE,EAAGA,EAAI;UAAAF,QAAA,EAC3ChB;QAAI,CACO,CAAC,eACftB,IAAA,CAACa,YAAY;UACZE,aAAa,EAAGA,aAAe;UAC/BR,SAAS,EAAGgC,WAAa;UACzBvB,QAAQ,EAAKK,QAAQ,IACpBL,QAAQ,CAAEK,QAAQ,EAAEG,KAAM,CAC1B;UACDP,KAAK,EAAGA,KAAO;UACf,mBAAkBuB;QAAI,CACtB,CAAC;MAAA,GAZyBhB,KAapB,CAAC;IAEX,CAAE;EAAC,CACI,CAAC;AAEX;AAEA,SAASkB,SAASA,CAAEC,KAAyB,EAAG;EAC/C,MAAM;IACLC,SAAS;IACTC,IAAI;IACJC,OAAO;IACPX,YAAY;IACZ,YAAY,EAAEY,SAAS;IACvB,iBAAiB,EAAEC,cAAc;IACjC,GAAG9B;EACJ,CAAC,GAAGyB,KAAK;EACT,MAAMV,OAAO,GAAGzB,qBAAqB,CAAEmC,KAAK,CAACpC,SAAU,CAAC,gBACvDP,IAAA,CAACkC,cAAc;IAACC,YAAY,EAAGA,YAAc;IAAA,GAAMjB;EAAe,CAAI,CAAC,gBAEvElB,IAAA,CAACa,YAAY;IAAA,GAAMK;EAAe,CAAI,CACtC;EAED,IAAI+B,SAGkB;EAEtB,IAAKL,SAAS,EAAG;IAChBK,SAAS,GAAG;MAAEL,SAAS,EAAE;IAAK,CAAC;EAChC,CAAC,MAAM;IACN,MAAMM,UAAgD,GAAG;MACxDN,SAAS,EAAE,KAAK;MAChBC;IACD,CAAC;IAED,IAAKE,SAAS,EAAG;MAChBE,SAAS,GAAG;QAAE,GAAGC,UAAU;QAAE,YAAY,EAAEH;MAAU,CAAC;IACvD,CAAC,MAAM,IAAKC,cAAc,EAAG;MAC5BC,SAAS,GAAG;QACX,GAAGC,UAAU;QACb,iBAAiB,EAAEF;MACpB,CAAC;IACF,CAAC,MAAM;MACNC,SAAS,GAAG;QACX,GAAGC,UAAU;QACb,YAAY,EAAE5D,EAAE,CAAE,sBAAuB;MAC1C,CAAC;IACF;EACD;EAEA,oBACCU,IAAA,CAACL,oBAAoB;IAAA,GACfsD,SAAS;IACdH,OAAO,EAAGA,OAAS;IACnBb,OAAO,EAAGA;EAAS,CACnB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASkB,cAAcA,CAAE;EAC/BrC,SAAS;EACTP,SAAS,GAAG,EAAE;EACdS,QAAQ;EACRC,KAAK;EACLmC,SAAS,GAAG,IAAI;EAChBC,sBAAsB,GAAG,KAAK;EAC9BC,iCAAiC;EACjCnB,YAAY,GAAG,CAAC;EAChB,GAAGjB;AAC0B,CAAC,EAAG;EACjC,MAAMH,aAAa,GAAGtB,WAAW,CAChC,MAAMuB,QAAQ,CAAEuC,SAAU,CAAC,EAC3B,CAAEvC,QAAQ,CACX,CAAC;EAED,oBACCd,KAAA,CAACL,MAAM;IAACwC,OAAO,EAAG9B,SAAS,CAACG,MAAM,GAAG,CAAC,GAAG,CAAG;IAAA4B,QAAA,GACzC,CAAEe,sBAAsB,iBACzBrD,IAAA,CAACJ,oBAAoB;MACpB0D,iCAAiC,EAChCA,iCACA;MACDrC,KAAK,EAAGA,KAAO;MACfD,QAAQ,EAAGA;IAAU,CACrB,CACD,EACC,CAAET,SAAS,CAACG,MAAM,GAAG,CAAC,IAAI0C,SAAS,kBACpCpD,IAAA,CAAC0C,SAAS;MAAA,GACJxB,eAAe;MACpBJ,SAAS,EAAGA,SAAW;MACvBC,aAAa,EAAGA,aAAe;MAC/BR,SAAS,EAAGA,SAAW;MACvBS,QAAQ,EAAGA,QAAU;MACrBC,KAAK,EAAGA,KAAO;MACf6B,OAAO,EACNM,SAAS,IACT,CAAEC,sBAAsB,iBACvBrD,IAAA,CAACL,oBAAoB,CAAC6D,YAAY;QACjCzB,OAAO,EAAGhB,aAAe;QAAAuB,QAAA,EAEvBhD,EAAE,CAAE,OAAQ;MAAC,CACmB,CAEpC;MACD6C,YAAY,EAAGA;IAAc,CAC7B,CACD;EAAA,CACM,CAAC;AAEX;AAEA,eAAegB,cAAc","ignoreList":[]}
1	+ {"version":3,"names":["__","sprintf","useInstanceId","useCallback","useMemo","CircularOptionPicker","CustomGradientPicker","VStack","ColorHeading","jsx","_jsx","jsxs","_jsxs","isMultipleOriginObject","obj","Array","isArray","gradients","isMultipleOriginArray","arr","length","every","gradientObj","SingleOrigin","className","clearGradient","onChange","value","additionalProps","gradientOptions","map","gradient","name","slug","index","Option","isSelected","tooltipText","style","color","background","onClick","OptionGroup","options","MultipleOrigin","headingLevel","instanceId","spacing","children","gradientSet","id","level","Component","props","asButtons","loop","actions","ariaLabel","ariaLabelledby","metaProps","_metaProps","GradientPicker","clearable","disableCustomGradients","__experimentalIsRenderedInSidebar","undefined","ButtonAction","accessibleWhenDisabled","disabled"],"sources":["@wordpress/components/src/gradient-picker/index.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/\n Internal dependencies\n /\nimport CircularOptionPicker from '../circular-option-picker';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { VStack } from '../v-stack';\nimport { ColorHeading } from '../color-palette/styles';\nimport type {\n\tGradientPickerComponentProps,\n\tPickerProps,\n\tOriginObject,\n\tGradientObject,\n} from './types';\n\n// The Multiple Origin Gradients have a `gradients` property (an array of\n// gradient objects), while Single Origin ones have a `gradient` property.\nconst isMultipleOriginObject = (\n\tobj: Record< string, any >\n): obj is OriginObject =>\n\tArray.isArray( obj.gradients ) && ! ( 'gradient' in obj );\n\nconst isMultipleOriginArray = ( arr: any[] ): arr is OriginObject[] => {\n\treturn (\n\t\tarr.length > 0 &&\n\t\tarr.every( ( gradientObj ) => isMultipleOriginObject( gradientObj ) )\n\t);\n};\n\nfunction SingleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: PickerProps< GradientObject > ) {\n\tconst gradientOptions = useMemo( () => {\n\t\treturn gradients.map( ( { gradient, name, slug }, index ) => (\n\t\t\t<CircularOptionPicker.Option\n\t\t\t\tkey={ slug }\n\t\t\t\tvalue={ gradient }\n\t\t\t\tisSelected={ value === gradient }\n\t\t\t\ttooltipText={\n\t\t\t\t\tname \|\|\n\t\t\t\t\t// translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\tsprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t\tstyle={ { color: 'rgba( 0,0,0,0 )', background: gradient } }\n\t\t\t\tonClick={\n\t\t\t\t\tvalue === gradient\n\t\t\t\t\t\t? clearGradient\n\t\t\t\t\t\t: () => onChange( gradient, index )\n\t\t\t\t}\n\t\t\t\taria-label={\n\t\t\t\t\tname\n\t\t\t\t\t\t? // translators: %s: The name of the gradient e.g: \"Angular red to blue\".\n\t\t\t\t\t\t sprintf( __( 'Gradient: %s' ), name )\n\t\t\t\t\t\t: // translators: %s: gradient code e.g: \"linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);\".\n\t\t\t\t\t\t sprintf( __( 'Gradient code: %s' ), gradient )\n\t\t\t\t}\n\t\t\t/>\n\t\t) );\n\t}, [ gradients, value, onChange, clearGradient ] );\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ gradientOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultipleOrigin( {\n\tclassName,\n\tclearGradient,\n\tgradients,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: PickerProps< OriginObject > ) {\n\tconst instanceId = useInstanceId( MultipleOrigin );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ gradients.map( ( { name, gradients: gradientSet }, index ) => {\n\t\t\t\tconst id = `color-palette-${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading level={ headingLevel } id={ id }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SingleOrigin\n\t\t\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\t\t\tgradients={ gradientSet }\n\t\t\t\t\t\t\tonChange={ ( gradient ) =>\n\t\t\t\t\t\t\t\tonChange( gradient, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nfunction Component( props: PickerProps< any > ) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tactions,\n\t\theadingLevel,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst options = isMultipleOriginArray( props.gradients ) ? (\n\t\t<MultipleOrigin headingLevel={ headingLevel } { ...additionalProps } />\n\t) : (\n\t\t<SingleOrigin { ...additionalProps } />\n\t);\n\n\tlet metaProps:\n\t\t\| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t\| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t\| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\t{ ...metaProps }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t/>\n\t);\n}\n\n/\n GradientPicker is a React component that renders a color gradient picker to\n * define a multi step gradient. There's either a _linear_ or a _radial_ type\n * available.\n \n ```jsx\n * import { useState } from 'react';\n * import { GradientPicker } from '@wordpress/components';\n \n const MyGradientPicker = () => {\n * const [ gradient, setGradient ] = useState( null );\n \n return (\n * <GradientPicker\n * value={ gradient }\n * onChange={ ( currentGradient ) => setGradient( currentGradient ) }\n * gradients={ [\n * {\n * name: 'JShine',\n * gradient:\n * 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)',\n * slug: 'jshine',\n * },\n * {\n * name: 'Moonlit Asteroid',\n * gradient:\n * 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)',\n * slug: 'moonlit-asteroid',\n * },\n * {\n * name: 'Rastafarie',\n * gradient:\n * 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)',\n * slug: 'rastafari',\n * },\n * ] }\n * />\n * );\n * };\n ```\n \n */\nexport function GradientPicker( {\n\tclassName,\n\tgradients = [],\n\tonChange,\n\tvalue,\n\tclearable = true,\n\tdisableCustomGradients = false,\n\t__experimentalIsRenderedInSidebar,\n\theadingLevel = 2,\n\t...additionalProps\n}: GradientPickerComponentProps ) {\n\tconst clearGradient = useCallback(\n\t\t() => onChange( undefined ),\n\t\t[ onChange ]\n\t);\n\n\treturn (\n\t\t<VStack spacing={ gradients.length ? 4 : 0 }>\n\t\t\t{ ! disableCustomGradients && (\n\t\t\t\t<CustomGradientPicker\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\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( gradients.length > 0 \|\| clearable ) && (\n\t\t\t\t<Component\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\tclassName={ className }\n\t\t\t\t\tclearGradient={ clearGradient }\n\t\t\t\t\tgradients={ gradients }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tactions={\n\t\t\t\t\t\tclearable &&\n\t\t\t\t\t\t! disableCustomGradients && (\n\t\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\t\tonClick={ clearGradient }\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\tdisabled={ ! value }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default GradientPicker;\n"],"mappings":"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","ignoreList":[]}

package/build-module/gradient-picker/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":[],"sources":["@wordpress/components/src/gradient-picker/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { HeadingSize } from '../heading/types';\n\nexport type GradientObject = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n};\nexport type OriginObject = { name: string; gradients: GradientObject[] };\nexport type GradientsProp = GradientObject[] \| OriginObject[];\n\ntype GradientPickerBaseProps = {\n\t/\n\t The class name added to the wrapper.\n\t /\n\tclassName?: string;\n\t/\n\t The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t /\n\tonChange: ( currentGradient: string \| undefined ) => void;\n\t/\n\t The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t \n\t @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t /\n\tvalue?: GradientObject[ 'gradient' ] \| null;\n\t/\n\t Whether the palette should have a clearing button or not.\n\t \n\t @default true\n\t /\n\tclearable?: boolean;\n\t/\n\t The heading level. Only applies in cases where gradients are provided\n\t * from multiple origins (ie. when the array passed as the `gradients` prop\n\t * contains two or more items).\n\t \n\t @default 2\n\t /\n\theadingLevel?: HeadingSize;\n\t/\n\t Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t \n\t @default false\n\t /\n\tasButtons?: boolean;\n\t/\n\t Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t \n\t @default true\n\t /\n\tloop?: boolean;\n} & (\n\t\| {\n\t\t\t~~/\n\t\t\t~~ A ~~label~~ to ~~identify~~ ~~the~~ ~~purpose~~ of ~~the control.\~~n\t\t\t \n\t\t\t ~~@todo~~ ~~[#54055]~~ ~~Either~~ ~~this~~ or ~~`aria-labelledby`~~ ~~should~~ be ~~required\~~n\t\t\t /\n\t\t\t'aria-label'?: string;\n\t\t\t'aria-labelledby'?: never;\n\t }\n\t\| {\n\t\t\t~~/\n\t\t\t~~ An ID of an ~~element to provide a~~ label ~~for~~ ~~the~~ ~~control.\~~n\t\t\t \n\t\t\t ~~@todo~~ ~~[#54055]~~ ~~Either~~ ~~this~~ or ~~`aria-~~label` ~~should~~ be ~~required\~~n\t\t\t /\n\t\t\t'aria-labelledby'?: string;\n\t\t\t'aria-label'?: never;\n\t }\n);\n\nexport type GradientPickerComponentProps = GradientPickerBaseProps & {\n\t/\n\t An array of objects as predefined gradients displayed above the gradient\n\t * selector. Alternatively, if there are multiple sets (or 'origins') of\n\t * gradients, you can pass an array of objects each with a `name` and a\n\t * `gradients` array which will in turn contain the predefined gradient objects.\n\t \n\t @default []\n\t /\n\tgradients?: GradientsProp;\n\t/\n\t Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t \n\t @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t /\n\t__nextHasNoMargin?: boolean;\n\t/\n\t If true, the gradient picker will not be displayed and only defined\n\t * gradients from `gradients` will be shown.\n\t \n\t @default false\n\t /\n\tdisableCustomGradients?: boolean;\n\t/\n\t Whether this is rendered in the sidebar.\n\t \n\t @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type PickerProps< TOriginType extends GradientObject \| OriginObject > =\n\tGradientPickerBaseProps & {\n\t\tclearGradient: () => void;\n\t\tonChange: (\n\t\t\tcurrentGradient: string \| undefined,\n\t\t\tindex: number\n\t\t) => void;\n\t\tactions?: React.ReactNode;\n\t\tgradients: TOriginType[];\n\t};\n"],"mappings":"","ignoreList":[]}
1	+ {"version":3,"names":[],"sources":["@wordpress/components/src/gradient-picker/types.ts"],"sourcesContent":["/*\n Internal dependencies\n /\nimport type { HeadingSize } from '../heading/types';\n\nexport type GradientObject = {\n\tgradient: string;\n\tname: string;\n\tslug: string;\n};\nexport type OriginObject = { name: string; gradients: GradientObject[] };\nexport type GradientsProp = GradientObject[] \| OriginObject[];\n\ntype GradientPickerBaseProps = {\n\t/\n\t The class name added to the wrapper.\n\t /\n\tclassName?: string;\n\t/\n\t The function called when a new gradient has been defined. It is passed to\n\t * the `currentGradient` as an argument.\n\t /\n\tonChange: ( currentGradient: string \| undefined ) => void;\n\t/\n\t The current value of the gradient. Pass a css gradient string (See default value for example).\n\t * Optionally pass in a `null` value to specify no gradient is currently selected.\n\t \n\t @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'\n\t /\n\tvalue?: GradientObject[ 'gradient' ] \| null;\n\t/\n\t Whether the palette should have a clearing button or not.\n\t \n\t @default true\n\t /\n\tclearable?: boolean;\n\t/\n\t The heading level. Only applies in cases where gradients are provided\n\t * from multiple origins (i.e. when the array passed as the `gradients` prop\n\t * contains two or more items).\n\t \n\t @default 2\n\t /\n\theadingLevel?: HeadingSize;\n\t/\n\t Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t \n\t @default false\n\t /\n\tasButtons?: boolean;\n\t/\n\t Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t \n\t @default true\n\t /\n\tloop?: boolean;\n} & (\n\t\| {\n\t\t\t// TODO: [#54055] Either this or `aria-labelledby` should be required\n\t\t\t/\n\t\t\t A label to identify the purpose of the control.\n\t\t\t /\n\t\t\t'aria-label'?: string;\n\t\t\t'aria-labelledby'?: never;\n\t }\n\t\| {\n\t\t\t// TODO: [#54055] Either this or `aria-label` should be required\n\t\t\t/\n\t\t\t An ID of an element to provide a label for the control.\n\t\t\t /\n\t\t\t'aria-labelledby'?: string;\n\t\t\t'aria-label'?: never;\n\t }\n);\n\nexport type GradientPickerComponentProps = GradientPickerBaseProps & {\n\t/\n\t An array of objects as predefined gradients displayed above the gradient\n\t * selector. Alternatively, if there are multiple sets (or 'origins') of\n\t * gradients, you can pass an array of objects each with a `name` and a\n\t * `gradients` array which will in turn contain the predefined gradient objects.\n\t \n\t @default []\n\t /\n\tgradients?: GradientsProp;\n\t/\n\t Start opting in to the new margin-free styles that will become the default\n\t * in a future version, currently scheduled to be WordPress 6.4. (The prop\n\t * can be safely removed once this happens.)\n\t \n\t @default false\n\t * @deprecated Default behavior since WP 6.5. Prop can be safely removed.\n\t * @ignore\n\t /\n\t__nextHasNoMargin?: boolean;\n\t/\n\t If true, the gradient picker will not be displayed and only defined\n\t * gradients from `gradients` will be shown.\n\t \n\t @default false\n\t /\n\tdisableCustomGradients?: boolean;\n\t/\n\t Whether this is rendered in the sidebar.\n\t \n\t @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n};\n\nexport type PickerProps< TOriginType extends GradientObject \| OriginObject > =\n\tGradientPickerBaseProps & {\n\t\tclearGradient: () => void;\n\t\tonChange: (\n\t\t\tcurrentGradient: string \| undefined,\n\t\t\tindex: number\n\t\t) => void;\n\t\tactions?: React.ReactNode;\n\t\tgradients: TOriginType[];\n\t};\n"],"mappings":"","ignoreList":[]}

package/build-module/guide/page-control.js CHANGED Viewed

@@ -23,6 +23,7 @@ export default function PageControl({
       // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current
       "aria-current": page === currentPage ? 'step' : undefined,
       children: /*#__PURE__*/_jsx(Button, {
+        size: "small",
         icon: /*#__PURE__*/_jsx(PageControlIcon, {}),
         "aria-label": sprintf(/* translators: 1: current page number 2: total number of pages */
         __('Page %1$d of %2$d'), page + 1, numberOfPages),

package/build-module/guide/page-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__","sprintf","Button","PageControlIcon","jsx","_jsx","PageControl","currentPage","numberOfPages","setCurrentPage","className","children","Array","from","length","map","_","page","undefined","icon","onClick"],"sources":["@wordpress/components/src/guide/page-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport type { PageControlProps } from './types';\n\nexport default function PageControl( {\n\tcurrentPage,\n\tnumberOfPages,\n\tsetCurrentPage,\n}: PageControlProps ) {\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"components-guide__page-control\"\n\t\t\taria-label={ __( 'Guide controls' ) }\n\t\t>\n\t\t\t{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ page }\n\t\t\t\t\t// Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n\t\t\t\t\taria-current={ page === currentPage ? 'step' : undefined }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ page }\n\t\t\t\t\t\ticon={ <PageControlIcon /> }\n\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t/ translators: 1: current page number 2: total number of pages */\n\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\tpage + 1,\n\t\t\t\t\t\t\tnumberOfPages\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => setCurrentPage( page ) }\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,eAAe,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG1C,eAAe,SAASC,WAAWA,CAAE;EACpCC,WAAW;EACXC,aAAa;EACbC;AACiB,CAAC,EAAG;EACrB,oBACCJ,IAAA;IACCK,SAAS,EAAC,gCAAgC;IAC1C,cAAaV,EAAE,CAAE,gBAAiB,CAAG;IAAAW,QAAA,EAEnCC,KAAK,CAACC,IAAI,CAAE;MAAEC,MAAM,EAAEN;IAAc,CAAE,CAAC,CAACO,GAAG,CAAE,CAAEC,CAAC,EAAEC,IAAI,kBACvDZ,IAAA;MAEC;MACA,gBAAeY,IAAI,KAAKV,WAAW,GAAG,MAAM,GAAGW,SAAW;MAAAP,QAAA,eAE1DN,IAAA,CAACH,MAAM;~~QAENiB~~,IAAI,~~eAAGd~~,IAAA,CAACF,eAAe,IAAE,CAAG;QAC5B,cAAaF,OAAO,CACnB;QACAD,EAAE,CAAE,mBAAoB,CAAC,EACzBiB,IAAI,GAAG,CAAC,EACRT,aACD,CAAG;~~QACHY~~,OAAO,EAAGA,CAAA,~~KAAMX~~,cAAc,CAAEQ,IAAK;MAAG,GARlCA,IASN;IAAC,~~GAdIA~~,~~IAeH~~,CACH;EAAC,CACA,CAAC;AAEP","ignoreList":[]}
1	+ {"version":3,"names":["__","sprintf","Button","PageControlIcon","jsx","_jsx","PageControl","currentPage","numberOfPages","setCurrentPage","className","children","Array","from","length","map","_","page","undefined","size","icon","onClick"],"sources":["@wordpress/components/src/guide/page-control.tsx"],"sourcesContent":["/*\n WordPress dependencies\n /\nimport { __, sprintf } from '@wordpress/i18n';\n\n/\n Internal dependencies\n /\nimport Button from '../button';\nimport { PageControlIcon } from './icons';\nimport type { PageControlProps } from './types';\n\nexport default function PageControl( {\n\tcurrentPage,\n\tnumberOfPages,\n\tsetCurrentPage,\n}: PageControlProps ) {\n\treturn (\n\t\t<ul\n\t\t\tclassName=\"components-guide__page-control\"\n\t\t\taria-label={ __( 'Guide controls' ) }\n\t\t>\n\t\t\t{ Array.from( { length: numberOfPages } ).map( ( _, page ) => (\n\t\t\t\t<li\n\t\t\t\t\tkey={ page }\n\t\t\t\t\t// Set aria-current=\"step\" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current\n\t\t\t\t\taria-current={ page === currentPage ? 'step' : undefined }\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tkey={ page }\n\t\t\t\t\t\ticon={ <PageControlIcon /> }\n\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t/ translators: 1: current page number 2: total number of pages */\n\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\tpage + 1,\n\t\t\t\t\t\t\tnumberOfPages\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tonClick={ () => setCurrentPage( page ) }\n\t\t\t\t\t/>\n\t\t\t\t</li>\n\t\t\t) ) }\n\t\t</ul>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,eAAe,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG1C,eAAe,SAASC,WAAWA,CAAE;EACpCC,WAAW;EACXC,aAAa;EACbC;AACiB,CAAC,EAAG;EACrB,oBACCJ,IAAA;IACCK,SAAS,EAAC,gCAAgC;IAC1C,cAAaV,EAAE,CAAE,gBAAiB,CAAG;IAAAW,QAAA,EAEnCC,KAAK,CAACC,IAAI,CAAE;MAAEC,MAAM,EAAEN;IAAc,CAAE,CAAC,CAACO,GAAG,CAAE,CAAEC,CAAC,EAAEC,IAAI,kBACvDZ,IAAA;MAEC;MACA,gBAAeY,IAAI,KAAKV,WAAW,GAAG,MAAM,GAAGW,SAAW;MAAAP,QAAA,eAE1DN,IAAA,CAACH,MAAM;QACNiB,IAAI,EAAC,OAAO;QAEZC,IAAI,eAAGf,IAAA,CAACF,eAAe,IAAE,CAAG;QAC5B,cAAaF,OAAO,CACnB;QACAD,EAAE,CAAE,mBAAoB,CAAC,EACzBiB,IAAI,GAAG,CAAC,EACRT,aACD,CAAG;QACHa,OAAO,EAAGA,CAAA,KAAMZ,cAAc,CAAEQ,IAAK;MAAG,GARlCA,IASN;IAAC,GAfIA,IAgBH,CACH;EAAC,CACA,CAAC;AAEP","ignoreList":[]}