@wordpress/components 27.6.0 → 28.0.0

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_circularOptionPickerContext","_v","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","compositeStore","useCompositeStore","focusLoop","rtl","isRTL","compositeContext","_react","createElement","CircularOptionPickerContext","Provider","value","Composite","id","store","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","undefined","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,4BAAA,GAAAH,OAAA;AACA,IAAAI,EAAA,GAAAJ,OAAA;AAMA,IAAAK,2BAAA,GAAAL,OAAA;AACA,IAAAM,gCAAA,GAAAN,OAAA;AACA,IAAAO,4BAAA,GAAAP,OAAA;AAvBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASQ,2BAA2BA,CACnCC,KAAuC,EACtC;EACD,MAAM;IACLC,OAAO;IACPC,OAAO;IACPC,MAAM;IACNC,SAAS;IACTC,IAAI,GAAG,IAAI;IACXC,QAAQ;IACR,GAAGC;EACJ,CAAC,GAAGP,KAAK;EAET,MAAMQ,cAAc,GAAG,IAAAC,oBAAiB,EAAE;IACzCC,SAAS,EAAEL,IAAI;IACfM,GAAG,EAAE,IAAAC,WAAK,EAAC;EACZ,CAAE,CAAC;EAEH,MAAMC,gBAAgB,GAAG;IACxBV,MAAM;IACNK;EACD,CAAC;EAED,OACC,IAAAM,MAAA,CAAAC,aAAA;IAAKX,SAAS,EAAGA;EAAW,GAC3B,IAAAU,MAAA,CAAAC,aAAA,EAACrB,4BAAA,CAAAsB,2BAA2B,CAACC,QAAQ;IAACC,KAAK,EAAGL;EAAkB,GAC/D,IAAAC,MAAA,CAAAC,aAAA,EAACpB,EAAA,CAAAwB,SAAS;IAAA,GACJZ,eAAe;IACpBa,EAAE,EAAGjB,MAAQ;IACbkB,KAAK,EAAGb,cAAgB;IACxBc,IAAI,EAAG;EAAW,GAEhBpB,OACQ,CAAC,EACVI,QAAQ,EACRL,OACmC,CAClC,CAAC;AAER;AAEA,SAASsB,2BAA2BA,CACnCvB,KAAuC,EACtC;EACD,MAAM;IAAEC,OAAO;IAAEC,OAAO;IAAEI,QAAQ;IAAEH,MAAM;IAAE,GAAGI;EAAgB,CAAC,GAAGP,KAAK;EAExE,OACC,IAAAc,MAAA,CAAAC,aAAA;IAAA,GAAUR,eAAe;IAAGa,EAAE,EAAGjB;EAAQ,GACxC,IAAAW,MAAA,CAAAC,aAAA,EAACrB,4BAAA,CAAAsB,2BAA2B,CAACC,QAAQ;IAACC,KAAK,EAAG;MAAEf;IAAO;EAAG,GACvDD,OAAO,EACPI,QAAQ,EACRL,OACmC,CAClC,CAAC;AAER;AAEA,SAASuB,oBAAoBA,CAAExB,KAAgC,EAAG;EACjE,MAAM;IACLyB,SAAS;IACTxB,OAAO,EAAEyB,WAAW;IACpBxB,OAAO,EAAEyB,WAAW;IACpBrB,QAAQ;IACRF,SAAS;IACT,GAAGG;EACJ,CAAC,GAAGP,KAAK;EAET,MAAMG,MAAM,GAAG,IAAAyB,sBAAa,EAC3BJ,oBAAoB,EACpB,mCAAmC,EACnCjB,eAAe,CAACa,EACjB,CAAC;EAED,MAAMS,0BAA0B,GAAGJ,SAAS,GACzCF,2BAA2B,GAC3BxB,2BAA2B;EAE9B,MAAME,OAAO,GAAGyB,WAAW,GAC1B,IAAAZ,MAAA,CAAAC,aAAA;IAAKX,SAAS,EAAC;EAAyD,GACrEsB,WACE,CAAC,GACHI,SAAS;EAEb,MAAM5B,OAAO,GACZ,IAAAY,MAAA,CAAAC,aAAA;IAAKX,SAAS,EAAG;EAA+C,GAC7DuB,WACE,CACL;EAED,OACC,IAAAb,MAAA,CAAAC,aAAA,EAACc,0BAA0B;IAAA,GACrBtB,eAAe;IACpBJ,MAAM,EAAGA,MAAQ;IACjBC,SAAS,EAAG,IAAA2B,aAAI,EAAE,mCAAmC,EAAE3B,SAAU,CAAG;IACpEH,OAAO,EAAGA,OAAS;IACnBC,OAAO,EAAGA;EAAS,GAEjBI,QACyB,CAAC;AAE/B;AAEAkB,oBAAoB,CAACQ,MAAM,GAAGA,kCAAM;AACpCR,oBAAoB,CAACS,WAAW,GAAGA,4CAAW;AAC9CT,oBAAoB,CAACU,YAAY,GAAGA,yCAAY;AAChDV,oBAAoB,CAACW,kBAAkB,GAAGA,+CAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAE9Cd,oBAAoB","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_circularOptionPickerContext","_v","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","_jsxRuntime","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","compositeStore","useCompositeStore","focusLoop","rtl","isRTL","compositeContext","jsx","jsxs","CircularOptionPickerContext","Provider","value","Composite","id","store","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","undefined","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"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/clipboard-button/index.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ClipboardButton;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 var _button = _interopRequireDefault(require("../button"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -62,11 +62,12 @@ function ClipboardButton({
     // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
     event.target.focus();
   };
