@wordpress/components 29.1.1 → 29.3.0

package/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 ## Unreleased
 
+## 29.3.0 (2025-01-29)
+
+### Enhancements
+
+-   `BorderBoxControl`, `BoxControl`: Remove `Tooltip` component from linked button ([#68498](https://github.com/WordPress/gutenberg/pull/68498)).
+
+### Internal
+
+-   `BoxControl`: Add runtime check for presets and presetKey ([#68385](https://github.com/WordPress/gutenberg/pull/68385)).
+
+## 29.2.0 (2025-01-15)
+
+### Internal
+
+-   `Components`: Standardize reduced motion handling using media queries ([#68421](https://github.com/WordPress/gutenberg/pull/68421)).
+
+### Bug Fixes
+
+-   `CircularOptionPicker`, `ColorPalette`: Fix usage of tooltip in the Circular option picker. ([#68602](https://github.com/WordPress/gutenberg/pull/68602)).
+-   `InputControl`: Ensures email and url inputs have consistent LTR alignment in RTL languages ([#68188](https://github.com/WordPress/gutenberg/pull/68188)).
+
 ## 29.1.0 (2025-01-02)
 
 ### Enhancements
@@ -10,6 +31,8 @@
 -   `Navigation`: Upsize back buttons ([#68157](https://github.com/WordPress/gutenberg/pull/68157)).
 -   `Heading`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)).
 -   `Text`: Fix text contrast for dark mode ([#68349](https://github.com/WordPress/gutenberg/pull/68349)).
+-   `Heading`: Revert text contrast fix for dark mode with optimizeReadabilityFor ([#68472](https://github.com/WordPress/gutenberg/pull/68472)).
+-   `Text`: Revert text contrast fix for dark mode with optimizeReadabilityFor ([#68472](https://github.com/WordPress/gutenberg/pull/68472)).
 
 ### Deprecations
 
@@ -179,7 +202,7 @@
 
 -   `Tabs`: remove internal custom logic ([#66097](https://github.com/WordPress/gutenberg/pull/66097)).
 -   `Tabs`: add props to control active tab item ([#66223](https://github.com/WordPress/gutenberg/pull/66223)).
--   `Tabs`: restore vertical alignent for tabs content ([#66215](https://github.com/WordPress/gutenberg/pull/66215)).
+-   `Tabs`: restore vertical alignment for tabs content ([#66215](https://github.com/WordPress/gutenberg/pull/66215)).
 -   `Tabs`: fix indicator animation ([#66198](https://github.com/WordPress/gutenberg/pull/66198)).
 -   `Tabs`: update indicator more reactively ([#66207](https://github.com/WordPress/gutenberg/pull/66207)).
 -   `Tabs` and `TabPanel`: Fix arrow key navigation in RTL ([#66201](https://github.com/WordPress/gutenberg/pull/66201)).
@@ -515,7 +538,7 @@
 -   `Tabs`: Vertical Tabs should be 40px min height. ([#63446](https://github.com/WordPress/gutenberg/pull/63446)).
 -   `ColorPicker`: Use `minimal` variant for `SelectControl` ([#63676](https://github.com/WordPress/gutenberg/pull/63676)).
 -   `Tabs`: keep full opacity of focus ring and remove hover styles on disabled tabs ([#63754](https://github.com/WordPress/gutenberg/pull/63754)).
--   `Placeholder`: Remove unnecssary `placeholder-style` Sass mixin ([#63885](https://github.com/WordPress/gutenberg/pull/63885)).
+-   `Placeholder`: Remove unnecessary `placeholder-style` Sass mixin ([#63885](https://github.com/WordPress/gutenberg/pull/63885)).
 
 ### Documentation
 
@@ -1582,7 +1605,7 @@
 
 -   `TabPanel`: support manual tab activation ([#46004](https://github.com/WordPress/gutenberg/pull/46004)).
 -   `TabPanel`: support disabled prop for tab buttons ([#46471](https://github.com/WordPress/gutenberg/pull/46471)).
--   `BaseControl`: Add `useBaseControlProps` hook to help generate id-releated props ([#46170](https://github.com/WordPress/gutenberg/pull/46170)).
+-   `BaseControl`: Add `useBaseControlProps` hook to help generate id-related props ([#46170](https://github.com/WordPress/gutenberg/pull/46170)).
 
 ### Bug Fixes
 
@@ -1605,8 +1628,8 @@
 -   `Popover`: Prevent unnecessary paint caused by using outline ([#46201](https://github.com/WordPress/gutenberg/pull/46201)).
 -   `PaletteEdit`: Global styles: add onChange actions to color palette items [#45681](https://github.com/WordPress/gutenberg/pull/45681).
 -   Lighten the border color on control components ([#46252](https://github.com/WordPress/gutenberg/pull/46252)).
--   `Popover`: Prevent unnecessary paint when scrolling by using transform instead of top/left positionning ([#46187](https://github.com/WordPress/gutenberg/pull/46187)).
--   `CircularOptionPicker`: Prevent unecessary paint on hover ([#46197](https://github.com/WordPress/gutenberg/pull/46197)).
+-   `Popover`: Prevent unnecessary paint when scrolling by using transform instead of top/left positioning ([#46187](https://github.com/WordPress/gutenberg/pull/46187)).
+-   `CircularOptionPicker`: Prevent unnecessary paint on hover ([#46197](https://github.com/WordPress/gutenberg/pull/46197)).
 
 ### Experimental
 
@@ -2452,7 +2475,7 @@
 
 ### Bug Fixes
 
--   Improve accessibility and visibility in `ColorPallete` ([#36925](https://github.com/WordPress/gutenberg/pull/36925))
+-   Improve accessibility and visibility in `ColorPalette` ([#36925](https://github.com/WordPress/gutenberg/pull/36925))
 
 ## 19.1.3 (2021-12-06)
 

package/CONTRIBUTING.md

@@ -411,7 +411,7 @@ export default MyComponent;
 
 On the component's main named export, add a JSDoc comment that includes the main description and the example code snippet from the README ([example](https://github.com/WordPress/gutenberg/blob/43d9c82922619c1d1ff6b454f86f75c3157d3de6/packages/components/src/date-time/date-time/index.tsx#L193-L217)). _At the time of writing, the `@example` JSDoc keyword is not recognized by StoryBook's docgen, so please avoid using it_.
 
-<!-- TODO: add to the previous paragraph once the composision section gets added to this document.
+<!-- TODO: add to the previous paragraph once the compositions section gets added to this document.
 (more details about polymorphism can be found above in the "Components composition" section). -->
 
 ## Styling
@@ -550,7 +550,7 @@ export function useCardBody( props ) {
 	// Read any derived registered prop from the Context System in the `CardBody` namespace.
 	// If a `CardBody` component is rendered as a child of a `Card` component, the value of
 	// the `size` prop will be the one set by the parent `Card` component via the Context
-	// System (unless the prop gets explicitely set on the `CardBody` component).
+	// System (unless the prop gets explicitly set on the `CardBody` component).
 	const { size = 'medium', ...otherDerivedProps } = useContextSystem(
 		props,
 		'CardBody'
@@ -759,13 +759,13 @@ function NewComponentImplementation( props ) {
 
 In case that is not possible (eg. too difficult to reconciliate new and legacy implementations, or impossible to preserve backward compatibility), then the legacy implementation can stay as-is.
 
-In any case, extra attention should be payed to legacy component families made of two or more subcomponents. It is possible, in fact, that the a legacy subcomponent is used as a parent / child of a subcomponent from the new version (this can happen, for example, when Gutenberg allows third party developers to inject React components via Slot/Fill). To avoid incompatibility issues and unexpected behavior, there should be some code in the components warning when the above scenario happens — or even better, aliasing to the correct version of the component.
+In any case, extra attention should be paid to legacy component families made of two or more subcomponents. It is possible, in fact, that the a legacy subcomponent is used as a parent / child of a subcomponent from the new version (this can happen, for example, when Gutenberg allows third party developers to inject React components via Slot/Fill). To avoid incompatibility issues and unexpected behavior, there should be some code in the components warning when the above scenario happens — or even better, aliasing to the correct version of the component.
 
 ##### Naming
 
 When it comes to naming the newly added component, there are two options.
 
-If there is a good reason for it, pick a new name for the component. For example, some legacy components have names that don't correspond to the corrent name of UI widget that they implement (for example, `TabPanel` should be called `Tabs`, and `Modal` should be called `Dialog`).
+If there is a good reason for it, pick a new name for the component. For example, some legacy components have names that don't correspond to the current name of UI widget that they implement (for example, `TabPanel` should be called `Tabs`, and `Modal` should be called `Dialog`).
 
 Alternatively, version the component name. For example, the new version of `Component` could be called `ComponentV2`. This also applies for namespaced subcomponents (ie. `ComponentV2.SubComponent`).
 

package/README.md

@@ -33,7 +33,7 @@ In non-WordPress projects, link to the `build-style/style.css` file directly, it
 
 By default, the `Popover` component will render within an extra element appended to the body of the document.
 
-If you want to precisely contol where the popovers render, you will need to use the `Popover.Slot` component.
+If you want to precisely control where the popovers render, you will need to use the `Popover.Slot` component.
 
 The following example illustrates how you can wrap a component using a
 `Popover` and have those popovers render to a single location in the DOM.

package/build/badge/index.js

@@ -21,36 +21,40 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
+/**
+ * Returns an icon based on the badge context.
+ *
+ * @return The corresponding icon for the provided context.
+ */function contextBasedIcon(intent = 'default') {
+  switch (intent) {
+    case 'info':
+      return _icons.info;
+    case 'success':
+      return _icons.published;
+    case 'warning':
+      return _icons.caution;
+    case 'error':
+      return _icons.error;
+    default:
+      return null;
+  }
+}
 function Badge({
   className,
   intent = 'default',
   children,
   ...props
 }) {
-  /**
-   * Returns an icon based on the badge context.
-   *
-   * @return The corresponding icon for the provided context.
-   */
-  function contextBasedIcon() {
-    switch (intent) {
-      case 'info':
-        return _icons.info;
-      case 'success':
-        return _icons.published;
-      case 'warning':
-        return _icons.caution;
-      case 'error':
-        return _icons.error;
-      default:
-        return null;
-    }
-  }
+  const icon = contextBasedIcon(intent);
+  const hasIcon = !!icon;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-    className: (0, _clsx.default)('components-badge', `is-${intent}`, intent !== 'default' && 'has-icon', className),
+    className: (0, _clsx.default)('components-badge', className, {
+      [`is-${intent}`]: intent,
+      'has-icon': hasIcon
+    }),
     ...props,
-    children: [intent !== 'default' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
-      icon: contextBasedIcon(),
+    children: [hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.default, {
+      icon: icon,
       size: 16,
       fill: "currentColor",
       className: "components-badge__icon"

package/build/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_icon","_jsxRuntime","Badge","className","intent","children","props","contextBasedIcon","info","published","caution","error","jsxs","clsx","jsx","default","icon","size","fill","_default","exports"],"sources":["@wordpress/components/src/badge/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { info, caution, error, published } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { BadgeProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Icon from '../icon';\n\nfunction Badge( {\n\tclassName,\n\tintent = 'default',\n\tchildren,\n\t...props\n}: WordPressComponentProps< BadgeProps, 'span', false > ) {\n\t/**\n\t * Returns an icon based on the badge context.\n\t *\n\t * @return The corresponding icon for the provided context.\n\t */\n\tfunction contextBasedIcon() {\n\t\tswitch ( intent ) {\n\t\t\tcase 'info':\n\t\t\t\treturn info;\n\t\t\tcase 'success':\n\t\t\t\treturn published;\n\t\t\tcase 'warning':\n\t\t\t\treturn caution;\n\t\t\tcase 'error':\n\t\t\t\treturn error;\n\t\t\tdefault:\n\t\t\t\treturn null;\n\t\t}\n\t}\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-badge',\n\t\t\t\t`is-${ intent }`,\n\t\t\t\tintent !== 'default' && 'has-icon',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ intent !== 'default' && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ contextBasedIcon() }\n\t\t\t\t\tsize={ 16 }\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tclassName=\"components-badge__icon\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<span className=\"components-badge__content\">{ children }</span>\n\t\t</span>\n\t);\n}\n\nexport default Badge;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAOA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA2B,IAAAG,WAAA,GAAAH,OAAA;AAf3B;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,SAASI,KAAKA,CAAE;EACfC,SAAS;EACTC,MAAM,GAAG,SAAS;EAClBC,QAAQ;EACR,GAAGC;AACkD,CAAC,EAAG;EACzD;AACD;AACA;AACA;AACA;EACC,SAASC,gBAAgBA,CAAA,EAAG;IAC3B,QAASH,MAAM;MACd,KAAK,MAAM;QACV,OAAOI,WAAI;MACZ,KAAK,SAAS;QACb,OAAOC,gBAAS;MACjB,KAAK,SAAS;QACb,OAAOC,cAAO;MACf,KAAK,OAAO;QACX,OAAOC,YAAK;MACb;QACC,OAAO,IAAI;IACb;EACD;EAEA,oBACC,IAAAV,WAAA,CAAAW,IAAA;IACCT,SAAS,EAAG,IAAAU,aAAI,EACf,kBAAkB,EAClB,MAAOT,MAAM,EAAG,EAChBA,MAAM,KAAK,SAAS,IAAI,UAAU,EAClCD,SACD,CAAG;IAAA,GACEG,KAAK;IAAAD,QAAA,GAERD,MAAM,KAAK,SAAS,iBACrB,IAAAH,WAAA,CAAAa,GAAA,EAACd,KAAA,CAAAe,OAAI;MACJC,IAAI,EAAGT,gBAAgB,CAAC,CAAG;MAC3BU,IAAI,EAAG,EAAI;MACXC,IAAI,EAAC,cAAc;MACnBf,SAAS,EAAC;IAAwB,CAClC,CACD,eACD,IAAAF,WAAA,CAAAa,GAAA;MAAMX,SAAS,EAAC,2BAA2B;MAAAE,QAAA,EAAGA;IAAQ,CAAQ,CAAC;EAAA,CAC1D,CAAC;AAET;AAAC,IAAAc,QAAA,GAAAC,OAAA,CAAAL,OAAA,GAEcb,KAAK","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_icon","_jsxRuntime","contextBasedIcon","intent","info","published","caution","error","Badge","className","children","props","icon","hasIcon","jsxs","clsx","jsx","default","size","fill","_default","exports"],"sources":["@wordpress/components/src/badge/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { info, caution, error, published } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { BadgeProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Icon from '../icon';\n\n/**\n * Returns an icon based on the badge context.\n *\n * @return The corresponding icon for the provided context.\n */\nfunction contextBasedIcon( intent: BadgeProps[ 'intent' ] = 'default' ) {\n\tswitch ( intent ) {\n\t\tcase 'info':\n\t\t\treturn info;\n\t\tcase 'success':\n\t\t\treturn published;\n\t\tcase 'warning':\n\t\t\treturn caution;\n\t\tcase 'error':\n\t\t\treturn error;\n\t\tdefault:\n\t\t\treturn null;\n\t}\n}\n\nfunction Badge( {\n\tclassName,\n\tintent = 'default',\n\tchildren,\n\t...props\n}: WordPressComponentProps< BadgeProps, 'span', false > ) {\n\tconst icon = contextBasedIcon( intent );\n\tconst hasIcon = !! icon;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ clsx( 'components-badge', className, {\n\t\t\t\t[ `is-${ intent }` ]: intent,\n\t\t\t\t'has-icon': hasIcon,\n\t\t\t} ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ hasIcon && (\n\t\t\t\t<Icon\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tsize={ 16 }\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tclassName=\"components-badge__icon\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<span className=\"components-badge__content\">{ children }</span>\n\t\t</span>\n\t);\n}\n\nexport default Badge;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAOA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AAA2B,IAAAG,WAAA,GAAAH,OAAA;AAf3B;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA,GACA,SAASI,gBAAgBA,CAAEC,MAA8B,GAAG,SAAS,EAAG;EACvE,QAASA,MAAM;IACd,KAAK,MAAM;MACV,OAAOC,WAAI;IACZ,KAAK,SAAS;MACb,OAAOC,gBAAS;IACjB,KAAK,SAAS;MACb,OAAOC,cAAO;IACf,KAAK,OAAO;MACX,OAAOC,YAAK;IACb;MACC,OAAO,IAAI;EACb;AACD;AAEA,SAASC,KAAKA,CAAE;EACfC,SAAS;EACTN,MAAM,GAAG,SAAS;EAClBO,QAAQ;EACR,GAAGC;AACkD,CAAC,EAAG;EACzD,MAAMC,IAAI,GAAGV,gBAAgB,CAAEC,MAAO,CAAC;EACvC,MAAMU,OAAO,GAAG,CAAC,CAAED,IAAI;EAEvB,oBACC,IAAAX,WAAA,CAAAa,IAAA;IACCL,SAAS,EAAG,IAAAM,aAAI,EAAE,kBAAkB,EAAEN,SAAS,EAAE;MAChD,CAAE,MAAON,MAAM,EAAG,GAAIA,MAAM;MAC5B,UAAU,EAAEU;IACb,CAAE,CAAG;IAAA,GACAF,KAAK;IAAAD,QAAA,GAERG,OAAO,iBACR,IAAAZ,WAAA,CAAAe,GAAA,EAAChB,KAAA,CAAAiB,OAAI;MACJL,IAAI,EAAGA,IAAM;MACbM,IAAI,EAAG,EAAI;MACXC,IAAI,EAAC,cAAc;MACnBV,SAAS,EAAC;IAAwB,CAClC,CACD,eACD,IAAAR,WAAA,CAAAe,GAAA;MAAMP,SAAS,EAAC,2BAA2B;MAAAC,QAAA,EAAGA;IAAQ,CAAQ,CAAC;EAAA,CAC1D,CAAC;AAET;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAEcT,KAAK","ignoreList":[]}

package/build/border-box-control/border-box-control-linked-button/component.js

@@ -8,8 +8,6 @@ exports.default = void 0;
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
 var _button = _interopRequireDefault(require("../../button"));
-var _tooltip = _interopRequireDefault(require("../../tooltip"));
-var _view = require("../../view");
 var _context = require("../../context");
 var _hook = require("./hook");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,19 +26,14 @@ const BorderBoxControlLinkedButton = (props, forwardedRef) => {
     ...buttonProps
   } = (0, _hook.useBorderBoxControlLinkedButton)(props);
   const label = isLinked ? (0, _i18n.__)('Unlink sides') : (0, _i18n.__)('Link sides');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
-    text: label,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_view.View, {
-      className: className,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-        ...buttonProps,
-        size: "small",
-        icon: isLinked ? _icons.link : _icons.linkOff,
-        iconSize: 24,
-        "aria-label": label,
-        ref: forwardedRef
-      })
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+    ...buttonProps,
+    size: "small",
+    icon: isLinked ? _icons.link : _icons.linkOff,
+    iconSize: 24,
+    label: label,
+    ref: forwardedRef,
+    className: className
   });
 };
 const ConnectedBorderBoxControlLinkedButton = (0, _context.contextConnect)(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton');

package/build/border-box-control/border-box-control-linked-button/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","_view","_context","_hook","_jsxRuntime","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","useBorderBoxControlLinkedButton","label","__","jsx","default","text","children","View","size","icon","link","linkOff","iconSize","ref","ConnectedBorderBoxControlLinkedButton","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport Tooltip from '../../tooltip';\nimport { View } from '../../view';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { className, isLinked, ...buttonProps } =\n\t\tuseBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<View className={ className }>\n\t\t\t\t<Button\n\t\t\t\t\t{ ...buttonProps }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\t\ticonSize={ 24 }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tref={ forwardedRef }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Tooltip>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAEA,IAAAM,QAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AAAyD,IAAAQ,WAAA,GAAAR,OAAA;AAdzD;AACA;AACA;;AAIA;AACA;AACA;;AAUA,MAAMS,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5C,IAAAC,qCAA+B,EAAEL,KAAM,CAAC;EACzC,MAAMM,KAAK,GAAGH,QAAQ,GAAG,IAAAI,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,oBACC,IAAAT,WAAA,CAAAU,GAAA,EAACd,QAAA,CAAAe,OAAO;IAACC,IAAI,EAAGJ,KAAO;IAAAK,QAAA,eACtB,IAAAb,WAAA,CAAAU,GAAA,EAACb,KAAA,CAAAiB,IAAI;MAACV,SAAS,EAAGA,SAAW;MAAAS,QAAA,eAC5B,IAAAb,WAAA,CAAAU,GAAA,EAAChB,OAAA,CAAAiB,OAAM;QAAA,GACDL,WAAW;QAChBS,IAAI,EAAC,OAAO;QACZC,IAAI,EAAGX,QAAQ,GAAGY,WAAI,GAAGC,cAAS;QAClCC,QAAQ,EAAG,EAAI;QACf,cAAaX,KAAO;QACpBY,GAAG,EAAGjB;MAAc,CACpB;IAAC,CACG;EAAC,CACC,CAAC;AAEZ,CAAC;AAED,MAAMkB,qCAAqC,GAAG,IAAAC,uBAAc,EAC3DrB,4BAA4B,EAC5B,8BACD,CAAC;AAAC,IAAAsB,QAAA,GAAAC,OAAA,CAAAb,OAAA,GACaU,qCAAqC","ignoreList":[]}
+{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_context","_hook","_jsxRuntime","BorderBoxControlLinkedButton","props","forwardedRef","className","isLinked","buttonProps","useBorderBoxControlLinkedButton","label","__","jsx","default","size","icon","link","linkOff","iconSize","ref","ConnectedBorderBoxControlLinkedButton","contextConnect","_default","exports"],"sources":["@wordpress/components/src/border-box-control/border-box-control-linked-button/component.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { useBorderBoxControlLinkedButton } from './hook';\n\nimport type { LinkedButtonProps } from '../types';\n\nconst BorderBoxControlLinkedButton = (\n\tprops: WordPressComponentProps< LinkedButtonProps, 'button' >,\n\tforwardedRef: React.ForwardedRef< any >\n) => {\n\tconst { className, isLinked, ...buttonProps } =\n\t\tuseBorderBoxControlLinkedButton( props );\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...buttonProps }\n\t\t\tsize=\"small\"\n\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\ticonSize={ 24 }\n\t\t\tlabel={ label }\n\t\t\tref={ forwardedRef }\n\t\t\tclassName={ className }\n\t\t/>\n\t);\n};\n\nconst ConnectedBorderBoxControlLinkedButton = contextConnect(\n\tBorderBoxControlLinkedButton,\n\t'BorderBoxControlLinkedButton'\n);\nexport default ConnectedBorderBoxControlLinkedButton;\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AAEA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AAAyD,IAAAM,WAAA,GAAAN,OAAA;AAZzD;AACA;AACA;;AAIA;AACA;AACA;;AAQA,MAAMO,4BAA4B,GAAGA,CACpCC,KAA6D,EAC7DC,YAAuC,KACnC;EACJ,MAAM;IAAEC,SAAS;IAAEC,QAAQ;IAAE,GAAGC;EAAY,CAAC,GAC5C,IAAAC,qCAA+B,EAAEL,KAAM,CAAC;EACzC,MAAMM,KAAK,GAAGH,QAAQ,GAAG,IAAAI,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,oBACC,IAAAT,WAAA,CAAAU,GAAA,EAACd,OAAA,CAAAe,OAAM;IAAA,GACDL,WAAW;IAChBM,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGR,QAAQ,GAAGS,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACfR,KAAK,EAAGA,KAAO;IACfS,GAAG,EAAGd,YAAc;IACpBC,SAAS,EAAGA;EAAW,CACvB,CAAC;AAEJ,CAAC;AAED,MAAMc,qCAAqC,GAAG,IAAAC,uBAAc,EAC3DlB,4BAA4B,EAC5B,8BACD,CAAC;AAAC,IAAAmB,QAAA,GAAAC,OAAA,CAAAV,OAAA,GACaO,qCAAqC","ignoreList":[]}

package/build/box-control/index.js

@@ -15,6 +15,7 @@ exports.default = void 0;
 var _compose = require("@wordpress/compose");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
+var _warning = _interopRequireDefault(require("@wordpress/warning"));
 var _baseControl = require("../base-control");
 var _inputControl = _interopRequireDefault(require("./input-control"));
 var _linkedButton = _interopRequireDefault(require("./linked-button"));
@@ -148,6 +149,11 @@ function BoxControl({
     size: undefined
   });
   const sidesToRender = (0, _utils2.getAllowedSides)(sides);
+  if (presets && !presetKey || !presets && presetKey) {
+    const definedProp = presets ? 'presets' : 'presetKey';
+    const missingProp = presets ? 'presetKey' : 'presets';
+    globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)(`wp.components.BoxControl: the '${missingProp}' prop is required when the '${definedProp}' prop is defined.`) : void 0;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_grid.Grid, {
     id: id,
     columns: 3,

package/build/box-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_inputControl","_interopRequireDefault","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","_deprecated36pxSize","_jsxRuntime","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","presets","presetKey","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValueMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","maybeWarnDeprecated36pxSize","componentName","size","undefined","sidesToRender","getAllowedSides","jsxs","Grid","columns","templateColumns","role","children","jsx","BaseControl","VisualLabel","InputWrapper","default","LinkedButtonWrapper","onClick","map","axis","Array","from","ResetButton","className","variant","disabled","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl\n *       __next40pxDefaultSize\n *       values={ values }\n *       onChange={ setValues }\n *     />\n *   );\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tpresets,\n\tpresetKey,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\t__next40pxDefaultSize,\n\t\tpresets,\n\t\tpresetKey,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<InputControl side=\"all\" { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_compose","require","_element","_i18n","_warning","_interopRequireDefault","_baseControl","_inputControl","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","_deprecated36pxSize","_jsxRuntime","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","presets","presetKey","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValueMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","maybeWarnDeprecated36pxSize","componentName","size","undefined","sidesToRender","getAllowedSides","definedProp","missingProp","globalThis","SCRIPT_DEBUG","warning","jsxs","Grid","columns","templateColumns","role","children","jsx","BaseControl","VisualLabel","InputWrapper","default","LinkedButtonWrapper","onClick","map","axis","Array","from","ResetButton","className","variant","disabled","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport InputControl from './input-control';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValueMixed,\n\tisValuesDefined,\n\tgetAllowedSides,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * A control that lets users set values for top, right, bottom, and left. Can be\n * used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { BoxControl } from '@wordpress/components';\n *\n * function Example() {\n *   const [ values, setValues ] = useState( {\n *     top: '50px',\n *     left: '10%',\n *     right: '10%',\n *     bottom: '50px',\n *   } );\n *\n *   return (\n *     <BoxControl\n *       __next40pxDefaultSize\n *       values={ values }\n *       onChange={ setValues }\n *     />\n *   );\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tpresets,\n\tpresetKey,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\t__next40pxDefaultSize,\n\t\tpresets,\n\t\tpresetKey,\n\t};\n\n\tmaybeWarnDeprecated36pxSize( {\n\t\tcomponentName: 'BoxControl',\n\t\t__next40pxDefaultSize,\n\t\tsize: undefined,\n\t} );\n\tconst sidesToRender = getAllowedSides( sides );\n\n\tif ( ( presets && ! presetKey ) || ( ! presets && presetKey ) ) {\n\t\tconst definedProp = presets ? 'presets' : 'presetKey';\n\t\tconst missingProp = presets ? 'presetKey' : 'presets';\n\t\twarning(\n\t\t\t`wp.components.BoxControl: the '${ missingProp }' prop is required when the '${ definedProp }' prop is defined.`\n\t\t);\n\t}\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<InputControl side=\"all\" { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked &&\n\t\t\t\tsplitOnAxis &&\n\t\t\t\t[ 'vertical', 'horizontal' ].map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis as 'horizontal' | 'vertical' }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ ! isLinked &&\n\t\t\t\t! splitOnAxis &&\n\t\t\t\tArray.from( sidesToRender ).map( ( axis ) => (\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\tkey={ axis }\n\t\t\t\t\t\tside={ axis }\n\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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","ignoreList":[]}

package/build/box-control/linked-button.js

@@ -8,7 +8,6 @@ exports.default = LinkedButton;
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
 var _button = _interopRequireDefault(require("../button"));
-var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
@@ -23,16 +22,13 @@ function LinkedButton({
   ...props
 }) {
   const label = isLinked ? (0, _i18n.__)('Unlink sides') : (0, _i18n.__)('Link sides');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
-    text: label,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
-      ...props,
-      className: "component-box-control__linked-button",
-      size: "small",
-      icon: isLinked ? _icons.link : _icons.linkOff,
-      iconSize: 24,
-      "aria-label": label
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+    ...props,
+    className: "component-box-control__linked-button",
+    size: "small",
+    icon: isLinked ? _icons.link : _icons.linkOff,
+    iconSize: 24,
+    label: label
   });
 }
 //# sourceMappingURL=linked-button.js.map

package/build/box-control/linked-button.js.map

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","_jsxRuntime","LinkedButton","isLinked","props","label","__","jsx","default","text","children","className","size","icon","link","linkOff","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Tooltip from '../tooltip';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<Button\n\t\t\t\t{ ...props }\n\t\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\t\tsize=\"small\"\n\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\ticonSize={ 24 }\n\t\t\t\taria-label={ label }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AAAiC,IAAAK,WAAA,GAAAL,OAAA;AAVjC;AACA;AACA;;AAIA;AACA;AACA;;AAIe,SAASM,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAG,IAAAG,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACP,QAAA,CAAAQ,OAAO;IAACC,IAAI,EAAGJ,KAAO;IAAAK,QAAA,eACtB,IAAAT,WAAA,CAAAM,GAAA,EAACT,OAAA,CAAAU,OAAM;MAAA,GACDJ,KAAK;MACVO,SAAS,EAAC,sCAAsC;MAChDC,IAAI,EAAC,OAAO;MACZC,IAAI,EAAGV,QAAQ,GAAGW,WAAI,GAAGC,cAAS;MAClCC,QAAQ,EAAG,EAAI;MACf,cAAaX;IAAO,CACpB;EAAC,CACM,CAAC;AAEZ","ignoreList":[]}
+{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_jsxRuntime","LinkedButton","isLinked","props","label","__","jsx","default","className","size","icon","link","linkOff","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\tsize=\"small\"\n\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\ticonSize={ 24 }\n\t\t\tlabel={ label }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AAA+B,IAAAI,WAAA,GAAAJ,OAAA;AAT/B;AACA;AACA;;AAIA;AACA;AACA;;AAGe,SAASK,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAG,IAAAG,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,oBACC,IAAAL,WAAA,CAAAM,GAAA,EAACR,OAAA,CAAAS,OAAM;IAAA,GACDJ,KAAK;IACVK,SAAS,EAAC,sCAAsC;IAChDC,IAAI,EAAC,OAAO;IACZC,IAAI,EAAGR,QAAQ,GAAGS,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACfT,KAAK,EAAGA;EAAO,CACf,CAAC;AAEJ","ignoreList":[]}

package/build/box-control/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\nexport interface Preset {\n\tname: string;\n\tslug: string;\n\tvalue?: string;\n}\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>;\n\ntype DeprecatedBoxControlProps = {\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOver?: UnitControlProps[ 'onMouseOver' ];\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOut?: UnitControlProps[ 'onMouseOut' ];\n};\n\nexport type BoxControlProps = Pick< UnitControlProps, 'units' > &\n\tDeprecatedBoxControlProps & {\n\t\t/**\n\t\t * If this property is true, a button to reset the box control is rendered.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * The id to use as a base for the unique HTML id attribute of the control.\n\t\t */\n\t\tid?: string;\n\t\t/**\n\t\t * Props for the internal `UnitControl` components.\n\t\t *\n\t\t * @default { min: 0 }\n\t\t */\n\t\tinputProps?: UnitControlPassthroughProps;\n\t\t/**\n\t\t * Heading label for the control.\n\t\t *\n\t\t * @default __( 'Box Control' )\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * A callback function when an input value changes.\n\t\t */\n\t\tonChange: ( next: BoxControlValue ) => void;\n\t\t/**\n\t\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t\t *\n\t\t * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t\t */\n\t\tresetValues?: BoxControlValue;\n\t\t/**\n\t\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t\t *\n\t\t * Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t\t */\n\t\tsides?: readonly (\n\t\t\t| keyof BoxControlValue\n\t\t\t| 'horizontal'\n\t\t\t| 'vertical'\n\t\t)[];\n\t\t/**\n\t\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t\t * can be used instead of updating individual sides.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsplitOnAxis?: boolean;\n\t\t/**\n\t\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t\t */\n\t\tvalues?: BoxControlValue;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t\t/**\n\t\t * Available presets to pick from.\n\t\t */\n\t\tpresets?: Preset[];\n\t\t/**\n\t\t * The key of the preset to apply.\n\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t */\n\t\tpresetKey?: string;\n\t};\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tvalues: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides: BoxControlProps[ 'sides' ];\n\t/**\n\t * Side represents the current side being rendered by the input.\n\t * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.\n\t */\n\tside: keyof typeof LABELS;\n\tpresets?: Preset[];\n\tpresetKey?: string;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\nexport interface Preset {\n\tname: string;\n\tslug: string;\n\tvalue?: string;\n}\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'units'\n>;\n\ntype DeprecatedBoxControlProps = {\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOver?: UnitControlProps[ 'onMouseOver' ];\n\t/**\n\t * @deprecated Pass to the `inputProps` prop instead.\n\t * @ignore\n\t */\n\tonMouseOut?: UnitControlProps[ 'onMouseOut' ];\n};\n\nexport type BoxControlProps = Pick< UnitControlProps, 'units' > &\n\tDeprecatedBoxControlProps & {\n\t\t/**\n\t\t * If this property is true, a button to reset the box control is rendered.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tallowReset?: boolean;\n\t\t/**\n\t\t * The id to use as a base for the unique HTML id attribute of the control.\n\t\t */\n\t\tid?: string;\n\t\t/**\n\t\t * Props for the internal `UnitControl` components.\n\t\t *\n\t\t * @default { min: 0 }\n\t\t */\n\t\tinputProps?: UnitControlPassthroughProps;\n\t\t/**\n\t\t * Heading label for the control.\n\t\t *\n\t\t * @default __( 'Box Control' )\n\t\t */\n\t\tlabel?: string;\n\t\t/**\n\t\t * A callback function when an input value changes.\n\t\t */\n\t\tonChange: ( next: BoxControlValue ) => void;\n\t\t/**\n\t\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t\t *\n\t\t * @default { top: undefined, right: undefined, bottom: undefined, left: undefined }\n\t\t */\n\t\tresetValues?: BoxControlValue;\n\t\t/**\n\t\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t\t *\n\t\t * Allowed values are \"top\", \"right\", \"bottom\", \"left\", \"vertical\", and \"horizontal\".\n\t\t */\n\t\tsides?: readonly (\n\t\t\t| keyof BoxControlValue\n\t\t\t| 'horizontal'\n\t\t\t| 'vertical'\n\t\t)[];\n\t\t/**\n\t\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t\t * can be used instead of updating individual sides.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\tsplitOnAxis?: boolean;\n\t\t/**\n\t\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t\t */\n\t\tvalues?: BoxControlValue;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Available presets to pick from.\n\t\t\t\t */\n\t\t\t\tpresets?: never;\n\t\t\t\t/**\n\t\t\t\t * The key of the preset to apply.\n\t\t\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t\t\t */\n\t\t\t\tpresetKey?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Available presets to pick from.\n\t\t\t\t */\n\t\t\t\tpresets: Preset[];\n\t\t\t\t/**\n\t\t\t\t * The key of the preset to apply.\n\t\t\t\t * If you provide a list of presets, you must provide a preset key to use.\n\t\t\t\t * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`\n\t\t\t\t */\n\t\t\t\tpresetKey: string;\n\t\t  }\n\t);\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tvalues: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides: BoxControlProps[ 'sides' ];\n\t/**\n\t * Side represents the current side being rendered by the input.\n\t * It can be a concrete side like: left, right, top, bottom or a combined one like: horizontal, vertical.\n\t */\n\tside: keyof typeof LABELS;\n\tpresets?: Preset[];\n\tpresetKey?: string;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":"","ignoreList":[]}

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

@@ -12,7 +12,6 @@ var _icons = require("@wordpress/icons");
 var _circularOptionPickerContext = require("./circular-option-picker-context");
 var _button = _interopRequireDefault(require("../button"));
 var _composite = require("../composite");
-var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
@@ -29,12 +28,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 function UnforwardedOptionAsButton(props, forwardedRef) {
   const {
     isPressed,
+    label,
     ...additionalProps
   } = props;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
     ...additionalProps,
     "aria-pressed": isPressed,
-    ref: forwardedRef
+    ref: forwardedRef,
+    label: label
   });
 }
 const OptionAsButton = (0, _element.forwardRef)(UnforwardedOptionAsButton);
@@ -42,6 +43,7 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
   const {
     id,
     isSelected,
+    label,
     ...additionalProps
   } = props;
   const {
@@ -61,7 +63,8 @@ function UnforwardedOptionAsOption(props, forwardedRef) {
       ...additionalProps,
       role: "option",
       "aria-selected": !!isSelected,
-      ref: forwardedRef
+      ref: forwardedRef,
+      label: label
     }),
     id: id
   });
@@ -88,17 +91,16 @@ function Option({
   const isListbox = setActiveId !== undefined;
   const optionControl = isListbox ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsOption, {
     ...commonProps,
+    label: tooltipText,
     isSelected: isSelected
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionAsButton, {
     ...commonProps,
+    label: tooltipText,
     isPressed: isSelected
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _clsx.default)(className, 'components-circular-option-picker__option-wrapper'),
-    children: [tooltipText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
-      text: tooltipText,
-      children: optionControl
-    }) : optionControl, isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+    children: [optionControl, isSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
       icon: _icons.check,
       ...selectedIconProps
     })]

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_tooltip","_jsxRuntime","UnforwardedOptionAsButton","props","forwardedRef","isPressed","additionalProps","jsx","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","setActiveId","activeId","useContext","CircularOptionPickerContext","useEffect","window","setTimeout","Composite","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useInstanceId","commonProps","__next40pxDefaultSize","isListbox","undefined","optionControl","jsxs","clsx","children","text","Icon","icon","check"],"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, useEffect } 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 { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport type { OptionProps } 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},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, ...additionalProps } = props;\n\n\tconst { setActiveId, activeId } = useContext( CircularOptionPickerContext );\n\n\tuseEffect( () => {\n\t\tif ( isSelected && ! activeId ) {\n\t\t\t// The setTimeout call is necessary to make sure that this update\n\t\t\t// doesn't get overridden by `Composite`'s internal logic, which picks\n\t\t\t// an initial active item if one is not specifically set.\n\t\t\twindow.setTimeout( () => setActiveId?.( id ), 0 );\n\t\t}\n\t}, [ isSelected, setActiveId, activeId, id ] );\n\n\treturn (\n\t\t<Composite.Item\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\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, setActiveId } = useContext( CircularOptionPickerContext );\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__next40pxDefaultSize: true,\n\t\t...additionalProps,\n\t};\n\n\tconst isListbox = setActiveId !== undefined;\n\tconst optionControl = isListbox ? (\n\t\t<OptionAsOption { ...commonProps } isSelected={ isSelected } />\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":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_element","_icons","_circularOptionPickerContext","_button","_composite","_jsxRuntime","UnforwardedOptionAsButton","props","forwardedRef","isPressed","label","additionalProps","jsx","default","ref","OptionAsButton","forwardRef","UnforwardedOptionAsOption","id","isSelected","setActiveId","activeId","useContext","CircularOptionPickerContext","useEffect","window","setTimeout","Composite","Item","render","role","OptionAsOption","Option","className","selectedIconProps","tooltipText","baseId","useInstanceId","commonProps","__next40pxDefaultSize","isListbox","undefined","optionControl","jsxs","clsx","children","Icon","icon","check"],"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, useEffect } 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 { Composite } from '../composite';\nimport type { OptionProps } from './types';\n\nfunction UnforwardedOptionAsButton(\n\tprops: {\n\t\tid?: string;\n\t\tclassName?: string;\n\t\tisPressed?: boolean;\n\t\tlabel?: string;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { isPressed, label, ...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\tlabel={ label }\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\tlabel?: string;\n\t},\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { id, isSelected, label, ...additionalProps } = props;\n\n\tconst { setActiveId, activeId } = useContext( CircularOptionPickerContext );\n\n\tuseEffect( () => {\n\t\tif ( isSelected && ! activeId ) {\n\t\t\t// The setTimeout call is necessary to make sure that this update\n\t\t\t// doesn't get overridden by `Composite`'s internal logic, which picks\n\t\t\t// an initial active item if one is not specifically set.\n\t\t\twindow.setTimeout( () => setActiveId?.( id ), 0 );\n\t\t}\n\t}, [ isSelected, setActiveId, activeId, id ] );\n\n\treturn (\n\t\t<Composite.Item\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\tlabel={ label }\n\t\t\t\t/>\n\t\t\t}\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, setActiveId } = useContext( CircularOptionPickerContext );\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__next40pxDefaultSize: true,\n\t\t...additionalProps,\n\t};\n\n\tconst isListbox = setActiveId !== undefined;\n\tconst optionControl = isListbox ? (\n\t\t<OptionAsOption\n\t\t\t{ ...commonProps }\n\t\t\tlabel={ tooltipText }\n\t\t\tisSelected={ isSelected }\n\t\t/>\n\t) : (\n\t\t<OptionAsButton\n\t\t\t{ ...commonProps }\n\t\t\tlabel={ tooltipText }\n\t\t\tisPressed={ isSelected }\n\t\t/>\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{ optionControl }\n\t\t\t{ isSelected && <Icon icon={ check } { ...selectedIconProps } /> }\n\t\t</div>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -51,7 +51,6 @@ var _jsxRuntime = require("react/jsx-runtime");
  * 						style={ { backgroundColor: color, color } }
  * 						isSelected={ index === currentColor }
  * 						onClick={ () => setCurrentColor( index ) }
- * 						aria-label={ name }
  * 					/>
  * 				);
  * 			} ) }

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_compose","_i18n","_element","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","_jsxRuntime","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","activeId","setActiveId","useState","undefined","contextValue","useMemo","jsx","jsxs","CircularOptionPickerContext","Provider","value","Composite","id","focusLoop","rtl","isRTL","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t\taria-label={ name }\n * \t\t\t\t\t/>\n * \t\t\t\t);\n * \t\t\t} ) }\n * \t\t</>\n * \t);\n * \treturn (\n * \t\t<CircularOptionPicker\n * \t\t\t\toptions={ colorOptions }\n * \t\t\t\tactions={\n * \t\t\t\t\t<CircularOptionPicker.ButtonAction\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( undefined ) }\n * \t\t\t\t\t>\n * \t\t\t\t\t\t{ 'Clear' }\n * \t\t\t\t\t</CircularOptionPicker.ButtonAction>\n * \t\t\t\t}\n * \t\t\t/>\n * \t);\n * };\n * ```\n */\n\nfunction ListboxCircularOptionPicker(\n\tprops: ListboxCircularOptionPickerProps\n) {\n\tconst {\n\t\tactions,\n\t\toptions,\n\t\tbaseId,\n\t\tclassName,\n\t\tloop = true,\n\t\tchildren,\n\t\t...additionalProps\n\t} = props;\n\n\tconst [ activeId, setActiveId ] = useState< string | null | undefined >(\n\t\tundefined\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t\tactiveId,\n\t\t\tsetActiveId,\n\t\t} ),\n\t\t[ baseId, activeId, setActiveId ]\n\t);\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\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\tfocusLoop={ loop }\n\t\t\t\t\trtl={ isRTL() }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tactiveId={ activeId }\n\t\t\t\t\tsetActiveId={ setActiveId }\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\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t} ),\n\t\t[ baseId ]\n\t);\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\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","_interopRequireDefault","require","_compose","_i18n","_element","_circularOptionPickerContext","_composite","_circularOptionPickerOption","_circularOptionPickerOptionGroup","_circularOptionPickerActions","_jsxRuntime","ListboxCircularOptionPicker","props","actions","options","baseId","className","loop","children","additionalProps","activeId","setActiveId","useState","undefined","contextValue","useMemo","jsx","jsxs","CircularOptionPickerContext","Provider","value","Composite","id","focusLoop","rtl","isRTL","role","ButtonsCircularOptionPicker","CircularOptionPicker","asButtons","actionsProp","optionsProp","useInstanceId","OptionPickerImplementation","clsx","Option","OptionGroup","ButtonAction","DropdownLinkAction","_default","exports","default"],"sources":["@wordpress/components/src/circular-option-picker/circular-option-picker.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { CircularOptionPickerContext } from './circular-option-picker-context';\nimport { Composite } from '../composite';\nimport type {\n\tCircularOptionPickerProps,\n\tListboxCircularOptionPickerProps,\n\tButtonsCircularOptionPickerProps,\n} from './types';\nimport { Option } from './circular-option-picker-option';\nimport { OptionGroup } from './circular-option-picker-option-group';\nimport {\n\tButtonAction,\n\tDropdownLinkAction,\n} from './circular-option-picker-actions';\n\n/**\n *`CircularOptionPicker` is a component that displays a set of options as circular buttons.\n *\n * ```jsx\n * import { CircularOptionPicker } from '../circular-option-picker';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ currentColor, setCurrentColor ] = useState();\n * \tconst colors = [\n * \t\t{ color: '#f00', name: 'Red' },\n * \t\t{ color: '#0f0', name: 'Green' },\n * \t\t{ color: '#00f', name: 'Blue' },\n * \t];\n * \tconst colorOptions = (\n * \t\t<>\n * \t\t\t{ colors.map( ( { color, name }, index ) => {\n * \t\t\t\treturn (\n * \t\t\t\t\t<CircularOptionPicker.Option\n * \t\t\t\t\t\tkey={ `${ color }-${ index }` }\n * \t\t\t\t\t\ttooltipText={ name }\n * \t\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n * \t\t\t\t\t\tisSelected={ index === currentColor }\n * \t\t\t\t\t\tonClick={ () => setCurrentColor( index ) }\n * \t\t\t\t\t/>\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 [ activeId, setActiveId ] = useState< string | null | undefined >(\n\t\tundefined\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t\tactiveId,\n\t\t\tsetActiveId,\n\t\t} ),\n\t\t[ baseId, activeId, setActiveId ]\n\t);\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\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\tfocusLoop={ loop }\n\t\t\t\t\trtl={ isRTL() }\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tactiveId={ activeId }\n\t\t\t\t\tsetActiveId={ setActiveId }\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\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tbaseId,\n\t\t} ),\n\t\t[ baseId ]\n\t);\n\n\treturn (\n\t\t<div { ...additionalProps } id={ baseId }>\n\t\t\t<CircularOptionPickerContext.Provider value={ contextValue }>\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/color-palette/index.js

@@ -64,12 +64,7 @@ function SinglePalette({
           backgroundColor: color,
           color
         },
-        onClick: isSelected ? clearColor : () => onChange(color, index),
-        "aria-label": name ?
-        // translators: %s: The name of the color e.g: "vivid red".
-        (0, _i18n.sprintf)((0, _i18n.__)('Color: %s'), name) :
-        // translators: %s: color hex code e.g: "#f00".
-        (0, _i18n.sprintf)((0, _i18n.__)('Color code: %s'), color)
+        onClick: isSelected ? clearColor : () => onChange(color, index)
       }, `${color}-${index}`);
     });
   }, [colors, value, onChange, clearColor]);