@wordpress/components 39.0.0 → 40.1.0

package/build-module/palette-edit/index.mjs

@@ -1,9 +1,11 @@
 // packages/components/src/palette-edit/index.tsx
 import clsx from "clsx";
+import { colord, extend } from "colord";
+import namesPlugin from "colord/plugins/names";
 import { useState, useRef, useEffect, useCallback, useMemo } from "@wordpress/element";
 import { __, sprintf } from "@wordpress/i18n";
 import { lineSolid, moreVertical, plus } from "@wordpress/icons";
-import { useDebounce } from "@wordpress/compose";
+import { useDebounce, useInstanceId } from "@wordpress/compose";
 import { kebabCase } from "@wordpress/kebab-case";
 import Button from "../button/index.mjs";
 import { ColorPicker } from "../color-picker/index.mjs";
@@ -13,6 +15,10 @@ import { Item, ItemGroup } from "../item-group/index.mjs";
 import { VStack } from "../v-stack/index.mjs";
 import GradientPicker from "../gradient-picker/index.mjs";
 import ColorPalette from "../color-palette/index.mjs";
+import { DuotonePicker } from "../duotone-picker/index.mjs";
+import ColorListPicker from "../duotone-picker/color-list-picker/index.mjs";
+import CustomDuotoneBar from "../duotone-picker/custom-duotone-bar.mjs";
+import { getDefaultColors, getGradientFromCSSColors } from "../duotone-picker/utils.mjs";
 import DropdownMenu from "../dropdown-menu/index.mjs";
 import Popover from "../popover/index.mjs";
 import { PaletteActionsContainer, PaletteEditStyles, PaletteHeading, IndicatorStyled, NameContainer, NameInputControl, DoneButton, RemoveButton, PaletteEditContents } from "./styles.mjs";
@@ -20,7 +26,96 @@ import { NavigableMenu } from "../navigable-container/index.mjs";
 import { DEFAULT_GRADIENT } from "../custom-gradient-picker/constants.mjs";
 import CustomGradientPicker from "../custom-gradient-picker/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+extend([namesPlugin]);
 var DEFAULT_COLOR = "#000";
+function getUsableDuotoneColors(colorPalette = []) {
+  return colorPalette.flatMap((paletteColor) => {
+    if (typeof paletteColor.color !== "string") {
+      return [];
+    }
+    const parsed = colord(paletteColor.color);
+    return parsed.isValid() ? [{
+      ...paletteColor,
+      color: parsed.toHex()
+    }] : [];
+  });
+}
+function getDuotoneColors(element) {
+  const colors = element?.colors;
+  return Array.isArray(colors) ? colors : [];
+}
+function getElementValue(element, variant) {
+  if (!element) {
+    return void 0;
+  }
+  switch (variant) {
+    case "duotone":
+      return getGradientFromCSSColors(getDuotoneColors(element), "135deg");
+    case "gradient":
+      return element.gradient;
+    default:
+      return element.color;
+  }
+}
+function getNameInputLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return __("Duotone name");
+    case "gradient":
+      return __("Gradient name");
+    default:
+      return __("Color name");
+  }
+}
+function getRemoveLabelFormat(variant) {
+  return variant === "duotone" ? (
+    /* translators: %s is a duotone name, e.g. "Purple and yellow". */
+    __("Remove duotone: %s")
+  ) : (
+    /* translators: %s is a color or gradient name, e.g. "Red". */
+    __("Remove color: %s")
+  );
+}
+function getAddLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return __("Add duotone");
+    case "gradient":
+      return __("Add gradient");
+    default:
+      return __("Add color");
+  }
+}
+function getOptionsLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return __("Duotone options");
+    case "gradient":
+      return __("Gradient options");
+    default:
+      return __("Color options");
+  }
+}
+function getRemoveAllLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return __("Remove all duotones");
+    case "gradient":
+      return __("Remove all gradients");
+    default:
+      return __("Remove all colors");
+  }
+}
+function getResetLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return __("Reset duotones");
+    case "gradient":
+      return __("Reset gradient");
+    default:
+      return __("Reset colors");
+  }
+}
 function NameInput({
   value,
   onChange,
@@ -51,8 +146,9 @@ function deduplicateElementSlugs(elements) {
     };
   });
 }