-  return (0, _react.createElement)(_button.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
     ...buttonProps,
     className: classes,
     ref: ref,
-    onCopy: focusOnCopyEventTarget
-  }, children);
+    onCopy: focusOnCopyEventTarget,
+    children: children
+  });
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_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","clsx","focusOnCopyEventTarget","event","target","focus","_react","createElement","default"],"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":";;;;;;;;AAGA,IAAAA,KAAA,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,aAAI,EAAE,6BAA6B,EAAElB,SAAU,CAAC;;EAEhE;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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_compose","_deprecated","_button","_jsxRuntime","TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","deprecated","since","alternative","timeoutId","useRef","ref","useCopyToClipboard","current","clearTimeout","setTimeout","useEffect","classes","clsx","focusOnCopyEventTarget","event","target","focus","jsx","default"],"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":";;;;;;;AAGA,IAAAA,KAAA,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;AAA+B,IAAAK,WAAA,GAAAL,OAAA;AAf/B;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,aAAI,EAAE,6BAA6B,EAAElB,SAAU,CAAC;;EAEhE;EACA;EACA;EACA;EACA;EACA,MAAMmB,sBAAmD,GAAKC,KAAK,IAAM;IACxE;IACAA,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC,CAAC;EACrB,CAAC;EAED,oBACC,IAAAzB,WAAA,CAAA0B,GAAA,EAAC3B,OAAA,CAAA4B,OAAM;IAAA,GACDnB,WAAW;IAChBL,SAAS,EAAGiB,OAAS;IACrBN,GAAG,EAAGA,GAAK;IACXT,MAAM,EAAGiB,sBAAwB;IAAAlB,QAAA,EAE/BA;EAAQ,CACH,CAAC;AAEX","ignoreList":[]}

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _colorCell = _interopRequireDefault(require("../mobile/bottom-sheet/color-cell"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies
  */
@@ -18,7 +18,7 @@ function ColorControl({
   withColorIndicator,
   ...props
 }) {
-  return (0, _react.createElement)(_colorCell.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_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","_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,GAAAC,OAAA,CAAAF,OAAA,GAEcR,YAAY","ignoreList":[]}
+{"version":3,"names":["_colorCell","_interopRequireDefault","require","_jsxRuntime","ColorControl","label","onPress","color","withColorIndicator","props","jsx","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;AAA0D,IAAAC,WAAA,GAAAD,OAAA;AAH1D;AACA;AACA;;AAGA,SAASE,YAAYA,CAAE;EACtBC,KAAK;EACLC,OAAO;EACPC,KAAK;EACLC,kBAAkB;EAClB,GAAGC;AACJ,CAAC,EAAG;EACH,oBACC,IAAAN,WAAA,CAAAO,GAAA,EAACV,UAAA,CAAAW,OAAS;IACTN,KAAK,EAAGA,KAAO;IACfC,OAAO,EAAGA,OAAS;IACnBC,KAAK,EAAGA,KAAO;IACfC,kBAAkB,EAAGA,kBAAoB;IAAA,GACpCC;EAAK,CACV,CAAC;AAEJ;AAAC,IAAAG,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEcP,YAAY","ignoreList":[]}

package/build/color-indicator/index.js

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

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","_react","createElement","clsx","style","background","ref","ColorIndicator","exports","forwardRef","_default","default"],"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":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,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,aAAI,EAAE,2BAA2B,EAAEL,SAAU,CAAG;IAC5DM,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,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAAE,mBAAU,EAAEd,yBAA0B,CAAC;AAAC,IAAAe,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEvDJ,cAAc","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_jsxRuntime","UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","jsx","clsx","style","background","ref","ColorIndicator","exports","forwardRef","_default","default"],"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":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AAAgD,IAAAE,WAAA,GAAAF,OAAA;AAThD;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASG,yBAAyBA,CACjCC,KAAoE,EACpEC,YAA6C,EAC5C;EACD,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAE,GAAGC;EAAgB,CAAC,GAAGJ,KAAK;EAE3D,oBACC,IAAAF,WAAA,CAAAO,GAAA;IACCH,SAAS,EAAG,IAAAI,aAAI,EAAE,2BAA2B,EAAEJ,SAAU,CAAG;IAC5DK,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,GAAAC,OAAA,CAAAD,cAAA,GAAG,IAAAE,mBAAU,EAAEb,yBAA0B,CAAC;AAAC,IAAAc,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAEvDJ,cAAc","ignoreList":[]}

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

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _reactNative = require("react-native");
 var _icons = require("@wordpress/icons");
-var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
 var _style = _interopRequireDefault(require("./style.scss"));
+var _gradient = _interopRequireDefault(require("../mobile/gradient"));
 var _utils = require("../mobile/color-settings/utils");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -27,17 +27,18 @@ var _utils = require("../mobile/color-settings/utils");
 function SelectedIcon({
   opacity
 }) {
-  return (0, _react.createElement)(_reactNative.Animated.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
     style: [_style.default.selected, {
       opacity
-    }]
-  }, (0, _react.createElement)(_reactNative.View, {
-    style: [_style.default.outline, _style.default.selectedOutline]
-  }), (0, _react.createElement)(_icons.Icon, {
-    icon: _icons.check,
-    style: _style.default.icon,
-    size: 24
-  }));
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_style.default.outline, _style.default.selectedOutline]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+      icon: _icons.check,
+      style: _style.default.icon,
+      size: 24
+    })]
+  });
 }
 function ColorIndicator({
   color,
@@ -51,36 +52,38 @@ function ColorIndicator({
   } = _utils.colorsUtils;
   const outlineStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.outline, _style.default.outlineDark);
   if (isGradient(color)) {
-    return (0, _react.createElement)(_components.Gradient, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_gradient.default, {
       style: [_style.default.circleOption, style],
-      gradientValue: color
-    }, (0, _react.createElement)(_reactNative.View, {
-      style: outlineStyle
-    }), isSelected && (0, _react.createElement)(SelectedIcon, {
-      opacity: opacity
-    }));
+      gradientValue: color,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: outlineStyle
+      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedIcon, {
+        opacity: opacity
+      })]
+    });
   } else if (withCustomPicker) {
-    return (0, _react.createElement)(_reactNative.View, {
-      style: [_style.default.circleOption, style]
-    }, (0, _react.createElement)(_reactNative.View, {
-      style: outlineStyle
-    }), color.map(gradientValue => {
-      return (0, _react.createElement)(_components.Gradient, {
-        gradientValue: gradientValue,
-        style: [_style.default.circleOption, _style.default.absolute, style],
-        key: gradientValue
-      });
-    }), isSelected && (0, _react.createElement)(SelectedIcon, null));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [_style.default.circleOption, style],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: outlineStyle
+      }), color.map(gradientValue => {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_gradient.default, {
+          gradientValue: gradientValue,
+          style: [_style.default.circleOption, _style.default.absolute, style]
+        }, gradientValue);
+      }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedIcon, {})]
+    });
   }
