@wordpress/components 23.3.2 → 23.4.0

package/build/utils/hooks/use-controlled-value.js

@@ -14,10 +14,10 @@ var _element = require("@wordpress/element");
 /**
  * Simplified and improved implementation of useControlledState.
  *
- * @param  props
- * @param  props.defaultValue
- * @param  props.value
- * @param  props.onChange
+ * @param props
+ * @param props.defaultValue
+ * @param props.value
+ * @param props.onChange
  * @return The controlled value and the value setter.
  */
 function useControlledValue(_ref) {

package/build/utils/hooks/use-controlled-value.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/hooks/use-controlled-value.ts"],"names":["useControlledValue","defaultValue","onChange","value","valueProp","hasValue","initialValue","state","setState","setValue","nextValue"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,kBAAT,OAIS;AAAA,MAJyB;AACxCC,IAAAA,YADwC;AAExCC,IAAAA,QAFwC;AAGxCC,IAAAA,KAAK,EAAEC;AAHiC,GAIzB;AACf,QAAMC,QAAQ,GAAG,OAAOD,SAAP,KAAqB,WAAtC;AACA,QAAME,YAAY,GAAGD,QAAQ,GAAGD,SAAH,GAAeH,YAA5C;AACA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsB,uBAAUF,YAAV,CAA5B;AACA,QAAMH,KAAK,GAAGE,QAAQ,GAAGD,SAAH,GAAeG,KAArC;AAEA,MAAIE,QAAJ;;AACA,MAAKJ,QAAQ,IAAI,OAAOH,QAAP,KAAoB,UAArC,EAAkD;AACjDO,IAAAA,QAAQ,GAAGP,QAAX;AACA,GAFD,MAEO,IAAK,CAAEG,QAAF,IAAc,OAAOH,QAAP,KAAoB,UAAvC,EAAoD;AAC1DO,IAAAA,QAAQ,GAAKC,SAAF,IAAiB;AAC3BR,MAAAA,QAAQ,CAAEQ,SAAF,CAAR;AACAF,MAAAA,QAAQ,CAAEE,SAAF,CAAR;AACA,KAHD;AAIA,GALM,MAKA;AACND,IAAAA,QAAQ,GAAGD,QAAX;AACA;;AAED,SAAO,CAAEL,KAAF,EAASM,QAAT,CAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\ntype Props< T > = {\n\tdefaultValue?: T;\n\tvalue?: T;\n\tonChange?: ( value: T ) => void;\n};\n\n/**\n * Simplified and improved implementation of useControlledState.\n *\n * @param  props\n * @param  props.defaultValue\n * @param  props.value\n * @param  props.onChange\n * @return The controlled value and the value setter.\n */\nexport function useControlledValue< T >( {\n\tdefaultValue,\n\tonChange,\n\tvalue: valueProp,\n}: Props< T > ) {\n\tconst hasValue = typeof valueProp !== 'undefined';\n\tconst initialValue = hasValue ? valueProp : defaultValue;\n\tconst [ state, setState ] = useState( initialValue );\n\tconst value = hasValue ? valueProp : state;\n\n\tlet setValue: ( nextValue: T ) => void;\n\tif ( hasValue && typeof onChange === 'function' ) {\n\t\tsetValue = onChange;\n\t} else if ( ! hasValue && typeof onChange === 'function' ) {\n\t\tsetValue = ( nextValue ) => {\n\t\t\tonChange( nextValue );\n\t\t\tsetState( nextValue );\n\t\t};\n\t} else {\n\t\tsetValue = setState;\n\t}\n\n\treturn [ value, setValue as typeof setState ] as const;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/hooks/use-controlled-value.ts"],"names":["useControlledValue","defaultValue","onChange","value","valueProp","hasValue","initialValue","state","setState","setValue","nextValue"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,kBAAT,OAIS;AAAA,MAJyB;AACxCC,IAAAA,YADwC;AAExCC,IAAAA,QAFwC;AAGxCC,IAAAA,KAAK,EAAEC;AAHiC,GAIzB;AACf,QAAMC,QAAQ,GAAG,OAAOD,SAAP,KAAqB,WAAtC;AACA,QAAME,YAAY,GAAGD,QAAQ,GAAGD,SAAH,GAAeH,YAA5C;AACA,QAAM,CAAEM,KAAF,EAASC,QAAT,IAAsB,uBAAUF,YAAV,CAA5B;AACA,QAAMH,KAAK,GAAGE,QAAQ,GAAGD,SAAH,GAAeG,KAArC;AAEA,MAAIE,QAAJ;;AACA,MAAKJ,QAAQ,IAAI,OAAOH,QAAP,KAAoB,UAArC,EAAkD;AACjDO,IAAAA,QAAQ,GAAGP,QAAX;AACA,GAFD,MAEO,IAAK,CAAEG,QAAF,IAAc,OAAOH,QAAP,KAAoB,UAAvC,EAAoD;AAC1DO,IAAAA,QAAQ,GAAKC,SAAF,IAAiB;AAC3BR,MAAAA,QAAQ,CAAEQ,SAAF,CAAR;AACAF,MAAAA,QAAQ,CAAEE,SAAF,CAAR;AACA,KAHD;AAIA,GALM,MAKA;AACND,IAAAA,QAAQ,GAAGD,QAAX;AACA;;AAED,SAAO,CAAEL,KAAF,EAASM,QAAT,CAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\ntype Props< T > = {\n\tdefaultValue?: T;\n\tvalue?: T;\n\tonChange?: ( value: T ) => void;\n};\n\n/**\n * Simplified and improved implementation of useControlledState.\n *\n * @param props\n * @param props.defaultValue\n * @param props.value\n * @param props.onChange\n * @return The controlled value and the value setter.\n */\nexport function useControlledValue< T >( {\n\tdefaultValue,\n\tonChange,\n\tvalue: valueProp,\n}: Props< T > ) {\n\tconst hasValue = typeof valueProp !== 'undefined';\n\tconst initialValue = hasValue ? valueProp : defaultValue;\n\tconst [ state, setState ] = useState( initialValue );\n\tconst value = hasValue ? valueProp : state;\n\n\tlet setValue: ( nextValue: T ) => void;\n\tif ( hasValue && typeof onChange === 'function' ) {\n\t\tsetValue = onChange;\n\t} else if ( ! hasValue && typeof onChange === 'function' ) {\n\t\tsetValue = ( nextValue ) => {\n\t\t\tonChange( nextValue );\n\t\t\tsetState( nextValue );\n\t\t};\n\t} else {\n\t\tsetValue = setState;\n\t}\n\n\treturn [ value, setValue as typeof setState ] as const;\n}\n"]}

package/build/utils/hooks/use-latest-ref.js

@@ -23,7 +23,7 @@ var _compose = require("@wordpress/compose");
  *
  * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx
  *
- * @param  value The value to reference
+ * @param value The value to reference
  * @return The prop reference.
  */
 function useLatestRef(value) {

package/build/utils/hooks/use-latest-ref.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/hooks/use-latest-ref.ts"],"names":["useLatestRef","value","ref","current"],"mappings":";;;;;;;AAQA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,CAA4BC,KAA5B,EAAuD;AAC7D,QAAMC,GAAG,GAAG,qBAAQD,KAAR,CAAZ;AAEA,0CAA2B,MAAM;AAChCC,IAAAA,GAAG,CAACC,OAAJ,GAAcF,KAAd;AACA,GAFD;AAIA,SAAOC,GAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\nimport { useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Creates a reference for a prop. This is useful for preserving dependency\n * memoization for hooks like useCallback.\n *\n * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx\n *\n * @param  value The value to reference\n * @return The prop reference.\n */\nexport function useLatestRef< T >( value: T ): RefObject< T > {\n\tconst ref = useRef( value );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tref.current = value;\n\t} );\n\n\treturn ref;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/hooks/use-latest-ref.ts"],"names":["useLatestRef","value","ref","current"],"mappings":";;;;;;;AAQA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASA,YAAT,CAA4BC,KAA5B,EAAuD;AAC7D,QAAMC,GAAG,GAAG,qBAAQD,KAAR,CAAZ;AAEA,0CAA2B,MAAM;AAChCC,IAAAA,GAAG,CAACC,OAAJ,GAAcF,KAAd;AACA,GAFD;AAIA,SAAOC,GAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport type { RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\nimport { useIsomorphicLayoutEffect } from '@wordpress/compose';\n\n/**\n * Creates a reference for a prop. This is useful for preserving dependency\n * memoization for hooks like useCallback.\n *\n * @see https://codesandbox.io/s/uselatestref-mlj3i?file=/src/App.tsx\n *\n * @param value The value to reference\n * @return The prop reference.\n */\nexport function useLatestRef< T >( value: T ): RefObject< T > {\n\tconst ref = useRef( value );\n\n\tuseIsomorphicLayoutEffect( () => {\n\t\tref.current = value;\n\t} );\n\n\treturn ref;\n}\n"]}

package/build/utils/unit-values.js

@@ -9,7 +9,7 @@ const UNITED_VALUE_REGEX = /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|
 /**
  * Parses a number and unit from a value.
  *
- * @param  toParse Value to parse
+ * @param toParse Value to parse
  *
  * @return  The extracted number and unit.
  */
@@ -30,8 +30,8 @@ function parseCSSUnitValue(toParse) {
 /**
  * Combines a value and a unit into a unit value.
  *
- * @param  value
- * @param  unit
+ * @param value
+ * @param unit
  *
  * @return The unit value.
  */

package/build/utils/unit-values.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/unit-values.ts"],"names":["UNITED_VALUE_REGEX","parseCSSUnitValue","toParse","value","trim","matched","match","undefined","num","unit","numParsed","parseFloat","Number","isNaN","createCSSUnitValue"],"mappings":";;;;;;;AAAA,MAAMA,kBAAkB,GACvB,0IADD;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,iBAAT,CACNC,OADM,EAEuC;AAC7C,QAAMC,KAAK,GAAGD,OAAO,CAACE,IAAR,EAAd;AAEA,QAAMC,OAAO,GAAGF,KAAK,CAACG,KAAN,CAAaN,kBAAb,CAAhB;;AACA,MAAK,CAAEK,OAAP,EAAiB;AAChB,WAAO,CAAEE,SAAF,EAAaA,SAAb,CAAP;AACA;;AACD,QAAM,GAAIC,GAAJ,EAASC,IAAT,IAAkBJ,OAAxB;AACA,MAAIK,SAA6B,GAAGC,UAAU,CAAEH,GAAF,CAA9C;AACAE,EAAAA,SAAS,GAAGE,MAAM,CAACC,KAAP,CAAcH,SAAd,IAA4BH,SAA5B,GAAwCG,SAApD;AAEA,SAAO,CAAEA,SAAF,EAAaD,IAAb,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASK,kBAAT,CACNX,KADM,EAENM,IAFM,EAGG;AACT,SAAQ,GAAGN,KAAO,GAAGM,IAAM,EAA3B;AACA","sourcesContent":["const UNITED_VALUE_REGEX =\n\t/^([\\d.\\-+]*)\\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?$/;\n\n/**\n * Parses a number and unit from a value.\n *\n * @param  toParse Value to parse\n *\n * @return  The extracted number and unit.\n */\nexport function parseCSSUnitValue(\n\ttoParse: string\n): [ number | undefined, string | undefined ] {\n\tconst value = toParse.trim();\n\n\tconst matched = value.match( UNITED_VALUE_REGEX );\n\tif ( ! matched ) {\n\t\treturn [ undefined, undefined ];\n\t}\n\tconst [ , num, unit ] = matched;\n\tlet numParsed: number | undefined = parseFloat( num );\n\tnumParsed = Number.isNaN( numParsed ) ? undefined : numParsed;\n\n\treturn [ numParsed, unit ];\n}\n\n/**\n * Combines a value and a unit into a unit value.\n *\n * @param  value\n * @param  unit\n *\n * @return The unit value.\n */\nexport function createCSSUnitValue(\n\tvalue: string | number,\n\tunit: string\n): string {\n\treturn `${ value }${ unit }`;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/unit-values.ts"],"names":["UNITED_VALUE_REGEX","parseCSSUnitValue","toParse","value","trim","matched","match","undefined","num","unit","numParsed","parseFloat","Number","isNaN","createCSSUnitValue"],"mappings":";;;;;;;AAAA,MAAMA,kBAAkB,GACvB,0IADD;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,iBAAT,CACNC,OADM,EAEuC;AAC7C,QAAMC,KAAK,GAAGD,OAAO,CAACE,IAAR,EAAd;AAEA,QAAMC,OAAO,GAAGF,KAAK,CAACG,KAAN,CAAaN,kBAAb,CAAhB;;AACA,MAAK,CAAEK,OAAP,EAAiB;AAChB,WAAO,CAAEE,SAAF,EAAaA,SAAb,CAAP;AACA;;AACD,QAAM,GAAIC,GAAJ,EAASC,IAAT,IAAkBJ,OAAxB;AACA,MAAIK,SAA6B,GAAGC,UAAU,CAAEH,GAAF,CAA9C;AACAE,EAAAA,SAAS,GAAGE,MAAM,CAACC,KAAP,CAAcH,SAAd,IAA4BH,SAA5B,GAAwCG,SAApD;AAEA,SAAO,CAAEA,SAAF,EAAaD,IAAb,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASK,kBAAT,CACNX,KADM,EAENM,IAFM,EAGG;AACT,SAAQ,GAAGN,KAAO,GAAGM,IAAM,EAA3B;AACA","sourcesContent":["const UNITED_VALUE_REGEX =\n\t/^([\\d.\\-+]*)\\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?$/;\n\n/**\n * Parses a number and unit from a value.\n *\n * @param toParse Value to parse\n *\n * @return  The extracted number and unit.\n */\nexport function parseCSSUnitValue(\n\ttoParse: string\n): [ number | undefined, string | undefined ] {\n\tconst value = toParse.trim();\n\n\tconst matched = value.match( UNITED_VALUE_REGEX );\n\tif ( ! matched ) {\n\t\treturn [ undefined, undefined ];\n\t}\n\tconst [ , num, unit ] = matched;\n\tlet numParsed: number | undefined = parseFloat( num );\n\tnumParsed = Number.isNaN( numParsed ) ? undefined : numParsed;\n\n\treturn [ numParsed, unit ];\n}\n\n/**\n * Combines a value and a unit into a unit value.\n *\n * @param value\n * @param unit\n *\n * @return The unit value.\n */\nexport function createCSSUnitValue(\n\tvalue: string | number,\n\tunit: string\n): string {\n\treturn `${ value }${ unit }`;\n}\n"]}

package/build-module/alignment-matrix-control/utils.js

@@ -25,7 +25,7 @@ export const ALIGNMENTS = GRID.flat();
 /**
  * Parses and transforms an incoming value to better match the alignment values
  *
- * @param  value An alignment value to parse.
+ * @param value An alignment value to parse.
  *
  * @return The parsed value.
  */
@@ -37,8 +37,8 @@ export function transformValue(value) {
 /**
  * Creates an item ID based on a prefix ID and an alignment value.
  *
- * @param  prefixId An ID to prefix.
- * @param  value    An alignment value.
+ * @param prefixId An ID to prefix.
+ * @param value    An alignment value.
  *
  * @return The item id.
  */
@@ -50,7 +50,7 @@ export function getItemId(prefixId, value) {
 /**
  * Retrieves the alignment index from a value.
  *
- * @param  alignment Value to check.
+ * @param alignment Value to check.
  *
  * @return The index of a matching alignment.
  */

package/build-module/alignment-matrix-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/utils.tsx"],"names":["__","GRID","ALIGNMENT_LABEL","center","ALIGNMENTS","flat","transformValue","value","nextValue","replace","getItemId","prefixId","valueId","getAlignmentIndex","alignment","item","index","indexOf","undefined"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA;AACA;AACA;;AAGA,OAAO,MAAMC,IAAqC,GAAG,CACpD,CAAE,UAAF,EAAc,YAAd,EAA4B,WAA5B,CADoD,EAEpD,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAFoD,EAGpD,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAHoD,CAA9C,C,CAMP;;AACA,OAAO,MAAMC,eAA8D,GAAG;AAC7E,cAAYF,EAAE,CAAE,UAAF,CAD+D;AAE7E,gBAAcA,EAAE,CAAE,YAAF,CAF6D;AAG7E,eAAaA,EAAE,CAAE,WAAF,CAH8D;AAI7E,iBAAeA,EAAE,CAAE,aAAF,CAJ4D;AAK7E,mBAAiBA,EAAE,CAAE,QAAF,CAL0D;AAM7EG,EAAAA,MAAM,EAAEH,EAAE,CAAE,QAAF,CANmE;AAO7E,kBAAgBA,EAAE,CAAE,cAAF,CAP2D;AAQ7E,iBAAeA,EAAE,CAAE,aAAF,CAR4D;AAS7E,mBAAiBA,EAAE,CAAE,eAAF,CAT0D;AAU7E,kBAAgBA,EAAE,CAAE,cAAF;AAV2D,CAAvE,C,CAaP;;AACA,OAAO,MAAMI,UAAU,GAAGH,IAAI,CAACI,IAAL,EAAnB;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,cAAT,CAAyBC,KAAzB,EAA8D;AACpE,QAAMC,SAAS,GAAGD,KAAK,KAAK,QAAV,GAAqB,eAArB,GAAuCA,KAAzD;AAEA,SAAOC,SAAS,CAACC,OAAV,CAAmB,GAAnB,EAAwB,GAAxB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,SAAT,CACNC,QADM,EAENJ,KAFM,EAGL;AACD,QAAMK,OAAO,GAAGN,cAAc,CAAEC,KAAF,CAAd,CAAwBE,OAAxB,CAAiC,GAAjC,EAAsC,GAAtC,CAAhB;AAEA,SAAQ,GAAGE,QAAU,IAAIC,OAAS,EAAlC;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,iBAAT,GAEL;AAAA,MADDC,SACC,uEADwC,QACxC;AACD,QAAMC,IAAI,GAAGT,cAAc,CAAEQ,SAAF,CAA3B;AACA,QAAME,KAAK,GAAGZ,UAAU,CAACa,OAAX,CAAoBF,IAApB,CAAd;AAEA,SAAOC,KAAK,GAAG,CAAC,CAAT,GAAaA,KAAb,GAAqBE,SAA5B;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport type { AlignmentMatrixControlValue } from './types';\n\nexport const GRID: AlignmentMatrixControlValue[][] = [\n\t[ 'top left', 'top center', 'top right' ],\n\t[ 'center left', 'center center', 'center right' ],\n\t[ 'bottom left', 'bottom center', 'bottom right' ],\n];\n\n// Stored as map as i18n __() only accepts strings (not variables)\nexport const ALIGNMENT_LABEL: Record< AlignmentMatrixControlValue, string > = {\n\t'top left': __( 'Top Left' ),\n\t'top center': __( 'Top Center' ),\n\t'top right': __( 'Top Right' ),\n\t'center left': __( 'Center Left' ),\n\t'center center': __( 'Center' ),\n\tcenter: __( 'Center' ),\n\t'center right': __( 'Center Right' ),\n\t'bottom left': __( 'Bottom Left' ),\n\t'bottom center': __( 'Bottom Center' ),\n\t'bottom right': __( 'Bottom Right' ),\n};\n\n// Transforms GRID into a flat Array of values.\nexport const ALIGNMENTS = GRID.flat();\n\n/**\n * Parses and transforms an incoming value to better match the alignment values\n *\n * @param  value An alignment value to parse.\n *\n * @return The parsed value.\n */\nexport function transformValue( value: AlignmentMatrixControlValue ) {\n\tconst nextValue = value === 'center' ? 'center center' : value;\n\n\treturn nextValue.replace( '-', ' ' ) as AlignmentMatrixControlValue;\n}\n\n/**\n * Creates an item ID based on a prefix ID and an alignment value.\n *\n * @param  prefixId An ID to prefix.\n * @param  value    An alignment value.\n *\n * @return The item id.\n */\nexport function getItemId(\n\tprefixId: string,\n\tvalue: AlignmentMatrixControlValue\n) {\n\tconst valueId = transformValue( value ).replace( ' ', '-' );\n\n\treturn `${ prefixId }-${ valueId }`;\n}\n\n/**\n * Retrieves the alignment index from a value.\n *\n * @param  alignment Value to check.\n *\n * @return The index of a matching alignment.\n */\nexport function getAlignmentIndex(\n\talignment: AlignmentMatrixControlValue = 'center'\n) {\n\tconst item = transformValue( alignment );\n\tconst index = ALIGNMENTS.indexOf( item );\n\n\treturn index > -1 ? index : undefined;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/alignment-matrix-control/utils.tsx"],"names":["__","GRID","ALIGNMENT_LABEL","center","ALIGNMENTS","flat","transformValue","value","nextValue","replace","getItemId","prefixId","valueId","getAlignmentIndex","alignment","item","index","indexOf","undefined"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA;AACA;AACA;;AAGA,OAAO,MAAMC,IAAqC,GAAG,CACpD,CAAE,UAAF,EAAc,YAAd,EAA4B,WAA5B,CADoD,EAEpD,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAFoD,EAGpD,CAAE,aAAF,EAAiB,eAAjB,EAAkC,cAAlC,CAHoD,CAA9C,C,CAMP;;AACA,OAAO,MAAMC,eAA8D,GAAG;AAC7E,cAAYF,EAAE,CAAE,UAAF,CAD+D;AAE7E,gBAAcA,EAAE,CAAE,YAAF,CAF6D;AAG7E,eAAaA,EAAE,CAAE,WAAF,CAH8D;AAI7E,iBAAeA,EAAE,CAAE,aAAF,CAJ4D;AAK7E,mBAAiBA,EAAE,CAAE,QAAF,CAL0D;AAM7EG,EAAAA,MAAM,EAAEH,EAAE,CAAE,QAAF,CANmE;AAO7E,kBAAgBA,EAAE,CAAE,cAAF,CAP2D;AAQ7E,iBAAeA,EAAE,CAAE,aAAF,CAR4D;AAS7E,mBAAiBA,EAAE,CAAE,eAAF,CAT0D;AAU7E,kBAAgBA,EAAE,CAAE,cAAF;AAV2D,CAAvE,C,CAaP;;AACA,OAAO,MAAMI,UAAU,GAAGH,IAAI,CAACI,IAAL,EAAnB;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,cAAT,CAAyBC,KAAzB,EAA8D;AACpE,QAAMC,SAAS,GAAGD,KAAK,KAAK,QAAV,GAAqB,eAArB,GAAuCA,KAAzD;AAEA,SAAOC,SAAS,CAACC,OAAV,CAAmB,GAAnB,EAAwB,GAAxB,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,SAAT,CACNC,QADM,EAENJ,KAFM,EAGL;AACD,QAAMK,OAAO,GAAGN,cAAc,CAAEC,KAAF,CAAd,CAAwBE,OAAxB,CAAiC,GAAjC,EAAsC,GAAtC,CAAhB;AAEA,SAAQ,GAAGE,QAAU,IAAIC,OAAS,EAAlC;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,iBAAT,GAEL;AAAA,MADDC,SACC,uEADwC,QACxC;AACD,QAAMC,IAAI,GAAGT,cAAc,CAAEQ,SAAF,CAA3B;AACA,QAAME,KAAK,GAAGZ,UAAU,CAACa,OAAX,CAAoBF,IAApB,CAAd;AAEA,SAAOC,KAAK,GAAG,CAAC,CAAT,GAAaA,KAAb,GAAqBE,SAA5B;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n/**\n * Internal dependencies\n */\nimport type { AlignmentMatrixControlValue } from './types';\n\nexport const GRID: AlignmentMatrixControlValue[][] = [\n\t[ 'top left', 'top center', 'top right' ],\n\t[ 'center left', 'center center', 'center right' ],\n\t[ 'bottom left', 'bottom center', 'bottom right' ],\n];\n\n// Stored as map as i18n __() only accepts strings (not variables)\nexport const ALIGNMENT_LABEL: Record< AlignmentMatrixControlValue, string > = {\n\t'top left': __( 'Top Left' ),\n\t'top center': __( 'Top Center' ),\n\t'top right': __( 'Top Right' ),\n\t'center left': __( 'Center Left' ),\n\t'center center': __( 'Center' ),\n\tcenter: __( 'Center' ),\n\t'center right': __( 'Center Right' ),\n\t'bottom left': __( 'Bottom Left' ),\n\t'bottom center': __( 'Bottom Center' ),\n\t'bottom right': __( 'Bottom Right' ),\n};\n\n// Transforms GRID into a flat Array of values.\nexport const ALIGNMENTS = GRID.flat();\n\n/**\n * Parses and transforms an incoming value to better match the alignment values\n *\n * @param value An alignment value to parse.\n *\n * @return The parsed value.\n */\nexport function transformValue( value: AlignmentMatrixControlValue ) {\n\tconst nextValue = value === 'center' ? 'center center' : value;\n\n\treturn nextValue.replace( '-', ' ' ) as AlignmentMatrixControlValue;\n}\n\n/**\n * Creates an item ID based on a prefix ID and an alignment value.\n *\n * @param prefixId An ID to prefix.\n * @param value    An alignment value.\n *\n * @return The item id.\n */\nexport function getItemId(\n\tprefixId: string,\n\tvalue: AlignmentMatrixControlValue\n) {\n\tconst valueId = transformValue( value ).replace( ' ', '-' );\n\n\treturn `${ prefixId }-${ valueId }`;\n}\n\n/**\n * Retrieves the alignment index from a value.\n *\n * @param alignment Value to check.\n *\n * @return The index of a matching alignment.\n */\nexport function getAlignmentIndex(\n\talignment: AlignmentMatrixControlValue = 'center'\n) {\n\tconst item = transformValue( alignment );\n\tconst index = ALIGNMENTS.indexOf( item );\n\n\treturn index > -1 ? index : undefined;\n}\n"]}

package/build-module/angle-picker-control/angle-circle.js

@@ -18,11 +18,15 @@ function AngleCircle(_ref) {
     onChange,
     ...props
   } = _ref;
-  const angleCircleRef = useRef();
+  const angleCircleRef = useRef(null);
   const angleCircleCenter = useRef();
   const previousCursorValue = useRef();
 
   const setAngleCircleCenter = () => {
+    if (angleCircleRef.current === null) {
+      return;
+    }
+
     const rect = angleCircleRef.current.getBoundingClientRect();
     angleCircleCenter.current = {
       x: rect.x + rect.width / 2,
@@ -31,16 +35,25 @@ function AngleCircle(_ref) {
   };
 
   const changeAngleToPosition = event => {
-    const {
-      x: centerX,
-      y: centerY
-    } = angleCircleCenter.current; // Prevent (drag) mouse events from selecting and accidentally
+    var _event$target;
+
+    if (event === undefined) {
+      return;
+    } // Prevent (drag) mouse events from selecting and accidentally
     // triggering actions from other elements.
 
+
     event.preventDefault(); // Input control needs to lose focus and by preventDefault above, it doesn't.
 
-    event.target.focus();
-    onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
+    (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.focus();
+
+    if (angleCircleCenter.current !== undefined && onChange !== undefined) {
+      const {
+        x: centerX,
+        y: centerY
+      } = angleCircleCenter.current;
+      onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
+    }
   };
 
   const {
@@ -62,31 +75,26 @@ function AngleCircle(_ref) {
 
       document.body.style.cursor = 'grabbing';
     } else {
-      document.body.style.cursor = previousCursorValue.current || null;
+      document.body.style.cursor = previousCursorValue.current || '';
       previousCursorValue.current = undefined;
     }
   }, [isDragging]);
-  return (
-    /* eslint-disable jsx-a11y/no-static-element-interactions */
-    createElement(CircleRoot, _extends({
-      ref: angleCircleRef,
-      onMouseDown: startDrag,
-      className: "components-angle-picker-control__angle-circle",
-      style: isDragging ? {
-        cursor: 'grabbing'
-      } : undefined
-    }, props), createElement(CircleIndicatorWrapper, {
-      style: value ? {
-        transform: `rotate(${value}deg)`
-      } : undefined,
-      className: "components-angle-picker-control__angle-circle-indicator-wrapper",
-      tabIndex: -1
-    }, createElement(CircleIndicator, {
-      className: "components-angle-picker-control__angle-circle-indicator"
-    })))
-    /* eslint-enable jsx-a11y/no-static-element-interactions */
-
-  );
+  return createElement(CircleRoot, _extends({
+    ref: angleCircleRef,
+    onMouseDown: startDrag,
+    className: "components-angle-picker-control__angle-circle",
+    style: isDragging ? {
+      cursor: 'grabbing'
+    } : undefined
+  }, props), createElement(CircleIndicatorWrapper, {
+    style: value ? {
+      transform: `rotate(${value}deg)`
+    } : undefined,
+    className: "components-angle-picker-control__angle-circle-indicator-wrapper",
+    tabIndex: -1
+  }, createElement(CircleIndicator, {
+    className: "components-angle-picker-control__angle-circle-indicator"
+  })));
 }
 
 function getAngle(centerX, centerY, pointX, pointY) {

package/build-module/angle-picker-control/angle-circle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/angle-picker-control/angle-circle.js"],"names":["useEffect","useRef","__experimentalUseDragging","useDragging","CircleRoot","CircleIndicatorWrapper","CircleIndicator","AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","rect","current","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","centerX","centerY","preventDefault","target","focus","getAngle","clientX","clientY","startDrag","isDragging","onDragStart","onDragMove","onDragEnd","undefined","document","body","style","cursor","transform","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nfunction AngleCircle( { value, onChange, ...props } ) {\n\tconst angleCircleRef = useRef();\n\tconst angleCircleCenter = useRef();\n\tconst previousCursorValue = useRef();\n\n\tconst setAngleCircleCenter = () => {\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event ) => {\n\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\tevent.target.focus();\n\t\tonChange( getAngle( centerX, centerY, event.clientX, event.clientY ) );\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || null;\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t/* eslint-disable jsx-a11y/no-static-element-interactions */\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\tstyle={ isDragging ? { cursor: 'grabbing' } : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t\t/* eslint-enable jsx-a11y/no-static-element-interactions */\n\t);\n}\n\nfunction getAngle( centerX, centerY, pointX, pointY ) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"]}
+{"version":3,"sources":["@wordpress/components/src/angle-picker-control/angle-circle.tsx"],"names":["useEffect","useRef","__experimentalUseDragging","useDragging","CircleRoot","CircleIndicatorWrapper","CircleIndicator","AngleCircle","value","onChange","props","angleCircleRef","angleCircleCenter","previousCursorValue","setAngleCircleCenter","current","rect","getBoundingClientRect","x","width","y","height","changeAngleToPosition","event","undefined","preventDefault","target","focus","centerX","centerY","getAngle","clientX","clientY","startDrag","isDragging","onDragStart","onDragMove","onDragEnd","document","body","style","cursor","transform","pointX","pointY","angleInRadians","Math","atan2","angleInDeg","round","PI"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport {\n\tCircleRoot,\n\tCircleIndicatorWrapper,\n\tCircleIndicator,\n} from './styles/angle-picker-control-styles';\n\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { AngleCircleProps } from './types';\n\ntype UseDraggingArgumentType = Parameters< typeof useDragging >[ 0 ];\ntype UseDraggingCallbackEvent =\n\t| Parameters< UseDraggingArgumentType[ 'onDragStart' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragMove' ] >[ 0 ]\n\t| Parameters< UseDraggingArgumentType[ 'onDragEnd' ] >[ 0 ];\n\nfunction AngleCircle( {\n\tvalue,\n\tonChange,\n\t...props\n}: WordPressComponentProps< AngleCircleProps, 'div' > ) {\n\tconst angleCircleRef = useRef< HTMLDivElement | null >( null );\n\tconst angleCircleCenter = useRef< { x: number; y: number } | undefined >();\n\tconst previousCursorValue = useRef< CSSStyleDeclaration[ 'cursor' ] >();\n\n\tconst setAngleCircleCenter = () => {\n\t\tif ( angleCircleRef.current === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rect = angleCircleRef.current.getBoundingClientRect();\n\t\tangleCircleCenter.current = {\n\t\t\tx: rect.x + rect.width / 2,\n\t\t\ty: rect.y + rect.height / 2,\n\t\t};\n\t};\n\n\tconst changeAngleToPosition = ( event: UseDraggingCallbackEvent ) => {\n\t\tif ( event === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Prevent (drag) mouse events from selecting and accidentally\n\t\t// triggering actions from other elements.\n\t\tevent.preventDefault();\n\t\t// Input control needs to lose focus and by preventDefault above, it doesn't.\n\t\t( event.target as HTMLDivElement | null )?.focus();\n\n\t\tif (\n\t\t\tangleCircleCenter.current !== undefined &&\n\t\t\tonChange !== undefined\n\t\t) {\n\t\t\tconst { x: centerX, y: centerY } = angleCircleCenter.current;\n\t\t\tonChange(\n\t\t\t\tgetAngle( centerX, centerY, event.clientX, event.clientY )\n\t\t\t);\n\t\t}\n\t};\n\n\tconst { startDrag, isDragging } = useDragging( {\n\t\tonDragStart: ( event ) => {\n\t\t\tsetAngleCircleCenter();\n\t\t\tchangeAngleToPosition( event );\n\t\t},\n\t\tonDragMove: changeAngleToPosition,\n\t\tonDragEnd: changeAngleToPosition,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( isDragging ) {\n\t\t\tif ( previousCursorValue.current === undefined ) {\n\t\t\t\tpreviousCursorValue.current = document.body.style.cursor;\n\t\t\t}\n\t\t\tdocument.body.style.cursor = 'grabbing';\n\t\t} else {\n\t\t\tdocument.body.style.cursor = previousCursorValue.current || '';\n\t\t\tpreviousCursorValue.current = undefined;\n\t\t}\n\t}, [ isDragging ] );\n\n\treturn (\n\t\t<CircleRoot\n\t\t\tref={ angleCircleRef }\n\t\t\tonMouseDown={ startDrag }\n\t\t\tclassName=\"components-angle-picker-control__angle-circle\"\n\t\t\tstyle={ isDragging ? { cursor: 'grabbing' } : undefined }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t<CircleIndicatorWrapper\n\t\t\t\tstyle={\n\t\t\t\t\tvalue ? { transform: `rotate(${ value }deg)` } : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-angle-picker-control__angle-circle-indicator-wrapper\"\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t<CircleIndicator className=\"components-angle-picker-control__angle-circle-indicator\" />\n\t\t\t</CircleIndicatorWrapper>\n\t\t</CircleRoot>\n\t);\n}\n\nfunction getAngle(\n\tcenterX: number,\n\tcenterY: number,\n\tpointX: number,\n\tpointY: number\n) {\n\tconst y = pointY - centerY;\n\tconst x = pointX - centerX;\n\n\tconst angleInRadians = Math.atan2( y, x );\n\tconst angleInDeg = Math.round( angleInRadians * ( 180 / Math.PI ) ) + 90;\n\tif ( angleInDeg < 0 ) {\n\t\treturn 360 + angleInDeg;\n\t}\n\treturn angleInDeg;\n}\n\nexport default AngleCircle;\n"]}

package/build-module/angle-picker-control/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -9,6 +10,7 @@ import classnames from 'classnames';
  */
 
 import deprecated from '@wordpress/deprecated';
+import { forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -22,15 +24,16 @@ import { space } from '../ui/utils/space';
 import { Text } from '../text';
 import { Spacer } from '../spacer';
 import { COLORS } from '../utils/colors-values';
-export default function AnglePickerControl(_ref) {
-  let {
-    /** Start opting into the new margin-free styles that will become the default in a future version. */
+
+function UnforwardedAnglePickerControl(props, ref) {
+  const {
     __nextHasNoMarginBottom = false,
     className,
     label = __('Angle'),
     onChange,
-    value
-  } = _ref;
+    value,
+    ...restProps
+  } = props;
 
   if (!__nextHasNoMarginBottom) {
     deprecated('Bottom margin styles for wp.components.AnglePickerControl', {
@@ -41,16 +44,21 @@ export default function AnglePickerControl(_ref) {
   }
 
   const handleOnNumberChange = unprocessedValue => {
-    const inputValue = unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;
+    if (onChange === undefined) {
+      return;
+    }
+
+    const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;
     onChange(inputValue);
   };
 
   const classes = classnames('components-angle-picker-control', className);
-  return createElement(Root, {
+  return createElement(Root, _extends({}, restProps, {
+    ref: ref,
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     className: classes,
     gap: 4
-  }, createElement(FlexBlock, null, createElement(NumberControl, {
+  }), createElement(FlexBlock, null, createElement(NumberControl, {
     label: label,
     className: "components-angle-picker-control__input-field",
     max: 360,
@@ -79,4 +87,30 @@ export default function AnglePickerControl(_ref) {
     onChange: onChange
   })));
 }
+/**
+ * `AnglePickerControl` is a React component to render a UI that allows users to
+ * pick an angle. Users can choose an angle in a visual UI with the mouse by
+ * dragging an angle indicator inside a circle or by directly inserting the
+ * desired angle in a text field.
+ *
+ * ```jsx
+ * import { useState } from '@wordpress/element';
+ * import { AnglePickerControl } from '@wordpress/components';
+ *
+ * function Example() {
+ *   const [ angle, setAngle ] = useState( 0 );
+ *   return (
+ *     <AnglePickerControl
+ *       value={ angle }
+ *       onChange={ setAngle }
+ *       __nextHasNoMarginBottom
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+
+
+export const AnglePickerControl = forwardRef(UnforwardedAnglePickerControl);
+export default AnglePickerControl;
 //# sourceMappingURL=index.js.map

package/build-module/angle-picker-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["classnames","deprecated","__","FlexBlock","FlexItem","NumberControl","AngleCircle","Root","space","Text","Spacer","COLORS","AnglePickerControl","__nextHasNoMarginBottom","className","label","onChange","value","since","version","hint","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","color","ui","theme","marginBottom","marginTop"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,QAApB,QAAoC,SAApC;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,SAASC,IAAT,QAAqB,sCAArB;AACA,SAASC,KAAT,QAAsB,mBAAtB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AAEA,eAAe,SAASC,kBAAT,OAOX;AAAA,MAPwC;AAC3C;AACAC,IAAAA,uBAAuB,GAAG,KAFiB;AAG3CC,IAAAA,SAH2C;AAI3CC,IAAAA,KAAK,GAAGb,EAAE,CAAE,OAAF,CAJiC;AAK3Cc,IAAAA,QAL2C;AAM3CC,IAAAA;AAN2C,GAOxC;;AACH,MAAK,CAAEJ,uBAAP,EAAiC;AAChCZ,IAAAA,UAAU,CACT,2DADS,EAET;AACCiB,MAAAA,KAAK,EAAE,KADR;AAECC,MAAAA,OAAO,EAAE,KAFV;AAGCC,MAAAA,IAAI,EAAE;AAHP,KAFS,CAAV;AAQA;;AAED,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAN,IAAAA,QAAQ,CAAEO,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAGzB,UAAU,CAAE,iCAAF,EAAqCc,SAArC,CAA1B;AAEA,SACC,cAAC,IAAD;AACC,IAAA,uBAAuB,EAAGD,uBAD3B;AAEC,IAAA,SAAS,EAAGY,OAFb;AAGC,IAAA,GAAG,EAAG;AAHP,KAKC,cAAC,SAAD,QACC,cAAC,aAAD;AACC,IAAA,KAAK,EAAGV,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGM,oBALZ;AAMC,IAAA,IAAI,EAAC,kBANN;AAOC,IAAA,IAAI,EAAC,GAPN;AAQC,IAAA,KAAK,EAAGJ,KART;AASC,IAAA,YAAY,EAAC,MATd;AAUC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGR,IADN;AAEC,MAAA,YAAY,EAAG,CAFhB;AAGC,MAAA,WAAW,EAAGD,KAAK,CAAE,CAAF,CAHpB;AAIC,MAAA,KAAK,EAAG;AACPkB,QAAAA,KAAK,EAAEf,MAAM,CAACgB,EAAP,CAAUC;AADV;AAJT;AAXF,IADD,CALD,EA8BC,cAAC,QAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,YAAY,EAAErB,KAAK,CAAE,CAAF,CADZ;AAEPsB,MAAAA,SAAS,EAAE;AAFJ;AADT,KAMC,cAAC,WAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGb,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAND,CA9BD,CADD;AA6CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { COLORS } from '../utils/colors-values';\n\nexport default function AnglePickerControl( {\n\t/** Start opting into the new margin-free styles that will become the default in a future version. */\n\t__nextHasNoMarginBottom = false,\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\n} ) {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.components.AnglePickerControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst handleOnNumberChange = ( unprocessedValue ) => {\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== '' ? parseInt( unprocessedValue, 10 ) : 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tclassName={ classes }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: COLORS.ui.theme,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.tsx"],"names":["classnames","deprecated","forwardRef","__","FlexBlock","FlexItem","NumberControl","AngleCircle","Root","space","Text","Spacer","COLORS","UnforwardedAnglePickerControl","props","ref","__nextHasNoMarginBottom","className","label","onChange","value","restProps","since","version","hint","handleOnNumberChange","unprocessedValue","undefined","inputValue","parseInt","classes","color","ui","theme","marginBottom","marginTop","AnglePickerControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../number-control';\nimport AngleCircle from './angle-circle';\nimport { Root } from './styles/angle-picker-control-styles';\nimport { space } from '../ui/utils/space';\nimport { Text } from '../text';\nimport { Spacer } from '../spacer';\nimport { COLORS } from '../utils/colors-values';\n\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { AnglePickerControlProps } from './types';\n\nfunction UnforwardedAnglePickerControl(\n\tprops: WordPressComponentProps< AnglePickerControlProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom = false,\n\t\tclassName,\n\t\tlabel = __( 'Angle' ),\n\t\tonChange,\n\t\tvalue,\n\t\t...restProps\n\t} = props;\n\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\tdeprecated(\n\t\t\t'Bottom margin styles for wp.components.AnglePickerControl',\n\t\t\t{\n\t\t\t\tsince: '6.1',\n\t\t\t\tversion: '6.4',\n\t\t\t\thint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst handleOnNumberChange = ( unprocessedValue: string | undefined ) => {\n\t\tif ( onChange === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst inputValue =\n\t\t\tunprocessedValue !== undefined && unprocessedValue !== ''\n\t\t\t\t? parseInt( unprocessedValue, 10 )\n\t\t\t\t: 0;\n\t\tonChange( inputValue );\n\t};\n\n\tconst classes = classnames( 'components-angle-picker-control', className );\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...restProps }\n\t\t\tref={ ref }\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tclassName={ classes }\n\t\t\tgap={ 4 }\n\t\t>\n\t\t\t<FlexBlock>\n\t\t\t\t<NumberControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tclassName=\"components-angle-picker-control__input-field\"\n\t\t\t\t\tmax={ 360 }\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tonChange={ handleOnNumberChange }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tspinControls=\"none\"\n\t\t\t\t\tsuffix={\n\t\t\t\t\t\t<Spacer\n\t\t\t\t\t\t\tas={ Text }\n\t\t\t\t\t\t\tmarginBottom={ 0 }\n\t\t\t\t\t\t\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: COLORS.ui.theme,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t°\n\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</FlexBlock>\n\t\t\t<FlexItem\n\t\t\t\tstyle={ {\n\t\t\t\t\tmarginBottom: space( 1 ),\n\t\t\t\t\tmarginTop: 'auto',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<AngleCircle\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t</FlexItem>\n\t\t</Root>\n\t);\n}\n\n/**\n * `AnglePickerControl` is a React component to render a UI that allows users to\n * pick an angle. Users can choose an angle in a visual UI with the mouse by\n * dragging an angle indicator inside a circle or by directly inserting the\n * desired angle in a text field.\n *\n * ```jsx\n * import { useState } from '@wordpress/element';\n * import { AnglePickerControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ angle, setAngle ] = useState( 0 );\n *   return (\n *     <AnglePickerControl\n *       value={ angle }\n *       onChange={ setAngle }\n *       __nextHasNoMarginBottom\n *     </>\n *   );\n * }\n * ```\n */\nexport const AnglePickerControl = forwardRef( UnforwardedAnglePickerControl );\n\nexport default AnglePickerControl;\n"]}

package/build-module/angle-picker-control/styles/angle-picker-control-styles.js

@@ -21,25 +21,25 @@ const deprecatedBottomMargin = _ref => {
   let {
     __nextHasNoMarginBottom
   } = _ref;
-  return !__nextHasNoMarginBottom ? /*#__PURE__*/css("margin-bottom:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:deprecatedBottomMargin;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtQk8iLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9hbmdsZS1waWNrZXItY29udHJvbC9zdHlsZXMvYW5nbGUtcGlja2VyLWNvbnRyb2wtc3R5bGVzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vLi4vZmxleCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDM7XG5cbmNvbnN0IGRlcHJlY2F0ZWRCb3R0b21NYXJnaW4gPSAoIHsgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20gfSApID0+IHtcblx0cmV0dXJuICEgX19uZXh0SGFzTm9NYXJnaW5Cb3R0b21cblx0XHQ/IGNzc2Bcblx0XHRcdFx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdCAgYFxuXHRcdDogJyc7XG59O1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZCggRmxleCApYFxuXHQkeyBkZXByZWNhdGVkQm90dG9tTWFyZ2luIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVSb290ID0gc3R5bGVkLmRpdmBcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9IHNvbGlkICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0Y3Vyc29yOiBncmFiO1xuXHRoZWlnaHQ6ICR7IENJUkNMRV9TSVpFIH1weDtcblx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0d2lkdGg6ICR7IENJUkNMRV9TSVpFIH1weDtcbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3JXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHR3aWR0aDogMTAwJTtcblx0aGVpZ2h0OiAxMDAlO1xuXG5cdDpmb2N1cy12aXNpYmxlIHtcblx0XHRvdXRsaW5lOiBub25lO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yID0gc3R5bGVkLmRpdmBcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBJTk5FUl9DSVJDTEVfU0laRSB9cHggc29saWQgJHsgQ09MT1JTLnVpLnRoZW1lIH07XG5cdGJvdHRvbTogMDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdGhlaWdodDogMHB4O1xuXHRsZWZ0OiAwO1xuXHRtYXJnaW46IGF1dG87XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cmlnaHQ6IDA7XG5cdHRvcDogLSR7IENJUkNMRV9TSVpFIC8gMiB9cHg7XG5cdHdpZHRoOiAwcHg7XG5gO1xuIl19 */") : '';
+  return !__nextHasNoMarginBottom ? /*#__PURE__*/css("margin-bottom:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:deprecatedBottomMargin;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUJPIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXggfSBmcm9tICcuLi8uLi9mbGV4JztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuaW1wb3J0IENPTkZJRyBmcm9tICcuLi8uLi91dGlscy9jb25maWctdmFsdWVzJztcblxuaW1wb3J0IHR5cGUgeyBBbmdsZVBpY2tlckNvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuY29uc3QgQ0lSQ0xFX1NJWkUgPSAzMjtcbmNvbnN0IElOTkVSX0NJUkNMRV9TSVpFID0gMztcblxuY29uc3QgZGVwcmVjYXRlZEJvdHRvbU1hcmdpbiA9ICgge1xuXHRfX25leHRIYXNOb01hcmdpbkJvdHRvbSxcbn06IFBpY2s8IEFuZ2xlUGlja2VyQ29udHJvbFByb3BzLCAnX19uZXh0SGFzTm9NYXJnaW5Cb3R0b20nID4gKSA9PiB7XG5cdHJldHVybiAhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG5cdFx0PyBjc3NgXG5cdFx0XHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAyICkgfTtcblx0XHQgIGBcblx0XHQ6ICcnO1xufTtcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQoIEZsZXggKWBcblx0JHsgZGVwcmVjYXRlZEJvdHRvbU1hcmdpbiB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcblxuXHQ6Zm9jdXMtdmlzaWJsZSB7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4IHNvbGlkICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRoZWlnaHQ6IDBweDtcblx0bGVmdDogMDtcblx0bWFyZ2luOiBhdXRvO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IC0keyBDSVJDTEVfU0laRSAvIDIgfXB4O1xuXHR3aWR0aDogMHB4O1xuYDtcbiJdfQ== */") : '';
 };
 
 export const Root = /*#__PURE__*/_styled(Flex, process.env.NODE_ENV === "production" ? {
-  target: "e65ony43"
+  target: "eln3bjz3"
 } : {
-  target: "e65ony43",
+  target: "eln3bjz3",
   label: "Root"
-})(deprecatedBottomMargin, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF5QmtDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5jb25zdCBkZXByZWNhdGVkQm90dG9tTWFyZ2luID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tIH0gKSA9PiB7XG5cdHJldHVybiAhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG5cdFx0PyBjc3NgXG5cdFx0XHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAyICkgfTtcblx0XHQgIGBcblx0XHQ6ICcnO1xufTtcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQoIEZsZXggKWBcblx0JHsgZGVwcmVjYXRlZEJvdHRvbU1hcmdpbiB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcblxuXHQ6Zm9jdXMtdmlzaWJsZSB7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4IHNvbGlkICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRoZWlnaHQ6IDBweDtcblx0bGVmdDogMDtcblx0bWFyZ2luOiBhdXRvO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IC0keyBDSVJDTEVfU0laRSAvIDIgfXB4O1xuXHR3aWR0aDogMHB4O1xuYDtcbiJdfQ== */"));
+})(deprecatedBottomMargin, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJrQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vLi4vZmxleCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmltcG9ydCB0eXBlIHsgQW5nbGVQaWNrZXJDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDM7XG5cbmNvbnN0IGRlcHJlY2F0ZWRCb3R0b21NYXJnaW4gPSAoIHtcblx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b20sXG59OiBQaWNrPCBBbmdsZVBpY2tlckNvbnRyb2xQcm9wcywgJ19fbmV4dEhhc05vTWFyZ2luQm90dG9tJyA+ICkgPT4ge1xuXHRyZXR1cm4gISBfX25leHRIYXNOb01hcmdpbkJvdHRvbVxuXHRcdD8gY3NzYFxuXHRcdFx0XHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5cdFx0ICBgXG5cdFx0OiAnJztcbn07XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkKCBGbGV4IClgXG5cdCR7IGRlcHJlY2F0ZWRCb3R0b21NYXJnaW4gfVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZVJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRjdXJzb3I6IGdyYWI7XG5cdGhlaWdodDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHR3aWR0aDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cblx0OmZvY3VzLXZpc2libGUge1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weCBzb2xpZCAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAwcHg7XG5cdGxlZnQ6IDA7XG5cdG1hcmdpbjogYXV0bztcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRyaWdodDogMDtcblx0dG9wOiAtJHsgQ0lSQ0xFX1NJWkUgLyAyIH1weDtcblx0d2lkdGg6IDBweDtcbmA7XG4iXX0= */"));
 export const CircleRoot = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e65ony42"
+  target: "eln3bjz2"
 } : {
-  target: "e65ony42",
+  target: "eln3bjz2",
   label: "CircleRoot"
-})("border-radius:50%;border:", CONFIG.borderWidth, " solid ", COLORS.ui.border, ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Qm9DIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5jb25zdCBkZXByZWNhdGVkQm90dG9tTWFyZ2luID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tIH0gKSA9PiB7XG5cdHJldHVybiAhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG5cdFx0PyBjc3NgXG5cdFx0XHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAyICkgfTtcblx0XHQgIGBcblx0XHQ6ICcnO1xufTtcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQoIEZsZXggKWBcblx0JHsgZGVwcmVjYXRlZEJvdHRvbU1hcmdpbiB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcblxuXHQ6Zm9jdXMtdmlzaWJsZSB7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4IHNvbGlkICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRoZWlnaHQ6IDBweDtcblx0bGVmdDogMDtcblx0bWFyZ2luOiBhdXRvO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IC0keyBDSVJDTEVfU0laRSAvIDIgfXB4O1xuXHR3aWR0aDogMHB4O1xuYDtcbiJdfQ== */"));
+})("border-radius:50%;border:", CONFIG.borderWidth, " solid ", COLORS.ui.border, ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUNvQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vLi4vZmxleCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmltcG9ydCB0eXBlIHsgQW5nbGVQaWNrZXJDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDM7XG5cbmNvbnN0IGRlcHJlY2F0ZWRCb3R0b21NYXJnaW4gPSAoIHtcblx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b20sXG59OiBQaWNrPCBBbmdsZVBpY2tlckNvbnRyb2xQcm9wcywgJ19fbmV4dEhhc05vTWFyZ2luQm90dG9tJyA+ICkgPT4ge1xuXHRyZXR1cm4gISBfX25leHRIYXNOb01hcmdpbkJvdHRvbVxuXHRcdD8gY3NzYFxuXHRcdFx0XHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5cdFx0ICBgXG5cdFx0OiAnJztcbn07XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkKCBGbGV4IClgXG5cdCR7IGRlcHJlY2F0ZWRCb3R0b21NYXJnaW4gfVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZVJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRjdXJzb3I6IGdyYWI7XG5cdGhlaWdodDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHR3aWR0aDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cblx0OmZvY3VzLXZpc2libGUge1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weCBzb2xpZCAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAwcHg7XG5cdGxlZnQ6IDA7XG5cdG1hcmdpbjogYXV0bztcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRyaWdodDogMDtcblx0dG9wOiAtJHsgQ0lSQ0xFX1NJWkUgLyAyIH1weDtcblx0d2lkdGg6IDBweDtcbmA7XG4iXX0= */"));
 export const CircleIndicatorWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e65ony41"
+  target: "eln3bjz1"
 } : {
-  target: "e65ony41",
+  target: "eln3bjz1",
   label: "CircleIndicatorWrapper"
 })(process.env.NODE_ENV === "production" ? {
   name: "1r307gh",
@@ -47,13 +47,13 @@ export const CircleIndicatorWrapper = _styled("div", process.env.NODE_ENV === "p
 } : {
   name: "1r307gh",
   styles: "box-sizing:border-box;position:relative;width:100%;height:100%;:focus-visible{outline:none;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q2dEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5jb25zdCBkZXByZWNhdGVkQm90dG9tTWFyZ2luID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tIH0gKSA9PiB7XG5cdHJldHVybiAhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG5cdFx0PyBjc3NgXG5cdFx0XHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAyICkgfTtcblx0XHQgIGBcblx0XHQ6ICcnO1xufTtcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQoIEZsZXggKWBcblx0JHsgZGVwcmVjYXRlZEJvdHRvbU1hcmdpbiB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcblxuXHQ6Zm9jdXMtdmlzaWJsZSB7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4IHNvbGlkICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRoZWlnaHQ6IDBweDtcblx0bGVmdDogMDtcblx0bWFyZ2luOiBhdXRvO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IC0keyBDSVJDTEVfU0laRSAvIDIgfXB4O1xuXHR3aWR0aDogMHB4O1xuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBMkNnRCIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vLi4vZmxleCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmltcG9ydCB0eXBlIHsgQW5nbGVQaWNrZXJDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDM7XG5cbmNvbnN0IGRlcHJlY2F0ZWRCb3R0b21NYXJnaW4gPSAoIHtcblx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b20sXG59OiBQaWNrPCBBbmdsZVBpY2tlckNvbnRyb2xQcm9wcywgJ19fbmV4dEhhc05vTWFyZ2luQm90dG9tJyA+ICkgPT4ge1xuXHRyZXR1cm4gISBfX25leHRIYXNOb01hcmdpbkJvdHRvbVxuXHRcdD8gY3NzYFxuXHRcdFx0XHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5cdFx0ICBgXG5cdFx0OiAnJztcbn07XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkKCBGbGV4IClgXG5cdCR7IGRlcHJlY2F0ZWRCb3R0b21NYXJnaW4gfVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZVJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRjdXJzb3I6IGdyYWI7XG5cdGhlaWdodDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHR3aWR0aDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cblx0OmZvY3VzLXZpc2libGUge1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weCBzb2xpZCAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAwcHg7XG5cdGxlZnQ6IDA7XG5cdG1hcmdpbjogYXV0bztcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRyaWdodDogMDtcblx0dG9wOiAtJHsgQ0lSQ0xFX1NJWkUgLyAyIH1weDtcblx0d2lkdGg6IDBweDtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const CircleIndicator = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e65ony40"
+  target: "eln3bjz0"
 } : {
-  target: "e65ony40",
+  target: "eln3bjz0",
   label: "CircleIndicator"
-})("background:", COLORS.ui.theme, ";border-radius:50%;border:", INNER_CIRCLE_SIZE, "px solid ", COLORS.ui.theme, ";bottom:0;box-sizing:border-box;display:block;height:0px;left:0;margin:auto;position:absolute;right:0;top:-", CIRCLE_SIZE / 2, "px;width:0px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrRHlDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5jb25zdCBkZXByZWNhdGVkQm90dG9tTWFyZ2luID0gKCB7IF9fbmV4dEhhc05vTWFyZ2luQm90dG9tIH0gKSA9PiB7XG5cdHJldHVybiAhIF9fbmV4dEhhc05vTWFyZ2luQm90dG9tXG5cdFx0PyBjc3NgXG5cdFx0XHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAyICkgfTtcblx0XHQgIGBcblx0XHQ6ICcnO1xufTtcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQoIEZsZXggKWBcblx0JHsgZGVwcmVjYXRlZEJvdHRvbU1hcmdpbiB9XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcblxuXHQ6Zm9jdXMtdmlzaWJsZSB7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0fVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvciA9IHN0eWxlZC5kaXZgXG5cdGJhY2tncm91bmQ6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4IHNvbGlkICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRib3R0b206IDA7XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRoZWlnaHQ6IDBweDtcblx0bGVmdDogMDtcblx0bWFyZ2luOiBhdXRvO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHJpZ2h0OiAwO1xuXHR0b3A6IC0keyBDSVJDTEVfU0laRSAvIDIgfXB4O1xuXHR3aWR0aDogMHB4O1xuYDtcbiJdfQ== */"));
+})("background:", COLORS.ui.theme, ";border-radius:50%;border:", INNER_CIRCLE_SIZE, "px solid ", COLORS.ui.theme, ";bottom:0;box-sizing:border-box;display:block;height:0px;left:0;margin:auto;position:absolute;right:0;top:-", CIRCLE_SIZE / 2, "px;width:0px;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0R5QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2FuZ2xlLXBpY2tlci1jb250cm9sL3N0eWxlcy9hbmdsZS1waWNrZXItY29udHJvbC1zdHlsZXMudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBGbGV4IH0gZnJvbSAnLi4vLi4vZmxleCc7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3VpL3V0aWxzL3NwYWNlJztcbmltcG9ydCBDT05GSUcgZnJvbSAnLi4vLi4vdXRpbHMvY29uZmlnLXZhbHVlcyc7XG5cbmltcG9ydCB0eXBlIHsgQW5nbGVQaWNrZXJDb250cm9sUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IENJUkNMRV9TSVpFID0gMzI7XG5jb25zdCBJTk5FUl9DSVJDTEVfU0laRSA9IDM7XG5cbmNvbnN0IGRlcHJlY2F0ZWRCb3R0b21NYXJnaW4gPSAoIHtcblx0X19uZXh0SGFzTm9NYXJnaW5Cb3R0b20sXG59OiBQaWNrPCBBbmdsZVBpY2tlckNvbnRyb2xQcm9wcywgJ19fbmV4dEhhc05vTWFyZ2luQm90dG9tJyA+ICkgPT4ge1xuXHRyZXR1cm4gISBfX25leHRIYXNOb01hcmdpbkJvdHRvbVxuXHRcdD8gY3NzYFxuXHRcdFx0XHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5cdFx0ICBgXG5cdFx0OiAnJztcbn07XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkKCBGbGV4IClgXG5cdCR7IGRlcHJlY2F0ZWRCb3R0b21NYXJnaW4gfVxuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZVJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRjdXJzb3I6IGdyYWI7XG5cdGhlaWdodDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuXHRvdmVyZmxvdzogaGlkZGVuO1xuXHR3aWR0aDogJHsgQ0lSQ0xFX1NJWkUgfXB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IENpcmNsZUluZGljYXRvcldyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cblx0OmZvY3VzLXZpc2libGUge1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weCBzb2xpZCAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAwcHg7XG5cdGxlZnQ6IDA7XG5cdG1hcmdpbjogYXV0bztcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRyaWdodDogMDtcblx0dG9wOiAtJHsgQ0lSQ0xFX1NJWkUgLyAyIH1weDtcblx0d2lkdGg6IDBweDtcbmA7XG4iXX0= */"));
 //# sourceMappingURL=angle-picker-control-styles.js.map

package/build-module/angle-picker-control/styles/angle-picker-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/angle-picker-control/styles/angle-picker-control-styles.js"],"names":["css","Flex","COLORS","space","CONFIG","CIRCLE_SIZE","INNER_CIRCLE_SIZE","deprecatedBottomMargin","__nextHasNoMarginBottom","Root","CircleRoot","borderWidth","ui","border","CircleIndicatorWrapper","CircleIndicator","theme"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,MAAT,QAAuB,aAAvB;AACA,SAASC,KAAT,QAAsB,sBAAtB;AACA,OAAOC,MAAP,MAAmB,2BAAnB;AAEA,MAAMC,WAAW,GAAG,EAApB;AACA,MAAMC,iBAAiB,GAAG,CAA1B;;AAEA,MAAMC,sBAAsB,GAAG,QAAmC;AAAA,MAAjC;AAAEC,IAAAA;AAAF,GAAiC;AACjE,SAAO,CAAEA,uBAAF,gBACJR,GADI,mBAEcG,KAAK,CAAE,CAAF,CAFnB,+6EAIJ,EAJH;AAKA,CAND;;AAQA,OAAO,MAAMM,IAAI,GAAG,qBAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACbM,sBADa,i2EAAV;AAIP,OAAO,MAAMG,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,gCAEXN,MAAM,CAACO,WAFI,aAEmBT,MAAM,CAACU,EAAP,CAAUC,MAF7B,gDAKXR,WALW,+BAOZA,WAPY,m2EAAhB;AAUP,OAAO,MAAMS,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAWP,OAAO,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,kBACZb,MAAM,CAACU,EAAP,CAAUI,KADE,gCAGhBV,iBAHgB,eAGeJ,MAAM,CAACU,EAAP,CAAUI,KAHzB,iHAYlBX,WAAW,GAAG,CAZI,62EAArB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport { COLORS } from '../../utils';\nimport { space } from '../../ui/utils/space';\nimport CONFIG from '../../utils/config-values';\n\nconst CIRCLE_SIZE = 32;\nconst INNER_CIRCLE_SIZE = 3;\n\nconst deprecatedBottomMargin = ( { __nextHasNoMarginBottom } ) => {\n\treturn ! __nextHasNoMarginBottom\n\t\t? css`\n\t\t\t\tmargin-bottom: ${ space( 2 ) };\n\t\t  `\n\t\t: '';\n};\n\nexport const Root = styled( Flex )`\n\t${ deprecatedBottomMargin }\n`;\n\nexport const CircleRoot = styled.div`\n\tborder-radius: 50%;\n\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\tbox-sizing: border-box;\n\tcursor: grab;\n\theight: ${ CIRCLE_SIZE }px;\n\toverflow: hidden;\n\twidth: ${ CIRCLE_SIZE }px;\n`;\n\nexport const CircleIndicatorWrapper = styled.div`\n\tbox-sizing: border-box;\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\n\t:focus-visible {\n\t\toutline: none;\n\t}\n`;\n\nexport const CircleIndicator = styled.div`\n\tbackground: ${ COLORS.ui.theme };\n\tborder-radius: 50%;\n\tborder: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme };\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tdisplay: block;\n\theight: 0px;\n\tleft: 0;\n\tmargin: auto;\n\tposition: absolute;\n\tright: 0;\n\ttop: -${ CIRCLE_SIZE / 2 }px;\n\twidth: 0px;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/angle-picker-control/styles/angle-picker-control-styles.tsx"],"names":["css","Flex","COLORS","space","CONFIG","CIRCLE_SIZE","INNER_CIRCLE_SIZE","deprecatedBottomMargin","__nextHasNoMarginBottom","Root","CircleRoot","borderWidth","ui","border","CircleIndicatorWrapper","CircleIndicator","theme"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,MAAT,QAAuB,aAAvB;AACA,SAASC,KAAT,QAAsB,sBAAtB;AACA,OAAOC,MAAP,MAAmB,2BAAnB;AAIA,MAAMC,WAAW,GAAG,EAApB;AACA,MAAMC,iBAAiB,GAAG,CAA1B;;AAEA,MAAMC,sBAAsB,GAAG,QAEoC;AAAA,MAFlC;AAChCC,IAAAA;AADgC,GAEkC;AAClE,SAAO,CAAEA,uBAAF,gBACJR,GADI,mBAEcG,KAAK,CAAE,CAAF,CAFnB,2lFAIJ,EAJH;AAKA,CARD;;AAUA,OAAO,MAAMM,IAAI,GAAG,qBAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,CACbM,sBADa,ygFAAV;AAIP,OAAO,MAAMG,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,gCAEXN,MAAM,CAACO,WAFI,aAEmBT,MAAM,CAACU,EAAP,CAAUC,MAF7B,gDAKXR,WALW,+BAOZA,WAPY,2gFAAhB;AAUP,OAAO,MAAMS,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAWP,OAAO,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,kBACZb,MAAM,CAACU,EAAP,CAAUI,KADE,gCAGhBV,iBAHgB,eAGeJ,MAAM,CAACU,EAAP,CAAUI,KAHzB,iHAYlBX,WAAW,GAAG,CAZI,qhFAArB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport { COLORS } from '../../utils';\nimport { space } from '../../ui/utils/space';\nimport CONFIG from '../../utils/config-values';\n\nimport type { AnglePickerControlProps } from '../types';\n\nconst CIRCLE_SIZE = 32;\nconst INNER_CIRCLE_SIZE = 3;\n\nconst deprecatedBottomMargin = ( {\n\t__nextHasNoMarginBottom,\n}: Pick< AnglePickerControlProps, '__nextHasNoMarginBottom' > ) => {\n\treturn ! __nextHasNoMarginBottom\n\t\t? css`\n\t\t\t\tmargin-bottom: ${ space( 2 ) };\n\t\t  `\n\t\t: '';\n};\n\nexport const Root = styled( Flex )`\n\t${ deprecatedBottomMargin }\n`;\n\nexport const CircleRoot = styled.div`\n\tborder-radius: 50%;\n\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\tbox-sizing: border-box;\n\tcursor: grab;\n\theight: ${ CIRCLE_SIZE }px;\n\toverflow: hidden;\n\twidth: ${ CIRCLE_SIZE }px;\n`;\n\nexport const CircleIndicatorWrapper = styled.div`\n\tbox-sizing: border-box;\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\n\t:focus-visible {\n\t\toutline: none;\n\t}\n`;\n\nexport const CircleIndicator = styled.div`\n\tbackground: ${ COLORS.ui.theme };\n\tborder-radius: 50%;\n\tborder: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme };\n\tbottom: 0;\n\tbox-sizing: border-box;\n\tdisplay: block;\n\theight: 0px;\n\tleft: 0;\n\tmargin: auto;\n\tposition: absolute;\n\tright: 0;\n\ttop: -${ CIRCLE_SIZE / 2 }px;\n\twidth: 0px;\n`;\n"]}

package/build-module/autocomplete/autocompleter-ui.native.js

@@ -107,6 +107,7 @@ export function getAutoCompleterUI(autocompleter) {
     }, createElement(Animated.View, {
       style: contentStyles
     }, createElement(BackgroundView, null, createElement(ScrollView, {
+      testID: "autocompleter",
       ref: scrollViewRef,
       horizontal: true,
       contentContainerStyle: styles['components-autocomplete__content'],