@wordpress/components 25.0.0 → 25.1.1

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

@@ -12,8 +12,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _icons = require("@wordpress/icons");
@@ -35,61 +33,60 @@ var _tooltip = _interopRequireDefault(require("../tooltip"));
 /**
  * Internal dependencies
  */
-function Option(_ref) {
-  let {
-    className,
-    isSelected,
-    selectedIconProps,
-    tooltipText,
-    ...additionalProps
-  } = _ref;
-  const optionButton = (0, _element.createElement)(_button.default, (0, _extends2.default)({
+function Option({
+  className,
+  isSelected,
+  selectedIconProps,
+  tooltipText,
+  ...additionalProps
+}) {
+  const optionButton = (0, _element.createElement)(_button.default, {
     isPressed: isSelected,
-    className: "components-circular-option-picker__option"
-  }, additionalProps));
+    className: "components-circular-option-picker__option",
+    ...additionalProps
+  });
   return (0, _element.createElement)("div", {
     className: (0, _classnames.default)(className, 'components-circular-option-picker__option-wrapper')
   }, tooltipText ? (0, _element.createElement)(_tooltip.default, {
     text: tooltipText
-  }, optionButton) : optionButton, isSelected && (0, _element.createElement)(_icons.Icon, (0, _extends2.default)({
-    icon: _icons.check
-  }, selectedIconProps ? selectedIconProps : {})));
+  }, optionButton) : optionButton, isSelected && (0, _element.createElement)(_icons.Icon, {
+    icon: _icons.check,
+    ...(selectedIconProps ? selectedIconProps : {})
+  }));
 }
 