-  return (0, _react.createElement)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [_style.default.circleOption, style, {
       backgroundColor: color
-    }]
-  }, (0, _react.createElement)(_reactNative.View, {
-    style: outlineStyle
-  }), isSelected && (0, _react.createElement)(SelectedIcon, {
-    opacity: opacity
-  }));
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: outlineStyle
+    }), isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectedIcon, {
+      opacity: opacity
+    })]
+  });
 }
 var _default = exports.default = ColorIndicator;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"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":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAIA,IAAAI,MAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAdA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASO,YAAYA,CAAE;EAAEC;AAAQ,CAAC,EAAG;EACpC,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAY,QAAQ,CAACC,IAAI;IAACC,KAAK,EAAG,CAAEC,cAAM,CAACC,QAAQ,EAAE;MAAEP;IAAQ,CAAC;EAAI,GACxD,IAAAC,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAa,IAAI;IAACC,KAAK,EAAG,CAAEC,cAAM,CAACE,OAAO,EAAEF,cAAM,CAACG,eAAe;EAAI,CAAE,CAAC,EAC7D,IAAAR,MAAA,CAAAC,aAAA,EAACT,MAAA,CAAAiB,IAAI;IAACC,IAAI,EAAGC,YAAO;IAACP,KAAK,EAAGC,cAAM,CAACK,IAAM;IAACE,IAAI,EAAG;EAAI,CAAE,CAC1C,CAAC;AAElB;AAEA,SAASC,cAAcA,CAAE;EACxBC,KAAK;EACLC,UAAU;EACVC,gBAAgB;EAChBZ,KAAK;EACLL;AACD,CAAC,EAAG;EACH,MAAM;IAAEkB;EAAW,CAAC,GAAGC,kBAAW;EAElC,MAAMC,YAAY,GAAG,IAAAC,qCAA4B,EAChDf,cAAM,CAACE,OAAO,EACdF,cAAM,CAACgB,WACR,CAAC;EAED,IAAKJ,UAAU,CAAEH,KAAM,CAAC,EAAG;IAC1B,OACC,IAAAd,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAA6B,QAAQ;MACRlB,KAAK,EAAG,CAAEC,cAAM,CAACkB,YAAY,EAAEnB,KAAK,CAAI;MACxCoB,aAAa,EAAGV;IAAO,GAEvB,IAAAd,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAa,IAAI;MAACC,KAAK,EAAGe;IAAc,CAAE,CAAC,EAC7BJ,UAAU,IAAI,IAAAf,MAAA,CAAAC,aAAA,EAACH,YAAY;MAACC,OAAO,EAAGA;IAAS,CAAE,CAC1C,CAAC;EAEb,CAAC,MAAM,IAAKiB,gBAAgB,EAAG;IAC9B,OACC,IAAAhB,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAa,IAAI;MAACC,KAAK,EAAG,CAAEC,cAAM,CAACkB,YAAY,EAAEnB,KAAK;IAAI,GAC7C,IAAAJ,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAa,IAAI;MAACC,KAAK,EAAGe;IAAc,CAAE,CAAC,EAC7BL,KAAK,CAACW,GAAG,CAAID,aAAa,IAAM;MACjC,OACC,IAAAxB,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAA6B,QAAQ;QACRE,aAAa,EAAGA,aAAe;QAC/BpB,KAAK,EAAG,CACPC,cAAM,CAACkB,YAAY,EACnBlB,cAAM,CAACqB,QAAQ,EACftB,KAAK,CACH;QACHuB,GAAG,EAAGH;MAAe,CACrB,CAAC;IAEJ,CAAE,CAAC,EACDT,UAAU,IAAI,IAAAf,MAAA,CAAAC,aAAA,EAACH,YAAY,MAAE,CAC1B,CAAC;EAET;EACA,OACC,IAAAE,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAa,IAAI;IACJC,KAAK,EAAG,CAAEC,cAAM,CAACkB,YAAY,EAAEnB,KAAK,EAAE;MAAEwB,eAAe,EAAEd;IAAM,CAAC;EAAI,GAEpE,IAAAd,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAa,IAAI;IAACC,KAAK,EAAGe;EAAc,CAAE,CAAC,EAC7BJ,UAAU,IAAI,IAAAf,MAAA,CAAAC,aAAA,EAACH,YAAY;IAACC,OAAO,EAAGA;EAAS,CAAE,CAC9C,CAAC;AAET;AAAC,IAAA8B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACclB,cAAc","ignoreList":[]}
