@wordpress/components 27.6.0 → 28.0.1

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -64,7 +63,8 @@ import { ButtonAction, DropdownLinkAction } from './circular-option-picker-actio
  * };
  * ```
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function ListboxCircularOptionPicker(props) {
   const {
     actions,
@@ -83,16 +83,19 @@ function ListboxCircularOptionPicker(props) {
     baseId,
     compositeStore
   };
-  return createElement("div", {
-    className: className
-  }, createElement(CircularOptionPickerContext.Provider, {
-    value: compositeContext
-  }, createElement(Composite, {
-    ...additionalProps,
-    id: baseId,
-    store: compositeStore,
-    role: 'listbox'
-  }, options), children, actions));
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {
+      value: compositeContext,
+      children: [/*#__PURE__*/_jsx(Composite, {
+        ...additionalProps,
+        id: baseId,
+        store: compositeStore,
+        role: "listbox",
+        children: options
+      }), children, actions]
+    })
+  });
 }
 function ButtonsCircularOptionPicker(props) {
   const {
@@ -102,14 +105,16 @@ function ButtonsCircularOptionPicker(props) {
     baseId,
     ...additionalProps
   } = props;
-  return createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     ...additionalProps,
-    id: baseId
-  }, createElement(CircularOptionPickerContext.Provider, {
-    value: {
-      baseId
-    }
-  }, options, children, actions));
+    id: baseId,
+    children: /*#__PURE__*/_jsxs(CircularOptionPickerContext.Provider, {
+      value: {
+        baseId
+      },
+      children: [options, children, actions]
+    })
+  });
 }
 function CircularOptionPicker(props) {
   const {
@@ -122,19 +127,22 @@ function CircularOptionPicker(props) {
   } = props;
   const baseId = useInstanceId(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id);
   const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker;
-  const actions = actionsProp ? createElement("div", {
-    className: "components-circular-option-picker__custom-clear-wrapper"
-  }, actionsProp) : undefined;
-  const options = createElement("div", {
-    className: 'components-circular-option-picker__swatches'
-  }, optionsProp);
-  return createElement(OptionPickerImplementation, {
+  const actions = actionsProp ? /*#__PURE__*/_jsx("div", {
+    className: "components-circular-option-picker__custom-clear-wrapper",
+    children: actionsProp
+  }) : undefined;
+  const options = /*#__PURE__*/_jsx("div", {
+    className: "components-circular-option-picker__swatches",
+    children: optionsProp
+  });
+  return /*#__PURE__*/_jsx(OptionPickerImplementation, {
     ...additionalProps,
     baseId: baseId,
     className: clsx('components-circular-option-picker', className),
     actions: actions,
-    options: options
-  }, children);
+    options: options,
+    children: children
+  });
 }
 CircularOptionPicker.Option = Option;
 CircularOptionPicker.OptionGroup = OptionGroup;

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useInstanceId","isRTL","CircularOptionPickerContext","Composite","useCompositeStore","Option","OptionGroup","ButtonAction","DropdownLinkAction","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","compositeStore","focusLoop","rtl","compositeContext","createElement","Provider","value","id","store","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","OptionPickerImplementation","undefined"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeStore } from '../composite/v2';\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\n\tconst compositeStore = useCompositeStore( {\n\t\tfocusLoop: loop,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst compositeContext = {\n\t\tbaseId,\n\t\tcompositeStore,\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\tid={ baseId }\n\t\t\t\t\tstore={ compositeStore }\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 } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ { baseId } }>\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={ clsx( 'components-circular-option-picker', className ) }\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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","ignoreList":[]}
+{"version":3,"names":["clsx","useInstanceId","isRTL","CircularOptionPickerContext","Composite","useCompositeStore","Option","OptionGroup","ButtonAction","DropdownLinkAction","jsx","_jsx","jsxs","_jsxs","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","compositeStore","focusLoop","rtl","compositeContext","Provider","value","id","store","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","OptionPickerImplementation","undefined"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite, useCompositeStore } from '../composite/v2';\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\n\tconst compositeStore = useCompositeStore( {\n\t\tfocusLoop: loop,\n\t\trtl: isRTL(),\n\t} );\n\n\tconst compositeContext = {\n\t\tbaseId,\n\t\tcompositeStore,\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\tid={ baseId }\n\t\t\t\t\tstore={ compositeStore }\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 } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ { baseId } }>\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={ clsx( 'components-circular-option-picker', className ) }\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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","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -15,6 +14,7 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import Button from '../button';
+import { jsx as _jsx } from "react/jsx-runtime";
 const TIMEOUT = 4000;
 export default function ClipboardButton({
   className,
@@ -54,11 +54,12 @@ export default function ClipboardButton({
     // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
     event.target.focus();
   };
-  return createElement(Button, {
+  return /*#__PURE__*/_jsx(Button, {
     ...buttonProps,
     className: classes,
     ref: ref,
-    onCopy: focusOnCopyEventTarget
-  }, children);
+    onCopy: focusOnCopyEventTarget,
+    children: children
+  });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useRef","useEffect","useCopyToClipboard","deprecated","Button","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","current","clearTimeout","setTimeout","classes","focusOnCopyEventTarget","event","target","focus","createElement"],"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 = clsx( '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":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AACtD,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAI9B,MAAMC,OAAO,GAAG,IAAI;AAEpB,eAAe,SAASC,eAAeA,CAAE;EACxCC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,YAAY;EACZC,IAAI;EACJ,GAAGC;AAC8D,CAAC,EAAG;EACrET,UAAU,CAAE,+BAA+B,EAAE;IAC5CU,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,MAAMC,SAAS,GAAGf,MAAM,CAAmB,CAAC;EAC5C,MAAMgB,GAAG,GAAGd,kBAAkB,CAAES,IAAI,EAAE,MAAM;IAC3CF,MAAM,CAAC,CAAC;IACR,IAAKM,SAAS,CAACE,OAAO,EAAG;MACxBC,YAAY,CAAEH,SAAS,CAACE,OAAQ,CAAC;IAClC;IAEA,IAAKP,YAAY,EAAG;MACnBK,SAAS,CAACE,OAAO,GAAGE,UAAU,CAAE,MAAMT,YAAY,CAAC,CAAC,EAAEL,OAAQ,CAAC;IAChE;EACD,CAAE,CAAC;EAEHJ,SAAS,CAAE,MAAM;IAChB,IAAKc,SAAS,CAACE,OAAO,EAAG;MACxBC,YAAY,CAAEH,SAAS,CAACE,OAAQ,CAAC;IAClC;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMG,OAAO,GAAGrB,IAAI,CAAE,6BAA6B,EAAEQ,SAAU,CAAC;;EAEhE;EACA;EACA;EACA;EACA;EACA,MAAMc,sBAAmD,GAAKC,KAAK,IAAM;IACxE;IACAA,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,OACCC,aAAA,CAACrB,MAAM;IAAA,GACDQ,WAAW;IAChBL,SAAS,EAAGa,OAAS;IACrBJ,GAAG,EAAGA,GAAK;IACXP,MAAM,EAAGY;EAAwB,GAE/Bb,QACK,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["clsx","useRef","useEffect","useCopyToClipboard","deprecated","Button","jsx","_jsx","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","current","clearTimeout","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 = clsx( '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":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AACtD,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,OAAOC,MAAM,MAAM,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAI/B,MAAMC,OAAO,GAAG,IAAI;AAEpB,eAAe,SAASC,eAAeA,CAAE;EACxCC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,YAAY;EACZC,IAAI;EACJ,GAAGC;AAC8D,CAAC,EAAG;EACrEX,UAAU,CAAE,+BAA+B,EAAE;IAC5CY,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,MAAMC,SAAS,GAAGjB,MAAM,CAAmB,CAAC;EAC5C,MAAMkB,GAAG,GAAGhB,kBAAkB,CAAEW,IAAI,EAAE,MAAM;IAC3CF,MAAM,CAAC,CAAC;IACR,IAAKM,SAAS,CAACE,OAAO,EAAG;MACxBC,YAAY,CAAEH,SAAS,CAACE,OAAQ,CAAC;IAClC;IAEA,IAAKP,YAAY,EAAG;MACnBK,SAAS,CAACE,OAAO,GAAGE,UAAU,CAAE,MAAMT,YAAY,CAAC,CAAC,EAAEL,OAAQ,CAAC;IAChE;EACD,CAAE,CAAC;EAEHN,SAAS,CAAE,MAAM;IAChB,IAAKgB,SAAS,CAACE,OAAO,EAAG;MACxBC,YAAY,CAAEH,SAAS,CAACE,OAAQ,CAAC;IAClC;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMG,OAAO,GAAGvB,IAAI,CAAE,6BAA6B,EAAEU,SAAU,CAAC;;EAEhE;EACA;EACA;EACA;EACA;EACA,MAAMc,sBAAmD,GAAKC,KAAK,IAAM;IACxE;IACAA,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,oBACCpB,IAAA,CAACF,MAAM;IAAA,GACDU,WAAW;IAChBL,SAAS,EAAGa,OAAS;IACrBJ,GAAG,EAAGA,GAAK;IACXP,MAAM,EAAGY,sBAAwB;IAAAb,QAAA,EAE/BA;EAAQ,CACH,CAAC;AAEX","ignoreList":[]}

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

@@ -1,8 +1,8 @@
-import { createElement } from "react";
 /**
  * Internal dependencies
  */
 import ColorCell from '../mobile/bottom-sheet/color-cell';
+import { jsx as _jsx } from "react/jsx-runtime";
 function ColorControl({
   label,
   onPress,
@@ -10,7 +10,7 @@ function ColorControl({
   withColorIndicator,
   ...props
 }) {
-  return createElement(ColorCell, {
+  return /*#__PURE__*/_jsx(ColorCell, {
     label: label,
     onPress: onPress,
     color: color,

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

@@ -1 +1 @@
-{"version":3,"names":["ColorCell","ColorControl","label","onPress","color","withColorIndicator","props","createElement"],"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":";AAAA;AACA;AACA;AACA,OAAOA,SAAS,MAAM,mCAAmC;AAEzD,SAASC,YAAYA,CAAE;EACtBC,KAAK;EACLC,OAAO;EACPC,KAAK;EACLC,kBAAkB;EAClB,GAAGC;AACJ,CAAC,EAAG;EACH,OACCC,aAAA,CAACP,SAAS;IACTE,KAAK,EAAGA,KAAO;IACfC,OAAO,EAAGA,OAAS;IACnBC,KAAK,EAAGA,KAAO;IACfC,kBAAkB,EAAGA,kBAAoB;IAAA,GACpCC;EAAK,CACV,CAAC;AAEJ;AAEA,eAAeL,YAAY","ignoreList":[]}
+{"version":3,"names":["ColorCell","jsx","_jsx","ColorControl","label","onPress","color","withColorIndicator","props"],"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":"AAAA;AACA;AACA;AACA,OAAOA,SAAS,MAAM,mCAAmC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1D,SAASC,YAAYA,CAAE;EACtBC,KAAK;EACLC,OAAO;EACPC,KAAK;EACLC,kBAAkB;EAClB,GAAGC;AACJ,CAAC,EAAG;EACH,oBACCN,IAAA,CAACF,SAAS;IACTI,KAAK,EAAGA,KAAO;IACfC,OAAO,EAAGA,OAAS;IACnBC,KAAK,EAAGA,KAAO;IACfC,kBAAkB,EAAGA,kBAAoB;IAAA,GACpCC;EAAK,CACV,CAAC;AAEJ;AAEA,eAAeL,YAAY","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -11,14 +10,14 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnforwardedColorIndicator(props, forwardedRef) {
   const {
     className,
     colorValue,
     ...additionalProps
   } = props;
-  return createElement("span", {
+  return /*#__PURE__*/_jsx("span", {
     className: clsx('component-color-indicator', className),
     style: {
       background: colorValue

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","forwardRef","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","createElement","style","background","ref","ColorIndicator"],"sources":["@wordpress/components/src/color-indicator/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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={ clsx( '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":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAIA,SAASC,yBAAyBA,CACjCC,KAAoE,EACpEC,YAA6C,EAC5C;EACD,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC;EAAgB,CAAC,GAAGJ,KAAK;EAE3D,OACCK,aAAA;IACCH,SAAS,EAAGL,IAAI,CAAE,2BAA2B,EAAEK,SAAU,CAAG;IAC5DI,KAAK,EAAG;MAAEC,UAAU,EAAEJ;IAAW,CAAG;IACpCK,GAAG,EAAGP,YAAc;IAAA,GACfG;EAAe,CACpB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,cAAc,GAAGX,UAAU,CAAEC,yBAA0B,CAAC;AAErE,eAAeU,cAAc","ignoreList":[]}
+{"version":3,"names":["clsx","forwardRef","jsx","_jsx","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","style","background","ref","ColorIndicator"],"sources":["@wordpress/components/src/color-indicator/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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={ clsx( '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":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAMA,SAASC,yBAAyBA,CACjCC,KAAoE,EACpEC,YAA6C,EAC5C;EACD,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC;EAAgB,CAAC,GAAGJ,KAAK;EAE3D,oBACCF,IAAA;IACCI,SAAS,EAAGP,IAAI,CAAE,2BAA2B,EAAEO,SAAU,CAAG;IAC5DG,KAAK,EAAG;MAAEC,UAAU,EAAEH;IAAW,CAAG;IACpCI,GAAG,EAAGN,YAAc;IAAA,GACfG;EAAe,CACpB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,cAAc,GAAGZ,UAAU,CAAEG,yBAA0B,CAAC;AAErE,eAAeS,cAAc","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -7,27 +6,30 @@ import { View, Animated } from 'react-native';
  * WordPress dependencies
  */
 import { Icon, check } from '@wordpress/icons';
-import { Gradient } from '@wordpress/components';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
+import Gradient from '../mobile/gradient';
 import { colorsUtils } from '../mobile/color-settings/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function SelectedIcon({
   opacity
 }) {
-  return createElement(Animated.View, {
+  return /*#__PURE__*/_jsxs(Animated.View, {
     style: [styles.selected, {
       opacity
-    }]
-  }, createElement(View, {
-    style: [styles.outline, styles.selectedOutline]
-  }), createElement(Icon, {
-    icon: check,
-    style: styles.icon,
-    size: 24
-  }));
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.outline, styles.selectedOutline]
+    }), /*#__PURE__*/_jsx(Icon, {
+      icon: check,
+      style: styles.icon,
+      size: 24
+    })]
+  });
 }
 function ColorIndicator({
   color,
@@ -41,36 +43,38 @@ function ColorIndicator({
   } = colorsUtils;
   const outlineStyle = usePreferredColorSchemeStyle(styles.outline, styles.outlineDark);
   if (isGradient(color)) {
-    return createElement(Gradient, {
+    return /*#__PURE__*/_jsxs(Gradient, {
       style: [styles.circleOption, style],
-      gradientValue: color
-    }, createElement(View, {
-      style: outlineStyle
-    }), isSelected && createElement(SelectedIcon, {
-      opacity: opacity
-    }));
+      gradientValue: color,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: outlineStyle
+      }), isSelected && /*#__PURE__*/_jsx(SelectedIcon, {
+        opacity: opacity
+      })]
+    });
   } else if (withCustomPicker) {
-    return createElement(View, {
-      style: [styles.circleOption, style]
-    }, createElement(View, {
-      style: outlineStyle
-    }), color.map(gradientValue => {
-      return createElement(Gradient, {
-        gradientValue: gradientValue,
-        style: [styles.circleOption, styles.absolute, style],
-        key: gradientValue
-      });
-    }), isSelected && createElement(SelectedIcon, null));
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.circleOption, style],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: outlineStyle
+      }), color.map(gradientValue => {
+        return /*#__PURE__*/_jsx(Gradient, {
+          gradientValue: gradientValue,
+          style: [styles.circleOption, styles.absolute, style]
+        }, gradientValue);
+      }), isSelected && /*#__PURE__*/_jsx(SelectedIcon, {})]
+    });
   }
-  return createElement(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: [styles.circleOption, style, {
       backgroundColor: color
-    }]
-  }, createElement(View, {
-    style: outlineStyle
-  }), isSelected && createElement(SelectedIcon, {
-    opacity: opacity
-  }));
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: outlineStyle
+    }), isSelected && /*#__PURE__*/_jsx(SelectedIcon, {
+      opacity: opacity
+    })]
+  });
 }
 export default ColorIndicator;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["View","Animated","Icon","check","Gradient","usePreferredColorSchemeStyle","styles","colorsUtils","SelectedIcon","opacity","createElement","style","selected","outline","selectedOutline","icon","size","ColorIndicator","color","isSelected","withCustomPicker","isGradient","outlineStyle","outlineDark","circleOption","gradientValue","map","absolute","key","backgroundColor"],"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":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AAC7C;AACA;AACA;AACA,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC9C,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,4BAA4B,QAAQ,oBAAoB;AACjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AACjC,SAASC,WAAW,QAAQ,gCAAgC;AAE5D,SAASC,YAAYA,CAAE;EAAEC;AAAQ,CAAC,EAAG;EACpC,OACCC,aAAA,CAACT,QAAQ,CAACD,IAAI;IAACW,KAAK,EAAG,CAAEL,MAAM,CAACM,QAAQ,EAAE;MAAEH;IAAQ,CAAC;EAAI,GACxDC,aAAA,CAACV,IAAI;IAACW,KAAK,EAAG,CAAEL,MAAM,CAACO,OAAO,EAAEP,MAAM,CAACQ,eAAe;EAAI,CAAE,CAAC,EAC7DJ,aAAA,CAACR,IAAI;IAACa,IAAI,EAAGZ,KAAO;IAACQ,KAAK,EAAGL,MAAM,CAACS,IAAM;IAACC,IAAI,EAAG;EAAI,CAAE,CAC1C,CAAC;AAElB;AAEA,SAASC,cAAcA,CAAE;EACxBC,KAAK;EACLC,UAAU;EACVC,gBAAgB;EAChBT,KAAK;EACLF;AACD,CAAC,EAAG;EACH,MAAM;IAAEY;EAAW,CAAC,GAAGd,WAAW;EAElC,MAAMe,YAAY,GAAGjB,4BAA4B,CAChDC,MAAM,CAACO,OAAO,EACdP,MAAM,CAACiB,WACR,CAAC;EAED,IAAKF,UAAU,CAAEH,KAAM,CAAC,EAAG;IAC1B,OACCR,aAAA,CAACN,QAAQ;MACRO,KAAK,EAAG,CAAEL,MAAM,CAACkB,YAAY,EAAEb,KAAK,CAAI;MACxCc,aAAa,EAAGP;IAAO,GAEvBR,aAAA,CAACV,IAAI;MAACW,KAAK,EAAGW;IAAc,CAAE,CAAC,EAC7BH,UAAU,IAAIT,aAAA,CAACF,YAAY;MAACC,OAAO,EAAGA;IAAS,CAAE,CAC1C,CAAC;EAEb,CAAC,MAAM,IAAKW,gBAAgB,EAAG;IAC9B,OACCV,aAAA,CAACV,IAAI;MAACW,KAAK,EAAG,CAAEL,MAAM,CAACkB,YAAY,EAAEb,KAAK;IAAI,GAC7CD,aAAA,CAACV,IAAI;MAACW,KAAK,EAAGW;IAAc,CAAE,CAAC,EAC7BJ,KAAK,CAACQ,GAAG,CAAID,aAAa,IAAM;MACjC,OACCf,aAAA,CAACN,QAAQ;QACRqB,aAAa,EAAGA,aAAe;QAC/Bd,KAAK,EAAG,CACPL,MAAM,CAACkB,YAAY,EACnBlB,MAAM,CAACqB,QAAQ,EACfhB,KAAK,CACH;QACHiB,GAAG,EAAGH;MAAe,CACrB,CAAC;IAEJ,CAAE,CAAC,EACDN,UAAU,IAAIT,aAAA,CAACF,YAAY,MAAE,CAC1B,CAAC;EAET;EACA,OACCE,aAAA,CAACV,IAAI;IACJW,KAAK,EAAG,CAAEL,MAAM,CAACkB,YAAY,EAAEb,KAAK,EAAE;MAAEkB,eAAe,EAAEX;IAAM,CAAC;EAAI,GAEpER,aAAA,CAACV,IAAI;IAACW,KAAK,EAAGW;EAAc,CAAE,CAAC,EAC7BH,UAAU,IAAIT,aAAA,CAACF,YAAY;IAACC,OAAO,EAAGA;EAAS,CAAE,CAC9C,CAAC;AAET;AACA,eAAeQ,cAAc","ignoreList":[]}
+{"version":3,"names":["View","Animated","Icon","check","usePreferredColorSchemeStyle","styles","Gradient","colorsUtils","jsx","_jsx","jsxs","_jsxs","SelectedIcon","opacity","style","selected","children","outline","selectedOutline","icon","size","ColorIndicator","color","isSelected","withCustomPicker","isGradient","outlineStyle","outlineDark","circleOption","gradientValue","map","absolute","backgroundColor"],"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 { usePreferredColorSchemeStyle } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport Gradient from '../mobile/gradient';\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":"AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AAC7C;AACA;AACA;AACA,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;AAC9C,SAASC,4BAA4B,QAAQ,oBAAoB;AACjE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,cAAc;AACjC,OAAOC,QAAQ,MAAM,oBAAoB;AACzC,SAASC,WAAW,QAAQ,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE7D,SAASC,YAAYA,CAAE;EAAEC;AAAQ,CAAC,EAAG;EACpC,oBACCF,KAAA,CAACV,QAAQ,CAACD,IAAI;IAACc,KAAK,EAAG,CAAET,MAAM,CAACU,QAAQ,EAAE;MAAEF;IAAQ,CAAC,CAAI;IAAAG,QAAA,gBACxDP,IAAA,CAACT,IAAI;MAACc,KAAK,EAAG,CAAET,MAAM,CAACY,OAAO,EAAEZ,MAAM,CAACa,eAAe;IAAI,CAAE,CAAC,eAC7DT,IAAA,CAACP,IAAI;MAACiB,IAAI,EAAGhB,KAAO;MAACW,KAAK,EAAGT,MAAM,CAACc,IAAM;MAACC,IAAI,EAAG;IAAI,CAAE,CAAC;EAAA,CAC3C,CAAC;AAElB;AAEA,SAASC,cAAcA,CAAE;EACxBC,KAAK;EACLC,UAAU;EACVC,gBAAgB;EAChBV,KAAK;EACLD;AACD,CAAC,EAAG;EACH,MAAM;IAAEY;EAAW,CAAC,GAAGlB,WAAW;EAElC,MAAMmB,YAAY,GAAGtB,4BAA4B,CAChDC,MAAM,CAACY,OAAO,EACdZ,MAAM,CAACsB,WACR,CAAC;EAED,IAAKF,UAAU,CAAEH,KAAM,CAAC,EAAG;IAC1B,oBACCX,KAAA,CAACL,QAAQ;MACRQ,KAAK,EAAG,CAAET,MAAM,CAACuB,YAAY,EAAEd,KAAK,CAAI;MACxCe,aAAa,EAAGP,KAAO;MAAAN,QAAA,gBAEvBP,IAAA,CAACT,IAAI;QAACc,KAAK,EAAGY;MAAc,CAAE,CAAC,EAC7BH,UAAU,iBAAId,IAAA,CAACG,YAAY;QAACC,OAAO,EAAGA;MAAS,CAAE,CAAC;IAAA,CAC3C,CAAC;EAEb,CAAC,MAAM,IAAKW,gBAAgB,EAAG;IAC9B,oBACCb,KAAA,CAACX,IAAI;MAACc,KAAK,EAAG,CAAET,MAAM,CAACuB,YAAY,EAAEd,KAAK,CAAI;MAAAE,QAAA,gBAC7CP,IAAA,CAACT,IAAI;QAACc,KAAK,EAAGY;MAAc,CAAE,CAAC,EAC7BJ,KAAK,CAACQ,GAAG,CAAID,aAAa,IAAM;QACjC,oBACCpB,IAAA,CAACH,QAAQ;UACRuB,aAAa,EAAGA,aAAe;UAC/Bf,KAAK,EAAG,CACPT,MAAM,CAACuB,YAAY,EACnBvB,MAAM,CAAC0B,QAAQ,EACfjB,KAAK;QACH,GACGe,aACN,CAAC;MAEJ,CAAE,CAAC,EACDN,UAAU,iBAAId,IAAA,CAACG,YAAY,IAAE,CAAC;IAAA,CAC3B,CAAC;EAET;EACA,oBACCD,KAAA,CAACX,IAAI;IACJc,KAAK,EAAG,CAAET,MAAM,CAACuB,YAAY,EAAEd,KAAK,EAAE;MAAEkB,eAAe,EAAEV;IAAM,CAAC,CAAI;IAAAN,QAAA,gBAEpEP,IAAA,CAACT,IAAI;MAACc,KAAK,EAAGY;IAAc,CAAE,CAAC,EAC7BH,UAAU,iBAAId,IAAA,CAACG,YAAY;MAACC,OAAO,EAAGA;IAAS,CAAE,CAAC;EAAA,CAC/C,CAAC;AAET;AACA,eAAeQ,cAAc","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -26,6 +25,8 @@ import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
 import DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';
 import { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 extend([namesPlugin, a11yPlugin]);
 function SinglePalette({
   className,
@@ -42,8 +43,7 @@ function SinglePalette({
     }, index) => {
       const colordColor = colord(color);
       const isSelected = value === color;
-      return createElement(CircularOptionPicker.Option, {
-        key: `${color}-${index}`,
+      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {
         isSelected: isSelected,
         selectedIconProps: isSelected ? {
           fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
@@ -61,10 +61,10 @@ function SinglePalette({
         sprintf(__('Color: %s'), name) :
         // translators: %s: color hex code e.g: "#f00".
         sprintf(__('Color code: %s'), color)
-      });
+      }, `${color}-${index}`);
     });
   }, [colors, value, onChange, clearColor]);
-  return createElement(CircularOptionPicker.OptionGroup, {
+  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {
     className: className,
     options: colorOptions,
     ...additionalProps
@@ -82,28 +82,30 @@ function MultiplePalettes({
   if (colors.length === 0) {
     return null;
   }
-  return createElement(VStack, {
+  return /*#__PURE__*/_jsx(VStack, {
     spacing: 3,
-    className: className
-  }, colors.map(({
-    name,
-    colors: colorPalette
-  }, index) => {
-    const id = `${instanceId}-${index}`;
-    return createElement(VStack, {
-      spacing: 2,
-      key: index
-    }, createElement(ColorHeading, {
-      id: id,
-      level: headingLevel
-    }, name), createElement(SinglePalette, {
-      clearColor: clearColor,
-      colors: colorPalette,
-      onChange: newColor => onChange(newColor, index),
-      value: value,
-      "aria-labelledby": id
-    }));
-  }));
+    className: className,
+    children: colors.map(({
+      name,
+      colors: colorPalette
+    }, index) => {
+      const id = `${instanceId}-${index}`;
+      return /*#__PURE__*/_jsxs(VStack, {
+        spacing: 2,
+        children: [/*#__PURE__*/_jsx(ColorHeading, {
+          id: id,
+          level: headingLevel,
+          children: name
+        }), /*#__PURE__*/_jsx(SinglePalette, {
+          clearColor: clearColor,
+          colors: colorPalette,
+          onChange: newColor => onChange(newColor, index),
+          value: value,
+          "aria-labelledby": id
+        })]
+      }, index);
+    })
+  });
 }
 export function CustomColorPickerDropdown({
   isRenderedInSidebar,
@@ -128,7 +130,7 @@ export function CustomColorPickerDropdown({
     }),
     ...receivedPopoverProps
   }), [isRenderedInSidebar, receivedPopoverProps]);
-  return createElement(Dropdown, {
+  return /*#__PURE__*/_jsx(Dropdown, {
     contentClassName: "components-color-palette__custom-color-dropdown-content",
     popoverProps: popoverProps,
     ...props
@@ -157,13 +159,14 @@ function UnforwardedColorPalette(props, forwardedRef) {
   }, [value]);
   const hasMultipleColorOrigins = isMultiplePaletteArray(colors);
   const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
-  const renderCustomColorPicker = () => createElement(DropdownContentWrapper, {
-    paddingSize: "none"
-  }, createElement(ColorPicker, {
-    color: normalizedColorValue,
-    onChange: color => onChange(color),
-    enableAlpha: enableAlpha
-  }));
+  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {
+    paddingSize: "none",
+    children: /*#__PURE__*/_jsx(ColorPicker, {
+      color: normalizedColorValue,
+      onChange: color => onChange(color),
+      enableAlpha: enableAlpha
+    })
+  });
   const isHex = value?.startsWith('#');
 
   // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
@@ -176,9 +179,10 @@ function UnforwardedColorPalette(props, forwardedRef) {
     onChange,
     value
   };
-  const actions = !!clearable && createElement(CircularOptionPicker.ButtonAction, {
-    onClick: clearColor
-  }, __('Clear'));
+  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {
+    onClick: clearColor,
+    children: __('Clear')
+  });
   let metaProps;
   if (asButtons) {
     metaProps = {
@@ -206,54 +210,59 @@ function UnforwardedColorPalette(props, forwardedRef) {
       };
     }
   }
-  return createElement(VStack, {
+  return /*#__PURE__*/_jsxs(VStack, {
     spacing: 3,
     ref: forwardedRef,
-    ...additionalProps
-  }, !disableCustomColors && createElement(CustomColorPickerDropdown, {
-    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
-    renderContent: renderCustomColorPicker,
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => createElement(VStack, {
-      className: "components-color-palette__custom-color-wrapper",
-      spacing: 0
-    }, createElement("button", {
-      ref: customColorPaletteCallbackRef,
-      className: "components-color-palette__custom-color-button",
-      "aria-expanded": isOpen,
-      "aria-haspopup": "true",
-      onClick: onToggle,
-      "aria-label": customColorAccessibleLabel,
-      style: {
-        background: value
-      },
-      type: "button"
-    }), createElement(VStack, {
-      className: "components-color-palette__custom-color-text-wrapper",
-      spacing: 0.5
-    }, createElement(Truncate, {
-      className: "components-color-palette__custom-color-name"
-    }, value ? buttonLabelName : __('No color selected')), createElement(Truncate, {
-      className: clsx('components-color-palette__custom-color-value', {
-        'components-color-palette__custom-color-value--is-hex': isHex
+    ...additionalProps,
+    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {
+      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
+      renderContent: renderCustomColorPicker,
+      renderToggle: ({
+        isOpen,
+        onToggle
+      }) => /*#__PURE__*/_jsxs(VStack, {
+        className: "components-color-palette__custom-color-wrapper",
+        spacing: 0,
+        children: [/*#__PURE__*/_jsx("button", {
+          ref: customColorPaletteCallbackRef,
+          className: "components-color-palette__custom-color-button",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "true",
+          onClick: onToggle,
+          "aria-label": customColorAccessibleLabel,
+          style: {
+            background: value
+          },
+          type: "button"
+        }), /*#__PURE__*/_jsxs(VStack, {
+          className: "components-color-palette__custom-color-text-wrapper",
+          spacing: 0.5,
+          children: [/*#__PURE__*/_jsx(Truncate, {
+            className: "components-color-palette__custom-color-name",
+            children: value ? buttonLabelName : __('No color selected')
+          }), /*#__PURE__*/_jsx(Truncate, {
+            className: clsx('components-color-palette__custom-color-value', {
+              'components-color-palette__custom-color-value--is-hex': isHex
+            }),
+            children: displayValue
+          })]
+        })]
       })
-    }, displayValue)))
-  }), createElement(CircularOptionPicker, {
-    ...metaProps,
-    actions: actions,
-    options: hasMultipleColorOrigins ? createElement(MultiplePalettes, {
-      ...paletteCommonProps,
-      headingLevel: headingLevel,
-      colors: colors,
-      value: value
-    }) : createElement(SinglePalette, {
-      ...paletteCommonProps,
-      colors: colors,
-      value: value
-    })
-  }));
+    }), /*#__PURE__*/_jsx(CircularOptionPicker, {
+      ...metaProps,
+      actions: actions,
+      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {
+        ...paletteCommonProps,
+        headingLevel: headingLevel,
+        colors: colors,
+        value: value
+      }) : /*#__PURE__*/_jsx(SinglePalette, {
+        ...paletteCommonProps,
+        colors: colors,
+        value: value
+      })
+    })]
+  });
 }
 
 /**