@wordpress/components 38.0.0 → 40.0.0

package/build/palette-edit/index.cjs

@@ -37,10 +37,13 @@ __export(palette_edit_exports, {
 });
 module.exports = __toCommonJS(palette_edit_exports);
 var import_clsx = __toESM(require("clsx"));
+var import_colord = require("colord");
+var import_names = __toESM(require("colord/plugins/names"));
 var import_element = require("@wordpress/element");
 var import_i18n = require("@wordpress/i18n");
 var import_icons = require("@wordpress/icons");
 var import_compose = require("@wordpress/compose");
+var import_kebab_case = require("@wordpress/kebab-case");
 var import_button = __toESM(require("../button/index.cjs"));
 var import_color_picker = require("../color-picker/index.cjs");
 var import_flex = require("../flex/index.cjs");
@@ -49,15 +52,107 @@ var import_item_group = require("../item-group/index.cjs");
 var import_v_stack = require("../v-stack/index.cjs");
 var import_gradient_picker = __toESM(require("../gradient-picker/index.cjs"));
 var import_color_palette = __toESM(require("../color-palette/index.cjs"));
+var import_duotone_picker = require("../duotone-picker/index.cjs");
+var import_color_list_picker = __toESM(require("../duotone-picker/color-list-picker/index.cjs"));
+var import_custom_duotone_bar = __toESM(require("../duotone-picker/custom-duotone-bar.cjs"));
+var import_utils = require("../duotone-picker/utils.cjs");
 var import_dropdown_menu = __toESM(require("../dropdown-menu/index.cjs"));
 var import_popover = __toESM(require("../popover/index.cjs"));
 var import_styles = require("./styles.cjs");
 var import_navigable_container = require("../navigable-container/index.cjs");
 var import_constants = require("../custom-gradient-picker/constants.cjs");
 var import_custom_gradient_picker = __toESM(require("../custom-gradient-picker/index.cjs"));
-var import_strings = require("../utils/strings.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+(0, import_colord.extend)([import_names.default]);
 var DEFAULT_COLOR = "#000";
+function getUsableDuotoneColors(colorPalette = []) {
+  return colorPalette.flatMap((paletteColor) => {
+    if (typeof paletteColor.color !== "string") {
+      return [];
+    }
+    const parsed = (0, import_colord.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 (0, import_utils.getGradientFromCSSColors)(getDuotoneColors(element), "135deg");
+    case "gradient":
+      return element.gradient;
+    default:
+      return element.color;
+  }
+}
+function getNameInputLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return (0, import_i18n.__)("Duotone name");
+    case "gradient":
+      return (0, import_i18n.__)("Gradient name");
+    default:
+      return (0, import_i18n.__)("Color name");
+  }
+}
+function getRemoveLabelFormat(variant) {
+  return variant === "duotone" ? (
+    /* translators: %s is a duotone name, e.g. "Purple and yellow". */
+    (0, import_i18n.__)("Remove duotone: %s")
+  ) : (
+    /* translators: %s is a color or gradient name, e.g. "Red". */
+    (0, import_i18n.__)("Remove color: %s")
+  );
+}
+function getAddLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return (0, import_i18n.__)("Add duotone");
+    case "gradient":
+      return (0, import_i18n.__)("Add gradient");
+    default:
+      return (0, import_i18n.__)("Add color");
+  }
+}
+function getOptionsLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return (0, import_i18n.__)("Duotone options");
+    case "gradient":
+      return (0, import_i18n.__)("Gradient options");
+    default:
+      return (0, import_i18n.__)("Color options");
+  }
+}
+function getRemoveAllLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return (0, import_i18n.__)("Remove all duotones");
+    case "gradient":
+      return (0, import_i18n.__)("Remove all gradients");
+    default:
+      return (0, import_i18n.__)("Remove all colors");
+  }
+}
+function getResetLabel(variant) {
+  switch (variant) {
+    case "duotone":
+      return (0, import_i18n.__)("Reset duotones");
+    case "gradient":
+      return (0, import_i18n.__)("Reset gradient");
+    default:
+      return (0, import_i18n.__)("Reset colors");
+  }
+}
 function NameInput({
   value,
   onChange,
@@ -88,8 +183,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);
@@ -103,16 +199,21 @@ function getNameAndSlugForPosition(elements, slugPrefix) {
     return previousValue;
   }, 1);
   return {
-    name: (0, import_i18n.sprintf)(
+    name: variant === "duotone" ? (0, import_i18n.sprintf)(
+      /* translators: %d: is an id for a custom duotone */
+      (0, import_i18n.__)("Duotone %d"),
+      position
+    ) : (0, import_i18n.sprintf)(
       /* translators: %d: is an id for a custom color */
       (0, import_i18n.__)("Color %d"),
       position
     ),
-    slug: `${slugPrefix}color-${position}`
+    slug: `${slugPrefix}${stem}-${position}`
   };
 }
 function ColorPickerPopover({
-  isGradient,
+  variant,
+  colorPalette,
   element,
   onChange,
   popoverProps: receivedPopoverProps,
@@ -133,7 +234,7 @@ function ColorPickerPopover({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.default, {
     ...popoverProps,
     onClose,
-    children: [!isGradient && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_picker.ColorPicker, {
+    children: [variant === "color" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_picker.ColorPicker, {
       color: element.color,
       enableAlpha: true,
       onChange: (newColor) => {
@@ -142,7 +243,7 @@ function ColorPickerPopover({
           color: newColor
         });
       }
-    }), isGradient && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    }), variant === "gradient" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
       className: "components-palette-edit__popover-gradient-picker",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_custom_gradient_picker.default, {
         __experimentalIsRenderedInSidebar: true,
@@ -154,6 +255,41 @@ function ColorPickerPopover({
           });
         }
       })
+    }), variant === "duotone" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+      className: "components-palette-edit__popover-duotone-picker",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_v_stack.VStack, {
+        spacing: 3,
+        children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_custom_duotone_bar.default, {
+          value: getDuotoneColors(element),
+          onChange: (newColors) => {
+            if (!newColors?.length) {
+              return;
+            }
+            onChange({
+              ...element,
+              colors: newColors
+            });
+          }
+        }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_list_picker.default, {
+          labels: [(0, import_i18n.__)("Shadows"), (0, import_i18n.__)("Highlights")],
+          colors: colorPalette ?? [],
+          value: getDuotoneColors(element),
+          enableAlpha: true,
+          onChange: (newColors) => {
+            const [defaultDark, defaultLight] = (0, import_utils.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
+              ]
+            });
+          }
+        })]
+      })
     })]
   });
 }