+{"version":3,"names":["_reactNative","require","_icons","_compose","_style","_interopRequireDefault","_gradient","_utils","_jsxRuntime","SelectedIcon","opacity","jsxs","Animated","View","style","styles","selected","children","jsx","outline","selectedOutline","Icon","icon","check","size","ColorIndicator","color","isSelected","withCustomPicker","isGradient","colorsUtils","outlineStyle","usePreferredColorSchemeStyle","outlineDark","default","circleOption","gradientValue","map","absolute","backgroundColor","_default","exports"],"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":"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","ignoreList":[]}

package/build/color-palette/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ColorPalette = void 0;
 exports.CustomColorPickerDropdown = CustomColorPickerDropdown;
 exports.default = void 0;
-var _react = require("react");
 var _colord = require("colord");
 var _names = _interopRequireDefault(require("colord/plugins/names"));
 var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
@@ -23,6 +22,7 @@ var _truncate = require("../truncate");
 var _styles = require("./styles");
 var _dropdownContentWrapper = _interopRequireDefault(require("../dropdown/dropdown-content-wrapper"));
 var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -51,8 +51,7 @@ function SinglePalette({
     }, index) => {
       const colordColor = (0, _colord.colord)(color);
       const isSelected = value === color;
-      return (0, _react.createElement)(_circularOptionPicker.default.Option, {
-        key: `${color}-${index}`,
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.Option, {
         isSelected: isSelected,
         selectedIconProps: isSelected ? {
           fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
@@ -70,10 +69,10 @@ function SinglePalette({
         (0, _i18n.sprintf)((0, _i18n.__)('Color: %s'), name) :
         // translators: %s: color hex code e.g: "#f00".
         (0, _i18n.sprintf)((0, _i18n.__)('Color code: %s'), color)
-      });
+      }, `${color}-${index}`);
     });
   }, [colors, value, onChange, clearColor]);
