@wordpress/components 19.0.0 → 19.0.1

package/build/tools-panel/tools-panel/component.js

@@ -9,15 +9,13 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _toolsPanelHeader = _interopRequireDefault(require("../tools-panel-header"));
 
 var _context = require("../context");
 
 var _hook = require("./hook");
 
-var _view = require("../../view");
+var _grid = require("../../grid");
 
 var _context2 = require("../../ui/context");
 
@@ -36,11 +34,16 @@ const ToolsPanel = (props, forwardedRef) => {
     panelContext,
     resetAllItems,
     toggleItem,
-    ...toolsPanelProps
-  } = (0, _hook.useToolsPanel)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({}, toolsPanelProps, {
+    className
+  } = (0, _hook.useToolsPanel)(props); // Props are not directly passed through to avoid exposing Grid props
+  // until agreement has been reached on how ToolsPanel layout should be
+  // handled.
+
+  return (0, _element.createElement)(_grid.Grid, {
+    columns: 2,
+    className: className,
     ref: forwardedRef
-  }), (0, _element.createElement)(_context.ToolsPanelContext.Provider, {
+  }, (0, _element.createElement)(_context.ToolsPanelContext.Provider, {
     value: panelContext
   }, (0, _element.createElement)(_toolsPanelHeader.default, {
     label: label,

package/build/tools-panel/tools-panel/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/component.tsx"],"names":["ToolsPanel","props","forwardedRef","children","label","panelContext","resetAllItems","toggleItem","toolsPanelProps","ConnectedToolsPanel"],"mappings":";;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAMA,UAAU,GAAG,CAClBC,KADkB,EAElBC,YAFkB,KAGd;AACJ,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,YAHK;AAILC,IAAAA,aAJK;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOF,yBAAeP,KAAf,CAPJ;AASA,SACC,4BAAC,UAAD,6BAAWO,eAAX;AAA6B,IAAA,GAAG,EAAGN;AAAnC,MACC,4BAAC,0BAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGG;AAApC,KACC,4BAAC,yBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,QAAQ,EAAGE,aAFZ;AAGC,IAAA,UAAU,EAAGC;AAHd,IADD,EAMGJ,QANH,CADD,CADD;AAYA,CAzBD;;AA2BA,MAAMM,mBAAmB,GAAG,8BAAgBT,UAAhB,EAA4B,YAA5B,CAA5B;eAEeS,mB","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport ToolsPanelHeader from '../tools-panel-header';\nimport { ToolsPanelContext } from '../context';\nimport { useToolsPanel } from './hook';\nimport { View } from '../../view';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type { ToolsPanelProps } from '../types';\n\nconst ToolsPanel = (\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tchildren,\n\t\tlabel,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\t...toolsPanelProps\n\t} = useToolsPanel( props );\n\n\treturn (\n\t\t<View { ...toolsPanelProps } ref={ forwardedRef }>\n\t\t\t<ToolsPanelContext.Provider value={ panelContext }>\n\t\t\t\t<ToolsPanelHeader\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tresetAll={ resetAllItems }\n\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</ToolsPanelContext.Provider>\n\t\t</View>\n\t);\n};\n\nconst ConnectedToolsPanel = contextConnect( ToolsPanel, 'ToolsPanel' );\n\nexport default ConnectedToolsPanel;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/component.tsx"],"names":["ToolsPanel","props","forwardedRef","children","label","panelContext","resetAllItems","toggleItem","className","ConnectedToolsPanel"],"mappings":";;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;AACA;;AAGA;AACA;AACA;AAQA,MAAMA,UAAU,GAAG,CAClBC,KADkB,EAElBC,YAFkB,KAGd;AACJ,QAAM;AACLC,IAAAA,QADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,YAHK;AAILC,IAAAA,aAJK;AAKLC,IAAAA,UALK;AAMLC,IAAAA;AANK,MAOF,yBAAeP,KAAf,CAPJ,CADI,CAUJ;AACA;AACA;;AACA,SACC,4BAAC,UAAD;AAAM,IAAA,OAAO,EAAG,CAAhB;AAAoB,IAAA,SAAS,EAAGO,SAAhC;AAA4C,IAAA,GAAG,EAAGN;AAAlD,KACC,4BAAC,0BAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGG;AAApC,KACC,4BAAC,yBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,QAAQ,EAAGE,aAFZ;AAGC,IAAA,UAAU,EAAGC;AAHd,IADD,EAMGJ,QANH,CADD,CADD;AAYA,CA5BD;;AA8BA,MAAMM,mBAAmB,GAAG,8BAAgBT,UAAhB,EAA4B,YAA5B,CAA5B;eAEeS,mB","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * Internal dependencies\n */\nimport ToolsPanelHeader from '../tools-panel-header';\nimport { ToolsPanelContext } from '../context';\nimport { useToolsPanel } from './hook';\nimport { Grid } from '../../grid';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type { ToolsPanelProps } from '../types';\n\nconst ToolsPanel = (\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tchildren,\n\t\tlabel,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName,\n\t} = useToolsPanel( props );\n\n\t// Props are not directly passed through to avoid exposing Grid props\n\t// until agreement has been reached on how ToolsPanel layout should be\n\t// handled.\n\treturn (\n\t\t<Grid columns={ 2 } className={ className } ref={ forwardedRef }>\n\t\t\t<ToolsPanelContext.Provider value={ panelContext }>\n\t\t\t\t<ToolsPanelHeader\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tresetAll={ resetAllItems }\n\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t/>\n\t\t\t\t{ children }\n\t\t\t</ToolsPanelContext.Provider>\n\t\t</Grid>\n\t);\n};\n\nconst ConnectedToolsPanel = contextConnect( ToolsPanel, 'ToolsPanel' );\n\nexport default ConnectedToolsPanel;\n"]}

package/build/tools-panel/tools-panel/hook.js

@@ -22,6 +22,8 @@ var _useCx = require("../../utils/hooks/use-cx");
 /**
  * Internal dependencies
  */
+const DEFAULT_COLUMNS = 2;
+
 const generateMenuItems = ({
   panelItems,
   shouldReset
@@ -122,7 +124,7 @@ function useToolsPanel(props) {
   const cx = (0, _useCx.useCx)();
   const classes = (0, _element.useMemo)(() => {
     const hasDefaultMenuItems = (menuItems === null || menuItems === void 0 ? void 0 : menuItems.default) && !!Object.keys(menuItems === null || menuItems === void 0 ? void 0 : menuItems.default).length;
-    const wrapperStyle = hasInnerWrapper && styles.ToolsPanelWithInnerWrapper;
+    const wrapperStyle = hasInnerWrapper && styles.ToolsPanelWithInnerWrapper(DEFAULT_COLUMNS);
     const emptyStyle = !hasDefaultMenuItems && areAllOptionalControlsHidden && styles.ToolsPanelHiddenInnerWrapper;
     return cx(styles.ToolsPanel, wrapperStyle, emptyStyle, className);
   }, [className, hasInnerWrapper, menuItems, areAllOptionalControlsHidden]); // Toggle the checked state of a menu item which is then used to determine

package/build/tools-panel/tools-panel/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["generateMenuItems","panelItems","shouldReset","menuItems","default","optional","forEach","hasValue","isShownByDefault","label","group","useToolsPanel","props","className","resetAll","panelId","hasInnerWrapper","shouldRenderPlaceholderItems","otherProps","isResetting","wasResetting","current","setPanelItems","registerPanelItem","item","items","deregisterPanelItem","index","findIndex","splice","setMenuItems","flagItemCustomization","areAllOptionalControlsHidden","setAreAllOptionalControlsHidden","optionalItems","Object","entries","allControlsHidden","length","some","isSelected","cx","classes","hasDefaultMenuItems","keys","wrapperStyle","styles","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","newMenuItems","getResetAllFilters","filters","resetAllFilter","push","resetAllItems","resetMenuItems","panelContext","hasMenuItems"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useMemo, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type {\n\tToolsPanelItem,\n\tToolsPanelMenuItemKey,\n\tToolsPanelMenuItems,\n\tToolsPanelMenuItemsConfig,\n\tToolsPanelProps,\n} from '../types';\n\nconst generateMenuItems = ( {\n\tpanelItems,\n\tshouldReset,\n}: ToolsPanelMenuItemsConfig ) => {\n\tconst menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };\n\n\tpanelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {\n\t\tconst group = isShownByDefault ? 'default' : 'optional';\n\t\tmenuItems[ group ][ label ] = shouldReset ? false : hasValue();\n\t} );\n\n\treturn menuItems;\n};\n\nexport function useToolsPanel(\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tresetAll,\n\t\tpanelId,\n\t\thasInnerWrapper,\n\t\tshouldRenderPlaceholderItems,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanel' );\n\n\tconst isResetting = useRef( false );\n\tconst wasResetting = isResetting.current;\n\n\t// `isResetting` is cleared via this hook to effectively batch together\n\t// the resetAll task. Without this, the flag is cleared after the first\n\t// control updates and forces a rerender with subsequent controls then\n\t// believing they need to reset, unfortunately using stale data.\n\tuseEffect( () => {\n\t\tif ( wasResetting ) {\n\t\t\tisResetting.current = false;\n\t\t}\n\t}, [ wasResetting ] );\n\n\t// Allow panel items to register themselves.\n\tconst [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );\n\n\tconst registerPanelItem = ( item: ToolsPanelItem ) => {\n\t\tsetPanelItems( ( items ) => [ ...items, item ] );\n\t};\n\n\t// Panels need to deregister on unmount to avoid orphans in menu state.\n\t// This is an issue when panel items are being injected via SlotFills.\n\tconst deregisterPanelItem = ( label: string ) => {\n\t\t// When switching selections between components injecting matching\n\t\t// controls, e.g. both panels have a \"padding\" control, the\n\t\t// deregistration of the first panel doesn't occur until after the\n\t\t// registration of the next.\n\t\tconst index = panelItems.findIndex( ( item ) => item.label === label );\n\n\t\tif ( index !== -1 ) {\n\t\t\tsetPanelItems( ( items ) => items.splice( index, 1 ) );\n\t\t}\n\t};\n\n\t// Manage and share display state of menu items representing child controls.\n\tconst [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {\n\t\tdefault: {},\n\t\toptional: {},\n\t} );\n\n\t// Setup menuItems state as panel items register themselves.\n\tuseEffect( () => {\n\t\tconst items = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: false,\n\t\t} );\n\t\tsetMenuItems( items );\n\t}, [ panelItems ] );\n\n\t// Force a menu item to be checked.\n\t// This is intended for use with default panel items. They are displayed\n\t// separately to optional items and have different display states,\n\t//.we need to update that when their value is customized.\n\tconst flagItemCustomization = (\n\t\tlabel: string,\n\t\tgroup: ToolsPanelMenuItemKey = 'default'\n\t) => {\n\t\tsetMenuItems( {\n\t\t\t...menuItems,\n\t\t\t[ group ]: {\n\t\t\t\t...menuItems[ group ],\n\t\t\t\t[ label ]: true,\n\t\t\t},\n\t\t} );\n\t};\n\n\t// Whether all optional menu items are hidden or not must be tracked\n\t// in order to later determine if the panel display is empty and handle\n\t// conditional display of a plus icon to indicate the presence of further\n\t// menu items.\n\tconst [\n\t\tareAllOptionalControlsHidden,\n\t\tsetAreAllOptionalControlsHidden,\n\t] = useState( false );\n\n\tuseEffect( () => {\n\t\tif ( menuItems.optional ) {\n\t\t\tconst optionalItems = Object.entries( menuItems.optional );\n\t\t\tconst allControlsHidden =\n\t\t\t\toptionalItems.length > 0 &&\n\t\t\t\t! optionalItems.some( ( [ , isSelected ] ) => isSelected );\n\t\t\tsetAreAllOptionalControlsHidden( allControlsHidden );\n\t\t}\n\t}, [ menuItems.optional ] );\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst hasDefaultMenuItems =\n\t\t\tmenuItems?.default && !! Object.keys( menuItems?.default ).length;\n\t\tconst wrapperStyle =\n\t\t\thasInnerWrapper && styles.ToolsPanelWithInnerWrapper;\n\t\tconst emptyStyle =\n\t\t\t! hasDefaultMenuItems &&\n\t\t\tareAllOptionalControlsHidden &&\n\t\t\tstyles.ToolsPanelHiddenInnerWrapper;\n\n\t\treturn cx( styles.ToolsPanel, wrapperStyle, emptyStyle, className );\n\t}, [\n\t\tclassName,\n\t\thasInnerWrapper,\n\t\tmenuItems,\n\t\tareAllOptionalControlsHidden,\n\t] );\n\n\t// Toggle the checked state of a menu item which is then used to determine\n\t// display of the item within the panel.\n\tconst toggleItem = ( label: string ) => {\n\t\tconst currentItem = panelItems.find( ( item ) => item.label === label );\n\n\t\tif ( ! currentItem ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';\n\n\t\tconst newMenuItems = {\n\t\t\t...menuItems,\n\t\t\t[ menuGroup ]: {\n\t\t\t\t...menuItems[ menuGroup ],\n\t\t\t\t[ label ]: ! menuItems[ menuGroup ][ label ],\n\t\t\t},\n\t\t};\n\n\t\tsetMenuItems( newMenuItems );\n\t};\n\n\tconst getResetAllFilters = () => {\n\t\tconst filters: Array< () => void > = [];\n\n\t\tpanelItems.forEach( ( item ) => {\n\t\t\tif ( item.resetAllFilter ) {\n\t\t\t\tfilters.push( item.resetAllFilter );\n\t\t\t}\n\t\t} );\n\t\treturn filters;\n\t};\n\n\t// Resets display of children and executes resetAll callback if available.\n\tconst resetAllItems = () => {\n\t\tif ( typeof resetAll === 'function' ) {\n\t\t\tisResetting.current = true;\n\t\t\tresetAll( getResetAllFilters() );\n\t\t}\n\n\t\t// Turn off display of all non-default items.\n\t\tconst resetMenuItems = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: true,\n\t\t} );\n\t\tsetMenuItems( resetMenuItems );\n\t};\n\n\tconst panelContext = {\n\t\tpanelId,\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tareAllOptionalControlsHidden,\n\t\thasMenuItems: !! panelItems.length,\n\t\tisResetting: isResetting.current,\n\t\tshouldRenderPlaceholderItems,\n\t};\n\n\treturn {\n\t\t...otherProps,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName: classes,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel/hook.ts"],"names":["DEFAULT_COLUMNS","generateMenuItems","panelItems","shouldReset","menuItems","default","optional","forEach","hasValue","isShownByDefault","label","group","useToolsPanel","props","className","resetAll","panelId","hasInnerWrapper","shouldRenderPlaceholderItems","otherProps","isResetting","wasResetting","current","setPanelItems","registerPanelItem","item","items","deregisterPanelItem","index","findIndex","splice","setMenuItems","flagItemCustomization","areAllOptionalControlsHidden","setAreAllOptionalControlsHidden","optionalItems","Object","entries","allControlsHidden","length","some","isSelected","cx","classes","hasDefaultMenuItems","keys","wrapperStyle","styles","ToolsPanelWithInnerWrapper","emptyStyle","ToolsPanelHiddenInnerWrapper","ToolsPanel","toggleItem","currentItem","find","menuGroup","newMenuItems","getResetAllFilters","filters","resetAllFilter","push","resetAllItems","resetMenuItems","panelContext","hasMenuItems"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useMemo, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport * as styles from '../styles';\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport type {\n\tToolsPanelItem,\n\tToolsPanelMenuItemKey,\n\tToolsPanelMenuItems,\n\tToolsPanelMenuItemsConfig,\n\tToolsPanelProps,\n} from '../types';\n\nconst DEFAULT_COLUMNS = 2;\n\nconst generateMenuItems = ( {\n\tpanelItems,\n\tshouldReset,\n}: ToolsPanelMenuItemsConfig ) => {\n\tconst menuItems: ToolsPanelMenuItems = { default: {}, optional: {} };\n\n\tpanelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {\n\t\tconst group = isShownByDefault ? 'default' : 'optional';\n\t\tmenuItems[ group ][ label ] = shouldReset ? false : hasValue();\n\t} );\n\n\treturn menuItems;\n};\n\nexport function useToolsPanel(\n\tprops: WordPressComponentProps< ToolsPanelProps, 'div' >\n) {\n\tconst {\n\t\tclassName,\n\t\tresetAll,\n\t\tpanelId,\n\t\thasInnerWrapper,\n\t\tshouldRenderPlaceholderItems,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ToolsPanel' );\n\n\tconst isResetting = useRef( false );\n\tconst wasResetting = isResetting.current;\n\n\t// `isResetting` is cleared via this hook to effectively batch together\n\t// the resetAll task. Without this, the flag is cleared after the first\n\t// control updates and forces a rerender with subsequent controls then\n\t// believing they need to reset, unfortunately using stale data.\n\tuseEffect( () => {\n\t\tif ( wasResetting ) {\n\t\t\tisResetting.current = false;\n\t\t}\n\t}, [ wasResetting ] );\n\n\t// Allow panel items to register themselves.\n\tconst [ panelItems, setPanelItems ] = useState< ToolsPanelItem[] >( [] );\n\n\tconst registerPanelItem = ( item: ToolsPanelItem ) => {\n\t\tsetPanelItems( ( items ) => [ ...items, item ] );\n\t};\n\n\t// Panels need to deregister on unmount to avoid orphans in menu state.\n\t// This is an issue when panel items are being injected via SlotFills.\n\tconst deregisterPanelItem = ( label: string ) => {\n\t\t// When switching selections between components injecting matching\n\t\t// controls, e.g. both panels have a \"padding\" control, the\n\t\t// deregistration of the first panel doesn't occur until after the\n\t\t// registration of the next.\n\t\tconst index = panelItems.findIndex( ( item ) => item.label === label );\n\n\t\tif ( index !== -1 ) {\n\t\t\tsetPanelItems( ( items ) => items.splice( index, 1 ) );\n\t\t}\n\t};\n\n\t// Manage and share display state of menu items representing child controls.\n\tconst [ menuItems, setMenuItems ] = useState< ToolsPanelMenuItems >( {\n\t\tdefault: {},\n\t\toptional: {},\n\t} );\n\n\t// Setup menuItems state as panel items register themselves.\n\tuseEffect( () => {\n\t\tconst items = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: false,\n\t\t} );\n\t\tsetMenuItems( items );\n\t}, [ panelItems ] );\n\n\t// Force a menu item to be checked.\n\t// This is intended for use with default panel items. They are displayed\n\t// separately to optional items and have different display states,\n\t//.we need to update that when their value is customized.\n\tconst flagItemCustomization = (\n\t\tlabel: string,\n\t\tgroup: ToolsPanelMenuItemKey = 'default'\n\t) => {\n\t\tsetMenuItems( {\n\t\t\t...menuItems,\n\t\t\t[ group ]: {\n\t\t\t\t...menuItems[ group ],\n\t\t\t\t[ label ]: true,\n\t\t\t},\n\t\t} );\n\t};\n\n\t// Whether all optional menu items are hidden or not must be tracked\n\t// in order to later determine if the panel display is empty and handle\n\t// conditional display of a plus icon to indicate the presence of further\n\t// menu items.\n\tconst [\n\t\tareAllOptionalControlsHidden,\n\t\tsetAreAllOptionalControlsHidden,\n\t] = useState( false );\n\n\tuseEffect( () => {\n\t\tif ( menuItems.optional ) {\n\t\t\tconst optionalItems = Object.entries( menuItems.optional );\n\t\t\tconst allControlsHidden =\n\t\t\t\toptionalItems.length > 0 &&\n\t\t\t\t! optionalItems.some( ( [ , isSelected ] ) => isSelected );\n\t\t\tsetAreAllOptionalControlsHidden( allControlsHidden );\n\t\t}\n\t}, [ menuItems.optional ] );\n\n\tconst cx = useCx();\n\tconst classes = useMemo( () => {\n\t\tconst hasDefaultMenuItems =\n\t\t\tmenuItems?.default && !! Object.keys( menuItems?.default ).length;\n\t\tconst wrapperStyle =\n\t\t\thasInnerWrapper &&\n\t\t\tstyles.ToolsPanelWithInnerWrapper( DEFAULT_COLUMNS );\n\t\tconst emptyStyle =\n\t\t\t! hasDefaultMenuItems &&\n\t\t\tareAllOptionalControlsHidden &&\n\t\t\tstyles.ToolsPanelHiddenInnerWrapper;\n\n\t\treturn cx( styles.ToolsPanel, wrapperStyle, emptyStyle, className );\n\t}, [\n\t\tclassName,\n\t\thasInnerWrapper,\n\t\tmenuItems,\n\t\tareAllOptionalControlsHidden,\n\t] );\n\n\t// Toggle the checked state of a menu item which is then used to determine\n\t// display of the item within the panel.\n\tconst toggleItem = ( label: string ) => {\n\t\tconst currentItem = panelItems.find( ( item ) => item.label === label );\n\n\t\tif ( ! currentItem ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';\n\n\t\tconst newMenuItems = {\n\t\t\t...menuItems,\n\t\t\t[ menuGroup ]: {\n\t\t\t\t...menuItems[ menuGroup ],\n\t\t\t\t[ label ]: ! menuItems[ menuGroup ][ label ],\n\t\t\t},\n\t\t};\n\n\t\tsetMenuItems( newMenuItems );\n\t};\n\n\tconst getResetAllFilters = () => {\n\t\tconst filters: Array< () => void > = [];\n\n\t\tpanelItems.forEach( ( item ) => {\n\t\t\tif ( item.resetAllFilter ) {\n\t\t\t\tfilters.push( item.resetAllFilter );\n\t\t\t}\n\t\t} );\n\t\treturn filters;\n\t};\n\n\t// Resets display of children and executes resetAll callback if available.\n\tconst resetAllItems = () => {\n\t\tif ( typeof resetAll === 'function' ) {\n\t\t\tisResetting.current = true;\n\t\t\tresetAll( getResetAllFilters() );\n\t\t}\n\n\t\t// Turn off display of all non-default items.\n\t\tconst resetMenuItems = generateMenuItems( {\n\t\t\tpanelItems,\n\t\t\tshouldReset: true,\n\t\t} );\n\t\tsetMenuItems( resetMenuItems );\n\t};\n\n\tconst panelContext = {\n\t\tpanelId,\n\t\tmenuItems,\n\t\tregisterPanelItem,\n\t\tderegisterPanelItem,\n\t\tflagItemCustomization,\n\t\tareAllOptionalControlsHidden,\n\t\thasMenuItems: !! panelItems.length,\n\t\tisResetting: isResetting.current,\n\t\tshouldRenderPlaceholderItems,\n\t};\n\n\treturn {\n\t\t...otherProps,\n\t\tpanelContext,\n\t\tresetAllItems,\n\t\ttoggleItem,\n\t\tclassName: classes,\n\t};\n}\n"]}

package/build/tools-panel/tools-panel-header/component.js

@@ -129,6 +129,9 @@ const ToolsPanelHeader = (props, forwardedRef) => {
     label: dropDownMenuLabelText,
     menuProps: {
       className: dropdownMenuClassName
+    },
+    toggleProps: {
+      isSmall: true
     }
   }, ({
     onClose = noop

package/build/tools-panel/tools-panel-header/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/component.tsx"],"names":["noop","DefaultControlsGroup","items","onClose","toggleItem","length","map","label","hasValue","icon","reset","check","itemLabel","undefined","OptionalControlsGroup","isSelected","ToolsPanelHeader","props","forwardedRef","areAllOptionalControlsHidden","dropdownMenuClassName","hasMenuItems","headingClassName","labelText","menuItems","resetAll","headerProps","defaultItems","Object","entries","default","optionalItems","optional","dropDownMenuIcon","plus","moreVertical","dropDownMenuLabelText","className","ConnectedToolsPanelHeader"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { check, reset, moreVertical, plus } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../../dropdown-menu';\nimport MenuGroup from '../../menu-group';\nimport MenuItem from '../../menu-item';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { useToolsPanelHeader } from './hook';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type {\n\tToolsPanelControlsGroupProps,\n\tToolsPanelHeaderProps,\n} from '../types';\n\nconst noop = () => {};\n\nconst DefaultControlsGroup = ( {\n\titems,\n\tonClose,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup>\n\t\t\t{ items.map( ( [ label, hasValue ] ) => {\n\t\t\t\tconst icon = hasValue ? reset : check;\n\t\t\t\tconst itemLabel = hasValue\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Reset %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  )\n\t\t\t\t\t: undefined;\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tisSelected={ true }\n\t\t\t\t\t\tdisabled={ ! hasValue }\n\t\t\t\t\t\tlabel={ itemLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst OptionalControlsGroup = ( {\n\titems,\n\tonClose,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup>\n\t\t\t{ items.map( ( [ label, isSelected ] ) => {\n\t\t\t\tconst itemLabel = isSelected\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control being hidden and reset e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Hide and reset %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control to display e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Show %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  );\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\ticon={ isSelected && check }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tlabel={ itemLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst ToolsPanelHeader = (\n\tprops: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tareAllOptionalControlsHidden,\n\t\tdropdownMenuClassName,\n\t\thasMenuItems,\n\t\theadingClassName,\n\t\tlabel: labelText,\n\t\tmenuItems,\n\t\tresetAll,\n\t\ttoggleItem,\n\t\t...headerProps\n\t} = useToolsPanelHeader( props );\n\n\tif ( ! labelText ) {\n\t\treturn null;\n\t}\n\n\tconst defaultItems = Object.entries( menuItems?.default || {} );\n\tconst optionalItems = Object.entries( menuItems?.optional || {} );\n\tconst dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;\n\tconst dropDownMenuLabelText = areAllOptionalControlsHidden\n\t\t? _x(\n\t\t\t\t'View and add options',\n\t\t\t\t'Button label to reveal tool panel options'\n\t\t  )\n\t\t: _x( 'View options', 'Button label to reveal tool panel options' );\n\n\treturn (\n\t\t<HStack { ...headerProps } ref={ forwardedRef }>\n\t\t\t<Heading level={ 2 } className={ headingClassName }>\n\t\t\t\t{ labelText }\n\t\t\t</Heading>\n\t\t\t{ hasMenuItems && (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ dropDownMenuIcon }\n\t\t\t\t\tlabel={ dropDownMenuLabelText }\n\t\t\t\t\tmenuProps={ { className: dropdownMenuClassName } }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose = noop } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DefaultControlsGroup\n\t\t\t\t\t\t\t\titems={ defaultItems }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<OptionalControlsGroup\n\t\t\t\t\t\t\t\titems={ optionalItems }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\tvariant={ 'tertiary' }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tresetAll();\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset all' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</HStack>\n\t);\n};\n\nconst ConnectedToolsPanelHeader = contextConnect(\n\tToolsPanelHeader,\n\t'ToolsPanelHeader'\n);\n\nexport default ConnectedToolsPanelHeader;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tools-panel/tools-panel-header/component.tsx"],"names":["noop","DefaultControlsGroup","items","onClose","toggleItem","length","map","label","hasValue","icon","reset","check","itemLabel","undefined","OptionalControlsGroup","isSelected","ToolsPanelHeader","props","forwardedRef","areAllOptionalControlsHidden","dropdownMenuClassName","hasMenuItems","headingClassName","labelText","menuItems","resetAll","headerProps","defaultItems","Object","entries","default","optionalItems","optional","dropDownMenuIcon","plus","moreVertical","dropDownMenuLabelText","className","isSmall","ConnectedToolsPanelHeader"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { check, reset, moreVertical, plus } from '@wordpress/icons';\nimport { __, _x, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../../dropdown-menu';\nimport MenuGroup from '../../menu-group';\nimport MenuItem from '../../menu-item';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { useToolsPanelHeader } from './hook';\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport type {\n\tToolsPanelControlsGroupProps,\n\tToolsPanelHeaderProps,\n} from '../types';\n\nconst noop = () => {};\n\nconst DefaultControlsGroup = ( {\n\titems,\n\tonClose,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup>\n\t\t\t{ items.map( ( [ label, hasValue ] ) => {\n\t\t\t\tconst icon = hasValue ? reset : check;\n\t\t\t\tconst itemLabel = hasValue\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control being reset e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Reset %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  )\n\t\t\t\t\t: undefined;\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tisSelected={ true }\n\t\t\t\t\t\tdisabled={ ! hasValue }\n\t\t\t\t\t\tlabel={ itemLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst OptionalControlsGroup = ( {\n\titems,\n\tonClose,\n\ttoggleItem,\n}: ToolsPanelControlsGroupProps ) => {\n\tif ( ! items.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<MenuGroup>\n\t\t\t{ items.map( ( [ label, isSelected ] ) => {\n\t\t\t\tconst itemLabel = isSelected\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control being hidden and reset e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Hide and reset %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  )\n\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t// translators: %s: The name of the control to display e.g. \"Padding\".\n\t\t\t\t\t\t\t__( 'Show %s' ),\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t  );\n\n\t\t\t\treturn (\n\t\t\t\t\t<MenuItem\n\t\t\t\t\t\tkey={ label }\n\t\t\t\t\t\ticon={ isSelected && check }\n\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\tlabel={ itemLabel }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\ttoggleItem( label );\n\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</MenuItem>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</MenuGroup>\n\t);\n};\n\nconst ToolsPanelHeader = (\n\tprops: WordPressComponentProps< ToolsPanelHeaderProps, 'h2' >,\n\tforwardedRef: Ref< any >\n) => {\n\tconst {\n\t\tareAllOptionalControlsHidden,\n\t\tdropdownMenuClassName,\n\t\thasMenuItems,\n\t\theadingClassName,\n\t\tlabel: labelText,\n\t\tmenuItems,\n\t\tresetAll,\n\t\ttoggleItem,\n\t\t...headerProps\n\t} = useToolsPanelHeader( props );\n\n\tif ( ! labelText ) {\n\t\treturn null;\n\t}\n\n\tconst defaultItems = Object.entries( menuItems?.default || {} );\n\tconst optionalItems = Object.entries( menuItems?.optional || {} );\n\tconst dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;\n\tconst dropDownMenuLabelText = areAllOptionalControlsHidden\n\t\t? _x(\n\t\t\t\t'View and add options',\n\t\t\t\t'Button label to reveal tool panel options'\n\t\t  )\n\t\t: _x( 'View options', 'Button label to reveal tool panel options' );\n\n\treturn (\n\t\t<HStack { ...headerProps } ref={ forwardedRef }>\n\t\t\t<Heading level={ 2 } className={ headingClassName }>\n\t\t\t\t{ labelText }\n\t\t\t</Heading>\n\t\t\t{ hasMenuItems && (\n\t\t\t\t<DropdownMenu\n\t\t\t\t\ticon={ dropDownMenuIcon }\n\t\t\t\t\tlabel={ dropDownMenuLabelText }\n\t\t\t\t\tmenuProps={ { className: dropdownMenuClassName } }\n\t\t\t\t\ttoggleProps={ { isSmall: true } }\n\t\t\t\t>\n\t\t\t\t\t{ ( { onClose = noop } ) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<DefaultControlsGroup\n\t\t\t\t\t\t\t\titems={ defaultItems }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<OptionalControlsGroup\n\t\t\t\t\t\t\t\titems={ optionalItems }\n\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\ttoggleItem={ toggleItem }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<MenuGroup>\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\tvariant={ 'tertiary' }\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tresetAll();\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Reset all' ) }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</DropdownMenu>\n\t\t\t) }\n\t\t</HStack>\n\t);\n};\n\nconst ConnectedToolsPanelHeader = contextConnect(\n\tToolsPanelHeader,\n\t'ToolsPanelHeader'\n);\n\nexport default ConnectedToolsPanelHeader;\n"]}

package/build/utils/hooks/index.js

@@ -17,6 +17,12 @@ Object.defineProperty(exports, "useUpdateEffect", {
     return _useUpdateEffect.default;
   }
 });
+Object.defineProperty(exports, "useCombinedRef", {
+  enumerable: true,
+  get: function () {
+    return _useCombinedRef.useCombinedRef;
+  }
+});
 Object.defineProperty(exports, "useControlledValue", {
   enumerable: true,
   get: function () {
@@ -40,6 +46,8 @@ var _useControlledState = _interopRequireDefault(require("./use-controlled-state
 
 var _useUpdateEffect = _interopRequireDefault(require("./use-update-effect"));
 
+var _useCombinedRef = require("./use-combined-ref");
+
 var _useControlledValue = require("./use-controlled-value");
 
 var _useCx = require("./use-cx");

package/build/utils/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/utils/hooks/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as useControlledState } from './use-controlled-state';\nexport { default as useUpdateEffect } from './use-update-effect';\nexport { useControlledValue } from './use-controlled-value';\nexport { useCx } from './use-cx';\nexport { useLatestRef } from './use-latest-ref';\n"]}
+{"version":3,"sources":["@wordpress/components/src/utils/hooks/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as useControlledState } from './use-controlled-state';\nexport { default as useUpdateEffect } from './use-update-effect';\nexport { useCombinedRef } from './use-combined-ref';\nexport { useControlledValue } from './use-controlled-value';\nexport { useCx } from './use-cx';\nexport { useLatestRef } from './use-latest-ref';\n"]}

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCombinedRef = useCombinedRef;
+
+var _element = require("@wordpress/element");
+
+/**
+ * WordPress dependencies
+ */
+function useCombinedRef(...refs) {
+  const targetRef = (0, _element.useRef)(null);
+  (0, _element.useEffect)(() => {
+    refs.forEach(ref => {
+      if (!ref) return;
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+  return targetRef;
+}
+//# sourceMappingURL=use-combined-ref.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/utils/hooks/use-combined-ref.ts"],"names":["useCombinedRef","refs","targetRef","forEach","ref","current"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAUO,SAASA,cAAT,CAAkD,GAAGC,IAArD,EAAwE;AAC9E,QAAMC,SAAS,GAAG,qBAAQ,IAAR,CAAlB;AAEA,0BAAW,MAAM;AAChBD,IAAAA,IAAI,CAACE,OAAL,CAAgBC,GAAF,IAAW;AACxB,UAAK,CAAEA,GAAP,EAAa;;AAEb,UAAK,OAAOA,GAAP,KAAe,UAApB,EAAiC;AAChCA,QAAAA,GAAG,CAAEF,SAAS,CAACG,OAAZ,CAAH;AACA,OAFD,MAEO;AACND,QAAAA,GAAG,CAACC,OAAJ,GAAcH,SAAS,CAACG,OAAxB;AACA;AACD,KARD;AASA,GAVD,EAUG,CAAEJ,IAAF,CAVH;AAYA,SAAOC,SAAP;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { MutableRefObject, RefCallback } from 'react';\n\ntype Ref< T > = MutableRefObject< T | null > | RefCallback< T | null >;\n\nexport function useCombinedRef< T extends HTMLElement >( ...refs: Ref< T >[] ) {\n\tconst targetRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trefs.forEach( ( ref ) => {\n\t\t\tif ( ! ref ) return;\n\n\t\t\tif ( typeof ref === 'function' ) {\n\t\t\t\tref( targetRef.current );\n\t\t\t} else {\n\t\t\t\tref.current = targetRef.current;\n\t\t\t}\n\t\t} );\n\t}, [ refs ] );\n\n\treturn targetRef;\n}\n"]}

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

@@ -46,7 +46,9 @@ export default function AnglePickerControl({
     suffix: createElement(Spacer, {
       as: Text,
       marginRight: space(3),
-      color: "blue"
+      style: {
+        color: 'var( --wp-admin-theme-color )'
+      }
     }, "\xB0")
   })), createElement(FlexItem, {
     style: {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/angle-picker-control/index.js"],"names":["classnames","__","FlexBlock","FlexItem","NumberControl","AngleCircle","Root","space","Text","Spacer","AnglePickerControl","className","label","onChange","value","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","marginLeft","marginBottom","marginTop"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,QAApB,QAAoC,SAApC;AACA,OAAOC,aAAP,MAA0B,kBAA1B;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;AAEA,eAAe,SAASC,kBAAT,CAA6B;AAC3CC,EAAAA,SAD2C;AAE3CC,EAAAA,KAAK,GAAGX,EAAE,CAAE,OAAF,CAFiC;AAG3CY,EAAAA,QAH2C;AAI3CC,EAAAA;AAJ2C,CAA7B,EAKX;AACH,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAH,IAAAA,QAAQ,CAAEI,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAGnB,UAAU,CAAE,iCAAF,EAAqCW,SAArC,CAA1B;AAEA,SACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAGQ;AAAlB,KACC,cAAC,SAAD,QACC,cAAC,aAAD;AACC,IAAA,KAAK,EAAGP,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGG,oBALZ;AAMC,IAAA,IAAI,EAAC,GANN;AAOC,IAAA,KAAK,EAAGD,KAPT;AAQC,IAAA,cAAc,MARf;AASC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGN,IADN;AAEC,MAAA,WAAW,EAAGD,KAAK,CAAE,CAAF,CAFpB;AAGC,MAAA,KAAK,EAAC;AAHP;AAVF,IADD,CADD,EAsBC,cAAC,QAAD;AACC,IAAA,KAAK,EAAG;AACPa,MAAAA,UAAU,EAAEb,KAAK,CAAE,CAAF,CADV;AAEPc,MAAAA,YAAY,EAAEd,KAAK,CAAE,CAAF,CAFZ;AAGPe,MAAAA,SAAS,EAAE;AAHJ;AADT,KAOC,cAAC,WAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGR,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAPD,CAtBD,CADD;AAsCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../input-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';\n\nexport default function AnglePickerControl( {\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\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 className={ classes }>\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\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\thideHTMLArrows\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\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tcolor=\"blue\"\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\tmarginLeft: space( 4 ),\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.js"],"names":["classnames","__","FlexBlock","FlexItem","NumberControl","AngleCircle","Root","space","Text","Spacer","AnglePickerControl","className","label","onChange","value","handleOnNumberChange","unprocessedValue","inputValue","parseInt","classes","color","marginLeft","marginBottom","marginTop"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,QAApB,QAAoC,SAApC;AACA,OAAOC,aAAP,MAA0B,kBAA1B;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;AAEA,eAAe,SAASC,kBAAT,CAA6B;AAC3CC,EAAAA,SAD2C;AAE3CC,EAAAA,KAAK,GAAGX,EAAE,CAAE,OAAF,CAFiC;AAG3CY,EAAAA,QAH2C;AAI3CC,EAAAA;AAJ2C,CAA7B,EAKX;AACH,QAAMC,oBAAoB,GAAKC,gBAAF,IAAwB;AACpD,UAAMC,UAAU,GACfD,gBAAgB,KAAK,EAArB,GAA0BE,QAAQ,CAAEF,gBAAF,EAAoB,EAApB,CAAlC,GAA6D,CAD9D;AAEAH,IAAAA,QAAQ,CAAEI,UAAF,CAAR;AACA,GAJD;;AAMA,QAAME,OAAO,GAAGnB,UAAU,CAAE,iCAAF,EAAqCW,SAArC,CAA1B;AAEA,SACC,cAAC,IAAD;AAAM,IAAA,SAAS,EAAGQ;AAAlB,KACC,cAAC,SAAD,QACC,cAAC,aAAD;AACC,IAAA,KAAK,EAAGP,KADT;AAEC,IAAA,SAAS,EAAC,8CAFX;AAGC,IAAA,GAAG,EAAG,GAHP;AAIC,IAAA,GAAG,EAAG,CAJP;AAKC,IAAA,QAAQ,EAAGG,oBALZ;AAMC,IAAA,IAAI,EAAC,GANN;AAOC,IAAA,KAAK,EAAGD,KAPT;AAQC,IAAA,cAAc,MARf;AASC,IAAA,MAAM,EACL,cAAC,MAAD;AACC,MAAA,EAAE,EAAGN,IADN;AAEC,MAAA,WAAW,EAAGD,KAAK,CAAE,CAAF,CAFpB;AAGC,MAAA,KAAK,EAAG;AACPa,QAAAA,KAAK,EAAE;AADA;AAHT;AAVF,IADD,CADD,EAwBC,cAAC,QAAD;AACC,IAAA,KAAK,EAAG;AACPC,MAAAA,UAAU,EAAEd,KAAK,CAAE,CAAF,CADV;AAEPe,MAAAA,YAAY,EAAEf,KAAK,CAAE,CAAF,CAFZ;AAGPgB,MAAAA,SAAS,EAAE;AAHJ;AADT,KAOC,cAAC,WAAD;AACC,mBAAY,MADb;AAEC,IAAA,KAAK,EAAGT,KAFT;AAGC,IAAA,QAAQ,EAAGD;AAHZ,IAPD,CAxBD,CADD;AAwCA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { FlexBlock, FlexItem } from '../flex';\nimport NumberControl from '../input-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';\n\nexport default function AnglePickerControl( {\n\tclassName,\n\tlabel = __( 'Angle' ),\n\tonChange,\n\tvalue,\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 className={ classes }>\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\tstep=\"1\"\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\thideHTMLArrows\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\tmarginRight={ space( 3 ) }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tcolor: 'var( --wp-admin-theme-color )',\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\tmarginLeft: space( 4 ),\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"]}

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

@@ -20,13 +20,13 @@ export const Root = /*#__PURE__*/_styled(Flex, process.env.NODE_ENV === "product
 } : {
   target: "e65ony43",
   label: "Root"
-})("margin-bottom:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQmtDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZCggRmxleCApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAjMzg1OGU5O1xuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4IHNvbGlkICMzODU4ZTk7XG5cdGJvdHRvbTogMDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdGhlaWdodDogMHB4O1xuXHRsZWZ0OiAwO1xuXHRtYXJnaW46IGF1dG87XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cmlnaHQ6IDA7XG5cdHRvcDogLSR7IENJUkNMRV9TSVpFIC8gMiB9cHg7XG5cdHdpZHRoOiAwcHg7XG5gO1xuIl19 */"));
+})("margin-bottom:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQmtDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZCggRmxleCApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWRtaW4udGhlbWUgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weCBzb2xpZCAkeyBDT0xPUlMuYWRtaW4udGhlbWUgfTtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAwcHg7XG5cdGxlZnQ6IDA7XG5cdG1hcmdpbjogYXV0bztcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRyaWdodDogMDtcblx0dG9wOiAtJHsgQ0lSQ0xFX1NJWkUgLyAyIH1weDtcblx0d2lkdGg6IDBweDtcbmA7XG4iXX0= */"));
 export const CircleRoot = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e65ony42"
 } : {
   target: "e65ony42",
   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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQm9DIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZCggRmxleCApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAjMzg1OGU5O1xuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4IHNvbGlkICMzODU4ZTk7XG5cdGJvdHRvbTogMDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdGhlaWdodDogMHB4O1xuXHRsZWZ0OiAwO1xuXHRtYXJnaW46IGF1dG87XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cmlnaHQ6IDA7XG5cdHRvcDogLSR7IENJUkNMRV9TSVpFIC8gMiB9cHg7XG5cdHdpZHRoOiAwcHg7XG5gO1xuIl19 */"));
+})("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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQm9DIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZCggRmxleCApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWRtaW4udGhlbWUgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weCBzb2xpZCAkeyBDT0xPUlMuYWRtaW4udGhlbWUgfTtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAwcHg7XG5cdGxlZnQ6IDA7XG5cdG1hcmdpbjogYXV0bztcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRyaWdodDogMDtcblx0dG9wOiAtJHsgQ0lSQ0xFX1NJWkUgLyAyIH1weDtcblx0d2lkdGg6IDBweDtcbmA7XG4iXX0= */"));
 export const CircleIndicatorWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e65ony41"
 } : {
@@ -38,7 +38,7 @@ export const CircleIndicatorWrapper = _styled("div", process.env.NODE_ENV === "p
 } : {
   name: "1bhd2sw",
   styles: "box-sizing:border-box;position:relative;width:100%;height:100%",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QmdEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZCggRmxleCApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAjMzg1OGU5O1xuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4IHNvbGlkICMzODU4ZTk7XG5cdGJvdHRvbTogMDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdGhlaWdodDogMHB4O1xuXHRsZWZ0OiAwO1xuXHRtYXJnaW46IGF1dG87XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cmlnaHQ6IDA7XG5cdHRvcDogLSR7IENJUkNMRV9TSVpFIC8gMiB9cHg7XG5cdHdpZHRoOiAwcHg7XG5gO1xuIl19 */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4QmdEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZCggRmxleCApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWRtaW4udGhlbWUgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weCBzb2xpZCAkeyBDT0xPUlMuYWRtaW4udGhlbWUgfTtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAwcHg7XG5cdGxlZnQ6IDA7XG5cdG1hcmdpbjogYXV0bztcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRyaWdodDogMDtcblx0dG9wOiAtJHsgQ0lSQ0xFX1NJWkUgLyAyIH1weDtcblx0d2lkdGg6IDBweDtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 export const CircleIndicator = _styled("div", process.env.NODE_ENV === "production" ? {
@@ -46,5 +46,5 @@ export const CircleIndicator = _styled("div", process.env.NODE_ENV === "producti
 } : {
   target: "e65ony40",
   label: "CircleIndicator"
-})("background:#3858e9;border-radius:50%;border:", INNER_CIRCLE_SIZE, "px solid #3858e9;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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ3lDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZCggRmxleCApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAjMzg1OGU5O1xuXHRib3JkZXItcmFkaXVzOiA1MCU7XG5cdGJvcmRlcjogJHsgSU5ORVJfQ0lSQ0xFX1NJWkUgfXB4IHNvbGlkICMzODU4ZTk7XG5cdGJvdHRvbTogMDtcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdGhlaWdodDogMHB4O1xuXHRsZWZ0OiAwO1xuXHRtYXJnaW46IGF1dG87XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cmlnaHQ6IDA7XG5cdHRvcDogLSR7IENJUkNMRV9TSVpFIC8gMiB9cHg7XG5cdHdpZHRoOiAwcHg7XG5gO1xuIl19 */"));
+})("background:", COLORS.admin.theme, ";border-radius:50%;border:", INNER_CIRCLE_SIZE, "px solid ", COLORS.admin.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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQ3lDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYW5nbGUtcGlja2VyLWNvbnRyb2wvc3R5bGVzL2FuZ2xlLXBpY2tlci1jb250cm9sLXN0eWxlcy5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5pbXBvcnQgQ09ORklHIGZyb20gJy4uLy4uL3V0aWxzL2NvbmZpZy12YWx1ZXMnO1xuXG5jb25zdCBDSVJDTEVfU0laRSA9IDMyO1xuY29uc3QgSU5ORVJfQ0lSQ0xFX1NJWkUgPSAzO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZCggRmxleCApYFxuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJvcmRlci1yYWRpdXM6IDUwJTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGN1cnNvcjogZ3JhYjtcblx0aGVpZ2h0OiAkeyBDSVJDTEVfU0laRSB9cHg7XG5cdG92ZXJmbG93OiBoaWRkZW47XG5cdHdpZHRoOiAkeyBDSVJDTEVfU0laRSB9cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2lyY2xlSW5kaWNhdG9yV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBDaXJjbGVJbmRpY2F0b3IgPSBzdHlsZWQuZGl2YFxuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMuYWRtaW4udGhlbWUgfTtcblx0Ym9yZGVyLXJhZGl1czogNTAlO1xuXHRib3JkZXI6ICR7IElOTkVSX0NJUkNMRV9TSVpFIH1weCBzb2xpZCAkeyBDT0xPUlMuYWRtaW4udGhlbWUgfTtcblx0Ym90dG9tOiAwO1xuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRkaXNwbGF5OiBibG9jaztcblx0aGVpZ2h0OiAwcHg7XG5cdGxlZnQ6IDA7XG5cdG1hcmdpbjogYXV0bztcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHRyaWdodDogMDtcblx0dG9wOiAtJHsgQ0lSQ0xFX1NJWkUgLyAyIH1weDtcblx0d2lkdGg6IDBweDtcbmA7XG4iXX0= */"));
 //# 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":["Flex","COLORS","space","CONFIG","CIRCLE_SIZE","INNER_CIRCLE_SIZE","Root","CircleRoot","borderWidth","ui","border","CircleIndicatorWrapper","CircleIndicator"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,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,OAAO,MAAMC,IAAI,GAAG,qBAAQN,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,mBACEE,KAAK,CAAE,CAAF,CADP,y9DAAV;AAIP,OAAO,MAAMK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,gCAEXJ,MAAM,CAACK,WAFI,aAEmBP,MAAM,CAACQ,EAAP,CAAUC,MAF7B,gDAKXN,WALW,+BAOZA,WAPY,29DAAhB;AAUP,OAAO,MAAMO,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAOP,OAAO,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,mDAGhBP,iBAHgB,iIAYlBD,WAAW,GAAG,CAZI,q+DAArB","sourcesContent":["/**\n * External dependencies\n */\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\nexport const Root = styled( Flex )`\n\tmargin-bottom: ${ space( 2 ) };\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\nexport const CircleIndicator = styled.div`\n\tbackground: #3858e9;\n\tborder-radius: 50%;\n\tborder: ${ INNER_CIRCLE_SIZE }px solid #3858e9;\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.js"],"names":["Flex","COLORS","space","CONFIG","CIRCLE_SIZE","INNER_CIRCLE_SIZE","Root","CircleRoot","borderWidth","ui","border","CircleIndicatorWrapper","CircleIndicator","admin","theme"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,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,OAAO,MAAMC,IAAI,GAAG,qBAAQN,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,mBACEE,KAAK,CAAE,CAAF,CADP,qgEAAV;AAIP,OAAO,MAAMK,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,gCAEXJ,MAAM,CAACK,WAFI,aAEmBP,MAAM,CAACQ,EAAP,CAAUC,MAF7B,gDAKXN,WALW,+BAOZA,WAPY,ugEAAhB;AAUP,OAAO,MAAMO,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;AAOP,OAAO,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,kBACZX,MAAM,CAACY,KAAP,CAAaC,KADD,gCAGhBT,iBAHgB,eAGeJ,MAAM,CAACY,KAAP,CAAaC,KAH5B,iHAYlBV,WAAW,GAAG,CAZI,ihEAArB","sourcesContent":["/**\n * External dependencies\n */\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\nexport const Root = styled( Flex )`\n\tmargin-bottom: ${ space( 2 ) };\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\nexport const CircleIndicator = styled.div`\n\tbackground: ${ COLORS.admin.theme };\n\tborder-radius: 50%;\n\tborder: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.admin.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/base-control/index.js

@@ -52,7 +52,7 @@ function BaseControl({
   }, label)), label && !id && (hideLabelFromVision ? createElement(VisuallyHidden, {
     as: "label"
   }, label) : createElement(BaseControl.VisualLabel, null, label)), children), !!help && createElement(StyledHelp, {
-    id: id + '__help',
+    id: id ? id + '__help' : undefined,
     className: "components-base-control__help"
   }, help));
 }

package/build-module/base-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/base-control/index.js"],"names":["classnames","VisuallyHidden","Wrapper","StyledField","StyledLabel","StyledHelp","BaseControl","id","label","hideLabelFromVision","help","className","children","VisualLabel"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,oBAA/B;AACA,SACCC,OADD,EAECC,WAFD,EAGCC,WAHD,EAICC,UAJD,QAKO,8BALP;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AACA,SAASC,WAAT,CAAsB;AACrBC,EAAAA,EADqB;AAErBC,EAAAA,KAFqB;AAGrBC,EAAAA,mBAHqB;AAIrBC,EAAAA,IAJqB;AAKrBC,EAAAA,SALqB;AAMrBC,EAAAA;AANqB,CAAtB,EAOI;AACH,SACC,cAAC,OAAD;AACC,IAAA,SAAS,EAAGZ,UAAU,CAAE,yBAAF,EAA6BW,SAA7B;AADvB,KAGC,cAAC,WAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACGH,KAAK,IACND,EADC,KAECE,mBAAmB,GACpB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC,OAAnB;AAA2B,IAAA,OAAO,EAAGF;AAArC,KACGC,KADH,CADoB,GAKpB,cAAC,WAAD;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,OAAO,EAAGD;AAFX,KAIGC,KAJH,CAPA,CADH,EAeGA,KAAK,IACN,CAAED,EADD,KAECE,mBAAmB,GACpB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA6BD,KAA7B,CADoB,GAGpB,cAAC,WAAD,CAAa,WAAb,QACGA,KADH,CALA,CAfH,EAwBGI,QAxBH,CAHD,EA6BG,CAAC,CAAEF,IAAH,IACD,cAAC,UAAD;AACC,IAAA,EAAE,EAAGH,EAAE,GAAG,QADX;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGG,IAJH,CA9BF,CADD;AAwCA;AAED;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AACAJ,WAAW,CAACO,WAAZ,GAA0B,CAAE;AAAEF,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAF,KAA+B;AACxDD,EAAAA,SAAS,GAAGX,UAAU,CAAE,gCAAF,EAAoCW,SAApC,CAAtB;AACA,SAAO;AAAM,IAAA,SAAS,EAAGA;AAAlB,KAAgCC,QAAhC,CAAP;AACA,CAHD;;AAKA,eAAeN,WAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport {\n\tWrapper,\n\tStyledField,\n\tStyledLabel,\n\tStyledHelp,\n} from './styles/base-control-styles';\n\n/**\n * @typedef Props\n * @property {string}                    [id]                  The id of the element to which labels and help text are being generated.\n *                                                             That element should be passed as a child.\n * @property {import('react').ReactNode} help                  If this property is added, a help text will be\n *                                                             generated using help property as the content.\n * @property {import('react').ReactNode} [label]               If this property is added, a label will be generated\n *                                                             using label property as the content.\n * @property {boolean}                   [hideLabelFromVision] If true, the label will only be visible to screen readers.\n * @property {string}                    [className]           The class that will be added with \"components-base-control\" to the\n *                                                             classes of the wrapper div. If no className is passed only\n *                                                             components-base-control is used.\n * @property {import('react').ReactNode} [children]            The content to be displayed within\n *                                                             the BaseControl.\n */\n\n/**\n * @param {Props} props\n * @return {JSX.Element} Element\n */\nfunction BaseControl( {\n\tid,\n\tlabel,\n\thideLabelFromVision,\n\thelp,\n\tclassName,\n\tchildren,\n} ) {\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName={ classnames( 'components-base-control', className ) }\n\t\t>\n\t\t\t<StyledField className=\"components-base-control__field\">\n\t\t\t\t{ label &&\n\t\t\t\t\tid &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id }>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<StyledLabel\n\t\t\t\t\t\t\tclassName=\"components-base-control__label\"\n\t\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</StyledLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ label &&\n\t\t\t\t\t! id &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ children }\n\t\t\t</StyledField>\n\t\t\t{ !! help && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ id + '__help' }\n\t\t\t\t\tclassName=\"components-base-control__help\"\n\t\t\t\t>\n\t\t\t\t\t{ help }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n\n/**\n * @typedef VisualLabelProps\n * @property {string}                    [className] Class name\n * @property {import('react').ReactNode} [children]  Children\n */\n\n/**\n * @param {VisualLabelProps} Props\n * @return {JSX.Element} Element\n */\nBaseControl.VisualLabel = ( { className, children } ) => {\n\tclassName = classnames( 'components-base-control__label', className );\n\treturn <span className={ className }>{ children }</span>;\n};\n\nexport default BaseControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/base-control/index.js"],"names":["classnames","VisuallyHidden","Wrapper","StyledField","StyledLabel","StyledHelp","BaseControl","id","label","hideLabelFromVision","help","className","children","undefined","VisualLabel"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,cAAT,QAA+B,oBAA/B;AACA,SACCC,OADD,EAECC,WAFD,EAGCC,WAHD,EAICC,UAJD,QAKO,8BALP;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AACA,SAASC,WAAT,CAAsB;AACrBC,EAAAA,EADqB;AAErBC,EAAAA,KAFqB;AAGrBC,EAAAA,mBAHqB;AAIrBC,EAAAA,IAJqB;AAKrBC,EAAAA,SALqB;AAMrBC,EAAAA;AANqB,CAAtB,EAOI;AACH,SACC,cAAC,OAAD;AACC,IAAA,SAAS,EAAGZ,UAAU,CAAE,yBAAF,EAA6BW,SAA7B;AADvB,KAGC,cAAC,WAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACGH,KAAK,IACND,EADC,KAECE,mBAAmB,GACpB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC,OAAnB;AAA2B,IAAA,OAAO,EAAGF;AAArC,KACGC,KADH,CADoB,GAKpB,cAAC,WAAD;AACC,IAAA,SAAS,EAAC,gCADX;AAEC,IAAA,OAAO,EAAGD;AAFX,KAIGC,KAJH,CAPA,CADH,EAeGA,KAAK,IACN,CAAED,EADD,KAECE,mBAAmB,GACpB,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KAA6BD,KAA7B,CADoB,GAGpB,cAAC,WAAD,CAAa,WAAb,QACGA,KADH,CALA,CAfH,EAwBGI,QAxBH,CAHD,EA6BG,CAAC,CAAEF,IAAH,IACD,cAAC,UAAD;AACC,IAAA,EAAE,EAAGH,EAAE,GAAGA,EAAE,GAAG,QAAR,GAAmBM,SAD3B;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGH,IAJH,CA9BF,CADD;AAwCA;AAED;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;AACAJ,WAAW,CAACQ,WAAZ,GAA0B,CAAE;AAAEH,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAF,KAA+B;AACxDD,EAAAA,SAAS,GAAGX,UAAU,CAAE,gCAAF,EAAoCW,SAApC,CAAtB;AACA,SAAO;AAAM,IAAA,SAAS,EAAGA;AAAlB,KAAgCC,QAAhC,CAAP;AACA,CAHD;;AAKA,eAAeN,WAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * Internal dependencies\n */\nimport { VisuallyHidden } from '../visually-hidden';\nimport {\n\tWrapper,\n\tStyledField,\n\tStyledLabel,\n\tStyledHelp,\n} from './styles/base-control-styles';\n\n/**\n * @typedef Props\n * @property {string}                    [id]                  The id of the element to which labels and help text are being generated.\n *                                                             That element should be passed as a child.\n * @property {import('react').ReactNode} help                  If this property is added, a help text will be\n *                                                             generated using help property as the content.\n * @property {import('react').ReactNode} [label]               If this property is added, a label will be generated\n *                                                             using label property as the content.\n * @property {boolean}                   [hideLabelFromVision] If true, the label will only be visible to screen readers.\n * @property {string}                    [className]           The class that will be added with \"components-base-control\" to the\n *                                                             classes of the wrapper div. If no className is passed only\n *                                                             components-base-control is used.\n * @property {import('react').ReactNode} [children]            The content to be displayed within\n *                                                             the BaseControl.\n */\n\n/**\n * @param {Props} props\n * @return {JSX.Element} Element\n */\nfunction BaseControl( {\n\tid,\n\tlabel,\n\thideLabelFromVision,\n\thelp,\n\tclassName,\n\tchildren,\n} ) {\n\treturn (\n\t\t<Wrapper\n\t\t\tclassName={ classnames( 'components-base-control', className ) }\n\t\t>\n\t\t\t<StyledField className=\"components-base-control__field\">\n\t\t\t\t{ label &&\n\t\t\t\t\tid &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\" htmlFor={ id }>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<StyledLabel\n\t\t\t\t\t\t\tclassName=\"components-base-control__label\"\n\t\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</StyledLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ label &&\n\t\t\t\t\t! id &&\n\t\t\t\t\t( hideLabelFromVision ? (\n\t\t\t\t\t\t<VisuallyHidden as=\"label\">{ label }</VisuallyHidden>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t) ) }\n\t\t\t\t{ children }\n\t\t\t</StyledField>\n\t\t\t{ !! help && (\n\t\t\t\t<StyledHelp\n\t\t\t\t\tid={ id ? id + '__help' : undefined }\n\t\t\t\t\tclassName=\"components-base-control__help\"\n\t\t\t\t>\n\t\t\t\t\t{ help }\n\t\t\t\t</StyledHelp>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n\n/**\n * @typedef VisualLabelProps\n * @property {string}                    [className] Class name\n * @property {import('react').ReactNode} [children]  Children\n */\n\n/**\n * @param {VisualLabelProps} Props\n * @return {JSX.Element} Element\n */\nBaseControl.VisualLabel = ( { className, children } ) => {\n\tclassName = classnames( 'components-base-control__label', className );\n\treturn <span className={ className }>{ children }</span>;\n};\n\nexport default BaseControl;\n"]}