@wordpress/components 32.2.2-next.v.202602200903.0 → 32.3.1-next.v.202602241322.0

package/CHANGELOG.md

@@ -2,11 +2,21 @@
 
 ## Unreleased
 
-## 32.2.1-next.0 (2026-02-20)
+## 32.3.0-next.0 (2026-02-24)
 
 ### Bug Fixes
 
+-   `ColorPicker`: Preserve hue and saturation when the selected color becomes achromatic ([#75493](https://github.com/WordPress/gutenberg/pull/75493)).
 -   `SnackbarList`: Fix scaling distortion when a snackbar's content is updated in place via a shared notice ID ([#75709](https://github.com/WordPress/gutenberg/pull/75709)).
+-   `ToggleGroupControl`: Fix hover styles on disabled items ([#75737](https://github.com/WordPress/gutenberg/pull/75737)).
+
+### Enhancements
+
+-   `ToggleGroupControl`: Make unselected item color consistent across all variants ([#75737](https://github.com/WordPress/gutenberg/pull/75737)).
+
+### Internal
+
+-   `NumberControl`: Improved code and types for state reducer ([#75822](https://github.com/WordPress/gutenberg/pull/75822)).
 
 ## 32.2.0 (2026-02-18)
 

package/build/color-picker/color-input.cjs

@@ -30,27 +30,30 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var ColorInput = ({
   colorType,
   color,
+  hsla,
   onChange,
+  onHSLChange,
   enableAlpha
 }) => {
-  const props = {
-    color,
-    onChange,
-    enableAlpha
-  };
   switch (colorType) {
     case "hsl":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_hsl_input.HslInput, {
-        ...props
+        hsla,
+        onChange: onHSLChange,
+        enableAlpha
       });
     case "rgb":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_rgb_input.RgbInput, {
-        ...props
+        color,
+        onChange,
+        enableAlpha
       });
     default:
     case "hex":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_hex_input.HexInput, {
-        ...props
+        color,
+        onChange,
+        enableAlpha
       });
   }
 };

package/build/color-picker/color-input.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/color-input.tsx"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorInput = ({\n  colorType,\n  color,\n  onChange,\n  enableAlpha\n}) => {\n  const props = {\n    color,\n    onChange,\n    enableAlpha\n  };\n  switch (colorType) {\n    case 'hsl':\n      return /*#__PURE__*/_jsx(HslInput, {\n        ...props\n      });\n    case 'rgb':\n      return /*#__PURE__*/_jsx(RgbInput, {\n        ...props\n      });\n    default:\n    case 'hex':\n      return /*#__PURE__*/_jsx(HexInput, {\n        ...props\n      });\n  }\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAyB;AACzB,uBAAyB;AACzB,uBAAyB;AACzB,yBAA4B;AACrB,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC,GAAG;AAAA,MACL,CAAC;AAAA,IACH,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC,GAAG;AAAA,MACL,CAAC;AAAA,IACH;AAAA,IACA,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC,GAAG;AAAA,MACL,CAAC;AAAA,EACL;AACF;",
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { RgbInput } from './rgb-input';\nimport { HslInput } from './hsl-input';\nimport { HexInput } from './hex-input';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const ColorInput = ({\n  colorType,\n  color,\n  hsla,\n  onChange,\n  onHSLChange,\n  enableAlpha\n}) => {\n  switch (colorType) {\n    case 'hsl':\n      return /*#__PURE__*/_jsx(HslInput, {\n        hsla: hsla,\n        onChange: onHSLChange,\n        enableAlpha: enableAlpha\n      });\n    case 'rgb':\n      return /*#__PURE__*/_jsx(RgbInput, {\n        color: color,\n        onChange: onChange,\n        enableAlpha: enableAlpha\n      });\n    default:\n    case 'hex':\n      return /*#__PURE__*/_jsx(HexInput, {\n        color: color,\n        onChange: onChange,\n        enableAlpha: enableAlpha\n      });\n  }\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAyB;AACzB,uBAAyB;AACzB,uBAAyB;AACzB,yBAA4B;AACrB,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,UAAQ,WAAW;AAAA,IACjB,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC;AAAA,QACA,UAAU;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,KAAK;AACH,aAAoB,uCAAAA,KAAK,2BAAU;AAAA,QACjC;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,EACL;AACF;",
   "names": ["_jsx"]
 }

package/build/color-picker/component.cjs

@@ -47,6 +47,22 @@ var import_picker = require("./picker.cjs");
 var import_hooks = require("../utils/hooks/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 (0, import_colord.extend)([import_names.default]);
+function mergeHSLA(nextHSLA, prevHSLA) {
+  if (nextHSLA.s === 0) {
+    if (nextHSLA.l === 0 || nextHSLA.l === 100) {
+      return {
+        ...nextHSLA,
+        h: prevHSLA.h,
+        s: prevHSLA.s
+      };
+    }
+    return {
+      ...nextHSLA,
+      h: prevHSLA.h
+    };
+  }
+  return nextHSLA;
+}
 var options = [{
   label: "RGB",
   value: "rgb"
@@ -75,8 +91,34 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     return (0, import_colord.colord)(color || "");
   }, [color]);
   const debouncedSetColor = (0, import_compose.useDebounce)(setColor);
+  const [internalHSLA, setInternalHSLA] = (0, import_element.useState)(() => ({
+    ...safeColordColor.toHsl()
+  }));
+  const lastProducedHexRef = (0, import_element.useRef)(safeColordColor.toHex());
+  (0, import_element.useEffect)(() => {
+    const incomingHex = safeColordColor.toHex();
+    if (incomingHex === lastProducedHexRef.current) {
+      return;
+    }
+    lastProducedHexRef.current = incomingHex;
+    const externalHSLA = safeColordColor.toHsl();
+    setInternalHSLA((prev) => mergeHSLA(externalHSLA, prev));
+  }, [safeColordColor]);
+  const handleHSLAChange = (0, import_element.useCallback)((nextHSLA) => {
+    setInternalHSLA(nextHSLA);
+    const previousHex = lastProducedHexRef.current;
+    const nextHex = (0, import_colord.colord)(nextHSLA).toHex();
+    if (nextHex !== previousHex) {
+      lastProducedHexRef.current = nextHex;
+      setColor(nextHex);
+    }
+  }, [setColor]);
   const handleChange = (0, import_element.useCallback)((nextValue) => {
-    debouncedSetColor(nextValue.toHex());
+    const nextHSLA = nextValue.toHsl();
+    setInternalHSLA((prev) => mergeHSLA(nextHSLA, prev));
+    const nextHex = nextValue.toHex();
+    lastProducedHexRef.current = nextHex;
+    debouncedSetColor(nextHex);
   }, [debouncedSetColor]);
   const [colorType, setColorType] = (0, import_element.useState)(copyFormat || "hex");
   const maybeHandlePaste = (0, import_element.useCallback)((event) => {
@@ -107,8 +149,8 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
     ...divProps,
     onPasteCapture: maybeHandlePaste,
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_picker.Picker, {
-      onChange: handleChange,
-      color: safeColordColor,
+      onChange: handleHSLAChange,
+      hsla: internalHSLA,
       enableAlpha
     }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.AuxiliaryColorArtefactWrapper, {
       children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.AuxiliaryColorArtefactHStackHeader, {
@@ -131,7 +173,9 @@ var UnconnectedColorPicker = (props, forwardedRef) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_input.ColorInput, {
           colorType,
           color: safeColordColor,
+          hsla: internalHSLA,
           onChange: handleChange,
+          onHSLChange: handleHSLAChange,
           enableAlpha
         })
       })]

package/build/color-picker/component.cjs.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, 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]);\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  const handleChange = useCallback(nextValue => {\n    debouncedSetColor(nextValue.toHex());\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: handleChange,\n      color: safeColordColor,\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          onChange: handleChange,\n          enableAlpha: enableAlpha\n        })\n      })]\n    })]\n  });\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  // 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 \u2014 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 \u2014 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 \u2014 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};\nexport const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker');\nexport default ColorPicker;"],
+  "mappings": "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",
   "names": ["namesPlugin", "_jsxs", "_jsx"]
 }