-  return (0, _react.createElement)(_circularOptionPicker.default.OptionGroup, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.OptionGroup, {
     className: className,
     options: colorOptions,
     ...additionalProps
@@ -91,28 +90,30 @@ function MultiplePalettes({
   if (colors.length === 0) {
     return null;
   }
-  return (0, _react.createElement)(_vStack.VStack, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vStack.VStack, {
     spacing: 3,
-    className: className
-  }, colors.map(({
-    name,
-    colors: colorPalette
-  }, index) => {
-    const id = `${instanceId}-${index}`;
-    return (0, _react.createElement)(_vStack.VStack, {
-      spacing: 2,
-      key: index
-    }, (0, _react.createElement)(_styles.ColorHeading, {
-      id: id,
-      level: headingLevel
-    }, name), (0, _react.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__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
+        spacing: 2,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ColorHeading, {
+          id: id,
+          level: headingLevel,
+          children: name
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SinglePalette, {
+          clearColor: clearColor,
+          colors: colorPalette,
+          onChange: newColor => onChange(newColor, index),
+          value: value,
+          "aria-labelledby": id
+        })]
+      }, index);
+    })
+  });
 }
 function CustomColorPickerDropdown({
   isRenderedInSidebar,
@@ -137,7 +138,7 @@ function CustomColorPickerDropdown({
     }),
     ...receivedPopoverProps
   }), [isRenderedInSidebar, receivedPopoverProps]);