@@ -164,9 +300,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] = (0, import_element.useState)(false);
   const [popoverAnchor, setPopoverAnchor] = (0, import_element.useState)(null);
   const popoverProps = (0, import_element.useMemo)(() => ({
@@ -185,7 +322,7 @@ function Option({
           setIsEditingColor(true);
         },
         "aria-label": (0, import_i18n.sprintf)(
-          // translators: %s is a color or gradient name, e.g. "Red".
+          // translators: %s is a color, gradient or duotone name, e.g. "Red".
           (0, import_i18n.__)("Edit: %s"),
           element.name.trim().length ? element.name : value || ""
         ),
@@ -197,12 +334,12 @@ function Option({
         })
       }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_flex.FlexBlock, {
         children: !canOnlyChangeValues ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NameInput, {
-          label: isGradient ? (0, import_i18n.__)("Gradient name") : (0, import_i18n.__)("Color name"),
+          label: getNameInputLabel(variant),
           value: element.name,
           onChange: (nextName) => onChange({
             ...element,
             name: nextName,
-            slug: slugPrefix + (0, import_strings.kebabCase)(nextName ?? "")
+            slug: slugPrefix + (0, import_kebab_case.kebabCase)(nextName ?? "")
           })
         }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.NameContainer, {
           children: element.name.trim().length ? element.name : (
@@ -214,16 +351,13 @@ function Option({
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.RemoveButton, {
           size: "small",
           icon: import_icons.lineSolid,
-          label: (0, import_i18n.sprintf)(
-            // translators: %s is a color or gradient name, e.g. "Red".
-            (0, import_i18n.__)("Remove color: %s"),
-            element.name.trim().length ? element.name : value || ""
-          ),
+          label: (0, import_i18n.sprintf)(getRemoveLabelFormat(variant), element.name.trim().length ? element.name : value || ""),
           onClick: onRemove
         })
       })]
     }), isEditingColor && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPickerPopover, {
-      isGradient,
+      variant,
+      colorPalette,
       onChange,
       element,
       popoverProps,
@@ -236,7 +370,8 @@ function PaletteEditListView({
   onChange,
   canOnlyChangeValues,
   slugPrefix,
-  isGradient,
+  variant,
+  colorPalette,
   popoverProps,
   addColorRef
 }) {
@@ -252,7 +387,8 @@ function PaletteEditListView({
       isBordered: true,
       isSeparated: true,
       children: elements.map((element, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Option, {
-        isGradient,
+        variant,
+        colorPalette,
         canOnlyChangeValues,
         element,
         onChange: (newElement) => {
@@ -282,7 +418,9 @@ function PaletteEditListView({
 var EMPTY_ARRAY = [];
 function PaletteEdit({
   gradients,
+  duotones,
   colors = EMPTY_ARRAY,
+  colorPalette,
   onChange,
   paletteLabel,
   paletteLabelHeadingLevel = 2,
@@ -292,8 +430,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 = (0, import_element.useMemo)(() => getUsableDuotoneColors(colorPalette), [colorPalette]);
   const [isEditing, setIsEditing] = (0, import_element.useState)(false);
   const [editingElement, setEditingElement] = (0, import_element.useState)(null);
   const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug;
@@ -302,17 +446,26 @@ function PaletteEdit({
   const debounceOnChange = (0, import_compose.useDebounce)(onChange, 100);
   const onSelectPaletteItem = (0, import_element.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 = (0, import_element.useCallback)((value, newEditingElementIndex) => {
+    if (newEditingElementIndex !== void 0 && (duotones ?? [])[newEditingElementIndex]) {
+      setEditingElement(newEditingElementIndex);
+    } else {
+      setIsEditing(true);
+    }
+  }, [duotones]);
   const addColorRef = (0, import_element.useRef)(null);
+  const paletteLabelId = (0, import_compose.useInstanceId)(PaletteEdit, "components-palette-edit__heading");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.PaletteEditStyles, {
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_h_stack.HStack, {
       children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.PaletteHeading, {
+        id: paletteLabelId,
         level: paletteLabelHeadingLevel,
         children: paletteLabel
       }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.PaletteActionsContainer, {
@@ -328,18 +481,24 @@ function PaletteEdit({
           size: "small",
           isPressed: isAdding,
           icon: import_icons.plus,
-          label: isGradient ? (0, import_i18n.__)("Add gradient") : (0, import_i18n.__)("Add color"),
+          label: getAddLabel(variant),
           onClick: () => {
             const {
               name,
               slug
-            } = getNameAndSlugForPosition(elements, slugPrefix);
+            } = getNameAndSlugForPosition(elements, slugPrefix, variant);
             if (!!gradients) {
               onChange([...gradients, {
                 gradient: import_constants.DEFAULT_GRADIENT,
                 name,
                 slug
               }]);
+            } else if (!!duotones) {
+              onChange([...duotones, {
+                colors: (0, import_utils.getDefaultColors)(duotoneColorPalette),
+                name,
+                slug
+              }]);
             } else {
               onChange([...colors, {
                 color: DEFAULT_COLOR,
@@ -352,7 +511,7 @@ function PaletteEdit({
           }
         }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown_menu.default, {
           icon: import_icons.moreVertical,
-          label: isGradient ? (0, import_i18n.__)("Gradient options") : (0, import_i18n.__)("Color options"),
+          label: getOptionsLabel(variant),
           toggleProps: {
             size: "small"
           },
@@ -380,7 +539,7 @@ function PaletteEdit({
                   onClose();
                 },
                 className: "components-palette-edit__menu-button",
-                children: isGradient ? (0, import_i18n.__)("Remove all gradients") : (0, import_i18n.__)("Remove all colors")
+                children: getRemoveAllLabel(variant)
               }), canReset && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.default, {
                 __next40pxDefaultSize: true,
                 className: "components-palette-edit__menu-button",
@@ -390,7 +549,7 @@ function PaletteEdit({
                   onChange();
                   onClose();
                 },
-                children: isGradient ? (0, import_i18n.__)("Reset gradient") : (0, import_i18n.__)("Reset colors")
+                children: getResetLabel(variant)
               })]
             })
           })
@@ -402,11 +561,13 @@ function PaletteEdit({
         elements,
         onChange,
         slugPrefix,
-        isGradient,
+        variant,
+        colorPalette: duotoneColorPalette,
         popoverProps,
         addColorRef
       }), !isEditing && editingElement !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorPickerPopover, {
-        isGradient,
+        variant,
+        colorPalette: duotoneColorPalette,
         onClose: () => setEditingElement(null),
         onChange: (newElement) => {
           debounceOnChange(
@@ -421,17 +582,31 @@ function PaletteEdit({
         },
         element: elements[editingElement ?? -1],
         popoverProps
-      }), !isEditing && (isGradient ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_gradient_picker.default, {
+      }), !isEditing && variant === "gradient" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_gradient_picker.default, {
+        presentation: "command-buttons",
+        "aria-labelledby": paletteLabelId,
         gradients,
         onChange: onSelectPaletteItem,
         clearable: false,
         disableCustomGradients: true
-      }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_palette.default, {
+      }), !isEditing && variant === "duotone" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_duotone_picker.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__ */ (0, import_jsx_runtime.jsx)(import_color_palette.default, {
+        presentation: "command-buttons",
+        "aria-labelledby": paletteLabelId,
         colors,
         onChange: onSelectPaletteItem,
         clearable: false,
         disableCustomColors: true
-      }))]
+      })]
     }), !hasElements && emptyMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.PaletteEditContents, {
       children: emptyMessage
     })]

package/build/palette-edit/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/palette-edit/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\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';\n\n/**\n * Internal dependencies\n */\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 { kebabCase } from '../utils/strings';\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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",
-  "names": ["_jsx", "clsx", "_jsxs", "Popover", "CustomGradientPicker", "Button", "DropdownMenu", "_Fragment", "GradientPicker", "ColorPalette"]
+  "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": ["namesPlugin", "_jsx", "clsx", "_jsxs", "Popover", "CustomGradientPicker", "CustomDuotoneBar", "ColorListPicker", "Button", "DropdownMenu", "_Fragment", "GradientPicker", "ColorPalette"]
 }