-function DropdownLinkAction(_ref2) {
-  let {
-    buttonProps,
-    className,
-    dropdownProps,
-    linkText
-  } = _ref2;
-  return (0, _element.createElement)(_dropdown.default, (0, _extends2.default)({
+function DropdownLinkAction({
+  buttonProps,
+  className,
+  dropdownProps,
+  linkText
+}) {
+  return (0, _element.createElement)(_dropdown.default, {
     className: (0, _classnames.default)('components-circular-option-picker__dropdown-link-action', className),
-    renderToggle: _ref3 => {
-      let {
-        isOpen,
-        onToggle
-      } = _ref3;
-      return (0, _element.createElement)(_button.default, (0, _extends2.default)({
-        "aria-expanded": isOpen,
-        "aria-haspopup": "true",
-        onClick: onToggle,
-        variant: "link"
-      }, buttonProps), linkText);
-    }
-  }, dropdownProps));
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => (0, _element.createElement)(_button.default, {
+      "aria-expanded": isOpen,
+      "aria-haspopup": "true",
+      onClick: onToggle,
+      variant: "link",
+      ...buttonProps
+    }, linkText),
+    ...dropdownProps
+  });
 }
 
-function ButtonAction(_ref4) {
-  let {
-    className,
-    children,
-    ...additionalProps
-  } = _ref4;
-  return (0, _element.createElement)(_button.default, (0, _extends2.default)({
+function ButtonAction({
+  className,
+  children,
+  ...additionalProps
+}) {
+  return (0, _element.createElement)(_button.default, {
     className: (0, _classnames.default)('components-circular-option-picker__clear', className),
-    variant: "tertiary"
-  }, additionalProps), children);
+    variant: "tertiary",
+    ...additionalProps
+  }, children);
 }
 /**
  *`CircularOptionPicker` is a component that displays a set of options as circular buttons.

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.tsx"],"names":["Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","check","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","props","actions","options"],"mappings":";;;;;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAYO,SAASA,MAAT,OAMU;AAAA,MANO;AACvBC,IAAAA,SADuB;AAEvBC,IAAAA,UAFuB;AAGvBC,IAAAA,iBAHuB;AAIvBC,IAAAA,WAJuB;AAKvB,OAAGC;AALoB,GAMP;AAChB,QAAMC,YAAY,GACjB,4BAAC,eAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC;AAFX,KAGMG,eAHN,EADD;AAOA,SACC;AACC,IAAA,SAAS,EAAG,yBACXJ,SADW,EAEX,mDAFW;AADb,KAMGG,WAAW,GACZ,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGK;AADR,KAEQJ,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD,EAZF,CADD;AAoBA;;AAEM,SAASK,kBAAT,QAKsB;AAAA,MALO;AACnCC,IAAAA,WADmC;AAEnCR,IAAAA,SAFmC;AAGnCS,IAAAA,aAHmC;AAInCC,IAAAA;AAJmC,GAKP;AAC5B,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAG,yBACX,yDADW,EAEXV,SAFW,CADb;AAKC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEW,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,4BAAC,eAAD;AACC,yBAAgBD,MADjB;AAEC,yBAAc,MAFf;AAGC,QAAA,OAAO,EAAGC,QAHX;AAIC,QAAA,OAAO,EAAC;AAJT,SAKMJ,WALN,GAOGE,QAPH,CADc;AAAA;AALhB,KAgBMD,aAhBN,EADD;AAoBA;;AAEM,SAASI,YAAT,QAI8D;AAAA,MAJvC;AAC7Bb,IAAAA,SAD6B;AAE7Bc,IAAAA,QAF6B;AAG7B,OAAGV;AAH0B,GAIuC;AACpE,SACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAG,yBACX,0CADW,EAEXJ,SAFW,CADb;AAKC,IAAA,OAAO,EAAC;AALT,KAMMI,eANN,GAQGU,QARH,CADD;AAYA;AAED;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,SAASC,oBAAT,CAA+BC,KAA/B,EAAkE;AACjE,QAAM;AAAEC,IAAAA,OAAF;AAAWjB,IAAAA,SAAX;AAAsBkB,IAAAA,OAAtB;AAA+BJ,IAAAA;AAA/B,MAA4CE,KAAlD;AACA,SACC;AACC,IAAA,SAAS,EAAG,yBACX,mCADW,EAEXhB,SAFW;AADb,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGkB,OADH,CAND,EASGJ,QATH,EAUGG,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;;AAEDF,oBAAoB,CAAChB,MAArB,GAA8BA,MAA9B;AACAgB,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C;eAEeQ,oB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\nimport type {\n\tCircularOptionPickerProps,\n\tDropdownLinkActionProps,\n\tOptionProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\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 }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\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={ classnames(\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\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 CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst { actions, className, options, children } = props;\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/circular-option-picker/index.tsx"],"names":["Option","className","isSelected","selectedIconProps","tooltipText","additionalProps","optionButton","check","DropdownLinkAction","buttonProps","dropdownProps","linkText","isOpen","onToggle","ButtonAction","children","CircularOptionPicker","props","actions","options"],"mappings":";;;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAYO,SAASA,MAAT,CAAiB;AACvBC,EAAAA,SADuB;AAEvBC,EAAAA,UAFuB;AAGvBC,EAAAA,iBAHuB;AAIvBC,EAAAA,WAJuB;AAKvB,KAAGC;AALoB,CAAjB,EAMU;AAChB,QAAMC,YAAY,GACjB,4BAAC,eAAD;AACC,IAAA,SAAS,EAAGJ,UADb;AAEC,IAAA,SAAS,EAAC,2CAFX;AAAA,OAGMG;AAHN,IADD;AAOA,SACC;AACC,IAAA,SAAS,EAAG,yBACXJ,SADW,EAEX,mDAFW;AADb,KAMGG,WAAW,GACZ,4BAAC,gBAAD;AAAS,IAAA,IAAI,EAAGA;AAAhB,KAAgCE,YAAhC,CADY,GAGZA,YATF,EAWGJ,UAAU,IACX,4BAAC,WAAD;AACC,IAAA,IAAI,EAAGK,YADR;AAAA,QAEQJ,iBAAiB,GAAGA,iBAAH,GAAuB,EAFhD;AAAA,IAZF,CADD;AAoBA;;AAEM,SAASK,kBAAT,CAA6B;AACnCC,EAAAA,WADmC;AAEnCR,EAAAA,SAFmC;AAGnCS,EAAAA,aAHmC;AAInCC,EAAAA;AAJmC,CAA7B,EAKsB;AAC5B,SACC,4BAAC,iBAAD;AACC,IAAA,SAAS,EAAG,yBACX,yDADW,EAEXV,SAFW,CADb;AAKC,IAAA,YAAY,EAAG,CAAE;AAAEW,MAAAA,MAAF;AAAUC,MAAAA;AAAV,KAAF,KACd,4BAAC,eAAD;AACC,uBAAgBD,MADjB;AAEC,uBAAc,MAFf;AAGC,MAAA,OAAO,EAAGC,QAHX;AAIC,MAAA,OAAO,EAAC,MAJT;AAAA,SAKMJ;AALN,OAOGE,QAPH,CANF;AAAA,OAgBMD;AAhBN,IADD;AAoBA;;AAEM,SAASI,YAAT,CAAuB;AAC7Bb,EAAAA,SAD6B;AAE7Bc,EAAAA,QAF6B;AAG7B,KAAGV;AAH0B,CAAvB,EAI8D;AACpE,SACC,4BAAC,eAAD;AACC,IAAA,SAAS,EAAG,yBACX,0CADW,EAEXJ,SAFW,CADb;AAKC,IAAA,OAAO,EAAC,UALT;AAAA,OAMMI;AANN,KAQGU,QARH,CADD;AAYA;AAED;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,SAASC,oBAAT,CAA+BC,KAA/B,EAAkE;AACjE,QAAM;AAAEC,IAAAA,OAAF;AAAWjB,IAAAA,SAAX;AAAsBkB,IAAAA,OAAtB;AAA+BJ,IAAAA;AAA/B,MAA4CE,KAAlD;AACA,SACC;AACC,IAAA,SAAS,EAAG,yBACX,mCADW,EAEXhB,SAFW;AADb,KAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGkB,OADH,CAND,EASGJ,QATH,EAUGG,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CAXF,CADD;AAkBA;;AAEDF,oBAAoB,CAAChB,MAArB,GAA8BA,MAA9B;AACAgB,oBAAoB,CAACF,YAArB,GAAoCA,YAApC;AACAE,oBAAoB,CAACR,kBAArB,GAA0CA,kBAA1C;eAEeQ,oB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, check } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport Tooltip from '../tooltip';\nimport type {\n\tCircularOptionPickerProps,\n\tDropdownLinkActionProps,\n\tOptionProps,\n} from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport function Option( {\n\tclassName,\n\tisSelected,\n\tselectedIconProps,\n\ttooltipText,\n\t...additionalProps\n}: OptionProps ) {\n\tconst optionButton = (\n\t\t<Button\n\t\t\tisPressed={ isSelected }\n\t\t\tclassName=\"components-circular-option-picker__option\"\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\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 }>{ optionButton }</Tooltip>\n\t\t\t) : (\n\t\t\t\toptionButton\n\t\t\t) }\n\t\t\t{ isSelected && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ check }\n\t\t\t\t\t{ ...( selectedIconProps ? selectedIconProps : {} ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport function DropdownLinkAction( {\n\tbuttonProps,\n\tclassName,\n\tdropdownProps,\n\tlinkText,\n}: DropdownLinkActionProps ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames(\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={ classnames(\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\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 CircularOptionPicker( props: CircularOptionPickerProps ) {\n\tconst { actions, className, options, children } = props;\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-circular-option-picker',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"components-circular-option-picker__swatches\">\n\t\t\t\t{ options }\n\t\t\t</div>\n\t\t\t{ children }\n\t\t\t{ actions && (\n\t\t\t\t<div className=\"components-circular-option-picker__custom-clear-wrapper\">\n\t\t\t\t\t{ actions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nCircularOptionPicker.Option = Option;\nCircularOptionPicker.ButtonAction = ButtonAction;\nCircularOptionPicker.DropdownLinkAction = DropdownLinkAction;\n\nexport default CircularOptionPicker;\n"]}

package/build/clipboard-button/index.js

@@ -9,8 +9,6 @@ exports.default = ClipboardButton;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _compose = require("@wordpress/compose");
@@ -31,43 +29,35 @@ var _button = _interopRequireDefault(require("../button"));
  * Internal dependencies
  */
 const TIMEOUT = 4000;
-/**
- * @param {Object}                    props
- * @param {string}                    [props.className]
- * @param {import('react').ReactNode} props.children
- * @param {() => void}                props.onCopy
- * @param {() => void}                [props.onFinishCopy]
- * @param {string}                    props.text
- */
 
-function ClipboardButton(_ref) {
-  let {
-    className,
-    children,
-    onCopy,
-    onFinishCopy,
-    text,
-    ...buttonProps
-  } = _ref;
+function ClipboardButton({
+  className,
+  children,
+  onCopy,
+  onFinishCopy,
+  text,
+  ...buttonProps
+}) {
   (0, _deprecated.default)('wp.components.ClipboardButton', {
     since: '5.8',
     alternative: 'wp.compose.useCopyToClipboard'
   });
-  /** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
-
   const timeoutId = (0, _element.useRef)();
   const ref = (0, _compose.useCopyToClipboard)(text, () => {
-    onCopy(); // @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
+    onCopy();
 
-    clearTimeout(timeoutId.current);
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
 
     if (onFinishCopy) {
       timeoutId.current = setTimeout(() => onFinishCopy(), TIMEOUT);
     }
   });
   (0, _element.useEffect)(() => {
-    // @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.
-    clearTimeout(timeoutId.current);
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
   }, []);
   const classes = (0, _classnames.default)('components-clipboard-button', className); // Workaround for inconsistent behavior in Safari, where <textarea> is not
   // the document.activeElement at the moment when the copy event fires.
@@ -75,17 +65,15 @@ function ClipboardButton(_ref) {
   // mistakenly override the ClipboardButton, and copy a serialized string
   // of the current block instead.
 
-  /** @type {import('react').ClipboardEventHandler<HTMLButtonElement>} */
-
   const focusOnCopyEventTarget = event => {
     // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
     event.target.focus();
   };
 
-  return (0, _element.createElement)(_button.default, (0, _extends2.default)({}, buttonProps, {
+  return (0, _element.createElement)(_button.default, { ...buttonProps,
     className: classes,
     ref: ref,
     onCopy: focusOnCopyEventTarget
-  }), children);
+  }, children);
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.js"],"names":["TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","clearTimeout","current","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGA,MAAMA,OAAO,GAAG,IAAhB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACe,SAASC,eAAT,OAOX;AAAA,MAPqC;AACxCC,IAAAA,SADwC;AAExCC,IAAAA,QAFwC;AAGxCC,IAAAA,MAHwC;AAIxCC,IAAAA,YAJwC;AAKxCC,IAAAA,IALwC;AAMxC,OAAGC;AANqC,GAOrC;AACH,2BAAY,+BAAZ,EAA6C;AAC5CC,IAAAA,KAAK,EAAE,KADqC;AAE5CC,IAAAA,WAAW,EAAE;AAF+B,GAA7C;AAKA;;AACA,QAAMC,SAAS,GAAG,sBAAlB;AACA,QAAMC,GAAG,GAAG,iCAAoBL,IAApB,EAA0B,MAAM;AAC3CF,IAAAA,MAAM,GADqC,CAE3C;;AACAQ,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;;AAEA,QAAKR,YAAL,EAAoB;AACnBK,MAAAA,SAAS,CAACG,OAAV,GAAoBC,UAAU,CAAE,MAAMT,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GARW,CAAZ;AAUA,0BAAW,MAAM;AAChB;AACAY,IAAAA,YAAY,CAAEF,SAAS,CAACG,OAAZ,CAAZ;AACA,GAHD,EAGG,EAHH;AAKA,QAAME,OAAO,GAAG,yBAAY,6BAAZ,EAA2Cb,SAA3C,CAAhB,CAvBG,CAyBH;AACA;AACA;AACA;AACA;;AACA;;AACA,QAAMc,sBAAsB,GAAKC,KAAF,IAAa;AAC3C;AACAA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAHD;;AAKA,SACC,4BAAC,eAAD,6BACMZ,WADN;AAEC,IAAA,SAAS,EAAGQ,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,MAMGb,QANH,CADD;AAUA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\n\nconst TIMEOUT = 4000;\n\n/**\n * @param {Object}                    props\n * @param {string}                    [props.className]\n * @param {import('react').ReactNode} props.children\n * @param {() => void}                props.onCopy\n * @param {() => void}                [props.onFinishCopy]\n * @param {string}                    props.text\n */\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n} ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\t/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */\n\tconst timeoutId = useRef();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\t// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.\n\t\tclearTimeout( timeoutId.current );\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\t// @ts-expect-error: Should check if .current is defined, but not changing because this component is deprecated.\n\t\tclearTimeout( timeoutId.current );\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\t/** @type {import('react').ClipboardEventHandler<HTMLButtonElement>} */\n\tconst focusOnCopyEventTarget = ( 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"]}
+{"version":3,"sources":["@wordpress/components/src/clipboard-button/index.tsx"],"names":["TIMEOUT","ClipboardButton","className","children","onCopy","onFinishCopy","text","buttonProps","since","alternative","timeoutId","ref","current","clearTimeout","setTimeout","classes","focusOnCopyEventTarget","event","target","focus"],"mappings":";;;;;;;;;AAQA;;AALA;;AAMA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAKA,MAAMA,OAAO,GAAG,IAAhB;;AAEe,SAASC,eAAT,CAA0B;AACxCC,EAAAA,SADwC;AAExCC,EAAAA,QAFwC;AAGxCC,EAAAA,MAHwC;AAIxCC,EAAAA,YAJwC;AAKxCC,EAAAA,IALwC;AAMxC,KAAGC;AANqC,CAA1B,EAOuD;AACrE,2BAAY,+BAAZ,EAA6C;AAC5CC,IAAAA,KAAK,EAAE,KADqC;AAE5CC,IAAAA,WAAW,EAAE;AAF+B,GAA7C;AAKA,QAAMC,SAAS,GAAG,sBAAlB;AACA,QAAMC,GAAG,GAAG,iCAAoBL,IAApB,EAA0B,MAAM;AAC3CF,IAAAA,MAAM;;AACN,QAAKM,SAAS,CAACE,OAAf,EAAyB;AACxBC,MAAAA,YAAY,CAAEH,SAAS,CAACE,OAAZ,CAAZ;AACA;;AAED,QAAKP,YAAL,EAAoB;AACnBK,MAAAA,SAAS,CAACE,OAAV,GAAoBE,UAAU,CAAE,MAAMT,YAAY,EAApB,EAAwBL,OAAxB,CAA9B;AACA;AACD,GATW,CAAZ;AAWA,0BAAW,MAAM;AAChB,QAAKU,SAAS,CAACE,OAAf,EAAyB;AACxBC,MAAAA,YAAY,CAAEH,SAAS,CAACE,OAAZ,CAAZ;AACA;AACD,GAJD,EAIG,EAJH;AAMA,QAAMG,OAAO,GAAG,yBAAY,6BAAZ,EAA2Cb,SAA3C,CAAhB,CAxBqE,CA0BrE;AACA;AACA;AACA;AACA;;AACA,QAAMc,sBAAmD,GAAKC,KAAF,IAAa;AACxE;AACAA,IAAAA,KAAK,CAACC,MAAN,CAAaC,KAAb;AACA,GAHD;;AAKA,SACC,4BAAC,eAAD,OACMZ,WADN;AAEC,IAAA,SAAS,EAAGQ,OAFb;AAGC,IAAA,GAAG,EAAGJ,GAHP;AAIC,IAAA,MAAM,EAAGK;AAJV,KAMGb,QANH,CADD;AAUA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { useCopyToClipboard } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { ClipboardButtonProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TIMEOUT = 4000;\n\nexport default function ClipboardButton( {\n\tclassName,\n\tchildren,\n\tonCopy,\n\tonFinishCopy,\n\ttext,\n\t...buttonProps\n}: WordPressComponentProps< ClipboardButtonProps, 'button', false > ) {\n\tdeprecated( 'wp.components.ClipboardButton', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst timeoutId = useRef< NodeJS.Timeout >();\n\tconst ref = useCopyToClipboard( text, () => {\n\t\tonCopy();\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\n\t\tif ( onFinishCopy ) {\n\t\t\ttimeoutId.current = setTimeout( () => onFinishCopy(), TIMEOUT );\n\t\t}\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( timeoutId.current ) {\n\t\t\tclearTimeout( timeoutId.current );\n\t\t}\n\t}, [] );\n\n\tconst classes = classnames( 'components-clipboard-button', className );\n\n\t// Workaround for inconsistent behavior in Safari, where <textarea> is not\n\t// the document.activeElement at the moment when the copy event fires.\n\t// This causes documentHasSelection() in the copy-handler component to\n\t// mistakenly override the ClipboardButton, and copy a serialized string\n\t// of the current block instead.\n\tconst focusOnCopyEventTarget: React.ClipboardEventHandler = ( event ) => {\n\t\t// @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.\n\t\tevent.target.focus();\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tclassName={ classes }\n\t\t\tref={ ref }\n\t\t\tonCopy={ focusOnCopyEventTarget }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n"]}

package/build/clipboard-button/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

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

@@ -9,27 +9,25 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _colorCell = _interopRequireDefault(require("../mobile/bottom-sheet/color-cell"));
 
 /**
  * Internal dependencies
  */
-function ColorControl(_ref) {
-  let {
-    label,
-    onPress,
-    color,
-    withColorIndicator,
-    ...props
-  } = _ref;
-  return (0, _element.createElement)(_colorCell.default, (0, _extends2.default)({
+function ColorControl({
+  label,
+  onPress,
+  color,
+  withColorIndicator,
+  ...props
+}) {
+  return (0, _element.createElement)(_colorCell.default, {
     label: label,
     onPress: onPress,
     color: color,
-    withColorIndicator: withColorIndicator
-  }, props));
+    withColorIndicator: withColorIndicator,
+    ...props
+  });
 }
 
 var _default = ColorControl;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-control/index.native.js"],"names":["ColorControl","label","onPress","color","withColorIndicator","props"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,SAASA,YAAT,OAMI;AAAA,MANmB;AACtBC,IAAAA,KADsB;AAEtBC,IAAAA,OAFsB;AAGtBC,IAAAA,KAHsB;AAItBC,IAAAA,kBAJsB;AAKtB,OAAGC;AALmB,GAMnB;AACH,SACC,4BAAC,kBAAD;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,kBAAkB,EAAGC;AAJtB,KAKMC,KALN,EADD;AASA;;eAEcL,Y","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"]}
+{"version":3,"sources":["@wordpress/components/src/color-control/index.native.js"],"names":["ColorControl","label","onPress","color","withColorIndicator","props"],"mappings":";;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,SAASA,YAAT,CAAuB;AACtBC,EAAAA,KADsB;AAEtBC,EAAAA,OAFsB;AAGtBC,EAAAA,KAHsB;AAItBC,EAAAA,kBAJsB;AAKtB,KAAGC;AALmB,CAAvB,EAMI;AACH,SACC,4BAAC,kBAAD;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,kBAAkB,EAAGC,kBAJtB;AAAA,OAKMC;AALN,IADD;AASA;;eAEcL,Y","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"]}

