@wordpress/components 37.0.1-next.v.202607070741.0 → 38.0.0

package/build-module/color-picker/component.mjs

@@ -60,12 +60,15 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     ...safeColordColor.toHsl()
   }));
   const lastProducedHexRef = useRef(safeColordColor.toHex());
+  const isPickerInteractingRef = useRef(false);
   useEffect(() => {
-    const incomingHex = safeColordColor.toHex();
-    if (incomingHex === lastProducedHexRef.current) {
+    if (isPickerInteractingRef.current) {
       return;
     }
-    lastProducedHexRef.current = incomingHex;
+    if (safeColordColor.isEqual(lastProducedHexRef.current)) {
+      return;
+    }
+    lastProducedHexRef.current = safeColordColor.toHex();
     const externalHSLA = safeColordColor.toHsl();
     setInternalHSLA((prev) => mergeHSLA(externalHSLA, prev));
   }, [safeColordColor]);
@@ -73,7 +76,7 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     setInternalHSLA(nextHSLA);
     const previousHex = lastProducedHexRef.current;
     const nextHex = colord(nextHSLA).toHex();
-    if (nextHex !== previousHex) {
+    if (!colord(nextHex).isEqual(previousHex)) {
       lastProducedHexRef.current = nextHex;
       setColor(nextHex);
     }
@@ -116,7 +119,13 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     children: [/* @__PURE__ */ _jsx(Picker, {
       onChange: handleHSLAChange,
       hsla: internalHSLA,
-      enableAlpha
+      enableAlpha,
+      onInteractionStart: () => {
+        isPickerInteractingRef.current = true;
+      },
+      onInteractionEnd: () => {
+        isPickerInteractingRef.current = false;
+      }
     }), /* @__PURE__ */ _jsxs(AuxiliaryColorArtefactWrapper, {
       children: [/* @__PURE__ */ _jsxs(AuxiliaryColorArtefactHStackHeader, {
         justify: "space-between",

package/build-module/color-picker/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/component.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend, getFormat } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin]);\n\n/**\n * Merges incoming HSLA with previous state, preserving hue for achromatic\n * colors and saturation only at lightness extremes (black/white) where\n * it has no visual effect.\n */\nfunction mergeHSLA(nextHSLA, prevHSLA) {\n  if (nextHSLA.s === 0) {\n    if (nextHSLA.l === 0 || nextHSLA.l === 100) {\n      return {\n        ...nextHSLA,\n        h: prevHSLA.h,\n        s: prevHSLA.s\n      };\n    }\n    return {\n      ...nextHSLA,\n      h: prevHSLA.h\n    };\n  }\n  return nextHSLA;\n}\nconst options = [{\n  label: 'RGB',\n  value: 'rgb'\n}, {\n  label: 'HSL',\n  value: 'hsl'\n}, {\n  label: 'Hex',\n  value: 'hex'\n}];\nconst UnconnectedColorPicker = (props, forwardedRef) => {\n  const {\n    enableAlpha = false,\n    color: colorProp,\n    onChange,\n    defaultValue = '#fff',\n    copyFormat,\n    ...divProps\n  } = useContextSystem(props, 'ColorPicker');\n\n  // Use a safe default value for the color and remove the possibility of `undefined`.\n  const [color, setColor] = useControlledValue({\n    onChange,\n    value: colorProp,\n    defaultValue\n  });\n  const safeColordColor = useMemo(() => {\n    return colord(color || '');\n  }, [color]);\n  const debouncedSetColor = useDebounce(setColor);\n\n  // Internal HSLA state preserves hue and saturation values that\n  // would otherwise be lost when converting to/from hex at achromatic\n  // colors (e.g. pure black or white where any H/S maps to the same hex).\n  const [internalHSLA, setInternalHSLA] = useState(() => ({\n    ...safeColordColor.toHsl()\n  }));\n\n  // Track the last hex we produced so the sync effect can\n  // distinguish our own updates from external prop changes.\n  const lastProducedHexRef = useRef(safeColordColor.toHex());\n\n  // Sync internalHSLA when the color prop changes externally (e.g.\n  // parent passes a new color that wasn't produced by our onChange).\n  useEffect(() => {\n    const incomingHex = safeColordColor.toHex();\n\n    // If this hex matches what we last produced, it's our own\n    // update arriving back — skip the sync to avoid overwriting\n    // internalHSLA with lossy round-tripped values.\n    if (incomingHex === lastProducedHexRef.current) {\n      return;\n    }\n\n    // Genuinely external change — sync internalHSLA.\n    lastProducedHexRef.current = incomingHex;\n    const externalHSLA = safeColordColor.toHsl();\n    setInternalHSLA(prev => mergeHSLA(externalHSLA, prev));\n  }, [safeColordColor]);\n\n  // Handler for HSL-aware components (Picker, HSL inputs) that\n  // provide raw HSLA values without information loss.\n  // Uses direct setColor (not debounced) to prevent race conditions\n  // where a stale debounced hex would overwrite newer internalHSLA.\n  // This is safe performance-wise because react-colorful internally\n  // throttles its onChange callbacks using requestAnimationFrame.\n\n  const handleHSLAChange = useCallback(nextHSLA => {\n    // No mergeHSLA here — this handler receives the user's explicit\n    // choice from the picker or HSL inputs, with no lossy conversion.\n    setInternalHSLA(nextHSLA);\n    const previousHex = lastProducedHexRef.current;\n    const nextHex = colord(nextHSLA).toHex();\n    // Only notify parent when the hex actually changes. This\n    // avoids firing onChange for H/S changes on achromatic\n    // colors (e.g. adjusting hue on pure white).\n    if (nextHex !== previousHex) {\n      lastProducedHexRef.current = nextHex;\n      setColor(nextHex);\n    }\n  }, [setColor]);\n\n  // Handler for components that provide Colord values (RGB, Hex inputs).\n  // Uses debouncedSetColor since the hex input fires per keystroke.\n  const handleChange = useCallback(nextValue => {\n    const nextHSLA = nextValue.toHsl();\n    setInternalHSLA(prev => mergeHSLA(nextHSLA, prev));\n    const nextHex = nextValue.toHex();\n    lastProducedHexRef.current = nextHex;\n    debouncedSetColor(nextHex);\n  }, [debouncedSetColor]);\n  const [colorType, setColorType] = useState(copyFormat || 'hex');\n\n  /*\n   * ! Listener intended for the CAPTURE phase\n   *\n   * Capture paste events over the entire color picker, looking for clipboard\n   * data that could be parsed as a color. If not, let the paste event\n   * propagate normally, so that individual input controls within the\n   * component have a chance to handle it.\n   */\n  const maybeHandlePaste = useCallback(event => {\n    const pastedText = event.clipboardData?.getData('text')?.trim();\n    if (!pastedText) {\n      return;\n    }\n    const parsedColor = colord(pastedText);\n    if (!parsedColor.isValid()) {\n      return;\n    }\n\n    // Apply all valid colors, even if the format isn't supported in\n    // the UI (e.g. names like \"cyan\" or, in the future color spaces\n    // like \"lch\" if we add the right colord plugins)\n    handleChange(parsedColor);\n\n    // This redundancy helps TypeScript and is safer than assertions\n    const supportedFormats = {\n      hex: 'hex',\n      rgb: 'rgb',\n      hsl: 'hsl'\n    };\n    const detectedFormat = String(getFormat(pastedText));\n    const newColorType = supportedFormats[detectedFormat];\n    if (newColorType) {\n      setColorType(newColorType);\n    }\n\n    // Stop at capture phase; no bubbling\n    event.stopPropagation();\n    event.preventDefault();\n  }, [handleChange, setColorType]);\n  return /*#__PURE__*/_jsxs(ColorfulWrapper, {\n    ref: forwardedRef,\n    ...divProps,\n    onPasteCapture: maybeHandlePaste,\n    children: [/*#__PURE__*/_jsx(Picker, {\n      onChange: handleHSLAChange,\n      hsla: internalHSLA,\n      enableAlpha: enableAlpha\n    }), /*#__PURE__*/_jsxs(AuxiliaryColorArtefactWrapper, {\n      children: [/*#__PURE__*/_jsxs(AuxiliaryColorArtefactHStackHeader, {\n        justify: \"space-between\",\n        children: [/*#__PURE__*/_jsx(SelectControl, {\n          size: \"compact\",\n          options: options,\n          value: colorType,\n          onChange: nextColorType => setColorType(nextColorType),\n          label: __('Color format'),\n          hideLabelFromVision: true,\n          variant: \"minimal\"\n        }), /*#__PURE__*/_jsx(ColorCopyButton, {\n          color: safeColordColor,\n          colorType: copyFormat || colorType\n        })]\n      }), /*#__PURE__*/_jsx(ColorInputWrapper, {\n        direction: \"column\",\n        gap: 2,\n        children: /*#__PURE__*/_jsx(ColorInput, {\n          colorType: colorType,\n          color: safeColordColor,\n          hsla: internalHSLA,\n          onChange: handleChange,\n          onHSLChange: handleHSLAChange,\n          enableAlpha: enableAlpha\n        })\n      })]\n    })]\n  });\n};\n\n/**\n * `ColorPicker` lets users select a color from a visual color surface, or by\n * editing its hex, RGB, or HSL values.\n */\nexport const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');\nexport default ColorPicker;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend, getFormat } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, contextConnect } from '../context';\nimport { ColorfulWrapper, SelectControl, AuxiliaryColorArtefactWrapper, AuxiliaryColorArtefactHStackHeader, ColorInputWrapper } from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nextend([namesPlugin]);\n\n/**\n * Merges incoming HSLA with previous state, preserving hue for achromatic\n * colors and saturation only at lightness extremes (black/white) where\n * it has no visual effect.\n */\nfunction mergeHSLA(nextHSLA, prevHSLA) {\n  if (nextHSLA.s === 0) {\n    if (nextHSLA.l === 0 || nextHSLA.l === 100) {\n      return {\n        ...nextHSLA,\n        h: prevHSLA.h,\n        s: prevHSLA.s\n      };\n    }\n    return {\n      ...nextHSLA,\n      h: prevHSLA.h\n    };\n  }\n  return nextHSLA;\n}\nconst options = [{\n  label: 'RGB',\n  value: 'rgb'\n}, {\n  label: 'HSL',\n  value: 'hsl'\n}, {\n  label: 'Hex',\n  value: 'hex'\n}];\nconst UnconnectedColorPicker = (props, forwardedRef) => {\n  const {\n    enableAlpha = false,\n    color: colorProp,\n    onChange,\n    defaultValue = '#fff',\n    copyFormat,\n    ...divProps\n  } = useContextSystem(props, 'ColorPicker');\n\n  // Use a safe default value for the color and remove the possibility of `undefined`.\n  const [color, setColor] = useControlledValue({\n    onChange,\n    value: colorProp,\n    defaultValue\n  });\n  const safeColordColor = useMemo(() => {\n    return colord(color || '');\n  }, [color]);\n  const debouncedSetColor = useDebounce(setColor);\n\n  // Internal HSLA state preserves hue and saturation values that\n  // would otherwise be lost when converting to/from hex at achromatic\n  // colors (e.g. pure black or white where any H/S maps to the same hex).\n  const [internalHSLA, setInternalHSLA] = useState(() => ({\n    ...safeColordColor.toHsl()\n  }));\n\n  // Track the last hex we produced so the sync effect can\n  // distinguish our own updates from external prop changes.\n  const lastProducedHexRef = useRef(safeColordColor.toHex());\n\n  // While the user is dragging the visual picker, ignore color-prop sync\n  // so delayed/stale controlled echoes cannot overwrite internalHSLA mid-drag.\n  const isPickerInteractingRef = useRef(false);\n\n  // Sync internalHSLA when the color prop changes externally (e.g.\n  // parent passes a new color that wasn't produced by our onChange).\n  useEffect(() => {\n    if (isPickerInteractingRef.current) {\n      return;\n    }\n\n    // Compare by color equality, not hex string — rgb()/rgba()\n    // round-trips can differ in string form for the same color.\n    if (safeColordColor.isEqual(lastProducedHexRef.current)) {\n      return;\n    }\n\n    // Genuinely external change — sync internalHSLA.\n    lastProducedHexRef.current = safeColordColor.toHex();\n    const externalHSLA = safeColordColor.toHsl();\n    setInternalHSLA(prev => mergeHSLA(externalHSLA, prev));\n  }, [safeColordColor]);\n\n  // Handler for HSL inputs (and the HSVA picker after it converts to HSLA).\n  // Apply the user's HSLA, then notify the parent only when the color\n  // actually changes. setColor must not run inside setInternalHSLA\n  // (state updaters must be pure). Uses direct setColor (not debounced)\n  // to avoid races with hex/RGB's debouncedSetColor.\n  const handleHSLAChange = useCallback(nextHSLA => {\n    setInternalHSLA(nextHSLA);\n    const previousHex = lastProducedHexRef.current;\n    const nextHex = colord(nextHSLA).toHex();\n    if (!colord(nextHex).isEqual(previousHex)) {\n      lastProducedHexRef.current = nextHex;\n      setColor(nextHex);\n    }\n  }, [setColor]);\n\n  // Handler for components that provide Colord values (RGB, Hex inputs).\n  // Uses debouncedSetColor since the hex input fires per keystroke.\n  const handleChange = useCallback(nextValue => {\n    const nextHSLA = nextValue.toHsl();\n    setInternalHSLA(prev => mergeHSLA(nextHSLA, prev));\n    const nextHex = nextValue.toHex();\n    lastProducedHexRef.current = nextHex;\n    debouncedSetColor(nextHex);\n  }, [debouncedSetColor]);\n  const [colorType, setColorType] = useState(copyFormat || 'hex');\n\n  /*\n   * ! Listener intended for the CAPTURE phase\n   *\n   * Capture paste events over the entire color picker, looking for clipboard\n   * data that could be parsed as a color. If not, let the paste event\n   * propagate normally, so that individual input controls within the\n   * component have a chance to handle it.\n   */\n  const maybeHandlePaste = useCallback(event => {\n    const pastedText = event.clipboardData?.getData('text')?.trim();\n    if (!pastedText) {\n      return;\n    }\n    const parsedColor = colord(pastedText);\n    if (!parsedColor.isValid()) {\n      return;\n    }\n\n    // Apply all valid colors, even if the format isn't supported in\n    // the UI (e.g. names like \"cyan\" or, in the future color spaces\n    // like \"lch\" if we add the right colord plugins)\n    handleChange(parsedColor);\n\n    // This redundancy helps TypeScript and is safer than assertions\n    const supportedFormats = {\n      hex: 'hex',\n      rgb: 'rgb',\n      hsl: 'hsl'\n    };\n    const detectedFormat = String(getFormat(pastedText));\n    const newColorType = supportedFormats[detectedFormat];\n    if (newColorType) {\n      setColorType(newColorType);\n    }\n\n    // Stop at capture phase; no bubbling\n    event.stopPropagation();\n    event.preventDefault();\n  }, [handleChange, setColorType]);\n  return /*#__PURE__*/_jsxs(ColorfulWrapper, {\n    ref: forwardedRef,\n    ...divProps,\n    onPasteCapture: maybeHandlePaste,\n    children: [/*#__PURE__*/_jsx(Picker, {\n      onChange: handleHSLAChange,\n      hsla: internalHSLA,\n      enableAlpha: enableAlpha,\n      onInteractionStart: () => {\n        isPickerInteractingRef.current = true;\n      },\n      onInteractionEnd: () => {\n        isPickerInteractingRef.current = false;\n      }\n    }), /*#__PURE__*/_jsxs(AuxiliaryColorArtefactWrapper, {\n      children: [/*#__PURE__*/_jsxs(AuxiliaryColorArtefactHStackHeader, {\n        justify: \"space-between\",\n        children: [/*#__PURE__*/_jsx(SelectControl, {\n          size: \"compact\",\n          options: options,\n          value: colorType,\n          onChange: nextColorType => setColorType(nextColorType),\n          label: __('Color format'),\n          hideLabelFromVision: true,\n          variant: \"minimal\"\n        }), /*#__PURE__*/_jsx(ColorCopyButton, {\n          color: safeColordColor,\n          colorType: copyFormat || colorType\n        })]\n      }), /*#__PURE__*/_jsx(ColorInputWrapper, {\n        direction: \"column\",\n        gap: 2,\n        children: /*#__PURE__*/_jsx(ColorInput, {\n          colorType: colorType,\n          color: safeColordColor,\n          hsla: internalHSLA,\n          onChange: handleChange,\n          onHSLChange: handleHSLAChange,\n          enableAlpha: enableAlpha\n        })\n      })]\n    })]\n  });\n};\n\n/**\n * `ColorPicker` lets users select a color from a visual color surface, or by\n * editing its hex, RGB, or HSL values.\n */\nexport const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');\nexport default ColorPicker;"],
+  "mappings": ";AAIA,SAAS,QAAQ,QAAQ,iBAAiB;AAC1C,OAAO,iBAAiB;AAKxB,SAAS,aAAa,WAAW,QAAQ,UAAU,eAAe;AAClE,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAKnB,SAAS,kBAAkB,sBAAsB;AACjD,SAAS,iBAAiB,eAAe,+BAA+B,oCAAoC,yBAAyB;AACrI,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AACvB,SAAS,0BAA0B;AACnC,SAAS,OAAO,MAAM,QAAQ,aAAa;AAC3C,OAAO,CAAC,WAAW,CAAC;AAOpB,SAAS,UAAU,UAAU,UAAU;AACrC,MAAI,SAAS,MAAM,GAAG;AACpB,QAAI,SAAS,MAAM,KAAK,SAAS,MAAM,KAAK;AAC1C,aAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG,SAAS;AAAA,QACZ,GAAG,SAAS;AAAA,MACd;AAAA,IACF;AACA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,SAAS;AAAA,IACd;AAAA,EACF;AACA,SAAO;AACT;AACA,IAAM,UAAU,CAAC;AAAA,EACf,OAAO;AAAA,EACP,OAAO;AACT,GAAG;AAAA,EACD,OAAO;AAAA,EACP,OAAO;AACT,GAAG;AAAA,EACD,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AACD,IAAM,yBAAyB,CAAC,OAAO,iBAAiB;AACtD,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,aAAa;AAGzC,QAAM,CAAC,OAAO,QAAQ,IAAI,mBAAmB;AAAA,IAC3C;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACD,QAAM,kBAAkB,QAAQ,MAAM;AACpC,WAAO,OAAO,SAAS,EAAE;AAAA,EAC3B,GAAG,CAAC,KAAK,CAAC;AACV,QAAM,oBAAoB,YAAY,QAAQ;AAK9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,OAAO;AAAA,IACtD,GAAG,gBAAgB,MAAM;AAAA,EAC3B,EAAE;AAIF,QAAM,qBAAqB,OAAO,gBAAgB,MAAM,CAAC;AAIzD,QAAM,yBAAyB,OAAO,KAAK;AAI3C,YAAU,MAAM;AACd,QAAI,uBAAuB,SAAS;AAClC;AAAA,IACF;AAIA,QAAI,gBAAgB,QAAQ,mBAAmB,OAAO,GAAG;AACvD;AAAA,IACF;AAGA,uBAAmB,UAAU,gBAAgB,MAAM;AACnD,UAAM,eAAe,gBAAgB,MAAM;AAC3C,oBAAgB,UAAQ,UAAU,cAAc,IAAI,CAAC;AAAA,EACvD,GAAG,CAAC,eAAe,CAAC;AAOpB,QAAM,mBAAmB,YAAY,cAAY;AAC/C,oBAAgB,QAAQ;AACxB,UAAM,cAAc,mBAAmB;AACvC,UAAM,UAAU,OAAO,QAAQ,EAAE,MAAM;AACvC,QAAI,CAAC,OAAO,OAAO,EAAE,QAAQ,WAAW,GAAG;AACzC,yBAAmB,UAAU;AAC7B,eAAS,OAAO;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAIb,QAAM,eAAe,YAAY,eAAa;AAC5C,UAAM,WAAW,UAAU,MAAM;AACjC,oBAAgB,UAAQ,UAAU,UAAU,IAAI,CAAC;AACjD,UAAM,UAAU,UAAU,MAAM;AAChC,uBAAmB,UAAU;AAC7B,sBAAkB,OAAO;AAAA,EAC3B,GAAG,CAAC,iBAAiB,CAAC;AACtB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,cAAc,KAAK;AAU9D,QAAM,mBAAmB,YAAY,WAAS;AAC5C,UAAM,aAAa,MAAM,eAAe,QAAQ,MAAM,GAAG,KAAK;AAC9D,QAAI,CAAC,YAAY;AACf;AAAA,IACF;AACA,UAAM,cAAc,OAAO,UAAU;AACrC,QAAI,CAAC,YAAY,QAAQ,GAAG;AAC1B;AAAA,IACF;AAKA,iBAAa,WAAW;AAGxB,UAAM,mBAAmB;AAAA,MACvB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AACA,UAAM,iBAAiB,OAAO,UAAU,UAAU,CAAC;AACnD,UAAM,eAAe,iBAAiB,cAAc;AACpD,QAAI,cAAc;AAChB,mBAAa,YAAY;AAAA,IAC3B;AAGA,UAAM,gBAAgB;AACtB,UAAM,eAAe;AAAA,EACvB,GAAG,CAAC,cAAc,YAAY,CAAC;AAC/B,SAAoB,sBAAM,iBAAiB;AAAA,IACzC,KAAK;AAAA,IACL,GAAG;AAAA,IACH,gBAAgB;AAAA,IAChB,UAAU,CAAc,qBAAK,QAAQ;AAAA,MACnC,UAAU;AAAA,MACV,MAAM;AAAA,MACN;AAAA,MACA,oBAAoB,MAAM;AACxB,+BAAuB,UAAU;AAAA,MACnC;AAAA,MACA,kBAAkB,MAAM;AACtB,+BAAuB,UAAU;AAAA,MACnC;AAAA,IACF,CAAC,GAAgB,sBAAM,+BAA+B;AAAA,MACpD,UAAU,CAAc,sBAAM,oCAAoC;AAAA,QAChE,SAAS;AAAA,QACT,UAAU,CAAc,qBAAK,eAAe;AAAA,UAC1C,MAAM;AAAA,UACN;AAAA,UACA,OAAO;AAAA,UACP,UAAU,mBAAiB,aAAa,aAAa;AAAA,UACrD,OAAO,GAAG,cAAc;AAAA,UACxB,qBAAqB;AAAA,UACrB,SAAS;AAAA,QACX,CAAC,GAAgB,qBAAK,iBAAiB;AAAA,UACrC,OAAO;AAAA,UACP,WAAW,cAAc;AAAA,QAC3B,CAAC,CAAC;AAAA,MACJ,CAAC,GAAgB,qBAAK,mBAAmB;AAAA,QACvC,WAAW;AAAA,QACX,KAAK;AAAA,QACL,UAAuB,qBAAK,YAAY;AAAA,UACtC;AAAA,UACA,OAAO;AAAA,UACP,MAAM;AAAA,UACN,UAAU;AAAA,UACV,aAAa;AAAA,UACb;AAAA,QACF,CAAC;AAAA,MACH,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AAMO,IAAM,cAAc,eAAe,wBAAwB,aAAa;AAC/E,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/color-picker/hex-input.mjs

@@ -44,7 +44,6 @@ var HexInput = ({
     maxLength: enableAlpha ? 9 : 7,
     label: __("Hex color"),
     hideLabelFromVision: true,
-    size: "__unstable-large",
     __unstableStateReducer: stateReducer,
     __unstableInputWidth: "9em"
   });

package/build-module/color-picker/hex-input.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/hex-input.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { COLORS } from '../utils/colors-values';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const HexInput = ({\n  color,\n  onChange,\n  enableAlpha\n}) => {\n  const handleChange = nextValue => {\n    if (nextValue === undefined) {\n      return;\n    }\n    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;\n    onChange(colord(hexValue));\n  };\n  const stateReducer = (state, action) => {\n    const nativeEvent = action.payload?.event?.nativeEvent;\n    if ('insertFromPaste' !== nativeEvent?.inputType) {\n      return {\n        ...state\n      };\n    }\n    const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();\n    return {\n      ...state,\n      value\n    };\n  };\n  return /*#__PURE__*/_jsx(InputControl, {\n    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n      children: /*#__PURE__*/_jsx(Text, {\n        color: COLORS.theme.accent,\n        lineHeight: 1,\n        children: \"#\"\n      })\n    }),\n    value: color.toHex().slice(1).toUpperCase(),\n    onChange: handleChange,\n    maxLength: enableAlpha ? 9 : 7,\n    label: __('Hex color'),\n    hideLabelFromVision: true,\n    size: \"__unstable-large\",\n    __unstableStateReducer: stateReducer,\n    __unstableInputWidth: \"9em\"\n  });\n};"],
-  "mappings": ";AAGA,SAAS,cAAc;AAKvB,SAAS,UAAU;AAKnB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,OAAO,+BAA+B;AACtC,SAAS,OAAO,YAAY;AACrB,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,eAAa;AAChC,QAAI,cAAc,QAAW;AAC3B;AAAA,IACF;AACA,UAAM,WAAW,UAAU,WAAW,GAAG,IAAI,YAAY,MAAM;AAC/D,aAAS,OAAO,QAAQ,CAAC;AAAA,EAC3B;AACA,QAAM,eAAe,CAAC,OAAO,WAAW;AACtC,UAAM,cAAc,OAAO,SAAS,OAAO;AAC3C,QAAI,sBAAsB,aAAa,WAAW;AAChD,aAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,OAAO,WAAW,GAAG,IAAI,MAAM,MAAM,MAAM,CAAC,EAAE,YAAY,IAAI,MAAM,OAAO,YAAY;AAC3G,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACA,SAAoB,qBAAK,cAAc;AAAA,IACrC,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,UAAuB,qBAAK,MAAM;AAAA,QAChC,OAAO,OAAO,MAAM;AAAA,QACpB,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ,CAAC;AAAA,IACH,CAAC;AAAA,IACD,OAAO,MAAM,MAAM,EAAE,MAAM,CAAC,EAAE,YAAY;AAAA,IAC1C,UAAU;AAAA,IACV,WAAW,cAAc,IAAI;AAAA,IAC7B,OAAO,GAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,MAAM;AAAA,IACN,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,EACxB,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { InputControl } from '../input-control';\nimport { Text } from '../text';\nimport { COLORS } from '../utils/colors-values';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const HexInput = ({\n  color,\n  onChange,\n  enableAlpha\n}) => {\n  const handleChange = nextValue => {\n    if (nextValue === undefined) {\n      return;\n    }\n    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;\n    onChange(colord(hexValue));\n  };\n  const stateReducer = (state, action) => {\n    const nativeEvent = action.payload?.event?.nativeEvent;\n    if ('insertFromPaste' !== nativeEvent?.inputType) {\n      return {\n        ...state\n      };\n    }\n    const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();\n    return {\n      ...state,\n      value\n    };\n  };\n  return /*#__PURE__*/_jsx(InputControl, {\n    prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n      children: /*#__PURE__*/_jsx(Text, {\n        color: COLORS.theme.accent,\n        lineHeight: 1,\n        children: \"#\"\n      })\n    }),\n    value: color.toHex().slice(1).toUpperCase(),\n    onChange: handleChange,\n    maxLength: enableAlpha ? 9 : 7,\n    label: __('Hex color'),\n    hideLabelFromVision: true,\n    __unstableStateReducer: stateReducer,\n    __unstableInputWidth: \"9em\"\n  });\n};"],
+  "mappings": ";AAGA,SAAS,cAAc;AAKvB,SAAS,UAAU;AAKnB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,OAAO,+BAA+B;AACtC,SAAS,OAAO,YAAY;AACrB,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,eAAa;AAChC,QAAI,cAAc,QAAW;AAC3B;AAAA,IACF;AACA,UAAM,WAAW,UAAU,WAAW,GAAG,IAAI,YAAY,MAAM;AAC/D,aAAS,OAAO,QAAQ,CAAC;AAAA,EAC3B;AACA,QAAM,eAAe,CAAC,OAAO,WAAW;AACtC,UAAM,cAAc,OAAO,SAAS,OAAO;AAC3C,QAAI,sBAAsB,aAAa,WAAW;AAChD,aAAO;AAAA,QACL,GAAG;AAAA,MACL;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,OAAO,WAAW,GAAG,IAAI,MAAM,MAAM,MAAM,CAAC,EAAE,YAAY,IAAI,MAAM,OAAO,YAAY;AAC3G,WAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,IACF;AAAA,EACF;AACA,SAAoB,qBAAK,cAAc;AAAA,IACrC,QAAqB,qBAAK,2BAA2B;AAAA,MACnD,UAAuB,qBAAK,MAAM;AAAA,QAChC,OAAO,OAAO,MAAM;AAAA,QACpB,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ,CAAC;AAAA,IACH,CAAC;AAAA,IACD,OAAO,MAAM,MAAM,EAAE,MAAM,CAAC,EAAE,YAAY;AAAA,IAC1C,UAAU;AAAA,IACV,WAAW,cAAc,IAAI;AAAA,IAC7B,OAAO,GAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,EACxB,CAAC;AACH;",
   "names": []
 }

package/build-module/color-picker/input-with-slider.mjs

@@ -27,7 +27,6 @@ var InputWithSlider = ({
   return /* @__PURE__ */ _jsxs(HStack, {
     spacing: 4,
     children: [/* @__PURE__ */ _jsx(NumberControlWrapper, {
-      __next40pxDefaultSize: true,
       min,
       max,
       label,

package/build-module/color-picker/input-with-slider.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/input-with-slider.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const InputWithSlider = ({\n  min,\n  max,\n  label,\n  abbreviation,\n  onChange,\n  value\n}) => {\n  const onNumberControlChange = newValue => {\n    if (!newValue) {\n      onChange(0);\n      return;\n    }\n    if (typeof newValue === 'string') {\n      onChange(parseInt(newValue, 10));\n      return;\n    }\n    onChange(newValue);\n  };\n  return /*#__PURE__*/_jsxs(HStack, {\n    spacing: 4,\n    children: [/*#__PURE__*/_jsx(NumberControlWrapper, {\n      __next40pxDefaultSize: true,\n      min: min,\n      max: max,\n      label: label,\n      hideLabelFromVision: true,\n      value: value,\n      onChange: onNumberControlChange,\n      prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n        children: /*#__PURE__*/_jsx(Text, {\n          color: COLORS.theme.accent,\n          lineHeight: 1,\n          children: abbreviation\n        })\n      }),\n      spinControls: \"none\"\n    }), /*#__PURE__*/_jsx(RangeControl, {\n      label: label,\n      hideLabelFromVision: true,\n      min: min,\n      max: max,\n      value: value\n      // @ts-expect-error\n      // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n      ,\n      onChange: onChange,\n      withInputField: false\n    })]\n  });\n};"],
-  "mappings": ";AAGA,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,cAAc,4BAA4B;AACnD,SAAS,cAAc;AACvB,OAAO,+BAA+B;AACtC,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,wBAAwB,cAAY;AACxC,QAAI,CAAC,UAAU;AACb,eAAS,CAAC;AACV;AAAA,IACF;AACA,QAAI,OAAO,aAAa,UAAU;AAChC,eAAS,SAAS,UAAU,EAAE,CAAC;AAC/B;AAAA,IACF;AACA,aAAS,QAAQ;AAAA,EACnB;AACA,SAAoB,sBAAM,QAAQ;AAAA,IAChC,SAAS;AAAA,IACT,UAAU,CAAc,qBAAK,sBAAsB;AAAA,MACjD,uBAAuB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA,UAAU;AAAA,MACV,QAAqB,qBAAK,2BAA2B;AAAA,QACnD,UAAuB,qBAAK,MAAM;AAAA,UAChC,OAAO,OAAO,MAAM;AAAA,UACpB,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ,CAAC;AAAA,MACH,CAAC;AAAA,MACD,cAAc;AAAA,IAChB,CAAC,GAAgB,qBAAK,cAAc;AAAA,MAClC;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MAIA;AAAA,MACA,gBAAgB;AAAA,IAClB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { HStack } from '../h-stack';\nimport { Text } from '../text';\nimport { RangeControl, NumberControlWrapper } from './styles';\nimport { COLORS } from '../utils/colors-values';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const InputWithSlider = ({\n  min,\n  max,\n  label,\n  abbreviation,\n  onChange,\n  value\n}) => {\n  const onNumberControlChange = newValue => {\n    if (!newValue) {\n      onChange(0);\n      return;\n    }\n    if (typeof newValue === 'string') {\n      onChange(parseInt(newValue, 10));\n      return;\n    }\n    onChange(newValue);\n  };\n  return /*#__PURE__*/_jsxs(HStack, {\n    spacing: 4,\n    children: [/*#__PURE__*/_jsx(NumberControlWrapper, {\n      min: min,\n      max: max,\n      label: label,\n      hideLabelFromVision: true,\n      value: value,\n      onChange: onNumberControlChange,\n      prefix: /*#__PURE__*/_jsx(InputControlPrefixWrapper, {\n        children: /*#__PURE__*/_jsx(Text, {\n          color: COLORS.theme.accent,\n          lineHeight: 1,\n          children: abbreviation\n        })\n      }),\n      spinControls: \"none\"\n    }), /*#__PURE__*/_jsx(RangeControl, {\n      label: label,\n      hideLabelFromVision: true,\n      min: min,\n      max: max,\n      value: value\n      // @ts-expect-error\n      // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n      ,\n      onChange: onChange,\n      withInputField: false\n    })]\n  });\n};"],
+  "mappings": ";AAGA,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,cAAc,4BAA4B;AACnD,SAAS,cAAc;AACvB,OAAO,+BAA+B;AACtC,SAAS,OAAO,MAAM,QAAQ,aAAa;AACpC,IAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,wBAAwB,cAAY;AACxC,QAAI,CAAC,UAAU;AACb,eAAS,CAAC;AACV;AAAA,IACF;AACA,QAAI,OAAO,aAAa,UAAU;AAChC,eAAS,SAAS,UAAU,EAAE,CAAC;AAC/B;AAAA,IACF;AACA,aAAS,QAAQ;AAAA,EACnB;AACA,SAAoB,sBAAM,QAAQ;AAAA,IAChC,SAAS;AAAA,IACT,UAAU,CAAc,qBAAK,sBAAsB;AAAA,MACjD;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA,UAAU;AAAA,MACV,QAAqB,qBAAK,2BAA2B;AAAA,QACnD,UAAuB,qBAAK,MAAM;AAAA,UAChC,OAAO,OAAO,MAAM;AAAA,UACpB,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ,CAAC;AAAA,MACH,CAAC;AAAA,MACD,cAAc;AAAA,IAChB,CAAC,GAAgB,qBAAK,cAAc;AAAA,MAClC;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MAIA;AAAA,MACA,gBAAgB;AAAA,IAClB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
   "names": []
 }

package/build-module/color-picker/picker.mjs

@@ -1,38 +1,110 @@
 // packages/components/src/color-picker/picker.tsx
-import { HslColorPicker, HslaColorPicker } from "react-colorful";
+import { useEffect, useRef, useState } from "@wordpress/element";
+import { HsvColorPicker, HsvaColorPicker } from "react-colorful";
+import { colord } from "colord";
 import { jsx as _jsx } from "react/jsx-runtime";
-var pointerCaptureProps = {
-  onPointerDown({
-    currentTarget,
-    pointerId
-  }) {
-    currentTarget.setPointerCapture(pointerId);
-  },
-  onPointerUp({
-    currentTarget,
-    pointerId
-  }) {
-    currentTarget.releasePointerCapture(pointerId);
+function toHsva(hsla) {
+  return {
+    ...colord(hsla).toHsv(),
+    // HSL and HSV share the hue angle. Color conversion collapses achromatic
+    // hue to 0, but HSLA retains the user's latent hue.
+    h: hsla.h,
+    a: hsla.a
+  };
+}
+function isSameHsla(a, b) {
+  return a.h === b.h && a.s === b.s && a.l === b.l && a.a === b.a;
+}
+function toHsvaFromHsla(hsla, prevHsva, prevHsla) {
+  const converted = toHsva(hsla);
+  if (hsla.l !== 0) {
+    return converted;
   }
-};
+  const saturationChanged = prevHsla !== null && prevHsla.s !== hsla.s;
+  return {
+    h: hsla.h,
+    s: saturationChanged ? hsla.s : prevHsva.s,
+    v: 0,
+    a: hsla.a
+  };
+}
 var Picker = ({
   hsla,
   enableAlpha,
-  onChange
+  onChange,
+  onInteractionStart,
+  onInteractionEnd
 }) => {
+  const [hsva, setHsva] = useState(() => toHsva(hsla));
+  const pickerOriginHslaRef = useRef(null);
+  const prevHslaRef = useRef(hsla);
+  const isPointerInteractingRef = useRef(false);
+  useEffect(() => {
+    if (isPointerInteractingRef.current) {
+      prevHslaRef.current = hsla;
+      return;
+    }
+    if (pickerOriginHslaRef.current && isSameHsla(pickerOriginHslaRef.current, hsla)) {
+      prevHslaRef.current = hsla;
+      return;
+    }
+    pickerOriginHslaRef.current = null;
+    setHsva((prev) => toHsvaFromHsla(hsla, prev, prevHslaRef.current));
+    prevHslaRef.current = hsla;
+  }, [hsla]);
+  const pointerCaptureProps = {
+    onPointerDown({
+      currentTarget,
+      pointerId
+    }) {
+      isPointerInteractingRef.current = true;
+      onInteractionStart?.();
+      currentTarget.setPointerCapture(pointerId);
+    },
+    onPointerUp({
+      currentTarget,
+      pointerId
+    }) {
+      currentTarget.releasePointerCapture(pointerId);
+      isPointerInteractingRef.current = false;
+      onInteractionEnd?.();
+    },
+    onPointerCancel({
+      currentTarget,
+      pointerId
+    }) {
+      currentTarget.releasePointerCapture(pointerId);
+      isPointerInteractingRef.current = false;
+      onInteractionEnd?.();
+    }
+  };
+  const handleChange = (next) => {
+    setHsva(next);
+    const nextHsla = {
+      ...colord(next).toHsl(),
+      a: next.a
+    };
+    pickerOriginHslaRef.current = nextHsla;
+    onChange(nextHsla);
+  };
   if (enableAlpha) {
-    return /* @__PURE__ */ _jsx(HslaColorPicker, {
-      color: hsla,
-      onChange,
+    return /* @__PURE__ */ _jsx(HsvaColorPicker, {
+      color: hsva,
+      onChange: handleChange,
       ...pointerCaptureProps
     });
   }
-  return /* @__PURE__ */ _jsx(HslColorPicker, {
-    color: hsla,
-    onChange: (nextColor) => {
-      onChange({
-        ...nextColor,
-        a: hsla.a
+  const hsv = {
+    h: hsva.h,
+    s: hsva.s,
+    v: hsva.v
+  };
+  return /* @__PURE__ */ _jsx(HsvColorPicker, {
+    color: hsv,
+    onChange: (next) => {
+      handleChange({
+        ...next,
+        a: hsva.a
       });
     },
     ...pointerCaptureProps

package/build-module/color-picker/picker.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/picker.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { HslColorPicker, HslaColorPicker } from 'react-colorful';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\n// Pointer capture fortifies drag gestures so that they continue to work\n// while dragging outside the component over objects like iframes. If a\n// newer version of react-colorful begins to employ pointer capture this\n// will be redundant and should be removed.\nconst pointerCaptureProps = {\n  onPointerDown({\n    currentTarget,\n    pointerId\n  }) {\n    currentTarget.setPointerCapture(pointerId);\n  },\n  onPointerUp({\n    currentTarget,\n    pointerId\n  }) {\n    currentTarget.releasePointerCapture(pointerId);\n  }\n};\nexport const Picker = ({\n  hsla,\n  enableAlpha,\n  onChange\n}) => {\n  if (enableAlpha) {\n    return /*#__PURE__*/_jsx(HslaColorPicker, {\n      color: hsla,\n      onChange: onChange,\n      ...pointerCaptureProps\n    });\n  }\n  return /*#__PURE__*/_jsx(HslColorPicker, {\n    color: hsla,\n    onChange: nextColor => {\n      onChange({\n        ...nextColor,\n        a: hsla.a\n      });\n    },\n    ...pointerCaptureProps\n  });\n};"],
-  "mappings": ";AAGA,SAAS,gBAAgB,uBAAuB;AAKhD,SAAS,OAAO,YAAY;AAK5B,IAAM,sBAAsB;AAAA,EAC1B,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,EACF,GAAG;AACD,kBAAc,kBAAkB,SAAS;AAAA,EAC3C;AAAA,EACA,YAAY;AAAA,IACV;AAAA,IACA;AAAA,EACF,GAAG;AACD,kBAAc,sBAAsB,SAAS;AAAA,EAC/C;AACF;AACO,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,aAAa;AACf,WAAoB,qBAAK,iBAAiB;AAAA,MACxC,OAAO;AAAA,MACP;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAoB,qBAAK,gBAAgB;AAAA,IACvC,OAAO;AAAA,IACP,UAAU,eAAa;AACrB,eAAS;AAAA,QACP,GAAG;AAAA,QACH,GAAG,KAAK;AAAA,MACV,CAAC;AAAA,IACH;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { HsvColorPicker, HsvaColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction toHsva(hsla) {\n  return {\n    ...colord(hsla).toHsv(),\n    // HSL and HSV share the hue angle. Color conversion collapses achromatic\n    // hue to 0, but HSLA retains the user's latent hue.\n    h: hsla.h,\n    a: hsla.a\n  };\n}\nfunction isSameHsla(a, b) {\n  return a.h === b.h && a.s === b.s && a.l === b.l && a.a === b.a;\n}\n\n/**\n * Convert parent HSLA into HSVA for prop sync.\n *\n * At black, RGB round-trips collapse saturation to 0. Preserve the native\n * HSVA saturation coordinate unless the HSL saturation channel itself\n * changed (sibling hue/alpha edits must not snap the pointer).\n *\n * At white, only `v: 100, s: 0` is visually white — preserving a prior\n * chromatic saturation would leave the pointer at the top-right and make\n * the first keyboard step jump from white to a saturated color.\n */\nfunction toHsvaFromHsla(hsla, prevHsva, prevHsla) {\n  const converted = toHsva(hsla);\n\n  // White and chromatic colors use the converted value as-is.\n  if (hsla.l !== 0) {\n    return converted;\n  }\n  const saturationChanged = prevHsla !== null && prevHsla.s !== hsla.s;\n  return {\n    h: hsla.h,\n    s: saturationChanged ? hsla.s : prevHsva.s,\n    v: 0,\n    a: hsla.a\n  };\n}\n\n/**\n * Visual color surface.\n *\n * Uses HSVA (react-colorful's native model) and keeps that value in local\n * state so HSLA↔hex round-trips cannot move the pointer\n * Parent ColorPicker still speaks HSLA for\n * inputs and controlled value sync; conversion happens only at the boundary.\n *\n * Prop sync from parent HSLA is suppressed for:\n * - pointer/touch drags (interaction flag), and\n * - any picker-originated update including keyboard (HSLA origin token).\n *\n * Achromatic HSL sibling edits (hue/alpha while at black) preserve native\n * HSVA saturation unless saturation itself changed. White always syncs to\n * the converted `s: 0` visual coordinate.\n */\nexport const Picker = ({\n  hsla,\n  enableAlpha,\n  onChange,\n  onInteractionStart,\n  onInteractionEnd\n}) => {\n  const [hsva, setHsva] = useState(() => toHsva(hsla));\n  // Last HSLA emitted by this picker — skip echoing it back into HSVA.\n  const pickerOriginHslaRef = useRef(null);\n  // Previous parent HSLA — detect which channel changed on achromatic sync.\n  const prevHslaRef = useRef(hsla);\n  // Pointer/touch drag: never sync from HSLA mid-gesture (origin match alone\n  // can fail across rapid frames when parent gradient state re-renders).\n  const isPointerInteractingRef = useRef(false);\n  useEffect(() => {\n    if (isPointerInteractingRef.current) {\n      // Keep prevHsla in lockstep with parent updates during the gesture\n      // so a post-drag HSL sibling edit is not compared against pre-drag\n      // HSLA and mistaken for a saturation change.\n      prevHslaRef.current = hsla;\n      return;\n    }\n    if (pickerOriginHslaRef.current && isSameHsla(pickerOriginHslaRef.current, hsla)) {\n      prevHslaRef.current = hsla;\n      return;\n    }\n    pickerOriginHslaRef.current = null;\n    setHsva(prev => toHsvaFromHsla(hsla, prev, prevHslaRef.current));\n    prevHslaRef.current = hsla;\n  }, [hsla]);\n\n  // Inline handlers so refs are not passed into a helper during render\n  // (react-hooks/refs). Pointer capture also keeps drag working over iframes.\n  const pointerCaptureProps = {\n    onPointerDown({\n      currentTarget,\n      pointerId\n    }) {\n      isPointerInteractingRef.current = true;\n      onInteractionStart?.();\n      currentTarget.setPointerCapture(pointerId);\n    },\n    onPointerUp({\n      currentTarget,\n      pointerId\n    }) {\n      currentTarget.releasePointerCapture(pointerId);\n      isPointerInteractingRef.current = false;\n      onInteractionEnd?.();\n    },\n    onPointerCancel({\n      currentTarget,\n      pointerId\n    }) {\n      currentTarget.releasePointerCapture(pointerId);\n      isPointerInteractingRef.current = false;\n      onInteractionEnd?.();\n    }\n  };\n  const handleChange = next => {\n    setHsva(next);\n    const nextHsla = {\n      ...colord(next).toHsl(),\n      a: next.a\n    };\n    pickerOriginHslaRef.current = nextHsla;\n    onChange(nextHsla);\n  };\n  if (enableAlpha) {\n    return /*#__PURE__*/_jsx(HsvaColorPicker, {\n      color: hsva,\n      onChange: handleChange,\n      ...pointerCaptureProps\n    });\n  }\n\n  // HsvColorPicker's equality checks enumerate own keys — never pass `a`,\n  // or every parent re-render looks like an external color change and the\n  // pointer jitters while dragging.\n  const hsv = {\n    h: hsva.h,\n    s: hsva.s,\n    v: hsva.v\n  };\n  return /*#__PURE__*/_jsx(HsvColorPicker, {\n    color: hsv,\n    onChange: next => {\n      handleChange({\n        ...next,\n        a: hsva.a\n      });\n    },\n    ...pointerCaptureProps\n  });\n};"],
+  "mappings": ";AAIA,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,gBAAgB,uBAAuB;AAChD,SAAS,cAAc;AAKvB,SAAS,OAAO,YAAY;AAC5B,SAAS,OAAO,MAAM;AACpB,SAAO;AAAA,IACL,GAAG,OAAO,IAAI,EAAE,MAAM;AAAA;AAAA;AAAA,IAGtB,GAAG,KAAK;AAAA,IACR,GAAG,KAAK;AAAA,EACV;AACF;AACA,SAAS,WAAW,GAAG,GAAG;AACxB,SAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;AAChE;AAaA,SAAS,eAAe,MAAM,UAAU,UAAU;AAChD,QAAM,YAAY,OAAO,IAAI;AAG7B,MAAI,KAAK,MAAM,GAAG;AAChB,WAAO;AAAA,EACT;AACA,QAAM,oBAAoB,aAAa,QAAQ,SAAS,MAAM,KAAK;AACnE,SAAO;AAAA,IACL,GAAG,KAAK;AAAA,IACR,GAAG,oBAAoB,KAAK,IAAI,SAAS;AAAA,IACzC,GAAG;AAAA,IACH,GAAG,KAAK;AAAA,EACV;AACF;AAkBO,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,OAAO,IAAI,CAAC;AAEnD,QAAM,sBAAsB,OAAO,IAAI;AAEvC,QAAM,cAAc,OAAO,IAAI;AAG/B,QAAM,0BAA0B,OAAO,KAAK;AAC5C,YAAU,MAAM;AACd,QAAI,wBAAwB,SAAS;AAInC,kBAAY,UAAU;AACtB;AAAA,IACF;AACA,QAAI,oBAAoB,WAAW,WAAW,oBAAoB,SAAS,IAAI,GAAG;AAChF,kBAAY,UAAU;AACtB;AAAA,IACF;AACA,wBAAoB,UAAU;AAC9B,YAAQ,UAAQ,eAAe,MAAM,MAAM,YAAY,OAAO,CAAC;AAC/D,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,IAAI,CAAC;AAIT,QAAM,sBAAsB;AAAA,IAC1B,cAAc;AAAA,MACZ;AAAA,MACA;AAAA,IACF,GAAG;AACD,8BAAwB,UAAU;AAClC,2BAAqB;AACrB,oBAAc,kBAAkB,SAAS;AAAA,IAC3C;AAAA,IACA,YAAY;AAAA,MACV;AAAA,MACA;AAAA,IACF,GAAG;AACD,oBAAc,sBAAsB,SAAS;AAC7C,8BAAwB,UAAU;AAClC,yBAAmB;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACd;AAAA,MACA;AAAA,IACF,GAAG;AACD,oBAAc,sBAAsB,SAAS;AAC7C,8BAAwB,UAAU;AAClC,yBAAmB;AAAA,IACrB;AAAA,EACF;AACA,QAAM,eAAe,UAAQ;AAC3B,YAAQ,IAAI;AACZ,UAAM,WAAW;AAAA,MACf,GAAG,OAAO,IAAI,EAAE,MAAM;AAAA,MACtB,GAAG,KAAK;AAAA,IACV;AACA,wBAAoB,UAAU;AAC9B,aAAS,QAAQ;AAAA,EACnB;AACA,MAAI,aAAa;AACf,WAAoB,qBAAK,iBAAiB;AAAA,MACxC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AAKA,QAAM,MAAM;AAAA,IACV,GAAG,KAAK;AAAA,IACR,GAAG,KAAK;AAAA,IACR,GAAG,KAAK;AAAA,EACV;AACA,SAAoB,qBAAK,gBAAgB;AAAA,IACvC,OAAO;AAAA,IACP,UAAU,UAAQ;AAChB,mBAAa;AAAA,QACX,GAAG;AAAA,QACH,GAAG,KAAK;AAAA,MACV,CAAC;AAAA,IACH;AAAA,IACA,GAAG;AAAA,EACL,CAAC;AACH;",
   "names": []
 }

package/build-module/confirm-dialog/component.mjs

@@ -7,8 +7,91 @@ import { Flex } from "../flex/index.mjs";
 import Button from "../button/index.mjs";
 import { Text } from "../text/index.mjs";
 import { VStack } from "../v-stack/index.mjs";
-import * as styles from "./styles.mjs";
-import { useCx } from "../utils/hooks/use-cx.mjs";
+
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
+// packages/components/src/confirm-dialog/style.module.scss
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("af7a0f28df", ".f8c6ba0dd016e6c1__wrapper.f8c6ba0dd016e6c1__wrapper{z-index:1000001}");
+}
+var style_module_default = { "wrapper": "f8c6ba0dd016e6c1__wrapper" };
+
+// packages/components/src/confirm-dialog/component.tsx
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var UnconnectedConfirmDialog = (props, forwardedRef) => {
   const {
@@ -21,8 +104,7 @@ var UnconnectedConfirmDialog = (props, forwardedRef) => {
     isBusy,
     ...otherProps
   } = useContextSystem(props, "ConfirmDialog");
-  const cx = useCx();
-  const wrapperClassName = cx(styles.wrapper);
+  const wrapperClassName = style_module_default.wrapper;
   const cancelButtonRef = useRef(null);
   const confirmButtonRef = useRef(null);
   const [isOpen, setIsOpen] = useState();

package/build-module/confirm-dialog/component.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/confirm-dialog/component.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport * as styles from './styles';\nimport { useCx } from '../utils/hooks/use-cx';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst UnconnectedConfirmDialog = (props, forwardedRef) => {\n  const {\n    isOpen: isOpenProp,\n    onConfirm,\n    onCancel,\n    children,\n    confirmButtonText,\n    cancelButtonText,\n    isBusy,\n    ...otherProps\n  } = useContextSystem(props, 'ConfirmDialog');\n  const cx = useCx();\n  const wrapperClassName = cx(styles.wrapper);\n  const cancelButtonRef = useRef(null);\n  const confirmButtonRef = useRef(null);\n  const [isOpen, setIsOpen] = useState();\n  const [shouldSelfClose, setShouldSelfClose] = useState();\n  useEffect(() => {\n    // We only allow the dialog to close itself if `isOpenProp` is *not* set.\n    // If `isOpenProp` is set, then it (probably) means it's controlled by a\n    // parent component. In that case, `shouldSelfClose` might do more harm than\n    // good, so we disable it.\n    const isIsOpenSet = typeof isOpenProp !== 'undefined';\n    setIsOpen(isIsOpenSet ? isOpenProp : true);\n    setShouldSelfClose(!isIsOpenSet);\n  }, [isOpenProp]);\n  const handleEvent = useCallback(callback => event => {\n    callback?.(event);\n    if (shouldSelfClose) {\n      setIsOpen(false);\n    }\n  }, [shouldSelfClose, setIsOpen]);\n  const handleEnter = useCallback(event => {\n    // Avoid triggering the 'confirm' action when a button is focused,\n    // as this can cause a double submission.\n    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;\n    if (!isConfirmOrCancelButton && event.key === 'Enter') {\n      handleEvent(onConfirm)(event);\n    }\n  }, [handleEvent, onConfirm]);\n  const cancelLabel = cancelButtonText ?? __('Cancel');\n  const confirmLabel = confirmButtonText ?? __('OK');\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isOpen && /*#__PURE__*/_jsx(Modal, {\n      onRequestClose: handleEvent(onCancel),\n      onKeyDown: handleEnter,\n      closeButtonLabel: cancelLabel,\n      isDismissible: true,\n      ref: forwardedRef,\n      overlayClassName: wrapperClassName,\n      __experimentalHideHeader: true,\n      ...otherProps,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 8,\n        children: [/*#__PURE__*/_jsx(Text, {\n          children: children\n        }), /*#__PURE__*/_jsxs(Flex, {\n          direction: \"row\",\n          justify: \"flex-end\",\n          children: [/*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: cancelButtonRef,\n            variant: \"tertiary\",\n            onClick: handleEvent(onCancel),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            children: cancelLabel\n          }), /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: confirmButtonRef,\n            variant: \"primary\",\n            onClick: handleEvent(onConfirm),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            isBusy: isBusy,\n            children: confirmLabel\n          })]\n        })]\n      })\n    })\n  });\n};\n\n/**\n * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n *\n * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n *\n * UnControlled:\n *\n * Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * -   It will be automatically open (displayed) upon mounting;\n * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n *\n * Controlled mode:\n *  Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n *\n *```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');\nexport default ConfirmDialog;"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAKzD,OAAO,WAAW;AAClB,SAAS,kBAAkB,sBAAsB;AACjD,SAAS,YAAY;AACrB,OAAO,YAAY;AACnB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,YAAY,YAAY;AACxB,SAAS,aAAa;AACtB,SAAS,OAAO,MAAM,QAAQ,OAAO,YAAY,iBAAiB;AAClE,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,eAAe;AAC3C,QAAM,KAAK,MAAM;AACjB,QAAM,mBAAmB,GAAU,cAAO;AAC1C,QAAM,kBAAkB,OAAO,IAAI;AACnC,QAAM,mBAAmB,OAAO,IAAI;AACpC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS;AACvD,YAAU,MAAM;AAKd,UAAM,cAAc,OAAO,eAAe;AAC1C,cAAU,cAAc,aAAa,IAAI;AACzC,uBAAmB,CAAC,WAAW;AAAA,EACjC,GAAG,CAAC,UAAU,CAAC;AACf,QAAM,cAAc,YAAY,cAAY,WAAS;AACnD,eAAW,KAAK;AAChB,QAAI,iBAAiB;AACnB,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAC/B,QAAM,cAAc,YAAY,WAAS;AAGvC,UAAM,0BAA0B,MAAM,WAAW,gBAAgB,WAAW,MAAM,WAAW,iBAAiB;AAC9G,QAAI,CAAC,2BAA2B,MAAM,QAAQ,SAAS;AACrD,kBAAY,SAAS,EAAE,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,CAAC;AAC3B,QAAM,cAAc,oBAAoB,GAAG,QAAQ;AACnD,QAAM,eAAe,qBAAqB,GAAG,IAAI;AACjD,SAAoB,qBAAK,WAAW;AAAA,IAClC,UAAU,UAAuB,qBAAK,OAAO;AAAA,MAC3C,gBAAgB,YAAY,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe;AAAA,MACf,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,0BAA0B;AAAA,MAC1B,GAAG;AAAA,MACH,UAAuB,sBAAM,QAAQ;AAAA,QACnC,SAAS;AAAA,QACT,UAAU,CAAc,qBAAK,MAAM;AAAA,UACjC;AAAA,QACF,CAAC,GAAgB,sBAAM,MAAM;AAAA,UAC3B,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU,CAAc,qBAAK,QAAQ;AAAA,YACnC,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,QAAQ;AAAA,YAC7B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV,UAAU;AAAA,UACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,YAC5B,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,SAAS;AAAA,YAC9B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV;AAAA,YACA,UAAU;AAAA,UACZ,CAAC,CAAC;AAAA,QACJ,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAqEO,IAAM,gBAAgB,eAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
+  "sources": ["../../src/confirm-dialog/component.tsx", "../../../style-runtime/src/index.ts", "../../src/confirm-dialog/style.module.scss"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Modal from '../modal';\nimport { useContextSystem, contextConnect } from '../context';\nimport { Flex } from '../flex';\nimport Button from '../button';\nimport { Text } from '../text';\nimport { VStack } from '../v-stack';\nimport styles from './style.module.scss';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst UnconnectedConfirmDialog = (props, forwardedRef) => {\n  const {\n    isOpen: isOpenProp,\n    onConfirm,\n    onCancel,\n    children,\n    confirmButtonText,\n    cancelButtonText,\n    isBusy,\n    ...otherProps\n  } = useContextSystem(props, 'ConfirmDialog');\n  const wrapperClassName = styles.wrapper;\n  const cancelButtonRef = useRef(null);\n  const confirmButtonRef = useRef(null);\n  const [isOpen, setIsOpen] = useState();\n  const [shouldSelfClose, setShouldSelfClose] = useState();\n  useEffect(() => {\n    // We only allow the dialog to close itself if `isOpenProp` is *not* set.\n    // If `isOpenProp` is set, then it (probably) means it's controlled by a\n    // parent component. In that case, `shouldSelfClose` might do more harm than\n    // good, so we disable it.\n    const isIsOpenSet = typeof isOpenProp !== 'undefined';\n    setIsOpen(isIsOpenSet ? isOpenProp : true);\n    setShouldSelfClose(!isIsOpenSet);\n  }, [isOpenProp]);\n  const handleEvent = useCallback(callback => event => {\n    callback?.(event);\n    if (shouldSelfClose) {\n      setIsOpen(false);\n    }\n  }, [shouldSelfClose, setIsOpen]);\n  const handleEnter = useCallback(event => {\n    // Avoid triggering the 'confirm' action when a button is focused,\n    // as this can cause a double submission.\n    const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current;\n    if (!isConfirmOrCancelButton && event.key === 'Enter') {\n      handleEvent(onConfirm)(event);\n    }\n  }, [handleEvent, onConfirm]);\n  const cancelLabel = cancelButtonText ?? __('Cancel');\n  const confirmLabel = confirmButtonText ?? __('OK');\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: isOpen && /*#__PURE__*/_jsx(Modal, {\n      onRequestClose: handleEvent(onCancel),\n      onKeyDown: handleEnter,\n      closeButtonLabel: cancelLabel,\n      isDismissible: true,\n      ref: forwardedRef,\n      overlayClassName: wrapperClassName,\n      __experimentalHideHeader: true,\n      ...otherProps,\n      children: /*#__PURE__*/_jsxs(VStack, {\n        spacing: 8,\n        children: [/*#__PURE__*/_jsx(Text, {\n          children: children\n        }), /*#__PURE__*/_jsxs(Flex, {\n          direction: \"row\",\n          justify: \"flex-end\",\n          children: [/*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: cancelButtonRef,\n            variant: \"tertiary\",\n            onClick: handleEvent(onCancel),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            children: cancelLabel\n          }), /*#__PURE__*/_jsx(Button, {\n            __next40pxDefaultSize: true,\n            ref: confirmButtonRef,\n            variant: \"primary\",\n            onClick: handleEvent(onConfirm),\n            accessibleWhenDisabled: true,\n            disabled: isBusy,\n            isBusy: isBusy,\n            children: confirmLabel\n          })]\n        })]\n      })\n    })\n  });\n};\n\n/**\n * `ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md)\n * and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.\n * The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key.\n * It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by\n * clicking outside the dialog focus (i.e, the overlay).\n *\n * `ConfirmDialog` has two main implicit modes: controlled and uncontrolled.\n *\n * UnControlled:\n *\n * Allows the component to be used standalone, just by declaring it as part of another React's component render method:\n * -   It will be automatically open (displayed) upon mounting;\n * -   It will be automatically closed when clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay);\n * -   `onCancel` is not mandatory but can be passed. Even if passed, the dialog will still be able to close itself.\n *\n * Activating this mode is as simple as omitting the `isOpen` prop. The only mandatory prop, in this case, is the `onConfirm` callback. The message is passed as the `children`. You can pass any JSX you'd like, which allows to further format the message or include sub-component if you'd like:\n *\n * ```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n *\n * function Example() {\n * \treturn (\n * \t\t<ConfirmDialog onConfirm={ () => console.debug( ' Confirmed! ' ) }>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n *\n *\n * Controlled mode:\n *  Let the parent component control when the dialog is open/closed. It's activated when a\n * boolean value is passed to `isOpen`:\n * -   It will not be automatically closed. You need to let it know when to open/close by updating the value of the `isOpen` prop;\n * -   Both `onConfirm` and the `onCancel` callbacks are mandatory props in this mode;\n * -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.\n *\n *```jsx\n * import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * function Example() {\n * \tconst [ isOpen, setIsOpen ] = useState( true );\n *\n * \tconst handleConfirm = () => {\n * \t\tconsole.debug( 'Confirmed!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \tconst handleCancel = () => {\n * \t\tconsole.debug( 'Cancelled!' );\n * \t\tsetIsOpen( false );\n * \t};\n *\n * \treturn (\n * \t\t<ConfirmDialog\n * \t\t\tisOpen={ isOpen }\n * \t\t\tonConfirm={ handleConfirm }\n * \t\t\tonCancel={ handleCancel }\n * \t\t>\n * \t\t\tAre you sure? <strong>This action cannot be undone!</strong>\n * \t\t</ConfirmDialog>\n * \t);\n * }\n * ```\n */\nexport const ConfirmDialog = contextConnect(UnconnectedConfirmDialog, 'ConfirmDialog');\nexport default ConfirmDialog;", "const STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n  const globalScope = globalThis;\n  if (globalScope.__wpStyleRuntime) {\n    return globalScope.__wpStyleRuntime;\n  }\n  globalScope.__wpStyleRuntime = {\n    documents: new Map(),\n    styles: new Map(),\n    injectedStyles: new WeakMap()\n  };\n  if (typeof document !== 'undefined') {\n    registerDocument(document);\n  }\n  return globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(targetDocument, hash) {\n  if (!targetDocument.head) {\n    return false;\n  }\n  for (const style of targetDocument.head.querySelectorAll(`style[${STYLE_HASH_ATTRIBUTE}]`)) {\n    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle(targetDocument, hash, css) {\n  if (!targetDocument.head) {\n    return;\n  }\n  const runtime = getRuntime();\n  let injectedStyles = runtime.injectedStyles.get(targetDocument);\n  if (!injectedStyles) {\n    injectedStyles = new Set();\n    runtime.injectedStyles.set(targetDocument, injectedStyles);\n  }\n  if (injectedStyles.has(hash)) {\n    return;\n  }\n\n  // Older generated CSS module output can still inject matching style tags\n  // after this document's cache is created, so keep the DOM as the fallback\n  // source of truth on cache misses.\n  if (documentContainsStyleHash(targetDocument, hash)) {\n    injectedStyles.add(hash);\n    return;\n  }\n  const style = targetDocument.createElement('style');\n  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);\n  style.appendChild(targetDocument.createTextNode(css));\n  targetDocument.head.appendChild(style);\n  injectedStyles.add(hash);\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument(targetDocument) {\n  const runtime = getRuntime();\n  runtime.documents.set(targetDocument, (runtime.documents.get(targetDocument) ?? 0) + 1);\n  for (const [hash, css] of runtime.styles) {\n    injectStyle(targetDocument, hash, css);\n  }\n  return () => {\n    const count = runtime.documents.get(targetDocument);\n    if (count === undefined) {\n      return;\n    }\n    if (count <= 1) {\n      runtime.documents.delete(targetDocument);\n      return;\n    }\n    runtime.documents.set(targetDocument, count - 1);\n  };\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle(hash, css) {\n  const runtime = getRuntime();\n  runtime.styles.set(hash, css);\n  for (const targetDocument of runtime.documents.keys()) {\n    injectStyle(targetDocument, hash, css);\n  }\n}", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"af7a0f28df\", \".f8c6ba0dd016e6c1__wrapper.f8c6ba0dd016e6c1__wrapper{z-index:1000001}\");\n}\nexport default {\"wrapper\":\"f8c6ba0dd016e6c1__wrapper\"};\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAKzD,OAAO,WAAW;AAClB,SAAS,kBAAkB,sBAAsB;AACjD,SAAS,YAAY;AACrB,OAAO,YAAY;AACnB,SAAS,YAAY;AACrB,SAAS,cAAc;;;ACdvB,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACpB,QAAM,cAAc;AACpB,MAAI,YAAY,kBAAkB;AAChC,WAAO,YAAY;AAAA,EACrB;AACA,cAAY,mBAAmB;AAAA,IAC7B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC9B;AACA,MAAI,OAAO,aAAa,aAAa;AACnC,qBAAiB,QAAQ;AAAA,EAC3B;AACA,SAAO,YAAY;AACrB;AAUA,SAAS,0BAA0B,gBAAgB,MAAM;AACvD,MAAI,CAAC,eAAe,MAAM;AACxB,WAAO;AAAA,EACT;AACA,aAAW,SAAS,eAAe,KAAK,iBAAiB,SAAS,oBAAoB,GAAG,GAAG;AAC1F,QAAI,MAAM,aAAa,oBAAoB,MAAM,MAAM;AACrD,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAUA,SAAS,YAAY,gBAAgB,MAAM,KAAK;AAC9C,MAAI,CAAC,eAAe,MAAM;AACxB;AAAA,EACF;AACA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAI,cAAc;AAC9D,MAAI,CAAC,gBAAgB;AACnB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAI,gBAAgB,cAAc;AAAA,EAC3D;AACA,MAAI,eAAe,IAAI,IAAI,GAAG;AAC5B;AAAA,EACF;AAKA,MAAI,0BAA0B,gBAAgB,IAAI,GAAG;AACnD,mBAAe,IAAI,IAAI;AACvB;AAAA,EACF;AACA,QAAM,QAAQ,eAAe,cAAc,OAAO;AAClD,QAAM,aAAa,sBAAsB,IAAI;AAC7C,QAAM,YAAY,eAAe,eAAe,GAAG,CAAC;AACpD,iBAAe,KAAK,YAAY,KAAK;AACrC,iBAAe,IAAI,IAAI;AACzB;AAaO,SAAS,iBAAiB,gBAAgB;AAC/C,QAAM,UAAU,WAAW;AAC3B,UAAQ,UAAU,IAAI,iBAAiB,QAAQ,UAAU,IAAI,cAAc,KAAK,KAAK,CAAC;AACtF,aAAW,CAAC,MAAM,GAAG,KAAK,QAAQ,QAAQ;AACxC,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACA,SAAO,MAAM;AACX,UAAM,QAAQ,QAAQ,UAAU,IAAI,cAAc;AAClD,QAAI,UAAU,QAAW;AACvB;AAAA,IACF;AACA,QAAI,SAAS,GAAG;AACd,cAAQ,UAAU,OAAO,cAAc;AACvC;AAAA,IACF;AACA,YAAQ,UAAU,IAAI,gBAAgB,QAAQ,CAAC;AAAA,EACjD;AACF;AAaO,SAAS,cAAc,MAAM,KAAK;AACvC,QAAM,UAAU,WAAW;AAC3B,UAAQ,OAAO,IAAI,MAAM,GAAG;AAC5B,aAAW,kBAAkB,QAAQ,UAAU,KAAK,GAAG;AACrD,gBAAY,gBAAgB,MAAM,GAAG;AAAA,EACvC;AACF;;;AChIA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,uEAAuE;AACpG;AACA,IAAO,uBAAQ,EAAC,WAAU,4BAA2B;;;AFYrD,SAAS,OAAO,MAAM,QAAQ,OAAO,YAAY,iBAAiB;AAClE,IAAM,2BAA2B,CAAC,OAAO,iBAAiB;AACxD,QAAM;AAAA,IACJ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,OAAO,eAAe;AAC3C,QAAM,mBAAmB,qBAAO;AAChC,QAAM,kBAAkB,OAAO,IAAI;AACnC,QAAM,mBAAmB,OAAO,IAAI;AACpC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS;AACvD,YAAU,MAAM;AAKd,UAAM,cAAc,OAAO,eAAe;AAC1C,cAAU,cAAc,aAAa,IAAI;AACzC,uBAAmB,CAAC,WAAW;AAAA,EACjC,GAAG,CAAC,UAAU,CAAC;AACf,QAAM,cAAc,YAAY,cAAY,WAAS;AACnD,eAAW,KAAK;AAChB,QAAI,iBAAiB;AACnB,gBAAU,KAAK;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,iBAAiB,SAAS,CAAC;AAC/B,QAAM,cAAc,YAAY,WAAS;AAGvC,UAAM,0BAA0B,MAAM,WAAW,gBAAgB,WAAW,MAAM,WAAW,iBAAiB;AAC9G,QAAI,CAAC,2BAA2B,MAAM,QAAQ,SAAS;AACrD,kBAAY,SAAS,EAAE,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,aAAa,SAAS,CAAC;AAC3B,QAAM,cAAc,oBAAoB,GAAG,QAAQ;AACnD,QAAM,eAAe,qBAAqB,GAAG,IAAI;AACjD,SAAoB,qBAAK,WAAW;AAAA,IAClC,UAAU,UAAuB,qBAAK,OAAO;AAAA,MAC3C,gBAAgB,YAAY,QAAQ;AAAA,MACpC,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe;AAAA,MACf,KAAK;AAAA,MACL,kBAAkB;AAAA,MAClB,0BAA0B;AAAA,MAC1B,GAAG;AAAA,MACH,UAAuB,sBAAM,QAAQ;AAAA,QACnC,SAAS;AAAA,QACT,UAAU,CAAc,qBAAK,MAAM;AAAA,UACjC;AAAA,QACF,CAAC,GAAgB,sBAAM,MAAM;AAAA,UAC3B,WAAW;AAAA,UACX,SAAS;AAAA,UACT,UAAU,CAAc,qBAAK,QAAQ;AAAA,YACnC,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,QAAQ;AAAA,YAC7B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV,UAAU;AAAA,UACZ,CAAC,GAAgB,qBAAK,QAAQ;AAAA,YAC5B,uBAAuB;AAAA,YACvB,KAAK;AAAA,YACL,SAAS;AAAA,YACT,SAAS,YAAY,SAAS;AAAA,YAC9B,wBAAwB;AAAA,YACxB,UAAU;AAAA,YACV;AAAA,YACA,UAAU;AAAA,UACZ,CAAC,CAAC;AAAA,QACJ,CAAC,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH,CAAC;AACH;AAqEO,IAAM,gBAAgB,eAAe,0BAA0B,eAAe;AACrF,IAAO,oBAAQ;",
   "names": []
 }

package/build-module/content-editable-control/docs-manifest.json

@@ -0,0 +1,5 @@
+{
+	"$schema": "../../schemas/docs-manifest.json",
+	"displayName": "ContentEditableControl",
+	"filePath": "./index.tsx"
+}