-function getNameAndSlugForPosition(elements, slugPrefix) {
-  const nameRegex = new RegExp(`^${slugPrefix}color-([\\d]+)$`);
+function getNameAndSlugForPosition(elements, slugPrefix, variant = "color") {
+  const stem = variant === "duotone" ? "duotone" : "color";
+  const nameRegex = new RegExp(`^${slugPrefix}${stem}-([\\d]+)$`);
   const position = elements.reduce((previousValue, currentValue) => {
     if (typeof currentValue?.slug === "string") {
       const matches = currentValue?.slug.match(nameRegex);
@@ -66,16 +162,21 @@ function getNameAndSlugForPosition(elements, slugPrefix) {
     return previousValue;
   }, 1);
   return {
-    name: sprintf(
+    name: variant === "duotone" ? sprintf(
+      /* translators: %d: is an id for a custom duotone */
+      __("Duotone %d"),
+      position
+    ) : sprintf(
       /* translators: %d: is an id for a custom color */
       __("Color %d"),
       position
     ),
-    slug: `${slugPrefix}color-${position}`
+    slug: `${slugPrefix}${stem}-${position}`
   };
 }
 function ColorPickerPopover({
-  isGradient,
+  variant,
+  colorPalette,
   element,
   onChange,
   popoverProps: receivedPopoverProps,
@@ -96,7 +197,7 @@ function ColorPickerPopover({
   return /* @__PURE__ */ _jsxs(Popover, {
     ...popoverProps,
     onClose,
-    children: [!isGradient && /* @__PURE__ */ _jsx(ColorPicker, {
+    children: [variant === "color" && /* @__PURE__ */ _jsx(ColorPicker, {
       color: element.color,
       enableAlpha: true,
       onChange: (newColor) => {
@@ -105,7 +206,7 @@ function ColorPickerPopover({
           color: newColor
         });
       }
-    }), isGradient && /* @__PURE__ */ _jsx("div", {
+    }), variant === "gradient" && /* @__PURE__ */ _jsx("div", {
       className: "components-palette-edit__popover-gradient-picker",
       children: /* @__PURE__ */ _jsx(CustomGradientPicker, {
         __experimentalIsRenderedInSidebar: true,
@@ -117,6 +218,41 @@ function ColorPickerPopover({
           });
         }
       })
+    }), variant === "duotone" && /* @__PURE__ */ _jsx("div", {
+      className: "components-palette-edit__popover-duotone-picker",
+      children: /* @__PURE__ */ _jsxs(VStack, {
+        spacing: 3,
+        children: [/* @__PURE__ */ _jsx(CustomDuotoneBar, {
+          value: getDuotoneColors(element),
+          onChange: (newColors) => {
+            if (!newColors?.length) {
+              return;
+            }
+            onChange({
+              ...element,
+              colors: newColors
+            });
+          }
+        }), /* @__PURE__ */ _jsx(ColorListPicker, {
+          labels: [__("Shadows"), __("Highlights")],
+          colors: colorPalette ?? [],
+          value: getDuotoneColors(element),
+          enableAlpha: true,
+          onChange: (newColors) => {
+            const [defaultDark, defaultLight] = getDefaultColors(colorPalette ?? []);
+            onChange({
+              ...element,
+              colors: [
+                // Falsy rather than nullish, to match
+                // how `DuotonePicker` fills a cleared
+                // shadow or highlight.
+                newColors[0] || defaultDark,
+                newColors[1] || defaultLight
+              ]
+            });
+          }
+        })]
+      })
     })]
   });
 }
@@ -127,9 +263,10 @@ function Option({
   onRemove,
   popoverProps: receivedPopoverProps,
   slugPrefix,
-  isGradient
+  variant,
+  colorPalette
 }) {
-  const value = isGradient ? element.gradient : element.color;
+  const value = getElementValue(element, variant);
   const [isEditingColor, setIsEditingColor] = useState(false);
   const [popoverAnchor, setPopoverAnchor] = useState(null);
   const popoverProps = useMemo(() => ({
@@ -148,7 +285,7 @@ function Option({
           setIsEditingColor(true);
         },
         "aria-label": sprintf(
-          // translators: %s is a color or gradient name, e.g. "Red".
+          // translators: %s is a color, gradient or duotone name, e.g. "Red".
           __("Edit: %s"),
           element.name.trim().length ? element.name : value || ""
         ),
@@ -160,7 +297,7 @@ function Option({
         })
       }), /* @__PURE__ */ _jsx(FlexBlock, {
         children: !canOnlyChangeValues ? /* @__PURE__ */ _jsx(NameInput, {
-          label: isGradient ? __("Gradient name") : __("Color name"),
+          label: getNameInputLabel(variant),
           value: element.name,
           onChange: (nextName) => onChange({
             ...element,
@@ -177,16 +314,13 @@ function Option({
         children: /* @__PURE__ */ _jsx(RemoveButton, {
           size: "small",
           icon: lineSolid,
-          label: sprintf(
-            // translators: %s is a color or gradient name, e.g. "Red".
-            __("Remove color: %s"),
-            element.name.trim().length ? element.name : value || ""
-          ),
+          label: sprintf(getRemoveLabelFormat(variant), element.name.trim().length ? element.name : value || ""),
           onClick: onRemove
         })
       })]
     }), isEditingColor && /* @__PURE__ */ _jsx(ColorPickerPopover, {
-      isGradient,
+      variant,
+      colorPalette,
       onChange,
       element,
       popoverProps,
@@ -199,7 +333,8 @@ function PaletteEditListView({
   onChange,
   canOnlyChangeValues,
   slugPrefix,
-  isGradient,
+  variant,
+  colorPalette,
   popoverProps,
   addColorRef
 }) {
@@ -215,7 +350,8 @@ function PaletteEditListView({
       isBordered: true,
       isSeparated: true,
       children: elements.map((element, index) => /* @__PURE__ */ _jsx(Option, {
-        isGradient,
+        variant,
+        colorPalette,
         canOnlyChangeValues,
         element,
         onChange: (newElement) => {
@@ -245,7 +381,9 @@ function PaletteEditListView({
 var EMPTY_ARRAY = [];
 function PaletteEdit({
   gradients,
+  duotones,
   colors = EMPTY_ARRAY,
+  colorPalette,
   onChange,
   paletteLabel,
   paletteLabelHeadingLevel = 2,
@@ -255,8 +393,14 @@ function PaletteEdit({
   slugPrefix = "",
   popoverProps
 }) {
-  const isGradient = !!gradients;
-  const elements = isGradient ? gradients : colors;
+  let variant = "color";
+  if (gradients) {
+    variant = "gradient";
+  } else if (duotones) {
+    variant = "duotone";
+  }
+  const elements = gradients ?? duotones ?? colors;
+  const duotoneColorPalette = useMemo(() => getUsableDuotoneColors(colorPalette), [colorPalette]);
   const [isEditing, setIsEditing] = useState(false);
   const [editingElement, setEditingElement] = useState(null);
   const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;
@@ -265,17 +409,26 @@ function PaletteEdit({
   const debounceOnChange = useDebounce(onChange, 100);
   const onSelectPaletteItem = useCallback((value, newEditingElementIndex) => {
     const selectedElement = newEditingElementIndex === void 0 ? void 0 : elements[newEditingElementIndex];
-    const key = isGradient ? "gradient" : "color";
+    const key = variant === "gradient" ? "gradient" : "color";
     if (!!selectedElement && selectedElement[key] === value) {
       setEditingElement(newEditingElementIndex);
     } else {
       setIsEditing(true);
     }
-  }, [isGradient, elements]);
+  }, [variant, elements]);
+  const onSelectDuotoneItem = useCallback((value, newEditingElementIndex) => {
+    if (newEditingElementIndex !== void 0 && (duotones ?? [])[newEditingElementIndex]) {
+      setEditingElement(newEditingElementIndex);
+    } else {
+      setIsEditing(true);
+    }
+  }, [duotones]);
   const addColorRef = useRef(null);
+  const paletteLabelId = useInstanceId(PaletteEdit, "components-palette-edit__heading");
   return /* @__PURE__ */ _jsxs(PaletteEditStyles, {
     children: [/* @__PURE__ */ _jsxs(HStack, {
       children: [/* @__PURE__ */ _jsx(PaletteHeading, {
+        id: paletteLabelId,
         level: paletteLabelHeadingLevel,
         children: paletteLabel
       }), /* @__PURE__ */ _jsxs(PaletteActionsContainer, {
@@ -291,18 +444,24 @@ function PaletteEdit({
           size: "small",
           isPressed: isAdding,
           icon: plus,
-          label: isGradient ? __("Add gradient") : __("Add color"),
+          label: getAddLabel(variant),
           onClick: () => {
             const {
               name,
               slug
-            } = getNameAndSlugForPosition(elements, slugPrefix);
+            } = getNameAndSlugForPosition(elements, slugPrefix, variant);
             if (!!gradients) {
               onChange([...gradients, {
                 gradient: DEFAULT_GRADIENT,
                 name,
                 slug
               }]);
+            } else if (!!duotones) {
+              onChange([...duotones, {
+                colors: getDefaultColors(duotoneColorPalette),
+                name,
+                slug
+              }]);
             } else {
               onChange([...colors, {
                 color: DEFAULT_COLOR,
@@ -315,7 +474,7 @@ function PaletteEdit({
           }
         }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /* @__PURE__ */ _jsx(DropdownMenu, {
           icon: moreVertical,
-          label: isGradient ? __("Gradient options") : __("Color options"),
+          label: getOptionsLabel(variant),
           toggleProps: {
             size: "small"
           },
@@ -343,7 +502,7 @@ function PaletteEdit({
                   onClose();
                 },
                 className: "components-palette-edit__menu-button",
-                children: isGradient ? __("Remove all gradients") : __("Remove all colors")
+                children: getRemoveAllLabel(variant)
               }), canReset && /* @__PURE__ */ _jsx(Button, {
                 __next40pxDefaultSize: true,
                 className: "components-palette-edit__menu-button",
@@ -353,7 +512,7 @@ function PaletteEdit({
                   onChange();
                   onClose();
                 },
-                children: isGradient ? __("Reset gradient") : __("Reset colors")
+                children: getResetLabel(variant)
               })]
             })
           })
@@ -365,11 +524,13 @@ function PaletteEdit({
         elements,
         onChange,
         slugPrefix,
-        isGradient,
+        variant,
+        colorPalette: duotoneColorPalette,
         popoverProps,
         addColorRef
       }), !isEditing && editingElement !== null && /* @__PURE__ */ _jsx(ColorPickerPopover, {
-        isGradient,
+        variant,
+        colorPalette: duotoneColorPalette,
         onClose: () => setEditingElement(null),
         onChange: (newElement) => {
           debounceOnChange(
@@ -384,17 +545,31 @@ function PaletteEdit({
         },
         element: elements[editingElement ?? -1],
         popoverProps
-      }), !isEditing && (isGradient ? /* @__PURE__ */ _jsx(GradientPicker, {
+      }), !isEditing && variant === "gradient" && /* @__PURE__ */ _jsx(GradientPicker, {
+        presentation: "command-buttons",
+        "aria-labelledby": paletteLabelId,
         gradients,
         onChange: onSelectPaletteItem,
         clearable: false,
         disableCustomGradients: true
-      }) : /* @__PURE__ */ _jsx(ColorPalette, {
+      }), !isEditing && variant === "duotone" && /* @__PURE__ */ _jsx(DuotonePicker, {
+        presentation: "command-buttons",
+        "aria-labelledby": paletteLabelId,
+        duotonePalette: duotones ?? [],
+        colorPalette: duotoneColorPalette,
+        onChange: onSelectDuotoneItem,
+        clearable: false,
+        unsetable: false,
+        disableCustomDuotone: true,
+        disableCustomColors: true
+      }), !isEditing && variant === "color" && /* @__PURE__ */ _jsx(ColorPalette, {
+        presentation: "command-buttons",
+        "aria-labelledby": paletteLabelId,
         colors,
         onChange: onSelectPaletteItem,
         clearable: false,
         disableCustomColors: true
-      }))]
+      })]
     }), !hasElements && emptyMessage && /* @__PURE__ */ _jsx(PaletteEditContents, {
       children: emptyMessage
     })]

package/build-module/palette-edit/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/palette-edit/index.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useState, useRef, useEffect, useCallback, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { useDebounce } from '@wordpress/compose';\nimport { kebabCase } from '@wordpress/kebab-case';\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexBlock, FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { Item, ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport { PaletteActionsContainer, PaletteEditStyles, PaletteHeading, IndicatorStyled, NameContainer, NameInputControl, DoneButton, RemoveButton, PaletteEditContents } from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst DEFAULT_COLOR = '#000';\nfunction NameInput({\n  value,\n  onChange,\n  label\n}) {\n  return /*#__PURE__*/_jsx(NameInputControl, {\n    size: \"compact\",\n    label: label,\n    hideLabelFromVision: true,\n    value: value,\n    onChange: onChange\n  });\n}\n\n/*\n * Deduplicates the slugs of the provided elements.\n */\nexport function deduplicateElementSlugs(elements) {\n  const slugCounts = {};\n  return elements.map(element => {\n    let newSlug;\n    const {\n      slug\n    } = element;\n    slugCounts[slug] = (slugCounts[slug] || 0) + 1;\n    if (slugCounts[slug] > 1) {\n      newSlug = `${slug}-${slugCounts[slug] - 1}`;\n    }\n    return {\n      ...element,\n      slug: newSlug ?? slug\n    };\n  });\n}\n\n/**\n * Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param elements   An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n *\n * @return A name and slug for the new palette item.\n */\nexport function getNameAndSlugForPosition(elements, slugPrefix) {\n  const nameRegex = new RegExp(`^${slugPrefix}color-([\\\\d]+)$`);\n  const position = elements.reduce((previousValue, currentValue) => {\n    if (typeof currentValue?.slug === 'string') {\n      const matches = currentValue?.slug.match(nameRegex);\n      if (matches) {\n        const id = parseInt(matches[1], 10);\n        if (id >= previousValue) {\n          return id + 1;\n        }\n      }\n    }\n    return previousValue;\n  }, 1);\n  return {\n    name: sprintf(/* translators: %d: is an id for a custom color */\n    __('Color %d'), position),\n    slug: `${slugPrefix}color-${position}`\n  };\n}\nfunction ColorPickerPopover({\n  isGradient,\n  element,\n  onChange,\n  popoverProps: receivedPopoverProps,\n  onClose = () => {}\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    offset: 20,\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    placement: 'left-start',\n    ...receivedPopoverProps,\n    className: clsx('components-palette-edit__popover', receivedPopoverProps?.className)\n  }), [receivedPopoverProps]);\n  return /*#__PURE__*/_jsxs(Popover, {\n    ...popoverProps,\n    onClose: onClose,\n    children: [!isGradient && /*#__PURE__*/_jsx(ColorPicker, {\n      color: element.color,\n      enableAlpha: true,\n      onChange: newColor => {\n        onChange({\n          ...element,\n          color: newColor\n        });\n      }\n    }), isGradient && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-palette-edit__popover-gradient-picker\",\n      children: /*#__PURE__*/_jsx(CustomGradientPicker, {\n        __experimentalIsRenderedInSidebar: true,\n        value: element.gradient,\n        onChange: newGradient => {\n          onChange({\n            ...element,\n            gradient: newGradient\n          });\n        }\n      })\n    })]\n  });\n}\nfunction Option({\n  canOnlyChangeValues,\n  element,\n  onChange,\n  onRemove,\n  popoverProps: receivedPopoverProps,\n  slugPrefix,\n  isGradient\n}) {\n  const value = isGradient ? element.gradient : element.color;\n  const [isEditingColor, setIsEditingColor] = useState(false);\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [popoverAnchor, setPopoverAnchor] = useState(null);\n  const popoverProps = useMemo(() => ({\n    ...receivedPopoverProps,\n    // Use the custom palette color item as the popover anchor.\n    anchor: popoverAnchor\n  }), [popoverAnchor, receivedPopoverProps]);\n  return /*#__PURE__*/_jsxs(Item, {\n    ref: setPopoverAnchor,\n    size: \"small\",\n    children: [/*#__PURE__*/_jsxs(HStack, {\n      justify: \"flex-start\",\n      children: [/*#__PURE__*/_jsx(Button, {\n        size: \"small\",\n        onClick: () => {\n          setIsEditingColor(true);\n        },\n        \"aria-label\": sprintf(\n        // translators: %s is a color or gradient name, e.g. \"Red\".\n        __('Edit: %s'), element.name.trim().length ? element.name : value || ''),\n        style: {\n          padding: 0\n        },\n        children: /*#__PURE__*/_jsx(IndicatorStyled, {\n          colorValue: value\n        })\n      }), /*#__PURE__*/_jsx(FlexBlock, {\n        children: !canOnlyChangeValues ? /*#__PURE__*/_jsx(NameInput, {\n          label: isGradient ? __('Gradient name') : __('Color name'),\n          value: element.name,\n          onChange: nextName => onChange({\n            ...element,\n            name: nextName,\n            slug: slugPrefix + kebabCase(nextName ?? '')\n          })\n        }) : /*#__PURE__*/_jsx(NameContainer, {\n          children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */\n          '\\u00A0'\n        })\n      }), !canOnlyChangeValues && /*#__PURE__*/_jsx(FlexItem, {\n        children: /*#__PURE__*/_jsx(RemoveButton, {\n          size: \"small\",\n          icon: lineSolid,\n          label: sprintf(\n          // translators: %s is a color or gradient name, e.g. \"Red\".\n          __('Remove color: %s'), element.name.trim().length ? element.name : value || ''),\n          onClick: onRemove\n        })\n      })]\n    }), isEditingColor && /*#__PURE__*/_jsx(ColorPickerPopover, {\n      isGradient: isGradient,\n      onChange: onChange,\n      element: element,\n      popoverProps: popoverProps,\n      onClose: () => setIsEditingColor(false)\n    })]\n  });\n}\nfunction PaletteEditListView({\n  elements,\n  onChange,\n  canOnlyChangeValues,\n  slugPrefix,\n  isGradient,\n  popoverProps,\n  addColorRef\n}) {\n  // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n  const elementsReferenceRef = useRef(undefined);\n  useEffect(() => {\n    elementsReferenceRef.current = elements;\n  }, [elements]);\n  const debounceOnChange = useDebounce(updatedElements => onChange(deduplicateElementSlugs(updatedElements)), 100);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    children: /*#__PURE__*/_jsx(ItemGroup, {\n      isRounded: true,\n      isBordered: true,\n      isSeparated: true,\n      children: elements.map((element, index) => /*#__PURE__*/_jsx(Option, {\n        isGradient: isGradient,\n        canOnlyChangeValues: canOnlyChangeValues,\n        element: element,\n        onChange: newElement => {\n          debounceOnChange(elements.map((currentElement, currentIndex) => {\n            if (currentIndex === index) {\n              return newElement;\n            }\n            return currentElement;\n          }));\n        },\n        onRemove: () => {\n          const newElements = elements.filter((_currentElement, currentIndex) => {\n            if (currentIndex === index) {\n              return false;\n            }\n            return true;\n          });\n          onChange(newElements.length ? newElements : undefined);\n          addColorRef.current?.focus();\n        },\n        slugPrefix: slugPrefix,\n        popoverProps: popoverProps\n      }, index))\n    })\n  });\n}\nconst EMPTY_ARRAY = [];\n\n/**\n * Allows editing a palette of colors or gradients.\n *\n * ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n *   const [ controlledColors, setControlledColors ] = useState( colors );\n *\n *   return (\n *     <PaletteEdit\n *       colors={ controlledColors }\n *       onChange={ ( newColors?: Color[] ) => {\n *         setControlledColors( newColors );\n *       } }\n *       paletteLabel=\"Here is a label\"\n *     />\n *   );\n * };\n * ```\n */\nexport function PaletteEdit({\n  gradients,\n  colors = EMPTY_ARRAY,\n  onChange,\n  paletteLabel,\n  paletteLabelHeadingLevel = 2,\n  emptyMessage,\n  canOnlyChangeValues,\n  canReset,\n  slugPrefix = '',\n  popoverProps\n}) {\n  const isGradient = !!gradients;\n  const elements = isGradient ? gradients : colors;\n  const [isEditing, setIsEditing] = useState(false);\n  const [editingElement, setEditingElement] = useState(null);\n  const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;\n  const elementsLength = elements.length;\n  const hasElements = elementsLength > 0;\n  const debounceOnChange = useDebounce(onChange, 100);\n  const onSelectPaletteItem = useCallback((value, newEditingElementIndex) => {\n    const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex];\n    const key = isGradient ? 'gradient' : 'color';\n    // Ensures that the index returned matches a known element value.\n    if (!!selectedElement && selectedElement[key] === value) {\n      setEditingElement(newEditingElementIndex);\n    } else {\n      setIsEditing(true);\n    }\n  }, [isGradient, elements]);\n  const addColorRef = useRef(null);\n  return /*#__PURE__*/_jsxs(PaletteEditStyles, {\n    children: [/*#__PURE__*/_jsxs(HStack, {\n      children: [/*#__PURE__*/_jsx(PaletteHeading, {\n        level: paletteLabelHeadingLevel,\n        children: paletteLabel\n      }), /*#__PURE__*/_jsxs(PaletteActionsContainer, {\n        children: [hasElements && isEditing && /*#__PURE__*/_jsx(DoneButton, {\n          size: \"small\",\n          onClick: () => {\n            setIsEditing(false);\n            setEditingElement(null);\n          },\n          children: __('Done')\n        }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {\n          ref: addColorRef,\n          size: \"small\",\n          isPressed: isAdding,\n          icon: plus,\n          label: isGradient ? __('Add gradient') : __('Add color'),\n          onClick: () => {\n            const {\n              name,\n              slug\n            } = getNameAndSlugForPosition(elements, slugPrefix);\n            if (!!gradients) {\n              onChange([...gradients, {\n                gradient: DEFAULT_GRADIENT,\n                name,\n                slug\n              }]);\n            } else {\n              onChange([...colors, {\n                color: DEFAULT_COLOR,\n                name,\n                slug\n              }]);\n            }\n            setIsEditing(true);\n            setEditingElement(elements.length);\n          }\n        }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/_jsx(DropdownMenu, {\n          icon: moreVertical,\n          label: isGradient ? __('Gradient options') : __('Color options'),\n          toggleProps: {\n            size: 'small'\n          },\n          children: ({\n            onClose\n          }) => /*#__PURE__*/_jsx(_Fragment, {\n            children: /*#__PURE__*/_jsxs(NavigableMenu, {\n              role: \"menu\",\n              children: [!isEditing && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                variant: \"tertiary\",\n                onClick: () => {\n                  setIsEditing(true);\n                  onClose();\n                },\n                className: \"components-palette-edit__menu-button\",\n                children: __('Show details')\n              }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                variant: \"tertiary\",\n                onClick: () => {\n                  setEditingElement(null);\n                  setIsEditing(false);\n                  onChange();\n                  onClose();\n                },\n                className: \"components-palette-edit__menu-button\",\n                children: isGradient ? __('Remove all gradients') : __('Remove all colors')\n              }), canReset && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                className: \"components-palette-edit__menu-button\",\n                variant: \"tertiary\",\n                onClick: () => {\n                  setEditingElement(null);\n                  onChange();\n                  onClose();\n                },\n                children: isGradient ? __('Reset gradient') : __('Reset colors')\n              })]\n            })\n          })\n        })]\n      })]\n    }), hasElements && /*#__PURE__*/_jsxs(PaletteEditContents, {\n      children: [isEditing && /*#__PURE__*/_jsx(PaletteEditListView, {\n        canOnlyChangeValues: canOnlyChangeValues,\n        elements: elements\n        // @ts-expect-error TODO: Don't know how to resolve\n        ,\n        onChange: onChange,\n        slugPrefix: slugPrefix,\n        isGradient: isGradient,\n        popoverProps: popoverProps,\n        addColorRef: addColorRef\n      }), !isEditing && editingElement !== null && /*#__PURE__*/_jsx(ColorPickerPopover, {\n        isGradient: isGradient,\n        onClose: () => setEditingElement(null),\n        onChange: newElement => {\n          debounceOnChange(\n          // @ts-expect-error TODO: Don't know how to resolve\n          elements.map((currentElement, currentIndex) => {\n            if (currentIndex === editingElement) {\n              return newElement;\n            }\n            return currentElement;\n          }));\n        },\n        element: elements[editingElement ?? -1],\n        popoverProps: popoverProps\n      }), !isEditing && (isGradient ? /*#__PURE__*/_jsx(GradientPicker, {\n        gradients: gradients,\n        onChange: onSelectPaletteItem,\n        clearable: false,\n        disableCustomGradients: true\n      }) : /*#__PURE__*/_jsx(ColorPalette, {\n        colors: colors,\n        onChange: onSelectPaletteItem,\n        clearable: false,\n        disableCustomColors: true\n      }))]\n    }), !hasElements && emptyMessage && /*#__PURE__*/_jsx(PaletteEditContents, {\n      children: emptyMessage\n    })]\n  });\n}\nexport default PaletteEdit;"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport { useState, useRef, useEffect, useCallback, useMemo } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { lineSolid, moreVertical, plus } from '@wordpress/icons';\nimport { useDebounce, useInstanceId } from '@wordpress/compose';\nimport { kebabCase } from '@wordpress/kebab-case';\nimport Button from '../button';\nimport { ColorPicker } from '../color-picker';\nimport { FlexBlock, FlexItem } from '../flex';\nimport { HStack } from '../h-stack';\nimport { Item, ItemGroup } from '../item-group';\nimport { VStack } from '../v-stack';\nimport GradientPicker from '../gradient-picker';\nimport ColorPalette from '../color-palette';\nimport { DuotonePicker } from '../duotone-picker';\nimport ColorListPicker from '../duotone-picker/color-list-picker';\nimport CustomDuotoneBar from '../duotone-picker/custom-duotone-bar';\nimport { getDefaultColors, getGradientFromCSSColors } from '../duotone-picker/utils';\nimport DropdownMenu from '../dropdown-menu';\nimport Popover from '../popover';\nimport { PaletteActionsContainer, PaletteEditStyles, PaletteHeading, IndicatorStyled, NameContainer, NameInputControl, DoneButton, RemoveButton, PaletteEditContents } from './styles';\nimport { NavigableMenu } from '../navigable-container';\nimport { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';\nimport CustomGradientPicker from '../custom-gradient-picker';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nextend([namesPlugin]);\nconst DEFAULT_COLOR = '#000';\n\n/**\n * Filters a color palette down to the colors a duotone can actually be built\n * from, and normalizes each one to hex.\n *\n * Duotone values are turned into SVG filter matrices, so each color has to\n * resolve to a concrete value. A theme palette may legitimately contain CSS\n * that does not, such as `color-mix()` or `currentColor` — Twenty Twenty-Five\n * ships one — and picking such a color would produce a duotone that neither the\n * editor nor the front end can render.\n *\n * Surviving colors are normalized because the two ends disagree on syntax. The\n * front end parses duotone colors with a PHP port of colord that only accepts\n * hex, `rgb()` and `hsl()` (`WP_Duotone::colord_parse`), while colord in the\n * editor also accepts CSS named colors such as `red`, since `namesPlugin` is\n * registered. Passing a palette value straight through would let a named color\n * be saved as a duotone that renders in the editor and is dropped, with a\n * `_doing_it_wrong` notice, on the front end.\n *\n * @param colorPalette The colors to filter.\n *\n * @return The colors usable in a duotone, as hex.\n */\nfunction getUsableDuotoneColors(colorPalette = []) {\n  return colorPalette.flatMap(paletteColor => {\n    if (typeof paletteColor.color !== 'string') {\n      return [];\n    }\n    const parsed = colord(paletteColor.color);\n    return parsed.isValid() ? [{\n      ...paletteColor,\n      color: parsed.toHex()\n    }] : [];\n  });\n}\n\n/**\n * Reads the colors off a duotone element. Duotone presets can come from a\n * theme's `theme.json`, so the value is not guaranteed to be an array.\n *\n * @param element The palette element.\n *\n * @return The duotone's colors, or an empty array if it has none usable.\n */\nfunction getDuotoneColors(element) {\n  const colors = element?.colors;\n  return Array.isArray(colors) ? colors : [];\n}\n\n/**\n * Returns the single CSS value that represents a palette element, used both for\n * its swatch and for the labels that refer to it. Duotones have two colors, so\n * they are represented by the same gradient the duotone swatches use.\n *\n * @param element The palette element.\n * @param variant The kind of preset being edited.\n *\n * @return A CSS color or gradient string.\n */\nfunction getElementValue(element, variant) {\n  if (!element) {\n    return undefined;\n  }\n  switch (variant) {\n    case 'duotone':\n      return getGradientFromCSSColors(getDuotoneColors(element), '135deg');\n    case 'gradient':\n      return element.gradient;\n    default:\n      return element.color;\n  }\n}\n\n/**\n * Returns the hidden label for the name input of a palette element.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getNameInputLabel(variant) {\n  switch (variant) {\n    case 'duotone':\n      return __('Duotone name');\n    case 'gradient':\n      return __('Gradient name');\n    default:\n      return __('Color name');\n  }\n}\n\n/**\n * Returns the `sprintf` format string for the remove button label.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getRemoveLabelFormat(variant) {\n  return variant === 'duotone' ? /* translators: %s is a duotone name, e.g. \"Purple and yellow\". */\n  __('Remove duotone: %s') : /* translators: %s is a color or gradient name, e.g. \"Red\". */\n  __('Remove color: %s');\n}\n\n/**\n * Returns the label for the button that adds a new palette element.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getAddLabel(variant) {\n  switch (variant) {\n    case 'duotone':\n      return __('Add duotone');\n    case 'gradient':\n      return __('Add gradient');\n    default:\n      return __('Add color');\n  }\n}\n\n/**\n * Returns the label for the palette's options menu.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getOptionsLabel(variant) {\n  switch (variant) {\n    case 'duotone':\n      return __('Duotone options');\n    case 'gradient':\n      return __('Gradient options');\n    default:\n      return __('Color options');\n  }\n}\n\n/**\n * Returns the label for the menu item that empties the palette.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getRemoveAllLabel(variant) {\n  switch (variant) {\n    case 'duotone':\n      return __('Remove all duotones');\n    case 'gradient':\n      return __('Remove all gradients');\n    default:\n      return __('Remove all colors');\n  }\n}\n\n/**\n * Returns the label for the menu item that resets the palette.\n *\n * @param variant The kind of preset being edited.\n */\nfunction getResetLabel(variant) {\n  switch (variant) {\n    case 'duotone':\n      return __('Reset duotones');\n    case 'gradient':\n      return __('Reset gradient');\n    default:\n      return __('Reset colors');\n  }\n}\nfunction NameInput({\n  value,\n  onChange,\n  label\n}) {\n  return /*#__PURE__*/_jsx(NameInputControl, {\n    size: \"compact\",\n    label: label,\n    hideLabelFromVision: true,\n    value: value,\n    onChange: onChange\n  });\n}\n\n/*\n * Deduplicates the slugs of the provided elements.\n */\nexport function deduplicateElementSlugs(elements) {\n  const slugCounts = {};\n  return elements.map(element => {\n    let newSlug;\n    const {\n      slug\n    } = element;\n    slugCounts[slug] = (slugCounts[slug] || 0) + 1;\n    if (slugCounts[slug] > 1) {\n      newSlug = `${slug}-${slugCounts[slug] - 1}`;\n    }\n    return {\n      ...element,\n      slug: newSlug ?? slug\n    };\n  });\n}\n\n/**\n * Returns a name and slug for a palette item. The name takes the format \"Color + id\".\n * To ensure there are no duplicate ids, this function checks all slugs.\n * It expects slugs to be in the format: slugPrefix + color- + number.\n * It then sets the id component of the new name based on the incremented id of the highest existing slug id.\n *\n * @param elements   An array of color palette items.\n * @param slugPrefix The slug prefix used to match the element slug.\n * @param variant    The kind of preset being edited. Duotones are named\n *                   \"Duotone + id\" and slugged with a `duotone-` stem;\n *                   colors and gradients both use `color-`.\n *\n * @return A name and slug for the new palette item.\n */\nexport function getNameAndSlugForPosition(elements, slugPrefix, variant = 'color') {\n  const stem = variant === 'duotone' ? 'duotone' : 'color';\n  const nameRegex = new RegExp(`^${slugPrefix}${stem}-([\\\\d]+)$`);\n  const position = elements.reduce((previousValue, currentValue) => {\n    if (typeof currentValue?.slug === 'string') {\n      const matches = currentValue?.slug.match(nameRegex);\n      if (matches) {\n        const id = parseInt(matches[1], 10);\n        if (id >= previousValue) {\n          return id + 1;\n        }\n      }\n    }\n    return previousValue;\n  }, 1);\n  return {\n    name: variant === 'duotone' ? sprintf(/* translators: %d: is an id for a custom duotone */\n    __('Duotone %d'), position) : sprintf(/* translators: %d: is an id for a custom color */\n    __('Color %d'), position),\n    slug: `${slugPrefix}${stem}-${position}`\n  };\n}\nfunction ColorPickerPopover({\n  variant,\n  colorPalette,\n  element,\n  onChange,\n  popoverProps: receivedPopoverProps,\n  onClose = () => {}\n}) {\n  const popoverProps = useMemo(() => ({\n    shift: true,\n    offset: 20,\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    placement: 'left-start',\n    ...receivedPopoverProps,\n    className: clsx('components-palette-edit__popover', receivedPopoverProps?.className)\n  }), [receivedPopoverProps]);\n  return /*#__PURE__*/_jsxs(Popover, {\n    ...popoverProps,\n    onClose: onClose,\n    children: [variant === 'color' && /*#__PURE__*/_jsx(ColorPicker, {\n      color: element.color,\n      enableAlpha: true,\n      onChange: newColor => {\n        onChange({\n          ...element,\n          color: newColor\n        });\n      }\n    }), variant === 'gradient' && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-palette-edit__popover-gradient-picker\",\n      children: /*#__PURE__*/_jsx(CustomGradientPicker, {\n        __experimentalIsRenderedInSidebar: true,\n        value: element.gradient,\n        onChange: newGradient => {\n          onChange({\n            ...element,\n            gradient: newGradient\n          });\n        }\n      })\n    }), variant === 'duotone' && /*#__PURE__*/_jsx(\"div\", {\n      className: \"components-palette-edit__popover-duotone-picker\",\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 3,\n        children: [/*#__PURE__*/_jsx(CustomDuotoneBar, {\n          value: getDuotoneColors(element),\n          onChange: newColors => {\n            // A duotone needs two colors to render, and the\n            // bar refuses to drop below two stops, so an\n            // empty value means there is nothing to save.\n            if (!newColors?.length) {\n              return;\n            }\n            onChange({\n              ...element,\n              colors: newColors\n            });\n          }\n        }), /*#__PURE__*/_jsx(ColorListPicker, {\n          labels: [__('Shadows'), __('Highlights')],\n          colors: colorPalette ?? [],\n          value: getDuotoneColors(element),\n          enableAlpha: true,\n          onChange: newColors => {\n            const [defaultDark, defaultLight] = getDefaultColors(colorPalette ?? []);\n            onChange({\n              ...element,\n              colors: [\n              // Falsy rather than nullish, to match\n              // how `DuotonePicker` fills a cleared\n              // shadow or highlight.\n              newColors[0] || defaultDark, newColors[1] || defaultLight]\n            });\n          }\n        })]\n      })\n    })]\n  });\n}\nfunction Option({\n  canOnlyChangeValues,\n  element,\n  onChange,\n  onRemove,\n  popoverProps: receivedPopoverProps,\n  slugPrefix,\n  variant,\n  colorPalette\n}) {\n  const value = getElementValue(element, variant);\n  const [isEditingColor, setIsEditingColor] = useState(false);\n\n  // Use internal state instead of a ref to make sure that the component\n  // re-renders when the popover's anchor updates.\n  const [popoverAnchor, setPopoverAnchor] = useState(null);\n  const popoverProps = useMemo(() => ({\n    ...receivedPopoverProps,\n    // Use the custom palette color item as the popover anchor.\n    anchor: popoverAnchor\n  }), [popoverAnchor, receivedPopoverProps]);\n  return /*#__PURE__*/_jsxs(Item, {\n    ref: setPopoverAnchor,\n    size: \"small\",\n    children: [/*#__PURE__*/_jsxs(HStack, {\n      justify: \"flex-start\",\n      children: [/*#__PURE__*/_jsx(Button, {\n        size: \"small\",\n        onClick: () => {\n          setIsEditingColor(true);\n        },\n        \"aria-label\": sprintf(\n        // translators: %s is a color, gradient or duotone name, e.g. \"Red\".\n        __('Edit: %s'), element.name.trim().length ? element.name : value || ''),\n        style: {\n          padding: 0\n        },\n        children: /*#__PURE__*/_jsx(IndicatorStyled, {\n          colorValue: value\n        })\n      }), /*#__PURE__*/_jsx(FlexBlock, {\n        children: !canOnlyChangeValues ? /*#__PURE__*/_jsx(NameInput, {\n          label: getNameInputLabel(variant),\n          value: element.name,\n          onChange: nextName => onChange({\n            ...element,\n            name: nextName,\n            slug: slugPrefix + kebabCase(nextName ?? '')\n          })\n        }) : /*#__PURE__*/_jsx(NameContainer, {\n          children: element.name.trim().length ? element.name : /* Fall back to non-breaking space to maintain height */\n          '\\u00A0'\n        })\n      }), !canOnlyChangeValues && /*#__PURE__*/_jsx(FlexItem, {\n        children: /*#__PURE__*/_jsx(RemoveButton, {\n          size: \"small\",\n          icon: lineSolid,\n          label: sprintf(getRemoveLabelFormat(variant), element.name.trim().length ? element.name : value || ''),\n          onClick: onRemove\n        })\n      })]\n    }), isEditingColor && /*#__PURE__*/_jsx(ColorPickerPopover, {\n      variant: variant,\n      colorPalette: colorPalette,\n      onChange: onChange,\n      element: element,\n      popoverProps: popoverProps,\n      onClose: () => setIsEditingColor(false)\n    })]\n  });\n}\nfunction PaletteEditListView({\n  elements,\n  onChange,\n  canOnlyChangeValues,\n  slugPrefix,\n  variant,\n  colorPalette,\n  popoverProps,\n  addColorRef\n}) {\n  // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them.\n  const elementsReferenceRef = useRef(undefined);\n  useEffect(() => {\n    elementsReferenceRef.current = elements;\n  }, [elements]);\n  const debounceOnChange = useDebounce(updatedElements => onChange(deduplicateElementSlugs(updatedElements)), 100);\n  return /*#__PURE__*/_jsx(VStack, {\n    spacing: 3,\n    children: /*#__PURE__*/_jsx(ItemGroup, {\n      isRounded: true,\n      isBordered: true,\n      isSeparated: true,\n      children: elements.map((element, index) => /*#__PURE__*/_jsx(Option, {\n        variant: variant,\n        colorPalette: colorPalette,\n        canOnlyChangeValues: canOnlyChangeValues,\n        element: element,\n        onChange: newElement => {\n          debounceOnChange(elements.map((currentElement, currentIndex) => {\n            if (currentIndex === index) {\n              return newElement;\n            }\n            return currentElement;\n          }));\n        },\n        onRemove: () => {\n          const newElements = elements.filter((_currentElement, currentIndex) => {\n            if (currentIndex === index) {\n              return false;\n            }\n            return true;\n          });\n          onChange(newElements.length ? newElements : undefined);\n          addColorRef.current?.focus();\n        },\n        slugPrefix: slugPrefix,\n        popoverProps: popoverProps\n      }, index))\n    })\n  });\n}\nconst EMPTY_ARRAY = [];\n\n/**\n * Allows editing a palette of colors, gradients or duotones.\n *\n * ```jsx\n * import { PaletteEdit } from '@wordpress/components';\n * const MyPaletteEdit = () => {\n *   const [ controlledColors, setControlledColors ] = useState( colors );\n *\n *   return (\n *     <PaletteEdit\n *       colors={ controlledColors }\n *       onChange={ ( newColors?: Color[] ) => {\n *         setControlledColors( newColors );\n *       } }\n *       paletteLabel=\"Here is a label\"\n *     />\n *   );\n * };\n * ```\n */\nexport function PaletteEdit({\n  gradients,\n  duotones,\n  colors = EMPTY_ARRAY,\n  colorPalette,\n  onChange,\n  paletteLabel,\n  paletteLabelHeadingLevel = 2,\n  emptyMessage,\n  canOnlyChangeValues,\n  canReset,\n  slugPrefix = '',\n  popoverProps\n}) {\n  let variant = 'color';\n  if (gradients) {\n    variant = 'gradient';\n  } else if (duotones) {\n    variant = 'duotone';\n  }\n  const elements = gradients ?? duotones ?? colors;\n  // Filtered once here so every duotone path — the swatches, the shadows and\n  // highlights pickers, and the value a newly added duotone starts from —\n  // works from colors a duotone can actually be built with.\n  const duotoneColorPalette = useMemo(() => getUsableDuotoneColors(colorPalette), [colorPalette]);\n  const [isEditing, setIsEditing] = useState(false);\n  const [editingElement, setEditingElement] = useState(null);\n  const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;\n  const elementsLength = elements.length;\n  const hasElements = elementsLength > 0;\n  const debounceOnChange = useDebounce(onChange, 100);\n  const onSelectPaletteItem = useCallback((value, newEditingElementIndex) => {\n    const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex];\n    const key = variant === 'gradient' ? 'gradient' : 'color';\n    // Ensures that the index returned matches a known element value.\n    if (!!selectedElement && selectedElement[key] === value) {\n      setEditingElement(newEditingElementIndex);\n    } else {\n      setIsEditing(true);\n    }\n  }, [variant, elements]);\n\n  // Two duotones can hold the same pair of colors, so the picker's reported\n  // index is what identifies the one that was clicked. Matching on the colors\n  // instead would edit whichever duotone happened to come first.\n  const onSelectDuotoneItem = useCallback((value, newEditingElementIndex) => {\n    if (newEditingElementIndex !== undefined && (duotones ?? [])[newEditingElementIndex]) {\n      setEditingElement(newEditingElementIndex);\n    } else {\n      setIsEditing(true);\n    }\n  }, [duotones]);\n  const addColorRef = useRef(null);\n\n  // Names the swatch picker after this palette's heading, so a screen reader\n  // announces \"Theme\", \"Default\" or \"Custom\" rather than an unlabelled list.\n  const paletteLabelId = useInstanceId(PaletteEdit, 'components-palette-edit__heading');\n  return /*#__PURE__*/_jsxs(PaletteEditStyles, {\n    children: [/*#__PURE__*/_jsxs(HStack, {\n      children: [/*#__PURE__*/_jsx(PaletteHeading, {\n        id: paletteLabelId,\n        level: paletteLabelHeadingLevel,\n        children: paletteLabel\n      }), /*#__PURE__*/_jsxs(PaletteActionsContainer, {\n        children: [hasElements && isEditing && /*#__PURE__*/_jsx(DoneButton, {\n          size: \"small\",\n          onClick: () => {\n            setIsEditing(false);\n            setEditingElement(null);\n          },\n          children: __('Done')\n        }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {\n          ref: addColorRef,\n          size: \"small\",\n          isPressed: isAdding,\n          icon: plus,\n          label: getAddLabel(variant),\n          onClick: () => {\n            const {\n              name,\n              slug\n            } = getNameAndSlugForPosition(elements, slugPrefix, variant);\n            if (!!gradients) {\n              onChange([...gradients, {\n                gradient: DEFAULT_GRADIENT,\n                name,\n                slug\n              }]);\n            } else if (!!duotones) {\n              onChange([...duotones, {\n                colors: getDefaultColors(duotoneColorPalette),\n                name,\n                slug\n              }]);\n            } else {\n              onChange([...colors, {\n                color: DEFAULT_COLOR,\n                name,\n                slug\n              }]);\n            }\n            setIsEditing(true);\n            setEditingElement(elements.length);\n          }\n        }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /*#__PURE__*/_jsx(DropdownMenu, {\n          icon: moreVertical,\n          label: getOptionsLabel(variant),\n          toggleProps: {\n            size: 'small'\n          },\n          children: ({\n            onClose\n          }) => /*#__PURE__*/_jsx(_Fragment, {\n            children: /*#__PURE__*/_jsxs(NavigableMenu, {\n              role: \"menu\",\n              children: [!isEditing && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                variant: \"tertiary\",\n                onClick: () => {\n                  setIsEditing(true);\n                  onClose();\n                },\n                className: \"components-palette-edit__menu-button\",\n                children: __('Show details')\n              }), !canOnlyChangeValues && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                variant: \"tertiary\",\n                onClick: () => {\n                  setEditingElement(null);\n                  setIsEditing(false);\n                  onChange();\n                  onClose();\n                },\n                className: \"components-palette-edit__menu-button\",\n                children: getRemoveAllLabel(variant)\n              }), canReset && /*#__PURE__*/_jsx(Button, {\n                __next40pxDefaultSize: true,\n                className: \"components-palette-edit__menu-button\",\n                variant: \"tertiary\",\n                onClick: () => {\n                  setEditingElement(null);\n                  onChange();\n                  onClose();\n                },\n                children: getResetLabel(variant)\n              })]\n            })\n          })\n        })]\n      })]\n    }), hasElements && /*#__PURE__*/_jsxs(PaletteEditContents, {\n      children: [isEditing && /*#__PURE__*/_jsx(PaletteEditListView, {\n        canOnlyChangeValues: canOnlyChangeValues,\n        elements: elements\n        // @ts-expect-error TODO: Don't know how to resolve\n        ,\n        onChange: onChange,\n        slugPrefix: slugPrefix,\n        variant: variant,\n        colorPalette: duotoneColorPalette,\n        popoverProps: popoverProps,\n        addColorRef: addColorRef\n      }), !isEditing && editingElement !== null && /*#__PURE__*/_jsx(ColorPickerPopover, {\n        variant: variant,\n        colorPalette: duotoneColorPalette,\n        onClose: () => setEditingElement(null),\n        onChange: newElement => {\n          debounceOnChange(\n          // @ts-expect-error TODO: Don't know how to resolve\n          elements.map((currentElement, currentIndex) => {\n            if (currentIndex === editingElement) {\n              return newElement;\n            }\n            return currentElement;\n          }));\n        },\n        element: elements[editingElement ?? -1],\n        popoverProps: popoverProps\n      }), !isEditing && variant === 'gradient' && /*#__PURE__*/_jsx(GradientPicker, {\n        presentation: \"command-buttons\",\n        \"aria-labelledby\": paletteLabelId,\n        gradients: gradients,\n        onChange: onSelectPaletteItem,\n        clearable: false,\n        disableCustomGradients: true\n      }), !isEditing && variant === 'duotone' && /*#__PURE__*/_jsx(DuotonePicker, {\n        presentation: \"command-buttons\",\n        \"aria-labelledby\": paletteLabelId,\n        duotonePalette: duotones ?? [],\n        colorPalette: duotoneColorPalette,\n        onChange: onSelectDuotoneItem,\n        clearable: false,\n        unsetable: false,\n        disableCustomDuotone: true,\n        disableCustomColors: true\n      }), !isEditing && variant === 'color' && /*#__PURE__*/_jsx(ColorPalette, {\n        presentation: \"command-buttons\",\n        \"aria-labelledby\": paletteLabelId,\n        colors: colors,\n        onChange: onSelectPaletteItem,\n        clearable: false,\n        disableCustomColors: true\n      })]\n    }), !hasElements && emptyMessage && /*#__PURE__*/_jsx(PaletteEditContents, {\n      children: emptyMessage\n    })]\n  });\n}\nexport default PaletteEdit;"],
+  "mappings": "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",
   "names": []
 }

package/build-module/private-apis.mjs

@@ -6,8 +6,7 @@ import { ComponentsContext } from "./context/context-system-provider.mjs";
 import { Tabs } from "./tabs/index.mjs";
 import { lock } from "./lock-unlock.mjs";
 import Badge from "./badge/index.mjs";
-import { ValidatedComboboxControl, ValidatedInputControl, ValidatedContentEditableControl, ValidatedTextareaControl, ValidatedToggleControl, ValidatedToggleGroupControl } from "./validated-form-controls/index.mjs";
-import { ValidatedFormTokenField } from "./validated-form-controls/components/form-token-field.mjs";
+import { ValidatedInputControl, ValidatedContentEditableControl, ValidatedTextareaControl } from "./validated-form-controls/index.mjs";
 import ContentEditableControl from "./content-editable-control/index.mjs";
 var privateApis = {};
 lock(privateApis, {
@@ -19,12 +18,8 @@ lock(privateApis, {
   Badge,
   useDrag,
   ValidatedInputControl,
-  ValidatedComboboxControl,
   ValidatedContentEditableControl,
-  ValidatedTextareaControl,
-  ValidatedToggleControl,
-  ValidatedToggleGroupControl,
-  ValidatedFormTokenField
+  ValidatedTextareaControl
 });
 export {
   privateApis

package/build-module/private-apis.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/private-apis.ts"],
-  "sourcesContent": ["import { useDrag } from '@use-gesture/react';\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { Menu } from './menu';\nimport { ComponentsContext } from './context/context-system-provider';\nimport { Tabs } from './tabs';\nimport { lock } from './lock-unlock';\nimport Badge from './badge';\nimport { ValidatedComboboxControl, ValidatedInputControl, ValidatedContentEditableControl, ValidatedTextareaControl, ValidatedToggleControl, ValidatedToggleGroupControl } from './validated-form-controls';\nimport { ValidatedFormTokenField } from './validated-form-controls/components/form-token-field';\nimport ContentEditableControl from './content-editable-control';\nexport const privateApis = {};\nlock(privateApis, {\n  ContentEditableControl,\n  __experimentalPopoverLegacyPositionToPlacement,\n  ComponentsContext,\n  Tabs,\n  Menu,\n  Badge,\n  useDrag,\n  ValidatedInputControl,\n  ValidatedComboboxControl,\n  ValidatedContentEditableControl,\n  ValidatedTextareaControl,\n  ValidatedToggleControl,\n  ValidatedToggleGroupControl,\n  ValidatedFormTokenField\n});"],
-  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,uBAAuB,sDAAsD;AACtF,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,OAAO,WAAW;AAClB,SAAS,0BAA0B,uBAAuB,iCAAiC,0BAA0B,wBAAwB,mCAAmC;AAChL,SAAS,+BAA+B;AACxC,OAAO,4BAA4B;AAC5B,IAAM,cAAc,CAAC;AAC5B,KAAK,aAAa;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import { useDrag } from '@use-gesture/react';\nimport { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';\nimport { Menu } from './menu';\nimport { ComponentsContext } from './context/context-system-provider';\nimport { Tabs } from './tabs';\nimport { lock } from './lock-unlock';\nimport Badge from './badge';\nimport { ValidatedInputControl, ValidatedContentEditableControl, ValidatedTextareaControl } from './validated-form-controls';\nimport ContentEditableControl from './content-editable-control';\nexport const privateApis = {};\nlock(privateApis, {\n  ContentEditableControl,\n  __experimentalPopoverLegacyPositionToPlacement,\n  ComponentsContext,\n  Tabs,\n  Menu,\n  Badge,\n  useDrag,\n  ValidatedInputControl,\n  ValidatedContentEditableControl,\n  ValidatedTextareaControl\n});"],
+  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,uBAAuB,sDAAsD;AACtF,SAAS,YAAY;AACrB,SAAS,yBAAyB;AAClC,SAAS,YAAY;AACrB,SAAS,YAAY;AACrB,OAAO,WAAW;AAClB,SAAS,uBAAuB,iCAAiC,gCAAgC;AACjG,OAAO,4BAA4B;AAC5B,IAAM,cAAc,CAAC;AAC5B,KAAK,aAAa;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }