@wordpress/components 25.8.2 → 25.9.0

package/build/circular-option-picker/circular-option-picker.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
 var _composite = require("../composite");
@@ -111,11 +112,11 @@ function ListboxCircularOptionPicker(props) {
     isComposite: true,
     ...compositeState
   };
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: className
-  }, (0, _element.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
+  }, (0, _react.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
     value: compositeContext
-  }, (0, _element.createElement)(_composite.Composite, {
+  }, (0, _react.createElement)(_composite.Composite, {
     ...additionalProps,
     ...compositeState,
     role: 'listbox'
@@ -129,9 +130,9 @@ function ButtonsCircularOptionPicker(props) {
     baseId,
     ...additionalProps
   } = props;
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     ...additionalProps
-  }, (0, _element.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
+  }, (0, _react.createElement)(_circularOptionPickerContext.CircularOptionPickerContext.Provider, {
     value: {
       isComposite: false,
       baseId
@@ -149,13 +150,13 @@ function CircularOptionPicker(props) {
   } = props;
   const baseId = (0, _compose.useInstanceId)(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id);
   const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker;
-  const actions = actionsProp ? (0, _element.createElement)("div", {
+  const actions = actionsProp ? (0, _react.createElement)("div", {
     className: "components-circular-option-picker__custom-clear-wrapper"
   }, actionsProp) : undefined;
-  const options = (0, _element.createElement)("div", {
+  const options = (0, _react.createElement)("div", {
     className: 'components-circular-option-picker__swatches'
   }, optionsProp);
-  return (0, _element.createElement)(OptionPickerImplementation, {
+  return (0, _react.createElement)(OptionPickerImplementation, {
     ...additionalProps,
     baseId: baseId,
     className: (0, _classnames.default)('components-circular-option-picker', className),

package/build/circular-option-picker/circular-option-picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_compose","_i18n","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","rtl","isRTL","compositeState","useCompositeState","setBaseId","setLoop","setRTL","useEffect","compositeContext","isComposite","createElement","CircularOptionPickerContext","Provider","value","Composite","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","id","OptionPickerImplementation","undefined","classnames","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeState } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\tconst rtl = isRTL();\n\n\tconst compositeState = useCompositeState( { baseId, loop, rtl } );\n\tconst { setBaseId, setLoop, setRTL } = compositeState;\n\n\t// These are necessary as `useCompositeState` is sealed after\n\t// the first render, so although unlikely to happen, if a state\n\t// property should change, we need to process it accordingly.\n\n\tuseEffect( () => {\n\t\tsetBaseId( baseId );\n\t}, [ setBaseId, baseId ] );\n\n\tuseEffect( () => {\n\t\tsetLoop( loop );\n\t}, [ setLoop, loop ] );\n\n\tuseEffect( () => {\n\t\tsetRTL( rtl );\n\t}, [ setRTL, rtl ] );\n\n\tconst compositeContext = {\n\t\tisComposite: true,\n\t\t...compositeState,\n\t};\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ compositeContext }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t{ ...compositeState }\n\t\t\t\t\trole={ 'listbox' }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\treturn (\n\t\t<div { ...additionalProps }>\n\t\t\t<CircularOptionPickerContext.Provider\n\t\t\t\tvalue={ { isComposite: false, baseId } }\n\t\t\t>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className={ 'components-circular-option-picker__swatches' }>\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_element","_i18n","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","rtl","isRTL","compositeState","useCompositeState","setBaseId","setLoop","setRTL","useEffect","compositeContext","isComposite","_react","createElement","CircularOptionPickerContext","Provider","value","Composite","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","id","OptionPickerImplementation","undefined","classnames","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useEffect } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeState } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\tconst rtl = isRTL();\n\n\tconst compositeState = useCompositeState( { baseId, loop, rtl } );\n\tconst { setBaseId, setLoop, setRTL } = compositeState;\n\n\t// These are necessary as `useCompositeState` is sealed after\n\t// the first render, so although unlikely to happen, if a state\n\t// property should change, we need to process it accordingly.\n\n\tuseEffect( () => {\n\t\tsetBaseId( baseId );\n\t}, [ setBaseId, baseId ] );\n\n\tuseEffect( () => {\n\t\tsetLoop( loop );\n\t}, [ setLoop, loop ] );\n\n\tuseEffect( () => {\n\t\tsetRTL( rtl );\n\t}, [ setRTL, rtl ] );\n\n\tconst compositeContext = {\n\t\tisComposite: true,\n\t\t...compositeState,\n\t};\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ compositeContext }>\n\t\t\t\t<Composite\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t{ ...compositeState }\n\t\t\t\t\trole={ 'listbox' }\n\t\t\t\t>\n\t\t\t\t\t{ options }\n\t\t\t\t</Composite>\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction ButtonsCircularOptionPicker(\n\tprops: ButtonsCircularOptionPickerProps\n) {\n\tconst { actions, options, children, baseId, ...additionalProps } = props;\n\n\treturn (\n\t\t<div { ...additionalProps }>\n\t\t\t<CircularOptionPickerContext.Provider\n\t\t\t\tvalue={ { isComposite: false, baseId } }\n\t\t\t>\n\t\t\t\t{ options }\n\t\t\t\t{ children }\n\t\t\t\t{ actions }\n\t\t\t</CircularOptionPickerContext.Provider>\n\t\t</div>\n\t);\n}\n\nfunction CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst {\n\t\tasButtons,\n\t\tactions: actionsProp,\n\t\toptions: optionsProp,\n\t\tchildren,\n\t\tclassName,\n\t\t...additionalProps\n\t} = props;\n\n\tconst baseId = useInstanceId(\n\t\tCircularOptionPicker,\n\t\t'components-circular-option-picker',\n\t\tadditionalProps.id\n\t);\n\n\tconst OptionPickerImplementation = asButtons\n\t\t? ButtonsCircularOptionPicker\n\t\t: ListboxCircularOptionPicker;\n\n\tconst actions = actionsProp ? (\n\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t{ actionsProp }\n\t\t</div>\n\t) : undefined;\n\n\tconst options = (\n\t\t<div className={ 'components-circular-option-picker__swatches' }>\n\t\t\t{ optionsProp }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<OptionPickerImplementation\n\t\t\t{ ...additionalProps }\n\t\t\tbaseId={ baseId }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tactions={ actions }\n\t\t\toptions={ options }\n\t\t>\n\t\t\t{ children }\n\t\t</OptionPickerImplementation>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.OptionGroup = OptionGroup;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"],"mappings":"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"}

package/build/circular-option-picker/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { CompositeState } from '../composite';\n\ntype CommonCircularOptionPickerProps = {\n\t/**\n\t * An ID to apply to the component.\n\t */\n\tid?: string;\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\ntype WithBaseId = {\n\tbaseId: string;\n};\n\ntype FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t */\n\tasButtons?: false;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t\t| {\n\t\t\t\t'aria-label': string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t'aria-label'?: never;\n\t\t\t\t'aria-labelledby': string;\n\t\t  }\n\t);\n\nexport type ListboxCircularOptionPickerProps = WithBaseId &\n\tOmit< FullListboxCircularOptionPickerProps, 'asButtons' >;\n\ntype FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons: true;\n};\n\nexport type ButtonsCircularOptionPickerProps = WithBaseId &\n\tOmit< FullButtonsCircularOptionPickerProps, 'asButtons' >;\n\nexport type CircularOptionPickerProps =\n\t| FullListboxCircularOptionPickerProps\n\t| FullButtonsCircularOptionPickerProps;\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionGroupProps = {\n\tclassName?: string;\n\toptions: ReactNode;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n\nexport type CircularOptionPickerCompositeState = CompositeState;\nexport type CircularOptionPickerContextProps =\n\t| { isComposite?: false; baseId?: string }\n\t| ( { isComposite: true } & CircularOptionPickerCompositeState );\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/circular-option-picker/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport type { Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { DropdownProps } from '../dropdown/types';\nimport type { WordPressComponentProps } from '../context';\nimport type { CompositeState } from '../composite';\n\ntype CommonCircularOptionPickerProps = {\n\t/**\n\t * An ID to apply to the component.\n\t */\n\tid?: string;\n\t/**\n\t * A CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The action(s) to be rendered after the options,\n\t * such as a 'clear' button as seen in `ColorPalette`.\n\t * Usually a `CircularOptionPicker.ButtonAction` or\n\t * `CircularOptionPicker.DropdownLinkAction` component.\n\t */\n\tactions?: ReactNode;\n\t/**\n\t * The options to be rendered, such as color swatches.\n\t * Usually a `CircularOptionPicker.Option` component.\n\t */\n\toptions: ReactNode;\n\t/**\n\t * The child elements.\n\t */\n\tchildren?: ReactNode;\n};\n\ntype WithBaseId = {\n\tbaseId: string;\n};\n\ntype FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t */\n\tasButtons?: false;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n} & (\n\t\t| {\n\t\t\t\t'aria-label': string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t'aria-label'?: never;\n\t\t\t\t'aria-labelledby': string;\n\t\t  }\n\t);\n\nexport type ListboxCircularOptionPickerProps = WithBaseId &\n\tOmit< FullListboxCircularOptionPickerProps, 'asButtons' >;\n\ntype FullButtonsCircularOptionPickerProps = CommonCircularOptionPickerProps & {\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons: true;\n};\n\nexport type ButtonsCircularOptionPickerProps = WithBaseId &\n\tOmit< FullButtonsCircularOptionPickerProps, 'asButtons' >;\n\nexport type CircularOptionPickerProps =\n\t| FullListboxCircularOptionPickerProps\n\t| FullButtonsCircularOptionPickerProps;\n\nexport type DropdownLinkActionProps = {\n\tbuttonProps?: Omit<\n\t\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t\t'children'\n\t>;\n\tlinkText: string;\n\tdropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >;\n\tclassName?: string;\n};\n\nexport type OptionGroupProps = {\n\tclassName?: string;\n\toptions: ReactNode;\n};\n\nexport type OptionProps = Omit<\n\tWordPressComponentProps< ButtonAsButtonProps, 'button', false >,\n\t'isPressed' | 'className'\n> & {\n\tclassName?: string;\n\ttooltipText?: string;\n\tisSelected?: boolean;\n\t// `icon` is explicitly defined as 'check' by CircleOptionPicker.Option\n\t// and is not intended to be overridden.\n\t// `size` relies on the `Icon` component's default size of `24` to fit\n\t// `CircularOptionPicker`'s design, and should not be explicitly set.\n\tselectedIconProps?: Omit<\n\t\tReact.ComponentProps< typeof Icon >,\n\t\t'icon' | 'size'\n\t>;\n};\n\nexport type CircularOptionPickerCompositeState = CompositeState;\nexport type CircularOptionPickerContextProps =\n\t| { isComposite?: false; baseId?: string }\n\t| ( { isComposite: true } & CircularOptionPickerCompositeState );\n"],"mappings":""}

package/build/clipboard-button/index.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ClipboardButton;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 var _button = _interopRequireDefault(require("../button"));
@@ -61,7 +62,7 @@ function ClipboardButton({
     // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
     event.target.focus();
   };
-  return (0, _element.createElement)(_button.default, {
+  return (0, _react.createElement)(_button.default, {
     ...buttonProps,
     className: classes,
     ref: ref,

package/build/clipboard-button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_compose","_deprecated","_button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","deprecated","since","alternative","timeoutId","useRef","ref","useCopyToClipboard","current","clearTimeout","setTimeout","useEffect","classes","classnames","focusOnCopyEventTarget","event","target","focus","createElement","default"],"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { ClipboardButtonProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef< NodeJS.Timeout >();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AALA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAMA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAF,sBAAA,CAAAF,OAAA;AAKA,IAAAK,OAAA,GAAAH,sBAAA,CAAAF,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMM,OAAO,GAAG,IAAI;AAEL,SAASC,eAAeA,CAAE;EACxCC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,YAAY;EACZC,IAAI;EACJ,GAAGC;AAC8D,CAAC,EAAG;EACrE,IAAAC,mBAAU,EAAE,+BAA+B,EAAE;IAC5CC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,MAAMC,SAAS,GAAG,IAAAC,eAAM,EAAmB,CAAC;EAC5C,MAAMC,GAAG,GAAG,IAAAC,2BAAkB,EAAER,IAAI,EAAE,MAAM;IAC3CF,MAAM,CAAC,CAAC;IACR,IAAKO,SAAS,CAACI,OAAO,EAAG;MACxBC,YAAY,CAAEL,SAAS,CAACI,OAAQ,CAAC;IAClC;IAEA,IAAKV,YAAY,EAAG;MACnBM,SAAS,CAACI,OAAO,GAAGE,UAAU,CAAE,MAAMZ,YAAY,CAAC,CAAC,EAAEL,OAAQ,CAAC;IAChE;EACD,CAAE,CAAC;EAEH,IAAAkB,kBAAS,EAAE,MAAM;IAChB,IAAKP,SAAS,CAACI,OAAO,EAAG;MACxBC,YAAY,CAAEL,SAAS,CAACI,OAAQ,CAAC;IAClC;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMI,OAAO,GAAG,IAAAC,mBAAU,EAAE,6BAA6B,EAAElB,SAAU,CAAC;;EAEtE;EACA;EACA;EACA;EACA;EACA,MAAMmB,sBAAmD,GAAKC,KAAK,IAAM;IACxE;IACAA,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,OACC,IAAA/B,QAAA,CAAAgC,aAAA,EAAC1B,OAAA,CAAA2B,OAAM;IAAA,GACDnB,WAAW;IAChBL,SAAS,EAAGiB,OAAS;IACrBN,GAAG,EAAGA,GAAK;IACXT,MAAM,EAAGiB;EAAwB,GAE/BlB,QACK,CAAC;AAEX"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_compose","_deprecated","_button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","deprecated","since","alternative","timeoutId","useRef","ref","useCopyToClipboard","current","clearTimeout","setTimeout","useEffect","classes","classnames","focusOnCopyEventTarget","event","target","focus","_react","createElement","default"],"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { ClipboardButtonProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef< NodeJS.Timeout >();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAKA,IAAAI,OAAA,GAAAL,sBAAA,CAAAC,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAKA,MAAMK,OAAO,GAAG,IAAI;AAEL,SAASC,eAAeA,CAAE;EACxCC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,YAAY;EACZC,IAAI;EACJ,GAAGC;AAC8D,CAAC,EAAG;EACrE,IAAAC,mBAAU,EAAE,+BAA+B,EAAE;IAC5CC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,MAAMC,SAAS,GAAG,IAAAC,eAAM,EAAmB,CAAC;EAC5C,MAAMC,GAAG,GAAG,IAAAC,2BAAkB,EAAER,IAAI,EAAE,MAAM;IAC3CF,MAAM,CAAC,CAAC;IACR,IAAKO,SAAS,CAACI,OAAO,EAAG;MACxBC,YAAY,CAAEL,SAAS,CAACI,OAAQ,CAAC;IAClC;IAEA,IAAKV,YAAY,EAAG;MACnBM,SAAS,CAACI,OAAO,GAAGE,UAAU,CAAE,MAAMZ,YAAY,CAAC,CAAC,EAAEL,OAAQ,CAAC;IAChE;EACD,CAAE,CAAC;EAEH,IAAAkB,kBAAS,EAAE,MAAM;IAChB,IAAKP,SAAS,CAACI,OAAO,EAAG;MACxBC,YAAY,CAAEL,SAAS,CAACI,OAAQ,CAAC;IAClC;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMI,OAAO,GAAG,IAAAC,mBAAU,EAAE,6BAA6B,EAAElB,SAAU,CAAC;;EAEtE;EACA;EACA;EACA;EACA;EACA,MAAMmB,sBAAmD,GAAKC,KAAK,IAAM;IACxE;IACAA,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC3B,OAAA,CAAA4B,OAAM;IAAA,GACDpB,WAAW;IAChBL,SAAS,EAAGiB,OAAS;IACrBN,GAAG,EAAGA,GAAK;IACXT,MAAM,EAAGiB;EAAwB,GAE/BlB,QACK,CAAC;AAEX"}

package/build/color-control/index.native.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _colorCell = _interopRequireDefault(require("../mobile/bottom-sheet/color-cell"));
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ function ColorControl({
   withColorIndicator,
   ...props
 }) {
-  return (0, _element.createElement)(_colorCell.default, {
+  return (0, _react.createElement)(_colorCell.default, {
     label: label,
     onPress: onPress,
     color: color,

package/build/color-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_colorCell","_interopRequireDefault","require","ColorControl","label","onPress","color","withColorIndicator","props","_element","createElement","default","_default","exports"],"sources":["@wordpress/components/src/color-control/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorCell from '../mobile/bottom-sheet/color-cell';\n\nfunction ColorControl( {\n\tlabel,\n\tonPress,\n\tcolor,\n\twithColorIndicator,\n\t...props\n} ) {\n\treturn (\n\t\t<ColorCell\n\t\t\tlabel={ label }\n\t\t\tonPress={ onPress }\n\t\t\tcolor={ color }\n\t\t\twithColorIndicator={ withColorIndicator }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default ColorControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA,SAASC,YAAYA,CAAE;EACtBC,KAAK;EACLC,OAAO;EACPC,KAAK;EACLC,kBAAkB;EAClB,GAAGC;AACJ,CAAC,EAAG;EACH,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACV,UAAA,CAAAW,OAAS;IACTP,KAAK,EAAGA,KAAO;IACfC,OAAO,EAAGA,OAAS;IACnBC,KAAK,EAAGA,KAAO;IACfC,kBAAkB,EAAGA,kBAAoB;IAAA,GACpCC;EAAK,CACV,CAAC;AAEJ;AAAC,IAAAI,QAAA,GAEcT,YAAY;AAAAU,OAAA,CAAAF,OAAA,GAAAC,QAAA"}
+{"version":3,"names":["_colorCell","_interopRequireDefault","require","ColorControl","label","onPress","color","withColorIndicator","props","_react","createElement","default","_default","exports"],"sources":["@wordpress/components/src/color-control/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport ColorCell from '../mobile/bottom-sheet/color-cell';\n\nfunction ColorControl( {\n\tlabel,\n\tonPress,\n\tcolor,\n\twithColorIndicator,\n\t...props\n} ) {\n\treturn (\n\t\t<ColorCell\n\t\t\tlabel={ label }\n\t\t\tonPress={ onPress }\n\t\t\tcolor={ color }\n\t\t\twithColorIndicator={ withColorIndicator }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default ColorControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA,SAASC,YAAYA,CAAE;EACtBC,KAAK;EACLC,OAAO;EACPC,KAAK;EACLC,kBAAkB;EAClB,GAAGC;AACJ,CAAC,EAAG;EACH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACV,UAAA,CAAAW,OAAS;IACTP,KAAK,EAAGA,KAAO;IACfC,OAAO,EAAGA,OAAS;IACnBC,KAAK,EAAGA,KAAO;IACfC,kBAAkB,EAAGA,kBAAoB;IAAA,GACpCC;EAAK,CACV,CAAC;AAEJ;AAAC,IAAAI,QAAA,GAEcT,YAAY;AAAAU,OAAA,CAAAF,OAAA,GAAAC,QAAA"}

package/build/color-indicator/index.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ColorIndicator = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 /**
  * External dependencies
  */
@@ -21,7 +22,7 @@ function UnforwardedColorIndicator(props, forwardedRef) {
     colorValue,
     ...additionalProps
   } = props;
-  return (0, _element.createElement)("span", {
+  return (0, _react.createElement)("span", {
     className: (0, _classnames.default)('component-color-indicator', className),
     style: {
       background: colorValue

package/build/color-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","createElement","classnames","style","background","ref","ColorIndicator","forwardRef","exports","_default","default"],"sources":["@wordpress/components/src/color-indicator/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AANA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAHA;AACA;AACA;;AAIA;AACA;AACA;;AASA,SAASG,yBAAyBA,CACjCC,KAAoE,EACpEC,YAA6C,EAC5C;EACD,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC;EAAgB,CAAC,GAAGJ,KAAK;EAE3D,OACC,IAAAL,QAAA,CAAAU,aAAA;IACCH,SAAS,EAAG,IAAAI,mBAAU,EAAE,2BAA2B,EAAEJ,SAAU,CAAG;IAClEK,KAAK,EAAG;MAAEC,UAAU,EAAEL;IAAW,CAAG;IACpCM,GAAG,EAAGR,YAAc;IAAA,GACfG;EAAe,CACpB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,cAAc,GAAG,IAAAC,mBAAU,EAAEZ,yBAA0B,CAAC;AAACa,OAAA,CAAAF,cAAA,GAAAA,cAAA;AAAA,IAAAG,QAAA,GAEvDH,cAAc;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","_react","createElement","classnames","style","background","ref","ColorIndicator","forwardRef","exports","_default","default"],"sources":["@wordpress/components/src/color-indicator/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AASA,SAASE,yBAAyBA,CACjCC,KAAoE,EACpEC,YAA6C,EAC5C;EACD,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC;EAAgB,CAAC,GAAGJ,KAAK;EAE3D,OACC,IAAAK,MAAA,CAAAC,aAAA;IACCJ,SAAS,EAAG,IAAAK,mBAAU,EAAE,2BAA2B,EAAEL,SAAU,CAAG;IAClEM,KAAK,EAAG;MAAEC,UAAU,EAAEN;IAAW,CAAG;IACpCO,GAAG,EAAGT,YAAc;IAAA,GACfG;EAAe,CACpB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,cAAc,GAAG,IAAAC,mBAAU,EAAEb,yBAA0B,CAAC;AAACc,OAAA,CAAAF,cAAA,GAAAA,cAAA;AAAA,IAAAG,QAAA,GAEvDH,cAAc;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

package/build/color-indicator/index.native.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _reactNative = require("react-native");
 var _icons = require("@wordpress/icons");
 var _components = require("@wordpress/components");
@@ -27,13 +27,13 @@ var _utils = require("../mobile/color-settings/utils");
 function SelectedIcon({
   opacity
 }) {
-  return (0, _element.createElement)(_reactNative.Animated.View, {
+  return (0, _react.createElement)(_reactNative.Animated.View, {
     style: [_style.default.selected, {
       opacity
     }]
-  }, (0, _element.createElement)(_reactNative.View, {
+  }, (0, _react.createElement)(_reactNative.View, {
     style: [_style.default.outline, _style.default.selectedOutline]
-  }), (0, _element.createElement)(_icons.Icon, {
+  }), (0, _react.createElement)(_icons.Icon, {
     icon: _icons.check,
     style: _style.default.icon,
     size: 24
@@ -51,34 +51,34 @@ function ColorIndicator({
   } = _utils.colorsUtils;
   const outlineStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.outline, _style.default.outlineDark);
   if (isGradient(color)) {
-    return (0, _element.createElement)(_components.Gradient, {
+    return (0, _react.createElement)(_components.Gradient, {
       style: [_style.default.circleOption, style],
       gradientValue: color
-    }, (0, _element.createElement)(_reactNative.View, {
+    }, (0, _react.createElement)(_reactNative.View, {
       style: outlineStyle
-    }), isSelected && (0, _element.createElement)(SelectedIcon, {
+    }), isSelected && (0, _react.createElement)(SelectedIcon, {
       opacity: opacity
     }));
   } else if (withCustomPicker) {
-    return (0, _element.createElement)(_reactNative.View, {
+    return (0, _react.createElement)(_reactNative.View, {
       style: [_style.default.circleOption, style]
-    }, (0, _element.createElement)(_reactNative.View, {
+    }, (0, _react.createElement)(_reactNative.View, {
       style: outlineStyle
     }), color.map(gradientValue => {
-      return (0, _element.createElement)(_components.Gradient, {
+      return (0, _react.createElement)(_components.Gradient, {
         gradientValue: gradientValue,
         style: [_style.default.circleOption, _style.default.absolute, style],
         key: gradientValue
       });
-    }), isSelected && (0, _element.createElement)(SelectedIcon, null));
+    }), isSelected && (0, _react.createElement)(SelectedIcon, null));
   }
-  return (0, _element.createElement)(_reactNative.View, {
+  return (0, _react.createElement)(_reactNative.View, {
     style: [_style.default.circleOption, style, {
       backgroundColor: color
     }]
-  }, (0, _element.createElement)(_reactNative.View, {
+  }, (0, _react.createElement)(_reactNative.View, {
     style: outlineStyle
-  }), isSelected && (0, _element.createElement)(SelectedIcon, {
+  }), isSelected && (0, _react.createElement)(SelectedIcon, {
     opacity: opacity
   }));
 }

package/build/color-indicator/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_icons","_components","_compose","_style","_interopRequireDefault","_utils","SelectedIcon","opacity","_element","createElement","Animated","View","style","styles","selected","outline","selectedOutline","Icon","icon","check","size","ColorIndicator","color","isSelected","withCustomPicker","isGradient","colorsUtils","outlineStyle","usePreferredColorSchemeStyle","outlineDark","Gradient","circleOption","gradientValue","map","absolute","key","backgroundColor","_default","exports","default"],"sources":["@wordpress/components/src/color-indicator/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Animated } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { Gradient } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nfunction SelectedIcon( { opacity } ) {\n\treturn (\n\t\t<Animated.View style={ [ styles.selected, { opacity } ] }>\n\t\t\t<View style={ [ styles.outline, styles.selectedOutline ] } />\n\t\t\t<Icon icon={ check } style={ styles.icon } size={ 24 } />\n\t\t</Animated.View>\n\t);\n}\n\nfunction ColorIndicator( {\n\tcolor,\n\tisSelected,\n\twithCustomPicker,\n\tstyle,\n\topacity,\n} ) {\n\tconst { isGradient } = colorsUtils;\n\n\tconst outlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.outline,\n\t\tstyles.outlineDark\n\t);\n\n\tif ( isGradient( color ) ) {\n\t\treturn (\n\t\t\t<Gradient\n\t\t\t\tstyle={ [ styles.circleOption, style ] }\n\t\t\t\tgradientValue={ color }\n\t\t\t>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t\t</Gradient>\n\t\t);\n\t} else if ( withCustomPicker ) {\n\t\treturn (\n\t\t\t<View style={ [ styles.circleOption, style ] }>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ color.map( ( gradientValue ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Gradient\n\t\t\t\t\t\t\tgradientValue={ gradientValue }\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.circleOption,\n\t\t\t\t\t\t\t\tstyles.absolute,\n\t\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\tkey={ gradientValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ isSelected && <SelectedIcon /> }\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles.circleOption, style, { backgroundColor: color } ] }\n\t\t>\n\t\t\t<View style={ outlineStyle } />\n\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t</View>\n\t);\n}\nexport default ColorIndicator;\n"],"mappings":"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"}
+{"version":3,"names":["_reactNative","require","_icons","_components","_compose","_style","_interopRequireDefault","_utils","SelectedIcon","opacity","_react","createElement","Animated","View","style","styles","selected","outline","selectedOutline","Icon","icon","check","size","ColorIndicator","color","isSelected","withCustomPicker","isGradient","colorsUtils","outlineStyle","usePreferredColorSchemeStyle","outlineDark","Gradient","circleOption","gradientValue","map","absolute","key","backgroundColor","_default","exports","default"],"sources":["@wordpress/components/src/color-indicator/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, Animated } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\nimport { Gradient } from '@wordpress/components';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { colorsUtils } from '../mobile/color-settings/utils';\n\nfunction SelectedIcon( { opacity } ) {\n\treturn (\n\t\t<Animated.View style={ [ styles.selected, { opacity } ] }>\n\t\t\t<View style={ [ styles.outline, styles.selectedOutline ] } />\n\t\t\t<Icon icon={ check } style={ styles.icon } size={ 24 } />\n\t\t</Animated.View>\n\t);\n}\n\nfunction ColorIndicator( {\n\tcolor,\n\tisSelected,\n\twithCustomPicker,\n\tstyle,\n\topacity,\n} ) {\n\tconst { isGradient } = colorsUtils;\n\n\tconst outlineStyle = usePreferredColorSchemeStyle(\n\t\tstyles.outline,\n\t\tstyles.outlineDark\n\t);\n\n\tif ( isGradient( color ) ) {\n\t\treturn (\n\t\t\t<Gradient\n\t\t\t\tstyle={ [ styles.circleOption, style ] }\n\t\t\t\tgradientValue={ color }\n\t\t\t>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t\t</Gradient>\n\t\t);\n\t} else if ( withCustomPicker ) {\n\t\treturn (\n\t\t\t<View style={ [ styles.circleOption, style ] }>\n\t\t\t\t<View style={ outlineStyle } />\n\t\t\t\t{ color.map( ( gradientValue ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Gradient\n\t\t\t\t\t\t\tgradientValue={ gradientValue }\n\t\t\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t\t\tstyles.circleOption,\n\t\t\t\t\t\t\t\tstyles.absolute,\n\t\t\t\t\t\t\t\tstyle,\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\tkey={ gradientValue }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ isSelected && <SelectedIcon /> }\n\t\t\t</View>\n\t\t);\n\t}\n\treturn (\n\t\t<View\n\t\t\tstyle={ [ styles.circleOption, style, { backgroundColor: color } ] }\n\t\t>\n\t\t\t<View style={ outlineStyle } />\n\t\t\t{ isSelected && <SelectedIcon opacity={ opacity } /> }\n\t\t</View>\n\t);\n}\nexport default ColorIndicator;\n"],"mappings":"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"}

package/build/color-palette/index.js

@@ -7,13 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.ColorPalette = void 0;
 exports.CustomColorPickerDropdown = CustomColorPickerDropdown;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _colord = require("colord");
 var _names = _interopRequireDefault(require("colord/plugins/names"));
 var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
 var _dropdown = _interopRequireDefault(require("../dropdown"));
 var _colorPicker = require("../color-picker");
 var _circularOptionPicker = _interopRequireDefault(require("../circular-option-picker"));
@@ -50,7 +51,7 @@ function SinglePalette({
     }, index) => {
       const colordColor = (0, _colord.colord)(color);
       const isSelected = value === color;
-      return (0, _element.createElement)(_circularOptionPicker.default.Option, {
+      return (0, _react.createElement)(_circularOptionPicker.default.Option, {
         key: `${color}-${index}`,
         isSelected: isSelected,
         selectedIconProps: isSelected ? {
@@ -72,7 +73,7 @@ function SinglePalette({
       });
     });
   }, [colors, value, onChange, clearColor]);
-  return (0, _element.createElement)(_circularOptionPicker.default.OptionGroup, {
+  return (0, _react.createElement)(_circularOptionPicker.default.OptionGroup, {
     className: className,
     options: colorOptions,
     ...additionalProps
@@ -90,7 +91,7 @@ function MultiplePalettes({
   if (colors.length === 0) {
     return null;
   }
-  return (0, _element.createElement)(_vStack.VStack, {
+  return (0, _react.createElement)(_vStack.VStack, {
     spacing: 3,
     className: className
   }, colors.map(({
@@ -98,13 +99,13 @@ function MultiplePalettes({
     colors: colorPalette
   }, index) => {
     const id = `${instanceId}-${index}`;
-    return (0, _element.createElement)(_vStack.VStack, {
+    return (0, _react.createElement)(_vStack.VStack, {
       spacing: 2,
       key: index
-    }, (0, _element.createElement)(_styles.ColorHeading, {
+    }, (0, _react.createElement)(_styles.ColorHeading, {
       id: id,
       level: headingLevel
-    }, name), (0, _element.createElement)(SinglePalette, {
+    }, name), (0, _react.createElement)(SinglePalette, {
       clearColor: clearColor,
       colors: colorPalette,
       onChange: newColor => onChange(newColor, index),
@@ -132,7 +133,7 @@ function CustomColorPickerDropdown({
     }),
     ...receivedPopoverProps
   }), [isRenderedInSidebar, receivedPopoverProps]);
-  return (0, _element.createElement)(_dropdown.default, {
+  return (0, _react.createElement)(_dropdown.default, {
     contentClassName: "components-color-palette__custom-color-dropdown-content",
     popoverProps: popoverProps,
     ...props
@@ -161,9 +162,9 @@ function UnforwardedColorPalette(props, forwardedRef) {
   }, [value]);
   const hasMultipleColorOrigins = (0, _utils.isMultiplePaletteArray)(colors);
   const buttonLabelName = (0, _element.useMemo)(() => (0, _utils.extractColorNameFromCurrentValue)(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
-  const renderCustomColorPicker = () => (0, _element.createElement)(_dropdownContentWrapper.default, {
+  const renderCustomColorPicker = () => (0, _react.createElement)(_dropdownContentWrapper.default, {
     paddingSize: "none"
-  }, (0, _element.createElement)(_colorPicker.ColorPicker, {
+  }, (0, _react.createElement)(_colorPicker.ColorPicker, {
     color: normalizedColorValue,
     onChange: color => onChange(color),
     enableAlpha: enableAlpha
@@ -180,7 +181,7 @@ function UnforwardedColorPalette(props, forwardedRef) {
     onChange,
     value
   };
-  const actions = !!clearable && (0, _element.createElement)(_circularOptionPicker.default.ButtonAction, {
+  const actions = !!clearable && (0, _react.createElement)(_circularOptionPicker.default.ButtonAction, {
     onClick: clearColor
   }, (0, _i18n.__)('Clear'));
   let metaProps;
@@ -210,20 +211,20 @@ function UnforwardedColorPalette(props, forwardedRef) {
       };
     }
   }
-  return (0, _element.createElement)(_vStack.VStack, {
+  return (0, _react.createElement)(_vStack.VStack, {
     spacing: 3,
     ref: forwardedRef,
     ...additionalProps
-  }, !disableCustomColors && (0, _element.createElement)(CustomColorPickerDropdown, {
+  }, !disableCustomColors && (0, _react.createElement)(CustomColorPickerDropdown, {
     isRenderedInSidebar: __experimentalIsRenderedInSidebar,
     renderContent: renderCustomColorPicker,
     renderToggle: ({
       isOpen,
       onToggle
-    }) => (0, _element.createElement)(_vStack.VStack, {
+    }) => (0, _react.createElement)(_vStack.VStack, {
       className: "components-color-palette__custom-color-wrapper",
       spacing: 0
-    }, (0, _element.createElement)("button", {
+    }, (0, _react.createElement)("button", {
       ref: customColorPaletteCallbackRef,
       className: "components-color-palette__custom-color-button",
       "aria-expanded": isOpen,
@@ -233,25 +234,25 @@ function UnforwardedColorPalette(props, forwardedRef) {
       style: {
         background: value
       }
-    }), (0, _element.createElement)(_vStack.VStack, {
+    }), (0, _react.createElement)(_vStack.VStack, {
       className: "components-color-palette__custom-color-text-wrapper",
       spacing: 0.5
-    }, (0, _element.createElement)(_truncate.Truncate, {
+    }, (0, _react.createElement)(_truncate.Truncate, {
       className: "components-color-palette__custom-color-name"
-    }, value ? buttonLabelName : 'No color selected'), (0, _element.createElement)(_truncate.Truncate, {
+    }, value ? buttonLabelName : 'No color selected'), (0, _react.createElement)(_truncate.Truncate, {
       className: (0, _classnames.default)('components-color-palette__custom-color-value', {
         'components-color-palette__custom-color-value--is-hex': isHex
       })
     }, displayValue)))
-  }), (0, _element.createElement)(_circularOptionPicker.default, {
+  }), (0, _react.createElement)(_circularOptionPicker.default, {
     ...metaProps,
     actions: actions,
-    options: hasMultipleColorOrigins ? (0, _element.createElement)(MultiplePalettes, {
+    options: hasMultipleColorOrigins ? (0, _react.createElement)(MultiplePalettes, {
       ...paletteCommonProps,
       headingLevel: headingLevel,
       colors: colors,
       value: value
-    }) : (0, _element.createElement)(SinglePalette, {
+    }) : (0, _react.createElement)(SinglePalette, {
       ...paletteCommonProps,
       colors: colors,
       value: value

package/build/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_colord","_names","_interopRequireDefault","_a11y","_classnames","_compose","_i18n","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","createElement","default","Option","key","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","colorPalette","id","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","Truncate","classnames","ColorPalette","forwardRef","exports","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<CircularOptionPicker\n\t\t\t\t{ ...metaProps }\n\t\t\t\tactions={ actions }\n\t\t\t\toptions={\n\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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"}
+{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_classnames","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","_react","createElement","default","Option","key","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","colorPalette","id","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","metaProps","_metaProps","ref","renderContent","renderToggle","isOpen","onToggle","background","Truncate","classnames","ColorPalette","forwardRef","exports","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction onClick={ clearColor }>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tlet metaProps:\n\t\t| { asButtons: false; loop?: boolean; 'aria-label': string }\n\t\t| { asButtons: false; loop?: boolean; 'aria-labelledby': string }\n\t\t| { asButtons: true };\n\n\tif ( asButtons ) {\n\t\tmetaProps = { asButtons: true };\n\t} else {\n\t\tconst _metaProps: { asButtons: false; loop?: boolean } = {\n\t\t\tasButtons: false,\n\t\t\tloop,\n\t\t};\n\n\t\tif ( ariaLabel ) {\n\t\t\tmetaProps = { ..._metaProps, 'aria-label': ariaLabel };\n\t\t} else if ( ariaLabelledby ) {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-labelledby': ariaLabelledby,\n\t\t\t};\n\t\t} else {\n\t\t\tmetaProps = {\n\t\t\t\t..._metaProps,\n\t\t\t\t'aria-label': __( 'Custom color picker.' ),\n\t\t\t};\n\t\t}\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: 'No color selected' }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<CircularOptionPicker\n\t\t\t\t{ ...metaProps }\n\t\t\t\tactions={ actions }\n\t\t\t\toptions={\n\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t/>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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"}