package/build/color-indicator/index.js

@@ -9,8 +9,6 @@ exports.default = exports.ColorIndicator = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 /**
@@ -26,13 +24,14 @@ function UnforwardedColorIndicator(props, forwardedRef) {
     colorValue,
     ...additionalProps
   } = props;
-  return (0, _element.createElement)("span", (0, _extends2.default)({
+  return (0, _element.createElement)("span", {
     className: (0, _classnames.default)('component-color-indicator', className),
     style: {
       background: colorValue
     },
-    ref: forwardedRef
-  }, additionalProps));
+    ref: forwardedRef,
+    ...additionalProps
+  });
 }
 /**
  * ColorIndicator is a React component that renders a specific color in a

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-indicator/index.tsx"],"names":["UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","background","ColorIndicator"],"mappings":";;;;;;;;;AASA;;;;AANA;;AAHA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,yBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,MAAgDJ,KAAtD;AAEA,SACC;AACC,IAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyCE,SAAzC,CADb;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd,KAFT;AAGC,IAAA,GAAG,EAAGF;AAHP,KAIMG,eAJN,EADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,cAAc,GAAG,yBAAYP,yBAAZ,CAAvB;;eAEQO,c","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-indicator/index.tsx"],"names":["UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","background","ColorIndicator"],"mappings":";;;;;;;;;AASA;;AANA;;AAHA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,yBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,MAAgDJ,KAAtD;AAEA,SACC;AACC,IAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyCE,SAAzC,CADb;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd,KAFT;AAGC,IAAA,GAAG,EAAGF,YAHP;AAAA,OAIMG;AAJN,IADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,cAAc,GAAG,yBAAYP,yBAAZ,CAAvB;;eAEQO,c","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"]}

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

@@ -32,10 +32,9 @@ var _utils = require("../mobile/color-settings/utils");
 /**
  * Internal dependencies
  */