package/build/color-picker/hsl-input.cjs

@@ -23,39 +23,18 @@ __export(hsl_input_exports, {
   HslInput: () => HslInput
 });
 module.exports = __toCommonJS(hsl_input_exports);
-var import_colord = require("colord");
-var import_element = require("@wordpress/element");
 var import_input_with_slider = require("./input-with-slider.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var HslInput = ({
-  color,
+  hsla,
   onChange,
   enableAlpha
 }) => {
-  const colorPropHSLA = (0, import_element.useMemo)(() => color.toHsl(), [color]);
-  const [internalHSLA, setInternalHSLA] = (0, import_element.useState)({
-    ...colorPropHSLA
-  });
-  const isInternalColorSameAsReceivedColor = color.isEqual((0, import_colord.colord)(internalHSLA));
-  (0, import_element.useEffect)(() => {
-    if (!isInternalColorSameAsReceivedColor) {
-      setInternalHSLA(colorPropHSLA);
-    }
-  }, [colorPropHSLA, isInternalColorSameAsReceivedColor]);
-  const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;
   const updateHSLAValue = (partialNewValue) => {
-    const nextOnChangeValue = (0, import_colord.colord)({
-      ...colorValue,
+    onChange({
+      ...hsla,
       ...partialNewValue
     });
-    if (!color.isEqual(nextOnChangeValue)) {
-      onChange(nextOnChangeValue);
-    } else {
-      setInternalHSLA((prevHSLA) => ({
-        ...prevHSLA,
-        ...partialNewValue
-      }));
-    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
     children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_with_slider.InputWithSlider, {
@@ -63,7 +42,7 @@ var HslInput = ({
       max: 359,
       label: "Hue",
       abbreviation: "H",
-      value: colorValue.h,
+      value: hsla.h,
       onChange: (nextH) => {
         updateHSLAValue({
           h: nextH
@@ -74,7 +53,7 @@ var HslInput = ({
       max: 100,
       label: "Saturation",
       abbreviation: "S",
-      value: colorValue.s,
+      value: hsla.s,
       onChange: (nextS) => {
         updateHSLAValue({
           s: nextS
@@ -85,7 +64,7 @@ var HslInput = ({
       max: 100,
       label: "Lightness",
       abbreviation: "L",
-      value: colorValue.l,
+      value: hsla.l,
       onChange: (nextL) => {
         updateHSLAValue({
           l: nextL
@@ -96,7 +75,7 @@ var HslInput = ({
       max: 100,
       label: "Alpha",
       abbreviation: "A",
-      value: Math.trunc(100 * colorValue.a),
+      value: Math.trunc(100 * hsla.a),
       onChange: (nextA) => {
         updateHSLAValue({
           a: nextA / 100

package/build/color-picker/hsl-input.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/hsl-input.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const HslInput = ({\n  color,\n  onChange,\n  enableAlpha\n}) => {\n  const colorPropHSLA = useMemo(() => color.toHsl(), [color]);\n  const [internalHSLA, setInternalHSLA] = useState({\n    ...colorPropHSLA\n  });\n  const isInternalColorSameAsReceivedColor = color.isEqual(colord(internalHSLA));\n  useEffect(() => {\n    if (!isInternalColorSameAsReceivedColor) {\n      // Keep internal HSLA color up to date with the received color prop\n      setInternalHSLA(colorPropHSLA);\n    }\n  }, [colorPropHSLA, isInternalColorSameAsReceivedColor]);\n\n  // If the internal color is equal to the received color prop, we can use the\n  // HSLA values from the local state which, compared to the received color prop,\n  // retain more details about the actual H and S values that the user selected,\n  // and thus allow for better UX when interacting with the H and S sliders.\n  const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;\n  const updateHSLAValue = partialNewValue => {\n    const nextOnChangeValue = colord({\n      ...colorValue,\n      ...partialNewValue\n    });\n\n    // Fire `onChange` only if the resulting color is different from the\n    // current one.\n    // Otherwise, update the internal HSLA color to cause a re-render.\n    if (!color.isEqual(nextOnChangeValue)) {\n      onChange(nextOnChangeValue);\n    } else {\n      setInternalHSLA(prevHSLA => ({\n        ...prevHSLA,\n        ...partialNewValue\n      }));\n    }\n  };\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 359,\n      label: \"Hue\",\n      abbreviation: \"H\",\n      value: colorValue.h,\n      onChange: nextH => {\n        updateHSLAValue({\n          h: nextH\n        });\n      }\n    }), /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Saturation\",\n      abbreviation: \"S\",\n      value: colorValue.s,\n      onChange: nextS => {\n        updateHSLAValue({\n          s: nextS\n        });\n      }\n    }), /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Lightness\",\n      abbreviation: \"L\",\n      value: colorValue.l,\n      onChange: nextL => {\n        updateHSLAValue({\n          l: nextL\n        });\n      }\n    }), enableAlpha && /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Alpha\",\n      abbreviation: \"A\",\n      value: Math.trunc(100 * colorValue.a),\n      onChange: nextA => {\n        updateHSLAValue({\n          a: nextA / 100\n        });\n      }\n    })]\n  });\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAuB;AAKvB,qBAA6C;AAK7C,+BAAgC;AAChC,yBAAkE;AAC3D,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,oBAAgB,wBAAQ,MAAM,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC;AAC1D,QAAM,CAAC,cAAc,eAAe,QAAI,yBAAS;AAAA,IAC/C,GAAG;AAAA,EACL,CAAC;AACD,QAAM,qCAAqC,MAAM,YAAQ,sBAAO,YAAY,CAAC;AAC7E,gCAAU,MAAM;AACd,QAAI,CAAC,oCAAoC;AAEvC,sBAAgB,aAAa;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,eAAe,kCAAkC,CAAC;AAMtD,QAAM,aAAa,qCAAqC,eAAe;AACvE,QAAM,kBAAkB,qBAAmB;AACzC,UAAM,wBAAoB,sBAAO;AAAA,MAC/B,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AAKD,QAAI,CAAC,MAAM,QAAQ,iBAAiB,GAAG;AACrC,eAAS,iBAAiB;AAAA,IAC5B,OAAO;AACL,sBAAgB,eAAa;AAAA,QAC3B,GAAG;AAAA,QACH,GAAG;AAAA,MACL,EAAE;AAAA,IACJ;AAAA,EACF;AACA,SAAoB,uCAAAA,MAAM,mBAAAC,UAAW;AAAA,IACnC,UAAU,CAAc,uCAAAC,KAAK,0CAAiB;AAAA,MAC5C,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,WAAW;AAAA,MAClB,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAA,KAAK,0CAAiB;AAAA,MACrC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,WAAW;AAAA,MAClB,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAA,KAAK,0CAAiB;AAAA,MACrC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,WAAW;AAAA,MAClB,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAG,eAA4B,uCAAAA,KAAK,0CAAiB;AAAA,MACpD,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,KAAK,MAAM,MAAM,WAAW,CAAC;AAAA,MACpC,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG,QAAQ;AAAA,QACb,CAAC;AAAA,MACH;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
+  "sourcesContent": ["/**\n * External dependencies\n */\n\n/**\n * Internal dependencies\n */\nimport { InputWithSlider } from './input-with-slider';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nexport const HslInput = ({\n  hsla,\n  onChange,\n  enableAlpha\n}) => {\n  const updateHSLAValue = partialNewValue => {\n    onChange({\n      ...hsla,\n      ...partialNewValue\n    });\n  };\n  return /*#__PURE__*/_jsxs(_Fragment, {\n    children: [/*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 359,\n      label: \"Hue\",\n      abbreviation: \"H\",\n      value: hsla.h,\n      onChange: nextH => {\n        updateHSLAValue({\n          h: nextH\n        });\n      }\n    }), /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Saturation\",\n      abbreviation: \"S\",\n      value: hsla.s,\n      onChange: nextS => {\n        updateHSLAValue({\n          s: nextS\n        });\n      }\n    }), /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Lightness\",\n      abbreviation: \"L\",\n      value: hsla.l,\n      onChange: nextL => {\n        updateHSLAValue({\n          l: nextL\n        });\n      }\n    }), enableAlpha && /*#__PURE__*/_jsx(InputWithSlider, {\n      min: 0,\n      max: 100,\n      label: \"Alpha\",\n      abbreviation: \"A\",\n      value: Math.trunc(100 * hsla.a),\n      onChange: nextA => {\n        updateHSLAValue({\n          a: nextA / 100\n        });\n      }\n    })]\n  });\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,+BAAgC;AAChC,yBAAkE;AAC3D,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,kBAAkB,qBAAmB;AACzC,aAAS;AAAA,MACP,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAA,MAAM,mBAAAC,UAAW;AAAA,IACnC,UAAU,CAAc,uCAAAC,KAAK,0CAAiB;AAAA,MAC5C,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,KAAK;AAAA,MACZ,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAA,KAAK,0CAAiB;AAAA,MACrC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,KAAK;AAAA,MACZ,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAgB,uCAAAA,KAAK,0CAAiB;AAAA,MACrC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,KAAK;AAAA,MACZ,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,IACF,CAAC,GAAG,eAA4B,uCAAAA,KAAK,0CAAiB;AAAA,MACpD,KAAK;AAAA,MACL,KAAK;AAAA,MACL,OAAO;AAAA,MACP,cAAc;AAAA,MACd,OAAO,KAAK,MAAM,MAAM,KAAK,CAAC;AAAA,MAC9B,UAAU,WAAS;AACjB,wBAAgB;AAAA,UACd,GAAG,QAAQ;AAAA,QACb,CAAC;AAAA,MACH;AAAA,IACF,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
   "names": ["_jsxs", "_Fragment", "_jsx"]
 }

package/build/color-picker/picker.cjs

@@ -24,33 +24,42 @@ __export(picker_exports, {
 });
 module.exports = __toCommonJS(picker_exports);
 var import_react_colorful = require("react-colorful");
-var import_colord = require("colord");
-var import_element = require("@wordpress/element");
 var import_jsx_runtime = require("react/jsx-runtime");
+var pointerCaptureProps = {
+  onPointerDown({
+    currentTarget,
+    pointerId
+  }) {
+    currentTarget.setPointerCapture(pointerId);
+  },
+  onPointerUp({
+    currentTarget,
+    pointerId
+  }) {
+    currentTarget.releasePointerCapture(pointerId);
+  }
+};
 var Picker = ({
-  color,
+  hsla,
   enableAlpha,
   onChange
 }) => {
-  const Component = enableAlpha ? import_react_colorful.RgbaStringColorPicker : import_react_colorful.RgbStringColorPicker;
-  const rgbColor = (0, import_element.useMemo)(() => color.toRgbString(), [color]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
-    color: rgbColor,
+  if (enableAlpha) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_colorful.HslaColorPicker, {
+      color: hsla,
+      onChange,
+      ...pointerCaptureProps
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_colorful.HslColorPicker, {
+    color: hsla,
     onChange: (nextColor) => {
-      onChange((0, import_colord.colord)(nextColor));
-    },
-    onPointerDown: ({
-      currentTarget,
-      pointerId
-    }) => {
-      currentTarget.setPointerCapture(pointerId);
+      onChange({
+        ...nextColor,
+        a: hsla.a
+      });
     },
-    onPointerUp: ({
-      currentTarget,
-      pointerId
-    }) => {
-      currentTarget.releasePointerCapture(pointerId);
-    }
+    ...pointerCaptureProps
   });
 };
 // Annotate the CommonJS export names for ESM import in node:

package/build/color-picker/picker.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/color-picker/picker.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';\nimport { colord } from 'colord';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nexport const Picker = ({\n  color,\n  enableAlpha,\n  onChange\n}) => {\n  const Component = enableAlpha ? RgbaStringColorPicker : RgbStringColorPicker;\n  const rgbColor = useMemo(() => color.toRgbString(), [color]);\n  return /*#__PURE__*/_jsx(Component, {\n    color: rgbColor,\n    onChange: nextColor => {\n      onChange(colord(nextColor));\n    }\n    // Pointer capture fortifies drag gestures so that they continue to\n    // work while dragging outside the component over objects like\n    // iframes. If a newer version of react-colorful begins to employ\n    // pointer capture this will be redundant and should be removed.\n    ,\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  });\n};"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAA4D;AAC5D,oBAAuB;AAKvB,qBAAwB;AAIxB,yBAA4B;AACrB,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAY,cAAc,8CAAwB;AACxD,QAAM,eAAW,wBAAQ,MAAM,MAAM,YAAY,GAAG,CAAC,KAAK,CAAC;AAC3D,SAAoB,uCAAAA,KAAK,WAAW;AAAA,IAClC,OAAO;AAAA,IACP,UAAU,eAAa;AACrB,mBAAS,sBAAO,SAAS,CAAC;AAAA,IAC5B;AAAA,IAMA,eAAe,CAAC;AAAA,MACd;AAAA,MACA;AAAA,IACF,MAAM;AACJ,oBAAc,kBAAkB,SAAS;AAAA,IAC3C;AAAA,IACA,aAAa,CAAC;AAAA,MACZ;AAAA,MACA;AAAA,IACF,MAAM;AACJ,oBAAc,sBAAsB,SAAS;AAAA,IAC/C;AAAA,EACF,CAAC;AACH;",
+  "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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAAgD;AAKhD,yBAA4B;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,uCAAAA,KAAK,uCAAiB;AAAA,MACxC,OAAO;AAAA,MACP;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAoB,uCAAAA,KAAK,sCAAgB;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;",
   "names": ["_jsx"]
 }

package/build/number-control/index.cjs

@@ -171,7 +171,7 @@ function UnforwardedNumberControl(props, forwardedRef) {
         constrainValue(currentValue)
       );
     }
-    return nextState;
+    return stateReducerProp?.(nextState, action) ?? nextState;
   };
   const buildSpinButtonClickHandler = (direction) => (event) => onChange(String(spinValue(valueProp, direction, event)), {
     // Set event.target to the <input> so that consumers can use
@@ -197,10 +197,7 @@ function UnforwardedNumberControl(props, forwardedRef) {
     step,
     type: typeProp,
     value: valueProp,
-    __unstableStateReducer: (state, action) => {
-      const baseState = numberControlStateReducer(state, action);
-      return stateReducerProp?.(baseState, action) ?? baseState;
-    },
+    __unstableStateReducer: numberControlStateReducer,
     size,
     __shouldNotWarnDeprecated36pxSize: true,
     suffix: spinControls === "custom" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {

package/build/number-control/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/number-control/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useRef, forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { plus as plusIcon, reset as resetIcon } from '@wordpress/icons';\nimport { useMergeRefs } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { Input, SpinButton, styles } from './styles/number-control-styles';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { add, subtract, clamp, ensureValidStep } from '../utils/math';\nimport { ensureNumber, isValueEmpty } from '../utils/values';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport { useCx } from '../utils';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction UnforwardedNumberControl(props, forwardedRef) {\n  const {\n    __unstableStateReducer: stateReducerProp,\n    className,\n    dragDirection = 'n',\n    hideHTMLArrows = false,\n    spinControls = hideHTMLArrows ? 'none' : 'native',\n    isDragEnabled = true,\n    isShiftStepEnabled = true,\n    label,\n    max = Infinity,\n    min = -Infinity,\n    required = false,\n    shiftStep = 10,\n    step = 1,\n    spinFactor = 1,\n    type: typeProp = 'number',\n    value: valueProp,\n    size = 'default',\n    suffix,\n    onChange = noop,\n    __shouldNotWarnDeprecated36pxSize,\n    ...restProps\n  } = useDeprecated36pxDefaultSizeProp(props);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'NumberControl',\n    size,\n    __next40pxDefaultSize: restProps.__next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  if (hideHTMLArrows) {\n    deprecated('wp.components.NumberControl hideHTMLArrows prop ', {\n      alternative: 'spinControls=\"none\"',\n      since: '6.2',\n      version: '6.3'\n    });\n  }\n  const inputRef = useRef(null);\n  const mergedRef = useMergeRefs([inputRef, forwardedRef]);\n  const isStepAny = step === 'any';\n  const baseStep = isStepAny ? 1 : ensureNumber(step);\n  const baseSpin = ensureNumber(spinFactor) * baseStep;\n  const constrainValue = (value, stepOverride) => {\n    // When step is not \"any\" the value must be a valid step.\n    if (!isStepAny) {\n      value = ensureValidStep(value, min, stepOverride ?? baseStep);\n    }\n    return `${clamp(value, min, max)}`;\n  };\n  const baseValue = constrainValue(0);\n  const autoComplete = typeProp === 'number' ? 'off' : undefined;\n  const classes = clsx('components-number-control', className);\n  const cx = useCx();\n  const spinButtonClasses = cx(size === 'small' && styles.smallSpinButtons);\n  const spinValue = (value, direction, event) => {\n    event?.preventDefault();\n    const shift = event?.shiftKey && isShiftStepEnabled;\n    const delta = shift ? ensureNumber(shiftStep) * baseSpin : baseSpin;\n    let nextValue = isValueEmpty(value) ? baseValue : value;\n    if (direction === 'up') {\n      nextValue = add(nextValue, delta);\n    } else if (direction === 'down') {\n      nextValue = subtract(nextValue, delta);\n    }\n    return constrainValue(nextValue, shift ? delta : undefined);\n  };\n\n  /**\n   * \"Middleware\" function that intercepts updates from InputControl.\n   * This allows us to tap into actions to transform the (next) state for\n   * InputControl.\n   *\n   * @return The updated state to apply to InputControl\n   */\n  const numberControlStateReducer = (state, action) => {\n    const nextState = {\n      ...state\n    };\n    const {\n      type,\n      payload\n    } = action;\n    const event = payload.event;\n    const currentValue = nextState.value;\n\n    /**\n     * Handles custom UP and DOWN Keyboard events\n     */\n    if (type === inputControlActionTypes.PRESS_UP || type === inputControlActionTypes.PRESS_DOWN) {\n      nextState.value = spinValue(currentValue, type === inputControlActionTypes.PRESS_UP ? 'up' : 'down', event);\n    }\n\n    /**\n     * Handles drag to update events\n     */\n    if (type === inputControlActionTypes.DRAG && isDragEnabled) {\n      const [x, y] = payload.delta;\n      const enableShift = payload.shiftKey && isShiftStepEnabled;\n      const modifier = enableShift ? ensureNumber(shiftStep) * baseSpin : baseSpin;\n      let directionModifier;\n      let delta;\n      switch (dragDirection) {\n        case 'n':\n          delta = y;\n          directionModifier = -1;\n          break;\n        case 'e':\n          delta = x;\n          directionModifier = isRTL() ? -1 : 1;\n          break;\n        case 's':\n          delta = y;\n          directionModifier = 1;\n          break;\n        case 'w':\n          delta = x;\n          directionModifier = isRTL() ? 1 : -1;\n          break;\n      }\n      if (delta !== 0) {\n        delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);\n        const distance = delta * modifier * directionModifier;\n        nextState.value = constrainValue(\n        // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined\n        add(currentValue, distance), enableShift ? modifier : undefined);\n      }\n    }\n\n    /**\n     * Handles commit (ENTER key press or blur)\n     */\n    if (type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT) {\n      const applyEmptyValue = required === false && currentValue === '';\n      nextState.value = applyEmptyValue ? currentValue :\n      // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined\n      constrainValue(currentValue);\n    }\n    return nextState;\n  };\n  const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), {\n    // Set event.target to the <input> so that consumers can use\n    // e.g. event.target.validity.\n    event: {\n      ...event,\n      target: inputRef.current\n    }\n  });\n  return /*#__PURE__*/_jsx(Input, {\n    autoComplete: autoComplete,\n    inputMode: \"numeric\",\n    ...restProps,\n    className: classes,\n    dragDirection: dragDirection,\n    hideHTMLArrows: spinControls !== 'native',\n    isDragEnabled: isDragEnabled,\n    label: label,\n    max: max === Infinity ? undefined : max,\n    min: min === -Infinity ? undefined : min,\n    ref: mergedRef,\n    required: required,\n    step: step,\n    type: typeProp\n    // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components\n    ,\n    value: valueProp,\n    __unstableStateReducer: (state, action) => {\n      const baseState = numberControlStateReducer(state, action);\n      return stateReducerProp?.(baseState, action) ?? baseState;\n    },\n    size: size,\n    __shouldNotWarnDeprecated36pxSize: true,\n    suffix: spinControls === 'custom' ? /*#__PURE__*/_jsxs(_Fragment, {\n      children: [suffix, /*#__PURE__*/_jsx(Spacer, {\n        marginBottom: 0,\n        marginRight: 2,\n        children: /*#__PURE__*/_jsxs(HStack, {\n          spacing: 1,\n          children: [/*#__PURE__*/_jsx(SpinButton, {\n            className: spinButtonClasses,\n            icon: plusIcon,\n            size: \"small\",\n            label: __('Increment'),\n            onClick: buildSpinButtonClickHandler('up')\n          }), /*#__PURE__*/_jsx(SpinButton, {\n            className: spinButtonClasses,\n            icon: resetIcon,\n            size: \"small\",\n            label: __('Decrement'),\n            onClick: buildSpinButtonClickHandler('down')\n          })]\n        })\n      })]\n    }) : suffix,\n    onChange: onChange\n  });\n}\nexport const NumberControl = forwardRef(UnforwardedNumberControl);\nNumberControl.displayName = 'NumberControl';\nexport default NumberControl;"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useRef, forwardRef } from '@wordpress/element';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { plus as plusIcon, reset as resetIcon } from '@wordpress/icons';\nimport { useMergeRefs } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { Input, SpinButton, styles } from './styles/number-control-styles';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { add, subtract, clamp, ensureValidStep } from '../utils/math';\nimport { ensureNumber, isValueEmpty } from '../utils/values';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport { useCx } from '../utils';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\nimport { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction UnforwardedNumberControl(props, forwardedRef) {\n  const {\n    __unstableStateReducer: stateReducerProp,\n    className,\n    dragDirection = 'n',\n    hideHTMLArrows = false,\n    spinControls = hideHTMLArrows ? 'none' : 'native',\n    isDragEnabled = true,\n    isShiftStepEnabled = true,\n    label,\n    max = Infinity,\n    min = -Infinity,\n    required = false,\n    shiftStep = 10,\n    step = 1,\n    spinFactor = 1,\n    type: typeProp = 'number',\n    value: valueProp,\n    size = 'default',\n    suffix,\n    onChange = noop,\n    __shouldNotWarnDeprecated36pxSize,\n    ...restProps\n  } = useDeprecated36pxDefaultSizeProp(props);\n  maybeWarnDeprecated36pxSize({\n    componentName: 'NumberControl',\n    size,\n    __next40pxDefaultSize: restProps.__next40pxDefaultSize,\n    __shouldNotWarnDeprecated36pxSize\n  });\n  if (hideHTMLArrows) {\n    deprecated('wp.components.NumberControl hideHTMLArrows prop ', {\n      alternative: 'spinControls=\"none\"',\n      since: '6.2',\n      version: '6.3'\n    });\n  }\n  const inputRef = useRef(null);\n  const mergedRef = useMergeRefs([inputRef, forwardedRef]);\n  const isStepAny = step === 'any';\n  const baseStep = isStepAny ? 1 : ensureNumber(step);\n  const baseSpin = ensureNumber(spinFactor) * baseStep;\n  const constrainValue = (value, stepOverride) => {\n    // When step is not \"any\" the value must be a valid step.\n    if (!isStepAny) {\n      value = ensureValidStep(value, min, stepOverride ?? baseStep);\n    }\n    return `${clamp(value, min, max)}`;\n  };\n  const baseValue = constrainValue(0);\n  const autoComplete = typeProp === 'number' ? 'off' : undefined;\n  const classes = clsx('components-number-control', className);\n  const cx = useCx();\n  const spinButtonClasses = cx(size === 'small' && styles.smallSpinButtons);\n  const spinValue = (value, direction, event) => {\n    event?.preventDefault();\n    const shift = event?.shiftKey && isShiftStepEnabled;\n    const delta = shift ? ensureNumber(shiftStep) * baseSpin : baseSpin;\n    let nextValue = isValueEmpty(value) ? baseValue : value;\n    if (direction === 'up') {\n      nextValue = add(nextValue, delta);\n    } else if (direction === 'down') {\n      nextValue = subtract(nextValue, delta);\n    }\n    return constrainValue(nextValue, shift ? delta : undefined);\n  };\n\n  /**\n   * \"Middleware\" function that intercepts updates from InputControl.\n   * This allows us to tap into actions to transform the (next) state for\n   * InputControl.\n   *\n   * @return The updated state to apply to InputControl\n   */\n  const numberControlStateReducer = (state, action) => {\n    const nextState = {\n      ...state\n    };\n    const {\n      type,\n      payload\n    } = action;\n    const event = payload.event;\n    const currentValue = nextState.value;\n\n    /**\n     * Handles custom UP and DOWN Keyboard events\n     */\n    if (type === inputControlActionTypes.PRESS_UP || type === inputControlActionTypes.PRESS_DOWN) {\n      nextState.value = spinValue(currentValue, type === inputControlActionTypes.PRESS_UP ? 'up' : 'down', event);\n    }\n\n    /**\n     * Handles drag to update events\n     */\n    if (type === inputControlActionTypes.DRAG && isDragEnabled) {\n      const [x, y] = payload.delta;\n      const enableShift = payload.shiftKey && isShiftStepEnabled;\n      const modifier = enableShift ? ensureNumber(shiftStep) * baseSpin : baseSpin;\n      let directionModifier;\n      let delta;\n      switch (dragDirection) {\n        case 'n':\n          delta = y;\n          directionModifier = -1;\n          break;\n        case 'e':\n          delta = x;\n          directionModifier = isRTL() ? -1 : 1;\n          break;\n        case 's':\n          delta = y;\n          directionModifier = 1;\n          break;\n        case 'w':\n          delta = x;\n          directionModifier = isRTL() ? 1 : -1;\n          break;\n      }\n      if (delta !== 0) {\n        delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);\n        const distance = delta * modifier * directionModifier;\n        nextState.value = constrainValue(\n        // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined\n        add(currentValue, distance), enableShift ? modifier : undefined);\n      }\n    }\n\n    /**\n     * Handles commit (ENTER key press or blur)\n     */\n    if (type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT) {\n      const applyEmptyValue = required === false && currentValue === '';\n      nextState.value = applyEmptyValue ? currentValue :\n      // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined\n      constrainValue(currentValue);\n    }\n    return stateReducerProp?.(nextState, action) ?? nextState;\n  };\n  const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), {\n    // Set event.target to the <input> so that consumers can use\n    // e.g. event.target.validity.\n    event: {\n      ...event,\n      target: inputRef.current\n    }\n  });\n  return /*#__PURE__*/_jsx(Input, {\n    autoComplete: autoComplete,\n    inputMode: \"numeric\",\n    ...restProps,\n    className: classes,\n    dragDirection: dragDirection,\n    hideHTMLArrows: spinControls !== 'native',\n    isDragEnabled: isDragEnabled,\n    label: label,\n    max: max === Infinity ? undefined : max,\n    min: min === -Infinity ? undefined : min,\n    ref: mergedRef,\n    required: required,\n    step: step,\n    type: typeProp\n    // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components\n    ,\n    value: valueProp,\n    __unstableStateReducer: numberControlStateReducer,\n    size: size,\n    __shouldNotWarnDeprecated36pxSize: true,\n    suffix: spinControls === 'custom' ? /*#__PURE__*/_jsxs(_Fragment, {\n      children: [suffix, /*#__PURE__*/_jsx(Spacer, {\n        marginBottom: 0,\n        marginRight: 2,\n        children: /*#__PURE__*/_jsxs(HStack, {\n          spacing: 1,\n          children: [/*#__PURE__*/_jsx(SpinButton, {\n            className: spinButtonClasses,\n            icon: plusIcon,\n            size: \"small\",\n            label: __('Increment'),\n            onClick: buildSpinButtonClickHandler('up')\n          }), /*#__PURE__*/_jsx(SpinButton, {\n            className: spinButtonClasses,\n            icon: resetIcon,\n            size: \"small\",\n            label: __('Decrement'),\n            onClick: buildSpinButtonClickHandler('down')\n          })]\n        })\n      })]\n    }) : suffix,\n    onChange: onChange\n  });\n}\nexport const NumberControl = forwardRef(UnforwardedNumberControl);\nNumberControl.displayName = 'NumberControl';\nexport default NumberControl;"],
+  "mappings": "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",
   "names": ["deprecated", "clsx", "_jsx", "_jsxs", "_Fragment", "plusIcon", "resetIcon"]
 }