-  return (0, _react.createElement)(_dropdown.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.default, {
     contentClassName: "components-color-palette__custom-color-dropdown-content",
     popoverProps: popoverProps,
     ...props
@@ -166,13 +167,14 @@ 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, _react.createElement)(_dropdownContentWrapper.default, {
-    paddingSize: "none"
-  }, (0, _react.createElement)(_colorPicker.ColorPicker, {
-    color: normalizedColorValue,
-    onChange: color => onChange(color),
-    enableAlpha: enableAlpha
-  }));
+  const renderCustomColorPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownContentWrapper.default, {
+    paddingSize: "none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPicker.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.
@@ -185,9 +187,10 @@ function UnforwardedColorPalette(props, forwardedRef) {
     onChange,
     value
   };
-  const actions = !!clearable && (0, _react.createElement)(_circularOptionPicker.default.ButtonAction, {
-    onClick: clearColor
-  }, (0, _i18n.__)('Clear'));
+  const actions = !!clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
+    onClick: clearColor,
+    children: (0, _i18n.__)('Clear')
+  });
   let metaProps;
   if (asButtons) {
     metaProps = {
@@ -215,54 +218,59 @@ function UnforwardedColorPalette(props, forwardedRef) {
       };
     }
   }
-  return (0, _react.createElement)(_vStack.VStack, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
     spacing: 3,
     ref: forwardedRef,
-    ...additionalProps
-  }, !disableCustomColors && (0, _react.createElement)(CustomColorPickerDropdown, {
-    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
-    renderContent: renderCustomColorPicker,
-    renderToggle: ({
-      isOpen,
-      onToggle
-    }) => (0, _react.createElement)(_vStack.VStack, {
-      className: "components-color-palette__custom-color-wrapper",
-      spacing: 0
-    }, (0, _react.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"
-    }), (0, _react.createElement)(_vStack.VStack, {
-      className: "components-color-palette__custom-color-text-wrapper",
-      spacing: 0.5
-    }, (0, _react.createElement)(_truncate.Truncate, {
-      className: "components-color-palette__custom-color-name"
-    }, value ? buttonLabelName : (0, _i18n.__)('No color selected')), (0, _react.createElement)(_truncate.Truncate, {
-      className: (0, _clsx.default)('components-color-palette__custom-color-value', {
-        'components-color-palette__custom-color-value--is-hex': isHex
+    ...additionalProps,
+    children: [!disableCustomColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomColorPickerDropdown, {
+      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
+      renderContent: renderCustomColorPicker,
+      renderToggle: ({
+        isOpen,
+        onToggle
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
+        className: "components-color-palette__custom-color-wrapper",
+        spacing: 0,
+        children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
+          className: "components-color-palette__custom-color-text-wrapper",
+          spacing: 0.5,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_truncate.Truncate, {
+            className: "components-color-palette__custom-color-name",
+            children: value ? buttonLabelName : (0, _i18n.__)('No color selected')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncate.Truncate, {
+            className: (0, _clsx.default)('components-color-palette__custom-color-value', {
+              'components-color-palette__custom-color-value--is-hex': isHex
+            }),
+            children: displayValue
+          })]
+        })]
       })
-    }, displayValue)))
-  }), (0, _react.createElement)(_circularOptionPicker.default, {
-    ...metaProps,
-    actions: actions,
-    options: hasMultipleColorOrigins ? (0, _react.createElement)(MultiplePalettes, {
-      ...paletteCommonProps,
-      headingLevel: headingLevel,
-      colors: colors,
-      value: value
-    }) : (0, _react.createElement)(SinglePalette, {
-      ...paletteCommonProps,
-      colors: colors,
-      value: value
-    })
-  }));
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default, {
+      ...metaProps,
+      actions: actions,
+      options: hasMultipleColorOrigins ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MultiplePalettes, {
+        ...paletteCommonProps,
+        headingLevel: headingLevel,
+        colors: colors,
+        value: value
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(SinglePalette, {
+        ...paletteCommonProps,
+        colors: colors,
+        value: value
+      })
+    })]
+  });
 }
 
 /**