@wordpress/components 27.6.0 → 28.0.0

package/build-module/checkbox-control/index.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -16,6 +15,8 @@ import { Icon, check, reset } from '@wordpress/icons';
  */
 import BaseControl from '../base-control';
 import { HStack } from '../h-stack';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Checkboxes allow the user to select one or more items from a set.
  *
@@ -72,42 +73,47 @@ export function CheckboxControl(props) {
   }, [checked, indeterminate]);
   const id = useInstanceId(CheckboxControl, 'inspector-checkbox-control', idProp);
   const onChangeValue = event => onChange(event.target.checked);
-  return createElement(BaseControl, {
+  return /*#__PURE__*/_jsx(BaseControl, {
     __nextHasNoMarginBottom: __nextHasNoMarginBottom,
     label: heading,
     id: id,
-    help: help && createElement("span", {
-      className: "components-checkbox-control__help"
-    }, help),
-    className: clsx('components-checkbox-control', className)
-  }, createElement(HStack, {
-    spacing: 0,
-    justify: "start",
-    alignment: "top"
-  }, createElement("span", {
-    className: "components-checkbox-control__input-container"
-  }, createElement("input", {
-    ref: ref,
-    id: id,
-    className: "components-checkbox-control__input",
-    type: "checkbox",
-    value: "1",
-    onChange: onChangeValue,
-    checked: checked,
-    "aria-describedby": !!help ? id + '__help' : undefined,
-    ...additionalProps
-  }), showIndeterminateIcon ? createElement(Icon, {
-    icon: reset,
-    className: "components-checkbox-control__indeterminate",
-    role: "presentation"
-  }) : null, showCheckedIcon ? createElement(Icon, {
-    icon: check,
-    className: "components-checkbox-control__checked",
-    role: "presentation"
-  }) : null), label && createElement("label", {
-    className: "components-checkbox-control__label",
-    htmlFor: id
-  }, label)));
+    help: help && /*#__PURE__*/_jsx("span", {
+      className: "components-checkbox-control__help",
+      children: help
+    }),
+    className: clsx('components-checkbox-control', className),
+    children: /*#__PURE__*/_jsxs(HStack, {
+      spacing: 0,
+      justify: "start",
+      alignment: "top",
+      children: [/*#__PURE__*/_jsxs("span", {
+        className: "components-checkbox-control__input-container",
+        children: [/*#__PURE__*/_jsx("input", {
+          ref: ref,
+          id: id,
+          className: "components-checkbox-control__input",
+          type: "checkbox",
+          value: "1",
+          onChange: onChangeValue,
+          checked: checked,
+          "aria-describedby": !!help ? id + '__help' : undefined,
+          ...additionalProps
+        }), showIndeterminateIcon ? /*#__PURE__*/_jsx(Icon, {
+          icon: reset,
+          className: "components-checkbox-control__indeterminate",
+          role: "presentation"
+        }) : null, showCheckedIcon ? /*#__PURE__*/_jsx(Icon, {
+          icon: check,
+          className: "components-checkbox-control__checked",
+          role: "presentation"
+        }) : null]
+      }), label && /*#__PURE__*/_jsx("label", {
+        className: "components-checkbox-control__label",
+        htmlFor: id,
+        children: label
+      })]
+    })
+  });
 }
 export default CheckboxControl;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","HStack","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","onChangeValue","event","target","createElement","spacing","justify","alignment","type","value","undefined","icon","role","htmlFor"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelp && (\n\t\t\t\t\t<span className=\"components-checkbox-control__help\">\n\t\t\t\t\t\t{ help }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ clsx( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<HStack spacing={ 0 } justify=\"start\" alignment=\"top\">\n\t\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t/>\n\t\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t</span>\n\t\t\t\t{ label && (\n\t\t\t\t\t<label\n\t\t\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</label>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","HStack","jsx","_jsx","jsxs","_jsxs","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","onChangeValue","event","target","children","spacing","justify","alignment","type","value","undefined","icon","role","htmlFor"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport { HStack } from '../h-stack';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={\n\t\t\t\thelp && (\n\t\t\t\t\t<span className=\"components-checkbox-control__help\">\n\t\t\t\t\t\t{ help }\n\t\t\t\t\t</span>\n\t\t\t\t)\n\t\t\t}\n\t\t\tclassName={ clsx( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<HStack spacing={ 0 } justify=\"start\" alignment=\"top\">\n\t\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={ ref }\n\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\t/>\n\t\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null }\n\t\t\t\t</span>\n\t\t\t\t{ label && (\n\t\t\t\t\t<label\n\t\t\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\t\t\thtmlFor={ id }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</label>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -9,24 +8,26 @@ import clsx from 'clsx';
  */
 import Button from '../button';
 import Dropdown from '../dropdown';
+import { jsx as _jsx } from "react/jsx-runtime";
 export function DropdownLinkAction({
   buttonProps,
   className,
   dropdownProps,
   linkText
 }) {
-  return createElement(Dropdown, {
+  return /*#__PURE__*/_jsx(Dropdown, {
     className: clsx('components-circular-option-picker__dropdown-link-action', className),
     renderToggle: ({
       isOpen,
       onToggle
-    }) => createElement(Button, {
+    }) => /*#__PURE__*/_jsx(Button, {
       "aria-expanded": isOpen,
       "aria-haspopup": "true",
       onClick: onToggle,
       variant: "link",
-      ...buttonProps
-    }, linkText),
+      ...buttonProps,
+      children: linkText
+    }),
     ...dropdownProps
   });
 }
@@ -35,10 +36,11 @@ export function ButtonAction({
   children,
   ...additionalProps
 }) {
-  return createElement(Button, {
+  return /*#__PURE__*/_jsx(Button, {
     className: clsx('components-circular-option-picker__clear', className),
     variant: "tertiary",
-    ...additionalProps
-  }, children);
+    ...additionalProps,
+    children: children
+  });
 }
 //# sourceMappingURL=circular-option-picker-actions.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","Button","Dropdown","DropdownLinkAction","buttonProps","className","dropdownProps","linkText","createElement","renderToggle","isOpen","onToggle","onClick","variant","ButtonAction","children","additionalProps"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-actions.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport type { DropdownLinkActionProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\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,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,QAAQ,MAAM,aAAa;AAKlC,OAAO,SAASC,kBAAkBA,CAAE;EACnCC,WAAW;EACXC,SAAS;EACTC,aAAa;EACbC;AACwB,CAAC,EAAG;EAC5B,OACCC,aAAA,CAACN,QAAQ;IACRG,SAAS,EAAGL,IAAI,CACf,yDAAyD,EACzDK,SACD,CAAG;IACHI,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,KACpCH,aAAA,CAACP,MAAM;MACN,iBAAgBS,MAAQ;MACxB,iBAAc,MAAM;MACpBE,OAAO,EAAGD,QAAU;MACpBE,OAAO,EAAC,MAAM;MAAA,GACTT;IAAW,GAEdG,QACK,CACN;IAAA,GACED;EAAa,CAClB,CAAC;AAEJ;AAEA,OAAO,SAASQ,YAAYA,CAAE;EAC7BT,SAAS;EACTU,QAAQ;EACR,GAAGC;AAC6D,CAAC,EAAG;EACpE,OACCR,aAAA,CAACP,MAAM;IACNI,SAAS,EAAGL,IAAI,CACf,0CAA0C,EAC1CK,SACD,CAAG;IACHQ,OAAO,EAAC,UAAU;IAAA,GACbG;EAAe,GAElBD,QACK,CAAC;AAEX","ignoreList":[]}
+{"version":3,"names":["clsx","Button","Dropdown","jsx","_jsx","DropdownLinkAction","buttonProps","className","dropdownProps","linkText","renderToggle","isOpen","onToggle","onClick","variant","children","ButtonAction","additionalProps"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-actions.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport type { DropdownLinkActionProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__dropdown-link-action',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t<Button\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t>\n\t\t\t\t\t{ linkText }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t\t{ ...dropdownProps }\n\t\t/>\n\t);\n}\n\nexport function ButtonAction( {\n\tclassName,\n\tchildren,\n\t...additionalProps\n}: WordPressComponentProps< ButtonAsButtonProps, 'button', false > ) {\n\treturn (\n\t\t<Button\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__clear',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tvariant=\"tertiary\"\n\t\t\t{ ...additionalProps }\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,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,QAAQ,MAAM,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKnC,OAAO,SAASC,kBAAkBA,CAAE;EACnCC,WAAW;EACXC,SAAS;EACTC,aAAa;EACbC;AACwB,CAAC,EAAG;EAC5B,oBACCL,IAAA,CAACF,QAAQ;IACRK,SAAS,EAAGP,IAAI,CACf,yDAAyD,EACzDO,SACD,CAAG;IACHG,YAAY,EAAGA,CAAE;MAAEC,MAAM;MAAEC;IAAS,CAAC,kBACpCR,IAAA,CAACH,MAAM;MACN,iBAAgBU,MAAQ;MACxB,iBAAc,MAAM;MACpBE,OAAO,EAAGD,QAAU;MACpBE,OAAO,EAAC,MAAM;MAAA,GACTR,WAAW;MAAAS,QAAA,EAEdN;IAAQ,CACH,CACN;IAAA,GACED;EAAa,CAClB,CAAC;AAEJ;AAEA,OAAO,SAASQ,YAAYA,CAAE;EAC7BT,SAAS;EACTQ,QAAQ;EACR,GAAGE;AAC6D,CAAC,EAAG;EACpE,oBACCb,IAAA,CAACH,MAAM;IACNM,SAAS,EAAGP,IAAI,CACf,0CAA0C,EAC1CO,SACD,CAAG;IACHO,OAAO,EAAC,UAAU;IAAA,GACbG,eAAe;IAAAF,QAAA,EAElBA;EAAQ,CACH,CAAC;AAEX","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -7,17 +6,18 @@ import clsx from 'clsx';
 /**
  * Internal dependencies
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 export function OptionGroup({
   className,
   options,
   ...additionalProps
 }) {
   const role = 'aria-label' in additionalProps || 'aria-labelledby' in additionalProps ? 'group' : undefined;
-  return createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     ...additionalProps,
     role: role,
-    className: clsx('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className)
-  }, options);
+    className: clsx('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className),
+    children: options
+  });
 }
 //# sourceMappingURL=circular-option-picker-option-group.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","OptionGroup","className","options","additionalProps","role","undefined","createElement"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport type { OptionGroupProps } from './types';\n\nexport function OptionGroup( {\n\tclassName,\n\toptions,\n\t...additionalProps\n}: OptionGroupProps ) {\n\tconst role =\n\t\t'aria-label' in additionalProps || 'aria-labelledby' in additionalProps\n\t\t\t? 'group'\n\t\t\t: undefined;\n\n\treturn (\n\t\t<div\n\t\t\t{ ...additionalProps }\n\t\t\trole={ role }\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__option-group',\n\t\t\t\t'components-circular-option-picker__swatches',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ options }\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;;AAGA,OAAO,SAASC,WAAWA,CAAE;EAC5BC,SAAS;EACTC,OAAO;EACP,GAAGC;AACc,CAAC,EAAG;EACrB,MAAMC,IAAI,GACT,YAAY,IAAID,eAAe,IAAI,iBAAiB,IAAIA,eAAe,GACpE,OAAO,GACPE,SAAS;EAEb,OACCC,aAAA;IAAA,GACMH,eAAe;IACpBC,IAAI,EAAGA,IAAM;IACbH,SAAS,EAAGF,IAAI,CACf,iDAAiD,EACjD,6CAA6C,EAC7CE,SACD;EAAG,GAEDC,OACE,CAAC;AAER","ignoreList":[]}
+{"version":3,"names":["clsx","jsx","_jsx","OptionGroup","className","options","additionalProps","role","undefined","children"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option-group.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport type { OptionGroupProps } from './types';\n\nexport function OptionGroup( {\n\tclassName,\n\toptions,\n\t...additionalProps\n}: OptionGroupProps ) {\n\tconst role =\n\t\t'aria-label' in additionalProps || 'aria-labelledby' in additionalProps\n\t\t\t? 'group'\n\t\t\t: undefined;\n\n\treturn (\n\t\t<div\n\t\t\t{ ...additionalProps }\n\t\t\trole={ role }\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-circular-option-picker__option-group',\n\t\t\t\t'components-circular-option-picker__swatches',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t{ options }\n\t\t</div>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAKA,OAAO,SAASC,WAAWA,CAAE;EAC5BC,SAAS;EACTC,OAAO;EACP,GAAGC;AACc,CAAC,EAAG;EACrB,MAAMC,IAAI,GACT,YAAY,IAAID,eAAe,IAAI,iBAAiB,IAAIA,eAAe,GACpE,OAAO,GACPE,SAAS;EAEb,oBACCN,IAAA;IAAA,GACMI,eAAe;IACpBC,IAAI,EAAGA,IAAM;IACbH,SAAS,EAAGJ,IAAI,CACf,iDAAiD,EACjD,6CAA6C,EAC7CI,SACD,CAAG;IAAAK,QAAA,EAEDJ;EAAO,CACL,CAAC;AAER","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -17,12 +16,14 @@ import { CircularOptionPickerContext } from './circular-option-picker-context';
 import Button from '../button';
 import { CompositeItem } from '../composite/v2';
 import Tooltip from '../tooltip';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function UnforwardedOptionAsButton(props, forwardedRef) {
   const {
     isPressed,
     ...additionalProps
   } = props;
-  return createElement(Button, {
+  return /*#__PURE__*/_jsx(Button, {
     ...additionalProps,
     "aria-pressed": isPressed,
     ref: forwardedRef
@@ -40,8 +41,8 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
   if (isSelected && !activeId) {
     compositeStore.setActiveId(id);
   }
-  return createElement(CompositeItem, {
-    render: createElement(Button, {
+  return /*#__PURE__*/_jsx(CompositeItem, {
+    render: /*#__PURE__*/_jsx(Button, {
       ...additionalProps,
       role: "option",
       "aria-selected": !!isSelected,
@@ -69,21 +70,23 @@ export function Option({
     className: 'components-circular-option-picker__option',
     ...additionalProps
   };
-  const optionControl = compositeStore ? createElement(OptionAsOption, {
+  const optionControl = compositeStore ? /*#__PURE__*/_jsx(OptionAsOption, {
     ...commonProps,
     compositeStore: compositeStore,
     isSelected: isSelected
-  }) : createElement(OptionAsButton, {
+  }) : /*#__PURE__*/_jsx(OptionAsButton, {
     ...commonProps,
     isPressed: isSelected
   });
-  return createElement("div", {
-    className: clsx(className, 'components-circular-option-picker__option-wrapper')
-  }, tooltipText ? createElement(Tooltip, {
-    text: tooltipText
-  }, optionControl) : optionControl, isSelected && createElement(Icon, {
-    icon: check,
-    ...selectedIconProps
-  }));
+  return /*#__PURE__*/_jsxs("div", {
+    className: clsx(className, 'components-circular-option-picker__option-wrapper'),
+    children: [tooltipText ? /*#__PURE__*/_jsx(Tooltip, {
+      text: tooltipText,
+      children: optionControl
+    }) : optionControl, isSelected && /*#__PURE__*/_jsx(Icon, {
+      icon: check,
+      ...selectedIconProps
+    })]
+  });
 }
 //# sourceMappingURL=circular-option-picker-option.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","useInstanceId","forwardRef","useContext","Icon","check","CircularOptionPickerContext","Button","CompositeItem","Tooltip","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","createElement","ref","OptionAsButton","UnforwardedOptionAsOption","id","isSelected","compositeStore","activeId","useState","setActiveId","render","role","store","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","commonProps","optionControl","text","icon"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport type { OptionProps, CircularOptionPickerCompositeStore } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcompositeStore: CircularOptionPickerCompositeStore;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, compositeStore, ...additionalProps } = props;\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tif ( isSelected && ! activeId ) {\n\t\tcompositeStore.setActiveId( id );\n\t}\n\n\treturn (\n\t\t<CompositeItem\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tstore={ compositeStore }\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, compositeStore } = useContext(\n\t\tCircularOptionPickerContext\n\t);\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = compositeStore ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcompositeStore={ compositeStore }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,UAAU,QAAQ,oBAAoB;AAC3D,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;;AAE9C;AACA;AACA;AACA,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,OAAOC,OAAO,MAAM,YAAY;AAGhC,SAASC,yBAAyBA,CACjCC,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAgB,CAAC,GAAGH,KAAK;EAC/C,OACCI,aAAA,CAACR,MAAM;IAAA,GACDO,eAAe;IACpB,gBAAeD,SAAW;IAC1BG,GAAG,EAAGJ;EAAc,CACpB,CAAC;AAEJ;AAEA,MAAMK,cAAc,GAAGf,UAAU,CAAEQ,yBAA0B,CAAC;AAE9D,SAASQ,yBAAyBA,CACjCP,KAKC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEO,EAAE;IAAEC,UAAU;IAAEC,cAAc;IAAE,GAAGP;EAAgB,CAAC,GAAGH,KAAK;EACpE,MAAMW,QAAQ,GAAGD,cAAc,CAACE,QAAQ,CAAE,UAAW,CAAC;EAEtD,IAAKH,UAAU,IAAI,CAAEE,QAAQ,EAAG;IAC/BD,cAAc,CAACG,WAAW,CAAEL,EAAG,CAAC;EACjC;EAEA,OACCJ,aAAA,CAACP,aAAa;IACbiB,MAAM,EACLV,aAAA,CAACR,MAAM;MAAA,GACDO,eAAe;MACpBY,IAAI,EAAC,QAAQ;MACb,iBAAgB,CAAC,CAAEN,UAAY;MAC/BJ,GAAG,EAAGJ;IAAc,CACpB,CACD;IACDe,KAAK,EAAGN,cAAgB;IACxBF,EAAE,EAAGA;EAAI,CACT,CAAC;AAEJ;AAEA,MAAMS,cAAc,GAAG1B,UAAU,CAAEgB,yBAA0B,CAAC;AAE9D,OAAO,SAASW,MAAMA,CAAE;EACvBC,SAAS;EACTV,UAAU;EACVW,iBAAiB,GAAG,CAAC,CAAC;EACtBC,WAAW;EACX,GAAGlB;AACS,CAAC,EAAG;EAChB,MAAM;IAAEmB,MAAM;IAAEZ;EAAe,CAAC,GAAGlB,UAAU,CAC5CG,2BACD,CAAC;EACD,MAAMa,EAAE,GAAGlB,aAAa,CACvB4B,MAAM,EACNI,MAAM,IAAI,2CACX,CAAC;EAED,MAAMC,WAAW,GAAG;IACnBf,EAAE;IACFW,SAAS,EAAE,2CAA2C;IACtD,GAAGhB;EACJ,CAAC;EAED,MAAMqB,aAAa,GAAGd,cAAc,GACnCN,aAAA,CAACa,cAAc;IAAA,GACTM,WAAW;IAChBb,cAAc,EAAGA,cAAgB;IACjCD,UAAU,EAAGA;EAAY,CACzB,CAAC,GAEFL,aAAA,CAACE,cAAc;IAAA,GAAMiB,WAAW;IAAGrB,SAAS,EAAGO;EAAY,CAAE,CAC7D;EAED,OACCL,aAAA;IACCe,SAAS,EAAG9B,IAAI,CACf8B,SAAS,EACT,mDACD;EAAG,GAEDE,WAAW,GACZjB,aAAA,CAACN,OAAO;IAAC2B,IAAI,EAAGJ;EAAa,GAAGG,aAAwB,CAAC,GAEzDA,aACA,EACCf,UAAU,IAAIL,aAAA,CAACX,IAAI;IAACiC,IAAI,EAAGhC,KAAO;IAAA,GAAM0B;EAAiB,CAAI,CAC3D,CAAC;AAER","ignoreList":[]}
+{"version":3,"names":["clsx","useInstanceId","forwardRef","useContext","Icon","check","CircularOptionPickerContext","Button","CompositeItem","Tooltip","jsx","_jsx","jsxs","_jsxs","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","ref","OptionAsButton","UnforwardedOptionAsOption","id","isSelected","compositeStore","activeId","useState","setActiveId","render","role","store","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","commonProps","optionControl","children","text","icon"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker-option.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { forwardRef, useContext } from '@wordpress/element';\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport Button from '../button';\nimport { CompositeItem } from '../composite/v2';\nimport Tooltip from '../tooltip';\nimport type { OptionProps, CircularOptionPickerCompositeStore } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, ...additionalProps } = props;\n\treturn (\n\t\t<Button\n\t\t\t{ ...additionalProps }\n\t\t\taria-pressed={ isPressed }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\nconst OptionAsButton = forwardRef( UnforwardedOptionAsButton );\n\nfunction UnforwardedOptionAsOption(\n\tprops: {\n\t\tid: string;\n\t\tclassName?: string;\n\t\tisSelected?: boolean;\n\t\tcompositeStore: CircularOptionPickerCompositeStore;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, compositeStore, ...additionalProps } = props;\n\tconst activeId = compositeStore.useState( 'activeId' );\n\n\tif ( isSelected && ! activeId ) {\n\t\tcompositeStore.setActiveId( id );\n\t}\n\n\treturn (\n\t\t<CompositeItem\n\t\t\trender={\n\t\t\t\t<Button\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t\trole=\"option\"\n\t\t\t\t\taria-selected={ !! isSelected }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t}\n\t\t\tstore={ compositeStore }\n\t\t\tid={ id }\n\t\t/>\n\t);\n}\n\nconst OptionAsOption = forwardRef( UnforwardedOptionAsOption );\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps = {},\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst { baseId, compositeStore } = useContext(\n\t\tCircularOptionPickerContext\n\t);\n\tconst id = useInstanceId(\n\t\tOption,\n\t\tbaseId || 'components-circular-option-picker__option'\n\t);\n\n\tconst commonProps = {\n\t\tid,\n\t\tclassName: 'components-circular-option-picker__option',\n\t\t...additionalProps,\n\t};\n\n\tconst optionControl = compositeStore ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tcompositeStore={ compositeStore }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton { ...commonProps } isPressed={ isSelected } />\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'components-circular-option-picker__option-wrapper'\n\t\t\t) }\n\t\t>\n\t\t\t{ tooltipText ? (\n\t\t\t\t<Tooltip text={ tooltipText }>{ optionControl }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionControl\n\t\t\t) }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,aAAa,QAAQ,oBAAoB;AAClD,SAASC,UAAU,EAAEC,UAAU,QAAQ,oBAAoB;AAC3D,SAASC,IAAI,EAAEC,KAAK,QAAQ,kBAAkB;;AAE9C;AACA;AACA;AACA,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,OAAOC,MAAM,MAAM,WAAW;AAC9B,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,OAAOC,OAAO,MAAM,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGjC,SAASC,yBAAyBA,CACjCC,KAIC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEC,SAAS;IAAE,GAAGC;EAAgB,CAAC,GAAGH,KAAK;EAC/C,oBACCJ,IAAA,CAACJ,MAAM;IAAA,GACDW,eAAe;IACpB,gBAAeD,SAAW;IAC1BE,GAAG,EAAGH;EAAc,CACpB,CAAC;AAEJ;AAEA,MAAMI,cAAc,GAAGlB,UAAU,CAAEY,yBAA0B,CAAC;AAE9D,SAASO,yBAAyBA,CACjCN,KAKC,EACDC,YAAiC,EAChC;EACD,MAAM;IAAEM,EAAE;IAAEC,UAAU;IAAEC,cAAc;IAAE,GAAGN;EAAgB,CAAC,GAAGH,KAAK;EACpE,MAAMU,QAAQ,GAAGD,cAAc,CAACE,QAAQ,CAAE,UAAW,CAAC;EAEtD,IAAKH,UAAU,IAAI,CAAEE,QAAQ,EAAG;IAC/BD,cAAc,CAACG,WAAW,CAAEL,EAAG,CAAC;EACjC;EAEA,oBACCX,IAAA,CAACH,aAAa;IACboB,MAAM,eACLjB,IAAA,CAACJ,MAAM;MAAA,GACDW,eAAe;MACpBW,IAAI,EAAC,QAAQ;MACb,iBAAgB,CAAC,CAAEN,UAAY;MAC/BJ,GAAG,EAAGH;IAAc,CACpB,CACD;IACDc,KAAK,EAAGN,cAAgB;IACxBF,EAAE,EAAGA;EAAI,CACT,CAAC;AAEJ;AAEA,MAAMS,cAAc,GAAG7B,UAAU,CAAEmB,yBAA0B,CAAC;AAE9D,OAAO,SAASW,MAAMA,CAAE;EACvBC,SAAS;EACTV,UAAU;EACVW,iBAAiB,GAAG,CAAC,CAAC;EACtBC,WAAW;EACX,GAAGjB;AACS,CAAC,EAAG;EAChB,MAAM;IAAEkB,MAAM;IAAEZ;EAAe,CAAC,GAAGrB,UAAU,CAC5CG,2BACD,CAAC;EACD,MAAMgB,EAAE,GAAGrB,aAAa,CACvB+B,MAAM,EACNI,MAAM,IAAI,2CACX,CAAC;EAED,MAAMC,WAAW,GAAG;IACnBf,EAAE;IACFW,SAAS,EAAE,2CAA2C;IACtD,GAAGf;EACJ,CAAC;EAED,MAAMoB,aAAa,GAAGd,cAAc,gBACnCb,IAAA,CAACoB,cAAc;IAAA,GACTM,WAAW;IAChBb,cAAc,EAAGA,cAAgB;IACjCD,UAAU,EAAGA;EAAY,CACzB,CAAC,gBAEFZ,IAAA,CAACS,cAAc;IAAA,GAAMiB,WAAW;IAAGpB,SAAS,EAAGM;EAAY,CAAE,CAC7D;EAED,oBACCV,KAAA;IACCoB,SAAS,EAAGjC,IAAI,CACfiC,SAAS,EACT,mDACD,CAAG;IAAAM,QAAA,GAEDJ,WAAW,gBACZxB,IAAA,CAACF,OAAO;MAAC+B,IAAI,EAAGL,WAAa;MAAAI,QAAA,EAAGD;IAAa,CAAW,CAAC,GAEzDA,aACA,EACCf,UAAU,iBAAIZ,IAAA,CAACP,IAAI;MAACqC,IAAI,EAAGpC,KAAO;MAAA,GAAM6B;IAAiB,CAAI,CAAC;EAAA,CAC5D,CAAC;AAER","ignoreList":[]}

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":[]}