-function SelectedIcon(_ref) {
-  let {
-    opacity
-  } = _ref;
+function SelectedIcon({
+  opacity
+}) {
   return (0, _element.createElement)(_reactNative.Animated.View, {
     style: [_style.default.selected, {
       opacity
@@ -49,14 +48,13 @@ function SelectedIcon(_ref) {
   }));
 }
 
-function ColorIndicator(_ref2) {
-  let {
-    color,
-    isSelected,
-    withCustomPicker,
-    style,
-    opacity
-  } = _ref2;
+function ColorIndicator({
+  color,
+  isSelected,
+  withCustomPicker,
+  style,
+  opacity
+}) {
   const {
     isGradient
   } = _utils.colorsUtils;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-indicator/index.native.js"],"names":["SelectedIcon","opacity","styles","selected","outline","selectedOutline","check","icon","ColorIndicator","color","isSelected","withCustomPicker","style","isGradient","colorsUtils","outlineStyle","outlineDark","circleOption","map","gradientValue","absolute","backgroundColor"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AACA;;AACA;;AAIA;;AACA;;AAdA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;AAIA,SAASA,YAAT,OAAqC;AAAA,MAAd;AAAEC,IAAAA;AAAF,GAAc;AACpC,SACC,4BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAG,CAAEC,eAAOC,QAAT,EAAmB;AAAEF,MAAAA;AAAF,KAAnB;AAAvB,KACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAG,CAAEC,eAAOE,OAAT,EAAkBF,eAAOG,eAAzB;AAAd,IADD,EAEC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGC,YAAb;AAAqB,IAAA,KAAK,EAAGJ,eAAOK,IAApC;AAA2C,IAAA,IAAI,EAAG;AAAlD,IAFD,CADD;AAMA;;AAED,SAASC,cAAT,QAMI;AAAA,MANqB;AACxBC,IAAAA,KADwB;AAExBC,IAAAA,UAFwB;AAGxBC,IAAAA,gBAHwB;AAIxBC,IAAAA,KAJwB;AAKxBX,IAAAA;AALwB,GAMrB;AACH,QAAM;AAAEY,IAAAA;AAAF,MAAiBC,kBAAvB;AAEA,QAAMC,YAAY,GAAG,2CACpBb,eAAOE,OADa,EAEpBF,eAAOc,WAFa,CAArB;;AAKA,MAAKH,UAAU,CAAEJ,KAAF,CAAf,EAA2B;AAC1B,WACC,4BAAC,oBAAD;AACC,MAAA,KAAK,EAAG,CAAEP,eAAOe,YAAT,EAAuBL,KAAvB,CADT;AAEC,MAAA,aAAa,EAAGH;AAFjB,OAIC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGM;AAAd,MAJD,EAKGL,UAAU,IAAI,4BAAC,YAAD;AAAc,MAAA,OAAO,EAAGT;AAAxB,MALjB,CADD;AASA,GAVD,MAUO,IAAKU,gBAAL,EAAwB;AAC9B,WACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAG,CAAET,eAAOe,YAAT,EAAuBL,KAAvB;AAAd,OACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGG;AAAd,MADD,EAEGN,KAAK,CAACS,GAAN,CAAaC,aAAF,IAAqB;AACjC,aACC,4BAAC,oBAAD;AACC,QAAA,aAAa,EAAGA,aADjB;AAEC,QAAA,KAAK,EAAG,CACPjB,eAAOe,YADA,EAEPf,eAAOkB,QAFA,EAGPR,KAHO,CAFT;AAOC,QAAA,GAAG,EAAGO;AAPP,QADD;AAWA,KAZC,CAFH,EAeGT,UAAU,IAAI,4BAAC,YAAD,OAfjB,CADD;AAmBA;;AACD,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,CAAER,eAAOe,YAAT,EAAuBL,KAAvB,EAA8B;AAAES,MAAAA,eAAe,EAAEZ;AAAnB,KAA9B;AADT,KAGC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGM;AAAd,IAHD,EAIGL,UAAU,IAAI,4BAAC,YAAD;AAAc,IAAA,OAAO,EAAGT;AAAxB,IAJjB,CADD;AAQA;;eACcO,c","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"]}
+{"version":3,"sources":["@wordpress/components/src/color-indicator/index.native.js"],"names":["SelectedIcon","opacity","styles","selected","outline","selectedOutline","check","icon","ColorIndicator","color","isSelected","withCustomPicker","style","isGradient","colorsUtils","outlineStyle","outlineDark","circleOption","map","gradientValue","absolute","backgroundColor"],"mappings":";;;;;;;;;;;AAGA;;AAIA;;AACA;;AACA;;AAIA;;AACA;;AAdA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;AAIA,SAASA,YAAT,CAAuB;AAAEC,EAAAA;AAAF,CAAvB,EAAqC;AACpC,SACC,4BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAG,CAAEC,eAAOC,QAAT,EAAmB;AAAEF,MAAAA;AAAF,KAAnB;AAAvB,KACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAG,CAAEC,eAAOE,OAAT,EAAkBF,eAAOG,eAAzB;AAAd,IADD,EAEC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGC,YAAb;AAAqB,IAAA,KAAK,EAAGJ,eAAOK,IAApC;AAA2C,IAAA,IAAI,EAAG;AAAlD,IAFD,CADD;AAMA;;AAED,SAASC,cAAT,CAAyB;AACxBC,EAAAA,KADwB;AAExBC,EAAAA,UAFwB;AAGxBC,EAAAA,gBAHwB;AAIxBC,EAAAA,KAJwB;AAKxBX,EAAAA;AALwB,CAAzB,EAMI;AACH,QAAM;AAAEY,IAAAA;AAAF,MAAiBC,kBAAvB;AAEA,QAAMC,YAAY,GAAG,2CACpBb,eAAOE,OADa,EAEpBF,eAAOc,WAFa,CAArB;;AAKA,MAAKH,UAAU,CAAEJ,KAAF,CAAf,EAA2B;AAC1B,WACC,4BAAC,oBAAD;AACC,MAAA,KAAK,EAAG,CAAEP,eAAOe,YAAT,EAAuBL,KAAvB,CADT;AAEC,MAAA,aAAa,EAAGH;AAFjB,OAIC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGM;AAAd,MAJD,EAKGL,UAAU,IAAI,4BAAC,YAAD;AAAc,MAAA,OAAO,EAAGT;AAAxB,MALjB,CADD;AASA,GAVD,MAUO,IAAKU,gBAAL,EAAwB;AAC9B,WACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAG,CAAET,eAAOe,YAAT,EAAuBL,KAAvB;AAAd,OACC,4BAAC,iBAAD;AAAM,MAAA,KAAK,EAAGG;AAAd,MADD,EAEGN,KAAK,CAACS,GAAN,CAAaC,aAAF,IAAqB;AACjC,aACC,4BAAC,oBAAD;AACC,QAAA,aAAa,EAAGA,aADjB;AAEC,QAAA,KAAK,EAAG,CACPjB,eAAOe,YADA,EAEPf,eAAOkB,QAFA,EAGPR,KAHO,CAFT;AAOC,QAAA,GAAG,EAAGO;AAPP,QADD;AAWA,KAZC,CAFH,EAeGT,UAAU,IAAI,4BAAC,YAAD,OAfjB,CADD;AAmBA;;AACD,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAG,CAAER,eAAOe,YAAT,EAAuBL,KAAvB,EAA8B;AAAES,MAAAA,eAAe,EAAEZ;AAAnB,KAA9B;AADT,KAGC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGM;AAAd,IAHD,EAIGL,UAAU,IAAI,4BAAC,YAAD;AAAc,IAAA,OAAO,EAAGT;AAAxB,IAJjB,CADD;AAQA;;eACcO,c","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"]}