@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.0

package/build/color-palette/index.js

@@ -1,43 +1,55 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_palette_exports = {};
+__export(color_palette_exports, {
+  ColorPalette: () => ColorPalette,
+  CustomColorPickerDropdown: () => CustomColorPickerDropdown,
+  default: () => color_palette_default
 });
-exports.ColorPalette = void 0;
-exports.CustomColorPickerDropdown = CustomColorPickerDropdown;
-exports.default = void 0;
-var _colord = require("colord");
-var _names = _interopRequireDefault(require("colord/plugins/names"));
-var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
-var _clsx = _interopRequireDefault(require("clsx"));
-var _compose = require("@wordpress/compose");
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _dropdown = _interopRequireDefault(require("../dropdown"));
-var _colorPicker = require("../color-picker");
-var _circularOptionPicker = _interopRequireWildcard(require("../circular-option-picker"));
-var _vStack = require("../v-stack");
-var _truncate = require("../truncate");
-var _styles = require("./styles");
-var _dropdownContentWrapper = _interopRequireDefault(require("../dropdown/dropdown-content-wrapper"));
-var _utils = require("./utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-(0, _colord.extend)([_names.default, _a11y.default]);
+module.exports = __toCommonJS(color_palette_exports);
+var import_colord = require("colord");
+var import_names = __toESM(require("colord/plugins/names"));
+var import_a11y = __toESM(require("colord/plugins/a11y"));
+var import_clsx = __toESM(require("clsx"));
+var import_compose = require("@wordpress/compose");
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_dropdown = __toESM(require("../dropdown"));
+var import_color_picker = require("../color-picker");
+var import_circular_option_picker = __toESM(require("../circular-option-picker"));
+var import_v_stack = require("../v-stack");
+var import_truncate = require("../truncate");
+var import_styles = require("./styles");
+var import_dropdown_content_wrapper = __toESM(require("../dropdown/dropdown-content-wrapper"));
+var import_utils = require("./utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+(0, import_colord.extend)([import_names.default, import_a11y.default]);
 function SinglePalette({
   className,
   clearColor,
@@ -46,21 +58,20 @@ function SinglePalette({
   value,
   ...additionalProps
 }) {
-  const colorOptions = (0, _element.useMemo)(() => {
+  const colorOptions = (0, import_element.useMemo)(() => {
     return colors.map(({
       color,
       name
     }, index) => {
-      const colordColor = (0, _colord.colord)(color);
+      const colordColor = (0, import_colord.colord)(color);
       const isSelected = value === color;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.Option, {
-        isSelected: isSelected,
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.Option, {
+        isSelected,
         selectedIconProps: isSelected ? {
-          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
+          fill: colordColor.contrast() > colordColor.contrast("#000") ? "#fff" : "#000"
         } : {},
-        tooltipText: name ||
-        // translators: %s: color hex code e.g: "#f00".
-        (0, _i18n.sprintf)((0, _i18n.__)('Color code: %s'), color),
+        tooltipText: name || // translators: %s: color hex code e.g: "#f00".
+        (0, import_i18n.sprintf)((0, import_i18n.__)("Color code: %s"), color),
         style: {
           backgroundColor: color,
           color
@@ -69,8 +80,8 @@ function SinglePalette({
       }, `${color}-${index}`);
     });
   }, [colors, value, onChange, clearColor]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.OptionGroup, {
-    className: className,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.OptionGroup, {
+    className,
     options: colorOptions,
     ...additionalProps
   });
@@ -83,29 +94,29 @@ function MultiplePalettes({
   value,
   headingLevel
 }) {
-  const instanceId = (0, _compose.useInstanceId)(MultiplePalettes, 'color-palette');
+  const instanceId = (0, import_compose.useInstanceId)(MultiplePalettes, "color-palette");
   if (colors.length === 0) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_vStack.VStack, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_v_stack.VStack, {
     spacing: 3,
-    className: className,
+    className,
     children: colors.map(({
       name,
       colors: colorPalette
     }, index) => {
       const id = `${instanceId}-${index}`;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
         spacing: 2,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ColorHeading, {
-          id: id,
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.ColorHeading, {
+          id,
           level: headingLevel,
           children: name
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SinglePalette, {
-          clearColor: clearColor,
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SinglePalette, {
+          clearColor,
           colors: colorPalette,
-          onChange: newColor => onChange(newColor, index),
-          value: value,
+          onChange: (newColor) => onChange(newColor, index),
+          value,
           "aria-labelledby": id
         })]
       }, index);
@@ -117,27 +128,27 @@ function CustomColorPickerDropdown({
   popoverProps: receivedPopoverProps,
   ...props
 }) {
-  const popoverProps = (0, _element.useMemo)(() => ({
+  const popoverProps = (0, import_element.useMemo)(() => ({
     shift: true,
     // Disabling resize as it would otherwise cause the popover to show
     // scrollbars while dragging the color picker's handle close to the
     // popover edge.
     resize: false,
-    ...(isRenderedInSidebar ? {
+    ...isRenderedInSidebar ? {
       // When in the sidebar: open to the left (stacking),
       // leaving the same gap as the parent popover.
-      placement: 'left-start',
+      placement: "left-start",
       offset: 34
     } : {
       // Default behavior: open below the anchor
-      placement: 'bottom',
+      placement: "bottom",
       offset: 8
-    }),
+    },
     ...receivedPopoverProps
   }), [isRenderedInSidebar, receivedPopoverProps]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.default, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown.default, {
     contentClassName: "components-color-palette__custom-color-dropdown-content",
-    popoverProps: popoverProps,
+    popoverProps,
     ...props
   });
 }
@@ -153,61 +164,62 @@ function UnforwardedColorPalette(props, forwardedRef) {
     value,
     __experimentalIsRenderedInSidebar = false,
     headingLevel = 2,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
     ...additionalProps
   } = props;
-  const [normalizedColorValue, setNormalizedColorValue] = (0, _element.useState)(value);
-  const clearColor = (0, _element.useCallback)(() => onChange(undefined), [onChange]);
-  const customColorPaletteCallbackRef = (0, _element.useCallback)(node => {
-    setNormalizedColorValue((0, _utils.normalizeColorValue)(value, node));
+  const [normalizedColorValue, setNormalizedColorValue] = (0, import_element.useState)(value);
+  const clearColor = (0, import_element.useCallback)(() => onChange(void 0), [onChange]);
+  const customColorPaletteCallbackRef = (0, import_element.useCallback)((node) => {
+    setNormalizedColorValue((0, import_utils.normalizeColorValue)(value, node));
   }, [value]);
-  const hasMultipleColorOrigins = (0, _utils.isMultiplePaletteArray)(colors);
-  const buttonLabelName = (0, _element.useMemo)(() => (0, _utils.extractColorNameFromCurrentValue)(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
-  const renderCustomColorPicker = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownContentWrapper.default, {
+  const hasMultipleColorOrigins = (0, import_utils.isMultiplePaletteArray)(colors);
+  const buttonLabelName = (0, import_element.useMemo)(() => (0, import_utils.extractColorNameFromCurrentValue)(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);
+  const renderCustomColorPicker = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_content_wrapper.default, {
     paddingSize: "none",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_colorPicker.ColorPicker, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_picker.ColorPicker, {
       color: normalizedColorValue,
-      onChange: color => onChange(color),
-      enableAlpha: enableAlpha
+      onChange: (color) => onChange(color),
+      enableAlpha
     })
   });
-  const isHex = value?.startsWith('#');
-
-  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.
-  const displayValue = value?.replace(/^var\((.+)\)$/, '$1');
-  const customColorAccessibleLabel = !!displayValue ? (0, _i18n.sprintf)(
-  // translators: 1: The name of the color e.g: "vivid red". 2: The color's hex code e.g: "#f00".
-  (0, _i18n.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0, _i18n.__)('Custom color picker');
+  const isHex = value?.startsWith("#");
+  const displayValue = value?.replace(/^var\((.+)\)$/, "$1");
+  const customColorAccessibleLabel = !!displayValue ? (0, import_i18n.sprintf)(
+    // translators: 1: The name of the color e.g: "vivid red". 2: The color's hex code e.g: "#f00".
+    (0, import_i18n.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'),
+    buttonLabelName,
+    displayValue
+  ) : (0, import_i18n.__)("Custom color picker");
   const paletteCommonProps = {
     clearColor,
     onChange,
     value
   };
-  const actions = !!clearable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default.ButtonAction, {
+  const actions = !!clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default.ButtonAction, {
     onClick: clearColor,
     accessibleWhenDisabled: true,
     disabled: !value,
-    children: (0, _i18n.__)('Clear')
+    children: (0, import_i18n.__)("Clear")
   });
   const {
     metaProps,
     labelProps
-  } = (0, _circularOptionPicker.getComputeCircularOptionPickerCommonProps)(asButtons, loop, ariaLabel, ariaLabelledby);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
+  } = (0, import_circular_option_picker.getComputeCircularOptionPickerCommonProps)(asButtons, loop, ariaLabel, ariaLabelledby);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
     spacing: 3,
     ref: forwardedRef,
     ...additionalProps,
-    children: [!disableCustomColors && /*#__PURE__*/(0, _jsxRuntime.jsx)(CustomColorPickerDropdown, {
+    children: [!disableCustomColors && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomColorPickerDropdown, {
       isRenderedInSidebar: __experimentalIsRenderedInSidebar,
       renderContent: renderCustomColorPicker,
       renderToggle: ({
         isOpen,
         onToggle
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
+      }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
         className: "components-color-palette__custom-color-wrapper",
         spacing: 0,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
           ref: customColorPaletteCallbackRef,
           className: "components-color-palette__custom-color-button",
           "aria-expanded": isOpen,
@@ -218,62 +230,42 @@ function UnforwardedColorPalette(props, forwardedRef) {
             background: value
           },
           type: "button"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vStack.VStack, {
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
           className: "components-color-palette__custom-color-text-wrapper",
           spacing: 0.5,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_truncate.Truncate, {
+          children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_truncate.Truncate, {
             className: "components-color-palette__custom-color-name",
-            children: value ? buttonLabelName : (0, _i18n.__)('No color selected')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncate.Truncate, {
-            className: (0, _clsx.default)('components-color-palette__custom-color-value', {
-              'components-color-palette__custom-color-value--is-hex': isHex
+            children: value ? buttonLabelName : (0, import_i18n.__)("No color selected")
+          }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_truncate.Truncate, {
+            className: (0, import_clsx.default)("components-color-palette__custom-color-value", {
+              "components-color-palette__custom-color-value--is-hex": isHex
             }),
             children: displayValue
           })]
         })]
       })
-    }), (colors.length > 0 || actions) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_circularOptionPicker.default, {
+    }), (colors.length > 0 || actions) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_circular_option_picker.default, {
       ...metaProps,
       ...labelProps,
-      actions: actions,
-      options: hasMultipleColorOrigins ? /*#__PURE__*/(0, _jsxRuntime.jsx)(MultiplePalettes, {
+      actions,
+      options: hasMultipleColorOrigins ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MultiplePalettes, {
         ...paletteCommonProps,
-        headingLevel: headingLevel,
-        colors: colors,
-        value: value
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(SinglePalette, {
+        headingLevel,
+        colors,
+        value
+      }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SinglePalette, {
         ...paletteCommonProps,
-        colors: colors,
-        value: value
+        colors,
+        value
       })
     })]
   });
 }
-
-/**
- * Allows the user to pick a color from a list of pre-defined color entries.
- *
- * ```jsx
- * import { ColorPalette } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyColorPalette = () => {
- *   const [ color, setColor ] = useState ( '#f00' )
- *   const colors = [
- *     { name: 'red', color: '#f00' },
- *     { name: 'white', color: '#fff' },
- *     { name: 'blue', color: '#00f' },
- *   ];
- *   return (
- *     <ColorPalette
- *       colors={ colors }
- *       value={ color }
- *       onChange={ ( color ) => setColor( color ) }
- *     />
- *   );
- * } );
- * ```
- */
-const ColorPalette = exports.ColorPalette = (0, _element.forwardRef)(UnforwardedColorPalette);
-var _default = exports.default = ColorPalette;
-//# sourceMappingURL=index.js.map
+const ColorPalette = (0, import_element.forwardRef)(UnforwardedColorPalette);
+var color_palette_default = ColorPalette;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorPalette,
+  CustomColorPickerDropdown
+});
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_a11y","_clsx","_compose","_i18n","_element","_dropdown","_colorPicker","_circularOptionPicker","_interopRequireWildcard","_vStack","_truncate","_styles","_dropdownContentWrapper","_utils","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","extend","namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","additionalProps","colorOptions","useMemo","map","color","name","index","colordColor","colord","isSelected","jsx","Option","selectedIconProps","fill","contrast","tooltipText","sprintf","__","style","backgroundColor","onClick","OptionGroup","options","MultiplePalettes","headingLevel","instanceId","useInstanceId","length","VStack","spacing","children","colorPalette","id","jsxs","ColorHeading","level","newColor","CustomColorPickerDropdown","isRenderedInSidebar","popoverProps","receivedPopoverProps","props","shift","resize","placement","offset","contentClassName","UnforwardedColorPalette","forwardedRef","asButtons","loop","clearable","disableCustomColors","enableAlpha","__experimentalIsRenderedInSidebar","ariaLabel","ariaLabelledby","normalizedColorValue","setNormalizedColorValue","useState","useCallback","undefined","customColorPaletteCallbackRef","node","normalizeColorValue","hasMultipleColorOrigins","isMultiplePaletteArray","buttonLabelName","extractColorNameFromCurrentValue","renderCustomColorPicker","paddingSize","ColorPicker","isHex","startsWith","displayValue","replace","customColorAccessibleLabel","paletteCommonProps","actions","ButtonAction","accessibleWhenDisabled","disabled","metaProps","labelProps","getComputeCircularOptionPickerCommonProps","ref","renderContent","renderToggle","isOpen","onToggle","background","type","Truncate","clsx","ColorPalette","exports","forwardRef","_default"],"sources":["@wordpress/components/src/color-palette/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, {\n\tgetComputeCircularOptionPickerCommonProps,\n} from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport type {\n\tColorObject,\n\tColorPaletteProps,\n\tCustomColorPickerDropdownProps,\n\tMultiplePalettesProps,\n\tPaletteObject,\n\tSinglePaletteProps,\n} from './types';\nimport type { WordPressComponentProps } from '../context';\nimport type { DropdownProps } from '../dropdown/types';\nimport {\n\textractColorNameFromCurrentValue,\n\tisMultiplePaletteArray,\n\tnormalizeColorValue,\n} from './utils';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\t...additionalProps\n}: SinglePaletteProps ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn colors.map( ( { color, name }, index ) => {\n\t\t\tconst colordColor = colord( color );\n\t\t\tconst isSelected = value === color;\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tisSelected ? clearColor : () => onChange( color, index )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\n\treturn (\n\t\t<CircularOptionPicker.OptionGroup\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\theadingLevel,\n}: MultiplePalettesProps ) {\n\tconst instanceId = useInstanceId( MultiplePalettes, 'color-palette' );\n\n\tif ( colors.length === 0 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\tconst id = `${ instanceId }-${ index }`;\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading id={ id } level={ headingLevel }>\n\t\t\t\t\t\t\t{ name }\n\t\t\t\t\t\t</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ ( newColor ) =>\n\t\t\t\t\t\t\t\tonChange( newColor, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\taria-labelledby={ id }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( {\n\tisRenderedInSidebar,\n\tpopoverProps: receivedPopoverProps,\n\t...props\n}: CustomColorPickerDropdownProps ) {\n\tconst popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(\n\t\t() => ( {\n\t\t\tshift: true,\n\t\t\t// Disabling resize as it would otherwise cause the popover to show\n\t\t\t// scrollbars while dragging the color picker's handle close to the\n\t\t\t// popover edge.\n\t\t\tresize: false,\n\t\t\t...( isRenderedInSidebar\n\t\t\t\t? {\n\t\t\t\t\t\t// When in the sidebar: open to the left (stacking),\n\t\t\t\t\t\t// leaving the same gap as the parent popover.\n\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\toffset: 34,\n\t\t\t\t  }\n\t\t\t\t: {\n\t\t\t\t\t\t// Default behavior: open below the anchor\n\t\t\t\t\t\tplacement: 'bottom',\n\t\t\t\t\t\toffset: 8,\n\t\t\t\t  } ),\n\t\t\t...receivedPopoverProps,\n\t\t} ),\n\t\t[ isRenderedInSidebar, receivedPopoverProps ]\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={ popoverProps }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nfunction UnforwardedColorPalette(\n\tprops: WordPressComponentProps< ColorPaletteProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tasButtons,\n\t\tloop,\n\t\tclearable = true,\n\t\tcolors = [],\n\t\tdisableCustomColors = false,\n\t\tenableAlpha = false,\n\t\tonChange,\n\t\tvalue,\n\t\t__experimentalIsRenderedInSidebar = false,\n\t\theadingLevel = 2,\n\t\t'aria-label': ariaLabel,\n\t\t'aria-labelledby': ariaLabelledby,\n\t\t...additionalProps\n\t} = props;\n\tconst [ normalizedColorValue, setNormalizedColorValue ] = useState( value );\n\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\n\tconst customColorPaletteCallbackRef = useCallback(\n\t\t( node: HTMLElement | null ) => {\n\t\t\tsetNormalizedColorValue( normalizeColorValue( value, node ) );\n\t\t},\n\t\t[ value ]\n\t);\n\n\tconst hasMultipleColorOrigins = isMultiplePaletteArray( colors );\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\thasMultipleColorOrigins\n\t\t\t),\n\t\t[ value, colors, hasMultipleColorOrigins ]\n\t);\n\n\tconst renderCustomColorPicker = () => (\n\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t<ColorPicker\n\t\t\t\tcolor={ normalizedColorValue }\n\t\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t</DropdownContentWrapper>\n\t);\n\tconst isHex = value?.startsWith( '#' );\n\n\t// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n\tconst displayValue = value?.replace( /^var\\((.+)\\)$/, '$1' );\n\tconst customColorAccessibleLabel = !! displayValue\n\t\t? sprintf(\n\t\t\t\t// translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tdisplayValue\n\t\t  )\n\t\t: __( 'Custom color picker' );\n\n\tconst paletteCommonProps = {\n\t\tclearColor,\n\t\tonChange,\n\t\tvalue,\n\t};\n\n\tconst actions = !! clearable && (\n\t\t<CircularOptionPicker.ButtonAction\n\t\t\tonClick={ clearColor }\n\t\t\taccessibleWhenDisabled\n\t\t\tdisabled={ ! value }\n\t\t>\n\t\t\t{ __( 'Clear' ) }\n\t\t</CircularOptionPicker.ButtonAction>\n\t);\n\n\tconst { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(\n\t\tasButtons,\n\t\tloop,\n\t\tariaLabel,\n\t\tariaLabelledby\n\t);\n\n\treturn (\n\t\t<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-wrapper\"\n\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tref={ customColorPaletteCallbackRef }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-button\"\n\t\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-text-wrapper\"\n\t\t\t\t\t\t\t\tspacing={ 0.5 }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Truncate className=\"components-color-palette__custom-color-name\">\n\t\t\t\t\t\t\t\t\t{ value\n\t\t\t\t\t\t\t\t\t\t? buttonLabelName\n\t\t\t\t\t\t\t\t\t\t: __( 'No color selected' ) }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\tThis `Truncate` is always rendered, even if\n\t\t\t\t\t\t\t\tthere is no `displayValue`, to ensure the layout\n\t\t\t\t\t\t\t\tdoes not shift\n\t\t\t\t\t\t\t\t*/ }\n\t\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'components-color-palette__custom-color-value--is-hex':\n\t\t\t\t\t\t\t\t\t\t\t\tisHex,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ displayValue }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ( colors.length > 0 || actions ) && (\n\t\t\t\t<CircularOptionPicker\n\t\t\t\t\t{ ...metaProps }\n\t\t\t\t\t{ ...labelProps }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\toptions={\n\t\t\t\t\t\thasMultipleColorOrigins ? (\n\t\t\t\t\t\t\t<MultiplePalettes\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\t\t\t\tcolors={ colors as PaletteObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\t\t{ ...paletteCommonProps }\n\t\t\t\t\t\t\t\tcolors={ colors as ColorObject[] }\n\t\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef( UnforwardedColorPalette );\n\nexport default ColorPalette;\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/color-palette/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker, { getComputeCircularOptionPickerCommonProps } from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\nimport DropdownContentWrapper from '../dropdown/dropdown-content-wrapper';\nimport { extractColorNameFromCurrentValue, isMultiplePaletteArray, normalizeColorValue } from './utils';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin, a11yPlugin]);\nfunction SinglePalette({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  ...additionalProps\n}) {\n  const colorOptions = useMemo(() => {\n    return colors.map(({\n      color,\n      name\n    }, index) => {\n      const colordColor = colord(color);\n      const isSelected = value === color;\n      return /*#__PURE__*/_jsx(CircularOptionPicker.Option, {\n        isSelected: isSelected,\n        selectedIconProps: isSelected ? {\n          fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'\n        } : {},\n        tooltipText: name ||\n        // translators: %s: color hex code e.g: \"#f00\".\n        sprintf(__('Color code: %s'), color),\n        style: {\n          backgroundColor: color,\n          color\n        },\n        onClick: isSelected ? clearColor : () => onChange(color, index)\n      }, `${color}-${index}`);\n    });\n  }, [colors, value, onChange, clearColor]);\n  return /*#__PURE__*/_jsx(CircularOptionPicker.OptionGroup, {\n    className: className,\n    options: colorOptions,\n    ...additionalProps\n  });\n}\nfunction MultiplePalettes({\n  className,\n  clearColor,\n  colors,\n  onChange,\n  value,\n  headingLevel\n}) {\n  const instanceId = useInstanceId(MultiplePalettes, 'color-palette');\n  if (colors.length === 0) {\n    return null;\n  }\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    className: className,\n    children: colors.map(({\n      name,\n      colors: colorPalette\n    }, index) => {\n      const id = `${instanceId}-${index}`;\n      return /*#__PURE__*/_jsxs(VStack, {\n        spacing: 2,\n        children: [/*#__PURE__*/_jsx(ColorHeading, {\n          id: id,\n          level: headingLevel,\n          children: name\n        }), /*#__PURE__*/_jsx(SinglePalette, {\n          clearColor: clearColor,\n          colors: colorPalette,\n          onChange: newColor => onChange(newColor, index),\n          value: value,\n          \"aria-labelledby\": id\n        })]\n      }, index);\n    })\n  });\n}\nexport function CustomColorPickerDropdown({\n  isRenderedInSidebar,\n  popoverProps: receivedPopoverProps,\n  ...props\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    // Disabling resize as it would otherwise cause the popover to show\n    // scrollbars while dragging the color picker's handle close to the\n    // popover edge.\n    resize: false,\n    ...(isRenderedInSidebar ? {\n      // When in the sidebar: open to the left (stacking),\n      // leaving the same gap as the parent popover.\n      placement: 'left-start',\n      offset: 34\n    } : {\n      // Default behavior: open below the anchor\n      placement: 'bottom',\n      offset: 8\n    }),\n    ...receivedPopoverProps\n  }), [isRenderedInSidebar, receivedPopoverProps]);\n  return /*#__PURE__*/_jsx(Dropdown, {\n    contentClassName: \"components-color-palette__custom-color-dropdown-content\",\n    popoverProps: popoverProps,\n    ...props\n  });\n}\nfunction UnforwardedColorPalette(props, forwardedRef) {\n  const {\n    asButtons,\n    loop,\n    clearable = true,\n    colors = [],\n    disableCustomColors = false,\n    enableAlpha = false,\n    onChange,\n    value,\n    __experimentalIsRenderedInSidebar = false,\n    headingLevel = 2,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    ...additionalProps\n  } = props;\n  const [normalizedColorValue, setNormalizedColorValue] = useState(value);\n  const clearColor = useCallback(() => onChange(undefined), [onChange]);\n  const customColorPaletteCallbackRef = useCallback(node => {\n    setNormalizedColorValue(normalizeColorValue(value, node));\n  }, [value]);\n  const hasMultipleColorOrigins = isMultiplePaletteArray(colors);\n  const buttonLabelName = useMemo(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);\n  const renderCustomColorPicker = () => /*#__PURE__*/_jsx(DropdownContentWrapper, {\n    paddingSize: \"none\",\n    children: /*#__PURE__*/_jsx(ColorPicker, {\n      color: normalizedColorValue,\n      onChange: color => onChange(color),\n      enableAlpha: enableAlpha\n    })\n  });\n  const isHex = value?.startsWith('#');\n\n  // Leave hex values as-is. Remove the `var()` wrapper from CSS vars.\n  const displayValue = value?.replace(/^var\\((.+)\\)$/, '$1');\n  const customColorAccessibleLabel = !!displayValue ? sprintf(\n  // translators: 1: The name of the color e.g: \"vivid red\". 2: The color's hex code e.g: \"#f00\".\n  __('Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'), buttonLabelName, displayValue) : __('Custom color picker');\n  const paletteCommonProps = {\n    clearColor,\n    onChange,\n    value\n  };\n  const actions = !!clearable && /*#__PURE__*/_jsx(CircularOptionPicker.ButtonAction, {\n    onClick: clearColor,\n    accessibleWhenDisabled: true,\n    disabled: !value,\n    children: __('Clear')\n  });\n  const {\n    metaProps,\n    labelProps\n  } = getComputeCircularOptionPickerCommonProps(asButtons, loop, ariaLabel, ariaLabelledby);\n  return /*#__PURE__*/_jsxs(VStack, {\n    spacing: 3,\n    ref: forwardedRef,\n    ...additionalProps,\n    children: [!disableCustomColors && /*#__PURE__*/_jsx(CustomColorPickerDropdown, {\n      isRenderedInSidebar: __experimentalIsRenderedInSidebar,\n      renderContent: renderCustomColorPicker,\n      renderToggle: ({\n        isOpen,\n        onToggle\n      }) => /*#__PURE__*/_jsxs(VStack, {\n        className: \"components-color-palette__custom-color-wrapper\",\n        spacing: 0,\n        children: [/*#__PURE__*/_jsx(\"button\", {\n          ref: customColorPaletteCallbackRef,\n          className: \"components-color-palette__custom-color-button\",\n          \"aria-expanded\": isOpen,\n          \"aria-haspopup\": \"true\",\n          onClick: onToggle,\n          \"aria-label\": customColorAccessibleLabel,\n          style: {\n            background: value\n          },\n          type: \"button\"\n        }), /*#__PURE__*/_jsxs(VStack, {\n          className: \"components-color-palette__custom-color-text-wrapper\",\n          spacing: 0.5,\n          children: [/*#__PURE__*/_jsx(Truncate, {\n            className: \"components-color-palette__custom-color-name\",\n            children: value ? buttonLabelName : __('No color selected')\n          }), /*#__PURE__*/_jsx(Truncate, {\n            className: clsx('components-color-palette__custom-color-value', {\n              'components-color-palette__custom-color-value--is-hex': isHex\n            }),\n            children: displayValue\n          })]\n        })]\n      })\n    }), (colors.length > 0 || actions) && /*#__PURE__*/_jsx(CircularOptionPicker, {\n      ...metaProps,\n      ...labelProps,\n      actions: actions,\n      options: hasMultipleColorOrigins ? /*#__PURE__*/_jsx(MultiplePalettes, {\n        ...paletteCommonProps,\n        headingLevel: headingLevel,\n        colors: colors,\n        value: value\n      }) : /*#__PURE__*/_jsx(SinglePalette, {\n        ...paletteCommonProps,\n        colors: colors,\n        value: value\n      })\n    })]\n  });\n}\n\n/**\n * Allows the user to pick a color from a list of pre-defined color entries.\n *\n * ```jsx\n * import { ColorPalette } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyColorPalette = () => {\n *   const [ color, setColor ] = useState ( '#f00' )\n *   const colors = [\n *     { name: 'red', color: '#f00' },\n *     { name: 'white', color: '#fff' },\n *     { name: 'blue', color: '#00f' },\n *   ];\n *   return (\n *     <ColorPalette\n *       colors={ colors }\n *       value={ color }\n *       onChange={ ( color ) => setColor( color ) }\n *     />\n *   );\n * } );\n * ```\n */\nexport const ColorPalette = forwardRef(UnforwardedColorPalette);\nexport default ColorPalette;"],
+  "mappings": "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",
+  "names": ["namesPlugin", "a11yPlugin", "_jsx", "CircularOptionPicker", "_jsxs", "Dropdown", "DropdownContentWrapper", "clsx"]
+}

package/build/color-palette/styles.js

@@ -1,18 +1,42 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styles_exports = {};
+__export(styles_exports, {
+  ColorHeading: () => ColorHeading
 });
-exports.ColorHeading = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _heading = require("../heading");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /**
- * External dependencies
- */ /**
- * Internal dependencies
- */
-const ColorHeading = exports.ColorHeading = /*#__PURE__*/(0, _base.default)(_heading.Heading, process.env.NODE_ENV === "production" ? {
+module.exports = __toCommonJS(styles_exports);
+var import_base = __toESM(require("@emotion/styled/base"));
+var import_heading = require("../heading");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() {
+  return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
+}
+const ColorHeading = /* @__PURE__ */ (0, import_base.default)(import_heading.Heading, process.env.NODE_ENV === "production" ? {
   target: "ev9wop70"
 } : {
   target: "ev9wop70",
@@ -23,7 +47,11 @@ const ColorHeading = exports.ColorHeading = /*#__PURE__*/(0, _base.default)(_hea
 } : {
   name: "13lxv2o",
   styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVTZDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY29sb3ItcGFsZXR0ZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEhlYWRpbmcgfSBmcm9tICcuLi9oZWFkaW5nJztcblxuZXhwb3J0IGNvbnN0IENvbG9ySGVhZGluZyA9IHN0eWxlZCggSGVhZGluZyApYFxuXHR0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuXHRsaW5lLWhlaWdodDogMjRweDtcblx0Zm9udC13ZWlnaHQ6IDUwMDtcblx0JiYmIHtcblx0XHRmb250LXNpemU6IDExcHg7XG5cdFx0bWFyZ2luLWJvdHRvbTogMDtcblx0fVxuYDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVNkMiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckhlYWRpbmcgPSBzdHlsZWQoIEhlYWRpbmcgKWBcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0bGluZS1oZWlnaHQ6IDI0cHg7XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-//# sourceMappingURL=styles.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorHeading
+});
+//# sourceMappingURL=styles.js.map

package/build/color-palette/styles.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_heading","require","_EMOTION_STRINGIFIED_CSS_ERROR__","ColorHeading","exports","_base","default","Heading","process","env","NODE_ENV","target","label","name","styles","map","toString"],"sources":["@wordpress/components/src/color-palette/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { Heading } from '../heading';\n\nexport const ColorHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: 24px;\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n"],"mappings":";;;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAAqC,SAAAC,iCAAA,gPARrC;AACA;AACA,GAFA,CAKA;AACA;AACA;AAGO,MAAMC,YAAY,GAAAC,OAAA,CAAAD,YAAA,gBAAG,IAAAE,KAAA,CAAAC,OAAA,EAAQC,gBAAO,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAd;AAAA,EAQ5C","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/color-palette/styles.ts"],
+  "sourcesContent": ["import _styled from \"@emotion/styled/base\";\nfunction _EMOTION_STRINGIFIED_CSS_ERROR__() { return \"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).\"; }\n/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport { Heading } from '../heading';\nexport const ColorHeading = /*#__PURE__*/_styled(Heading, process.env.NODE_ENV === \"production\" ? {\n  target: \"ev9wop70\"\n} : {\n  target: \"ev9wop70\",\n  label: \"ColorHeading\"\n})(process.env.NODE_ENV === \"production\" ? {\n  name: \"13lxv2o\",\n  styles: \"text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}\"\n} : {\n  name: \"13lxv2o\",\n  styles: \"text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}\",\n  map: \"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFVNkMiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBIZWFkaW5nIH0gZnJvbSAnLi4vaGVhZGluZyc7XG5cbmV4cG9ydCBjb25zdCBDb2xvckhlYWRpbmcgPSBzdHlsZWQoIEhlYWRpbmcgKWBcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0bGluZS1oZWlnaHQ6IDI0cHg7XG5cdGZvbnQtd2VpZ2h0OiA1MDA7XG5cdCYmJiB7XG5cdFx0Zm9udC1zaXplOiAxMXB4O1xuXHRcdG1hcmdpbi1ib3R0b206IDA7XG5cdH1cbmA7XG4iXX0= */\",\n  toString: _EMOTION_STRINGIFIED_CSS_ERROR__\n});"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAoB;AASpB,qBAAwB;AARxB,SAAS,mCAAmC;AAAE,SAAO;AAAmO;AASjR,MAAM,eAA4B,gCAAAA,SAAQ,wBAAS,QAAQ,IAAI,aAAa,eAAe;AAAA,EAChG,QAAQ;AACV,IAAI;AAAA,EACF,QAAQ;AAAA,EACR,OAAO;AACT,CAAC,EAAE,QAAQ,IAAI,aAAa,eAAe;AAAA,EACzC,MAAM;AAAA,EACN,QAAQ;AACV,IAAI;AAAA,EACF,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,UAAU;AACZ,CAAC;",
+  "names": ["_styled"]
+}

package/build/color-palette/types.js

@@ -1,6 +1,17 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.js.map
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.js.map

package/build/color-palette/types.js.map

@@ -1 +1,7 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/color-palette/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DropdownProps } from '../dropdown/types';\nimport type { HeadingSize } from '../heading/types';\n\nexport type ColorObject = {\n\tname: string;\n\tcolor: NonNullable< CSSProperties[ 'color' ] >;\n};\n\nexport type PaletteObject = {\n\tname: string;\n\tcolors: ColorObject[];\n};\n\ntype PaletteProps = {\n\tclassName?: string;\n\tclearColor: () => void;\n\t/**\n\t * Callback called when a color is selected.\n\t */\n\tonChange: ( newColor?: string, index?: number ) => void;\n\tvalue?: string;\n\tactions?: ReactNode;\n\theadingLevel?: HeadingSize;\n};\n\nexport type SinglePaletteProps = PaletteProps & {\n\tcolors: ColorObject[];\n};\n\nexport type MultiplePalettesProps = PaletteProps & {\n\tcolors: PaletteObject[];\n};\n\nexport type CustomColorPickerDropdownProps = DropdownProps & {\n\tisRenderedInSidebar: boolean;\n};\n\nexport type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {\n\t/**\n\t * Whether the palette should have a clearing button.\n\t *\n\t * @default true\n\t */\n\tclearable?: boolean;\n\t/**\n\t * Array with the colors to be shown. When displaying multiple color palettes\n\t * to choose from, the format of the array changes from an array of colors\n\t * objects, to an array of color palettes.\n\t *\n\t * @default []\n\t */\n\tcolors?: PaletteObject[] | ColorObject[];\n\t/**\n\t * Whether to allow the user to pick a custom color on top of the predefined\n\t * choices (defined via the `colors` prop).\n\t *\n\t * @default false\n\t */\n\tdisableCustomColors?: boolean;\n\t/**\n\t * This controls whether the alpha channel will be offered when selecting\n\t * custom colors.\n\t *\n\t * @default false\n\t */\n\tenableAlpha?: boolean;\n\t/**\n\t * The heading level.\n\t *\n\t * @default 2\n\t */\n\theadingLevel?: HeadingSize;\n\t/**\n\t * Currently active value.\n\t */\n\tvalue?: string;\n\t/**\n\t * Whether the control should present as a set of buttons,\n\t * each with its own tab stop.\n\t *\n\t * @default false\n\t */\n\tasButtons?: boolean;\n\t/**\n\t * Prevents keyboard interaction from wrapping around.\n\t * Only used when `asButtons` is not true.\n\t *\n\t * @default true\n\t */\n\tloop?: boolean;\n\t/**\n\t * Whether this is rendered in the sidebar.\n\t *\n\t * @default false\n\t */\n\t__experimentalIsRenderedInSidebar?: boolean;\n} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A label to identify the purpose of the control.\n\t\t\t\t *\n\t\t\t\t * @todo [#54055] Either this or `aria-labelledby` should be required\n\t\t\t\t */\n\t\t\t\t'aria-label'?: string;\n\t\t\t\t'aria-labelledby'?: never;\n\t\t  }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * An ID of an element to provide a label for the control.\n\t\t\t\t *\n\t\t\t\t * @todo [#54055] Either this or `aria-label` should be required\n\t\t\t\t */\n\t\t\t\t'aria-labelledby'?: string;\n\t\t\t\t'aria-label'?: never;\n\t\t  }\n\t);\n"],"mappings":"","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/color-palette/types.ts"],
+  "sourcesContent": ["export {};"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}