@wordpress/components 30.5.1-next.f56bd8138.0 → 30.6.1-next.b8c8708f3.0

package/build/color-picker/component.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_colord","require","_names","_interopRequireDefault","_element","_compose","_i18n","_context","_styles","_colorCopyButton","_colorInput","_picker","_hooks","_jsxRuntime","extend","namesPlugin","options","label","value","UnconnectedColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","useContextSystem","setColor","useControlledValue","safeColordColor","useMemo","colord","debouncedSetColor","useDebounce","handleChange","useCallback","nextValue","toHex","colorType","setColorType","useState","jsxs","ColorfulWrapper","ref","children","jsx","Picker","AuxiliaryColorArtefactWrapper","AuxiliaryColorArtefactHStackHeader","justify","SelectControl","__nextHasNoMarginBottom","size","nextColorType","__","hideLabelFromVision","variant","ColorCopyButton","ColorInputWrapper","direction","gap","ColorInput","ColorPicker","exports","contextConnect","_default","default"],"sources":["@wordpress/components/src/color-picker/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport type { Colord } from 'colord';\nimport { colord, extend } 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 {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorPickerProps, ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst UnconnectedColorPicker = (\n\tprops: ColorPickerProps,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nexport const ColorPicker = contextConnect(\n\tUnconnectedColorPicker,\n\t'ColorPicker'\n);\n\nexport default ColorPicker;\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/color-picker/component.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\n\nimport { colord, extend } 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  return /*#__PURE__*/_jsxs(ColorfulWrapper, {\n    ref: forwardedRef,\n    ...divProps,\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          __nextHasNoMarginBottom: true,\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,oBAA+B;AAC/B,mBAAwB;AAKxB,qBAA+C;AAC/C,qBAA4B;AAC5B,kBAAmB;AAKnB,qBAAiD;AACjD,oBAAqI;AACrI,+BAAgC;AAChC,yBAA2B;AAC3B,oBAAuB;AACvB,mBAAmC;AACnC,yBAA2C;AAAA,IAC3C,sBAAO,CAAC,aAAAA,OAAW,CAAC;AACpB,MAAM,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,MAAM,yBAAyB,CAAC,OAAO,iBAAiB;AACtD,QAAM;AAAA,IACJ,cAAc;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,QAAI,iCAAiB,OAAO,aAAa;AAGzC,QAAM,CAAC,OAAO,QAAQ,QAAI,iCAAmB;AAAA,IAC3C;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF,CAAC;AACD,QAAM,sBAAkB,wBAAQ,MAAM;AACpC,eAAO,sBAAO,SAAS,EAAE;AAAA,EAC3B,GAAG,CAAC,KAAK,CAAC;AACV,QAAM,wBAAoB,4BAAY,QAAQ;AAC9C,QAAM,mBAAe,4BAAY,eAAa;AAC5C,sBAAkB,UAAU,MAAM,CAAC;AAAA,EACrC,GAAG,CAAC,iBAAiB,CAAC;AACtB,QAAM,CAAC,WAAW,YAAY,QAAI,yBAAS,cAAc,KAAK;AAC9D,SAAoB,uCAAAC,MAAM,+BAAiB;AAAA,IACzC,KAAK;AAAA,IACL,GAAG;AAAA,IACH,UAAU,CAAc,uCAAAC,KAAK,sBAAQ;AAAA,MACnC,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,IACF,CAAC,GAAgB,uCAAAD,MAAM,6CAA+B;AAAA,MACpD,UAAU,CAAc,uCAAAA,MAAM,kDAAoC;AAAA,QAChE,SAAS;AAAA,QACT,UAAU,CAAc,uCAAAC,KAAK,6BAAe;AAAA,UAC1C,yBAAyB;AAAA,UACzB,MAAM;AAAA,UACN;AAAA,UACA,OAAO;AAAA,UACP,UAAU,mBAAiB,aAAa,aAAa;AAAA,UACrD,WAAO,gBAAG,cAAc;AAAA,UACxB,qBAAqB;AAAA,UACrB,SAAS;AAAA,QACX,CAAC,GAAgB,uCAAAA,KAAK,0CAAiB;AAAA,UACrC,OAAO;AAAA,UACP,WAAW,cAAc;AAAA,QAC3B,CAAC,CAAC;AAAA,MACJ,CAAC,GAAgB,uCAAAA,KAAK,iCAAmB;AAAA,QACvC,WAAW;AAAA,QACX,KAAK;AAAA,QACL,UAAuB,uCAAAA,KAAK,+BAAY;AAAA,UACtC;AAAA,UACA,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,QACF,CAAC;AAAA,MACH,CAAC,CAAC;AAAA,IACJ,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;AACO,MAAM,kBAAc,+BAAe,wBAAwB,aAAa;AAC/E,IAAO,oBAAQ;",
+  "names": ["namesPlugin", "_jsxs", "_jsx"]
+}

package/build/color-picker/hex-input.js

@@ -1,58 +1,72 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hex_input_exports = {};
+__export(hex_input_exports, {
+  HexInput: () => HexInput
 });
-exports.HexInput = void 0;
-var _colord = require("colord");
-var _i18n = require("@wordpress/i18n");
-var _inputControl = require("../input-control");
-var _text = require("../text");
-var _colorsValues = require("../utils/colors-values");
-var _inputPrefixWrapper = _interopRequireDefault(require("../input-control/input-prefix-wrapper"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(hex_input_exports);
+var import_colord = require("colord");
+var import_i18n = require("@wordpress/i18n");
+var import_input_control = require("../input-control");
+var import_text = require("../text");
+var import_colors_values = require("../utils/colors-values");
+var import_input_prefix_wrapper = __toESM(require("../input-control/input-prefix-wrapper"));
+var import_jsx_runtime = require("react/jsx-runtime");
 const HexInput = ({
   color,
   onChange,
   enableAlpha
 }) => {
-  const handleChange = nextValue => {
+  const handleChange = (nextValue) => {
     if (!nextValue) {
       return;
     }
-    const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue;
-    onChange((0, _colord.colord)(hexValue));
+    const hexValue = nextValue.startsWith("#") ? nextValue : "#" + nextValue;
+    onChange((0, import_colord.colord)(hexValue));
   };
   const stateReducer = (state, action) => {
     const nativeEvent = action.payload?.event?.nativeEvent;
-    if ('insertFromPaste' !== nativeEvent?.inputType) {
+    if ("insertFromPaste" !== nativeEvent?.inputType) {
       return {
         ...state
       };
     }
-    const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();
+    const value = state.value?.startsWith("#") ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase();
     return {
       ...state,
       value
     };
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputControl.InputControl, {
-    prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputPrefixWrapper.default, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_text.Text, {
-        color: _colorsValues.COLORS.theme.accent,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_control.InputControl, {
+    prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_prefix_wrapper.default, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Text, {
+        color: import_colors_values.COLORS.theme.accent,
         lineHeight: 1,
         children: "#"
       })
@@ -60,12 +74,15 @@ const HexInput = ({
     value: color.toHex().slice(1).toUpperCase(),
     onChange: handleChange,
     maxLength: enableAlpha ? 9 : 7,
-    label: (0, _i18n.__)('Hex color'),
+    label: (0, import_i18n.__)("Hex color"),
     hideLabelFromVision: true,
     size: "__unstable-large",
     __unstableStateReducer: stateReducer,
     __unstableInputWidth: "9em"
   });
 };
-exports.HexInput = HexInput;
-//# sourceMappingURL=hex-input.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HexInput
+});
+//# sourceMappingURL=hex-input.js.map

package/build/color-picker/hex-input.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_colord","require","_i18n","_inputControl","_text","_colorsValues","_inputPrefixWrapper","_interopRequireDefault","_jsxRuntime","HexInput","color","onChange","enableAlpha","handleChange","nextValue","hexValue","startsWith","colord","stateReducer","state","action","nativeEvent","payload","event","inputType","value","slice","toUpperCase","jsx","InputControl","prefix","default","children","Text","COLORS","theme","accent","lineHeight","toHex","maxLength","label","__","hideLabelFromVision","size","__unstableStateReducer","__unstableInputWidth","exports"],"sources":["@wordpress/components/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 type { StateReducer } from '../input-control/reducer/state';\nimport type { HexInputProps } from './types';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\n\nexport const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {\n\tconst handleChange = ( nextValue: string | undefined ) => {\n\t\tif ( ! nextValue ) {\n\t\t\treturn;\n\t\t}\n\t\tconst hexValue = nextValue.startsWith( '#' )\n\t\t\t? nextValue\n\t\t\t: '#' + nextValue;\n\n\t\tonChange( colord( hexValue ) );\n\t};\n\n\tconst stateReducer: StateReducer = ( state, action ) => {\n\t\tconst nativeEvent = action.payload?.event?.nativeEvent as InputEvent;\n\n\t\tif ( 'insertFromPaste' !== nativeEvent?.inputType ) {\n\t\t\treturn { ...state };\n\t\t}\n\n\t\tconst value = state.value?.startsWith( '#' )\n\t\t\t? state.value.slice( 1 ).toUpperCase()\n\t\t\t: state.value?.toUpperCase();\n\n\t\treturn { ...state, value };\n\t};\n\n\treturn (\n\t\t<InputControl\n\t\t\tprefix={\n\t\t\t\t<InputControlPrefixWrapper>\n\t\t\t\t\t<Text color={ COLORS.theme.accent } lineHeight={ 1 }>\n\t\t\t\t\t\t#\n\t\t\t\t\t</Text>\n\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t}\n\t\t\tvalue={ color.toHex().slice( 1 ).toUpperCase() }\n\t\t\tonChange={ handleChange }\n\t\t\tmaxLength={ enableAlpha ? 9 : 7 }\n\t\t\tlabel={ __( 'Hex color' ) }\n\t\t\thideLabelFromVision\n\t\t\tsize=\"__unstable-large\"\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t__unstableInputWidth=\"9em\"\n\t\t/>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AAGA,IAAAK,mBAAA,GAAAC,sBAAA,CAAAN,OAAA;AAA8E,IAAAO,WAAA,GAAAP,OAAA;AAlB9E;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAQO,MAAMQ,QAAQ,GAAGA,CAAE;EAAEC,KAAK;EAAEC,QAAQ;EAAEC;AAA2B,CAAC,KAAM;EAC9E,MAAMC,YAAY,GAAKC,SAA6B,IAAM;IACzD,IAAK,CAAEA,SAAS,EAAG;MAClB;IACD;IACA,MAAMC,QAAQ,GAAGD,SAAS,CAACE,UAAU,CAAE,GAAI,CAAC,GACzCF,SAAS,GACT,GAAG,GAAGA,SAAS;IAElBH,QAAQ,CAAE,IAAAM,cAAM,EAAEF,QAAS,CAAE,CAAC;EAC/B,CAAC;EAED,MAAMG,YAA0B,GAAGA,CAAEC,KAAK,EAAEC,MAAM,KAAM;IACvD,MAAMC,WAAW,GAAGD,MAAM,CAACE,OAAO,EAAEC,KAAK,EAAEF,WAAyB;IAEpE,IAAK,iBAAiB,KAAKA,WAAW,EAAEG,SAAS,EAAG;MACnD,OAAO;QAAE,GAAGL;MAAM,CAAC;IACpB;IAEA,MAAMM,KAAK,GAAGN,KAAK,CAACM,KAAK,EAAET,UAAU,CAAE,GAAI,CAAC,GACzCG,KAAK,CAACM,KAAK,CAACC,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAC,GACpCR,KAAK,CAACM,KAAK,EAAEE,WAAW,CAAC,CAAC;IAE7B,OAAO;MAAE,GAAGR,KAAK;MAAEM;IAAM,CAAC;EAC3B,CAAC;EAED,oBACC,IAAAjB,WAAA,CAAAoB,GAAA,EAACzB,aAAA,CAAA0B,YAAY;IACZC,MAAM,eACL,IAAAtB,WAAA,CAAAoB,GAAA,EAACtB,mBAAA,CAAAyB,OAAyB;MAAAC,QAAA,eACzB,IAAAxB,WAAA,CAAAoB,GAAA,EAACxB,KAAA,CAAA6B,IAAI;QAACvB,KAAK,EAAGwB,oBAAM,CAACC,KAAK,CAACC,MAAQ;QAACC,UAAU,EAAG,CAAG;QAAAL,QAAA,EAAC;MAErD,CAAM;IAAC,CACmB,CAC3B;IACDP,KAAK,EAAGf,KAAK,CAAC4B,KAAK,CAAC,CAAC,CAACZ,KAAK,CAAE,CAAE,CAAC,CAACC,WAAW,CAAC,CAAG;IAChDhB,QAAQ,EAAGE,YAAc;IACzB0B,SAAS,EAAG3B,WAAW,GAAG,CAAC,GAAG,CAAG;IACjC4B,KAAK,EAAG,IAAAC,QAAE,EAAE,WAAY,CAAG;IAC3BC,mBAAmB;IACnBC,IAAI,EAAC,kBAAkB;IACvBC,sBAAsB,EAAG1B,YAAc;IACvC2B,oBAAoB,EAAC;EAAK,CAC1B,CAAC;AAEJ,CAAC;AAACC,OAAA,CAAArC,QAAA,GAAAA,QAAA","ignoreList":[]}
+{
+  "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) {\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAAuB;AAKvB,kBAAmB;AAKnB,2BAA6B;AAC7B,kBAAqB;AACrB,2BAAuB;AACvB,kCAAsC;AACtC,yBAA4B;AACrB,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,eAAa;AAChC,QAAI,CAAC,WAAW;AACd;AAAA,IACF;AACA,UAAM,WAAW,UAAU,WAAW,GAAG,IAAI,YAAY,MAAM;AAC/D,iBAAS,sBAAO,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,uCAAAA,KAAK,mCAAc;AAAA,IACrC,QAAqB,uCAAAA,KAAK,4BAAAC,SAA2B;AAAA,MACnD,UAAuB,uCAAAD,KAAK,kBAAM;AAAA,QAChC,OAAO,4BAAO,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,WAAO,gBAAG,WAAW;AAAA,IACrB,qBAAqB;AAAA,IACrB,MAAM;AAAA,IACN,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,EACxB,CAAC;AACH;",
+  "names": ["_jsx", "InputControlPrefixWrapper"]
+}

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

@@ -1,106 +1,101 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hsl_input_exports = {};
+__export(hsl_input_exports, {
+  HslInput: () => HslInput
 });
-exports.HslInput = void 0;
-var _colord = require("colord");
-var _element = require("@wordpress/element");
-var _inputWithSlider = require("./input-with-slider");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
+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");
+var import_jsx_runtime = require("react/jsx-runtime");
 const HslInput = ({
   color,
   onChange,
   enableAlpha
 }) => {
-  const colorPropHSLA = (0, _element.useMemo)(() => color.toHsl(), [color]);
-  const [internalHSLA, setInternalHSLA] = (0, _element.useState)({
+  const colorPropHSLA = (0, import_element.useMemo)(() => color.toHsl(), [color]);
+  const [internalHSLA, setInternalHSLA] = (0, import_element.useState)({
     ...colorPropHSLA
   });
-  const isInternalColorSameAsReceivedColor = color.isEqual((0, _colord.colord)(internalHSLA));
-  (0, _element.useEffect)(() => {
+  const isInternalColorSameAsReceivedColor = color.isEqual((0, import_colord.colord)(internalHSLA));
+  (0, import_element.useEffect)(() => {
     if (!isInternalColorSameAsReceivedColor) {
-      // Keep internal HSLA color up to date with the received color prop
       setInternalHSLA(colorPropHSLA);
     }
   }, [colorPropHSLA, isInternalColorSameAsReceivedColor]);
-
-  // If the internal color is equal to the received color prop, we can use the
-  // HSLA values from the local state which, compared to the received color prop,
-  // retain more details about the actual H and S values that the user selected,
-  // and thus allow for better UX when interacting with the H and S sliders.
   const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;
-  const updateHSLAValue = partialNewValue => {
-    const nextOnChangeValue = (0, _colord.colord)({
+  const updateHSLAValue = (partialNewValue) => {
+    const nextOnChangeValue = (0, import_colord.colord)({
       ...colorValue,
       ...partialNewValue
     });
-
-    // Fire `onChange` only if the resulting color is different from the
-    // current one.
-    // Otherwise, update the internal HSLA color to cause a re-render.
     if (!color.isEqual(nextOnChangeValue)) {
       onChange(nextOnChangeValue);
     } else {
-      setInternalHSLA(prevHSLA => ({
+      setInternalHSLA((prevHSLA) => ({
         ...prevHSLA,
         ...partialNewValue
       }));
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_with_slider.InputWithSlider, {
       min: 0,
       max: 359,
       label: "Hue",
       abbreviation: "H",
       value: colorValue.h,
-      onChange: nextH => {
+      onChange: (nextH) => {
         updateHSLAValue({
           h: nextH
         });
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_with_slider.InputWithSlider, {
       min: 0,
       max: 100,
       label: "Saturation",
       abbreviation: "S",
       value: colorValue.s,
-      onChange: nextS => {
+      onChange: (nextS) => {
         updateHSLAValue({
           s: nextS
         });
       }
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_with_slider.InputWithSlider, {
       min: 0,
       max: 100,
       label: "Lightness",
       abbreviation: "L",
       value: colorValue.l,
-      onChange: nextL => {
+      onChange: (nextL) => {
         updateHSLAValue({
           l: nextL
         });
       }
-    }), enableAlpha && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputWithSlider.InputWithSlider, {
+    }), enableAlpha && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_with_slider.InputWithSlider, {
       min: 0,
       max: 100,
       label: "Alpha",
       abbreviation: "A",
       value: Math.trunc(100 * colorValue.a),
-      onChange: nextA => {
+      onChange: (nextA) => {
         updateHSLAValue({
           a: nextA / 100
         });
@@ -108,5 +103,8 @@ const HslInput = ({
     })]
   });
 };
-exports.HslInput = HslInput;
-//# sourceMappingURL=hsl-input.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HslInput
+});
+//# sourceMappingURL=hsl-input.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_colord","require","_element","_inputWithSlider","_jsxRuntime","HslInput","color","onChange","enableAlpha","colorPropHSLA","useMemo","toHsl","internalHSLA","setInternalHSLA","useState","isInternalColorSameAsReceivedColor","isEqual","colord","useEffect","colorValue","updateHSLAValue","partialNewValue","nextOnChangeValue","prevHSLA","jsxs","Fragment","children","jsx","InputWithSlider","min","max","label","abbreviation","value","h","nextH","s","nextS","l","nextL","Math","trunc","a","nextA","exports"],"sources":["@wordpress/components/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 type { HslInputProps } from './types';\n\nexport const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {\n\tconst colorPropHSLA = useMemo( () => color.toHsl(), [ color ] );\n\n\tconst [ internalHSLA, setInternalHSLA ] = useState( { ...colorPropHSLA } );\n\n\tconst isInternalColorSameAsReceivedColor = color.isEqual(\n\t\tcolord( internalHSLA )\n\t);\n\n\tuseEffect( () => {\n\t\tif ( ! isInternalColorSameAsReceivedColor ) {\n\t\t\t// Keep internal HSLA color up to date with the received color prop\n\t\t\tsetInternalHSLA( colorPropHSLA );\n\t\t}\n\t}, [ colorPropHSLA, isInternalColorSameAsReceivedColor ] );\n\n\t// If the internal color is equal to the received color prop, we can use the\n\t// HSLA values from the local state which, compared to the received color prop,\n\t// retain more details about the actual H and S values that the user selected,\n\t// and thus allow for better UX when interacting with the H and S sliders.\n\tconst colorValue = isInternalColorSameAsReceivedColor\n\t\t? internalHSLA\n\t\t: colorPropHSLA;\n\n\tconst updateHSLAValue = (\n\t\tpartialNewValue: Partial< typeof colorPropHSLA >\n\t) => {\n\t\tconst nextOnChangeValue = colord( {\n\t\t\t...colorValue,\n\t\t\t...partialNewValue,\n\t\t} );\n\n\t\t// Fire `onChange` only if the resulting color is different from the\n\t\t// current one.\n\t\t// Otherwise, update the internal HSLA color to cause a re-render.\n\t\tif ( ! color.isEqual( nextOnChangeValue ) ) {\n\t\t\tonChange( nextOnChangeValue );\n\t\t} else {\n\t\t\tsetInternalHSLA( ( prevHSLA ) => ( {\n\t\t\t\t...prevHSLA,\n\t\t\t\t...partialNewValue,\n\t\t\t} ) );\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 359 }\n\t\t\t\tlabel=\"Hue\"\n\t\t\t\tabbreviation=\"H\"\n\t\t\t\tvalue={ colorValue.h }\n\t\t\t\tonChange={ ( nextH: number ) => {\n\t\t\t\t\tupdateHSLAValue( { h: nextH } );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Saturation\"\n\t\t\t\tabbreviation=\"S\"\n\t\t\t\tvalue={ colorValue.s }\n\t\t\t\tonChange={ ( nextS: number ) => {\n\t\t\t\t\tupdateHSLAValue( { s: nextS } );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<InputWithSlider\n\t\t\t\tmin={ 0 }\n\t\t\t\tmax={ 100 }\n\t\t\t\tlabel=\"Lightness\"\n\t\t\t\tabbreviation=\"L\"\n\t\t\t\tvalue={ colorValue.l }\n\t\t\t\tonChange={ ( nextL: number ) => {\n\t\t\t\t\tupdateHSLAValue( { l: nextL } );\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t{ enableAlpha && (\n\t\t\t\t<InputWithSlider\n\t\t\t\t\tmin={ 0 }\n\t\t\t\t\tmax={ 100 }\n\t\t\t\t\tlabel=\"Alpha\"\n\t\t\t\t\tabbreviation=\"A\"\n\t\t\t\t\tvalue={ Math.trunc( 100 * colorValue.a ) }\n\t\t\t\t\tonChange={ ( nextA: number ) => {\n\t\t\t\t\t\tupdateHSLAValue( { a: nextA / 100 } );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n};\n"],"mappings":"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","ignoreList":[]}
+{
+  "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,MAAM,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;",
+  "names": ["_jsxs", "_Fragment", "_jsx"]
+}

package/build/color-picker/index.js

@@ -1,13 +1,29 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ColorPicker", {
-  enumerable: true,
-  get: function () {
-    return _legacyAdapter.LegacyAdapter;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var color_picker_exports = {};
+__export(color_picker_exports, {
+  ColorPicker: () => import_legacy_adapter.LegacyAdapter
+});
+module.exports = __toCommonJS(color_picker_exports);
+var import_legacy_adapter = require("./legacy-adapter");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorPicker
 });
-var _legacyAdapter = require("./legacy-adapter");
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_legacyAdapter","require"],"sources":["@wordpress/components/src/color-picker/index.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nexport { LegacyAdapter as ColorPicker } from './legacy-adapter';\n"],"mappings":";;;;;;;;;;;AAGA,IAAAA,cAAA,GAAAC,OAAA","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../src/color-picker/index.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nexport { LegacyAdapter as ColorPicker } from './legacy-adapter';"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAA6C;",
+  "names": []
+}

package/build/color-picker/input-with-slider.js

@@ -1,20 +1,42 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var input_with_slider_exports = {};
+__export(input_with_slider_exports, {
+  InputWithSlider: () => InputWithSlider
 });
-exports.InputWithSlider = void 0;
-var _hStack = require("../h-stack");
-var _text = require("../text");
-var _styles = require("./styles");
-var _colorsValues = require("../utils/colors-values");
-var _inputPrefixWrapper = _interopRequireDefault(require("../input-control/input-prefix-wrapper"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Internal dependencies
- */
-
+module.exports = __toCommonJS(input_with_slider_exports);
+var import_h_stack = require("../h-stack");
+var import_text = require("../text");
+var import_styles = require("./styles");
+var import_colors_values = require("../utils/colors-values");
+var import_input_prefix_wrapper = __toESM(require("../input-control/input-prefix-wrapper"));
+var import_jsx_runtime = require("react/jsx-runtime");
 const InputWithSlider = ({
   min,
   max,
@@ -23,50 +45,50 @@ const InputWithSlider = ({
   onChange,
   value
 }) => {
-  const onNumberControlChange = newValue => {
+  const onNumberControlChange = (newValue) => {
     if (!newValue) {
       onChange(0);
       return;
     }
-    if (typeof newValue === 'string') {
+    if (typeof newValue === "string") {
       onChange(parseInt(newValue, 10));
       return;
     }
     onChange(newValue);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_hStack.HStack, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_h_stack.HStack, {
     spacing: 4,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NumberControlWrapper, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.NumberControlWrapper, {
       __next40pxDefaultSize: true,
-      min: min,
-      max: max,
-      label: label,
+      min,
+      max,
+      label,
       hideLabelFromVision: true,
-      value: value,
+      value,
       onChange: onNumberControlChange,
-      prefix: /*#__PURE__*/(0, _jsxRuntime.jsx)(_inputPrefixWrapper.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_text.Text, {
-          color: _colorsValues.COLORS.theme.accent,
+      prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_input_prefix_wrapper.default, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_text.Text, {
+          color: import_colors_values.COLORS.theme.accent,
           lineHeight: 1,
           children: abbreviation
         })
       }),
       spinControls: "none"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.RangeControl, {
+    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.RangeControl, {
       __nextHasNoMarginBottom: true,
       __next40pxDefaultSize: true,
-      label: label,
+      label,
       hideLabelFromVision: true,
-      min: min,
-      max: max,
-      value: value
-      // @ts-expect-error
-      // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185
-      ,
-      onChange: onChange,
+      min,
+      max,
+      value,
+      onChange,
       withInputField: false
     })]
   });
 };
-exports.InputWithSlider = InputWithSlider;
-//# sourceMappingURL=input-with-slider.js.map
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputWithSlider
+});
+//# sourceMappingURL=input-with-slider.js.map

package/build/color-picker/input-with-slider.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["_hStack","require","_text","_styles","_colorsValues","_inputPrefixWrapper","_interopRequireDefault","_jsxRuntime","InputWithSlider","min","max","label","abbreviation","onChange","value","onNumberControlChange","newValue","parseInt","jsxs","HStack","spacing","children","jsx","NumberControlWrapper","__next40pxDefaultSize","hideLabelFromVision","prefix","default","Text","color","COLORS","theme","accent","lineHeight","spinControls","RangeControl","__nextHasNoMarginBottom","withInputField","exports"],"sources":["@wordpress/components/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 type { InputWithSliderProps } from './types';\nimport InputControlPrefixWrapper from '../input-control/input-prefix-wrapper';\n\nexport const InputWithSlider = ( {\n\tmin,\n\tmax,\n\tlabel,\n\tabbreviation,\n\tonChange,\n\tvalue,\n}: InputWithSliderProps ) => {\n\tconst onNumberControlChange = ( newValue?: number | string ) => {\n\t\tif ( ! newValue ) {\n\t\t\tonChange( 0 );\n\t\t\treturn;\n\t\t}\n\t\tif ( typeof newValue === 'string' ) {\n\t\t\tonChange( parseInt( newValue, 10 ) );\n\t\t\treturn;\n\t\t}\n\t\tonChange( newValue );\n\t};\n\n\treturn (\n\t\t<HStack spacing={ 4 }>\n\t\t\t<NumberControlWrapper\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tvalue={ value }\n\t\t\t\tonChange={ onNumberControlChange }\n\t\t\t\tprefix={\n\t\t\t\t\t<InputControlPrefixWrapper>\n\t\t\t\t\t\t<Text color={ COLORS.theme.accent } lineHeight={ 1 }>\n\t\t\t\t\t\t\t{ abbreviation }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</InputControlPrefixWrapper>\n\t\t\t\t}\n\t\t\t\tspinControls=\"none\"\n\t\t\t/>\n\t\t\t<RangeControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tlabel={ label }\n\t\t\t\thideLabelFromVision\n\t\t\t\tmin={ min }\n\t\t\t\tmax={ max }\n\t\t\t\tvalue={ value }\n\t\t\t\t// @ts-expect-error\n\t\t\t\t// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185\n\t\t\t\tonChange={ onChange }\n\t\t\t\twithInputField={ false }\n\t\t\t/>\n\t\t</HStack>\n\t);\n};\n"],"mappings":";;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAEA,IAAAI,mBAAA,GAAAC,sBAAA,CAAAL,OAAA;AAA8E,IAAAM,WAAA,GAAAN,OAAA;AAR9E;AACA;AACA;;AAQO,MAAMO,eAAe,GAAGA,CAAE;EAChCC,GAAG;EACHC,GAAG;EACHC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC;AACqB,CAAC,KAAM;EAC5B,MAAMC,qBAAqB,GAAKC,QAA0B,IAAM;IAC/D,IAAK,CAAEA,QAAQ,EAAG;MACjBH,QAAQ,CAAE,CAAE,CAAC;MACb;IACD;IACA,IAAK,OAAOG,QAAQ,KAAK,QAAQ,EAAG;MACnCH,QAAQ,CAAEI,QAAQ,CAAED,QAAQ,EAAE,EAAG,CAAE,CAAC;MACpC;IACD;IACAH,QAAQ,CAAEG,QAAS,CAAC;EACrB,CAAC;EAED,oBACC,IAAAT,WAAA,CAAAW,IAAA,EAAClB,OAAA,CAAAmB,MAAM;IAACC,OAAO,EAAG,CAAG;IAAAC,QAAA,gBACpB,IAAAd,WAAA,CAAAe,GAAA,EAACnB,OAAA,CAAAoB,oBAAoB;MACpBC,qBAAqB;MACrBf,GAAG,EAAGA,GAAK;MACXC,GAAG,EAAGA,GAAK;MACXC,KAAK,EAAGA,KAAO;MACfc,mBAAmB;MACnBX,KAAK,EAAGA,KAAO;MACfD,QAAQ,EAAGE,qBAAuB;MAClCW,MAAM,eACL,IAAAnB,WAAA,CAAAe,GAAA,EAACjB,mBAAA,CAAAsB,OAAyB;QAAAN,QAAA,eACzB,IAAAd,WAAA,CAAAe,GAAA,EAACpB,KAAA,CAAA0B,IAAI;UAACC,KAAK,EAAGC,oBAAM,CAACC,KAAK,CAACC,MAAQ;UAACC,UAAU,EAAG,CAAG;UAAAZ,QAAA,EACjDT;QAAY,CACT;MAAC,CACmB,CAC3B;MACDsB,YAAY,EAAC;IAAM,CACnB,CAAC,eACF,IAAA3B,WAAA,CAAAe,GAAA,EAACnB,OAAA,CAAAgC,YAAY;MACZC,uBAAuB;MACvBZ,qBAAqB;MACrBb,KAAK,EAAGA,KAAO;MACfc,mBAAmB;MACnBhB,GAAG,EAAGA,GAAK;MACXC,GAAG,EAAGA,GAAK;MACXI,KAAK,EAAGA;MACR;MACA;MAAA;MACAD,QAAQ,EAAGA,QAAU;MACrBwB,cAAc,EAAG;IAAO,CACxB,CAAC;EAAA,CACK,CAAC;AAEX,CAAC;AAACC,OAAA,CAAA9B,eAAA,GAAAA,eAAA","ignoreList":[]}
+{
+  "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      __nextHasNoMarginBottom: true,\n      __next40pxDefaultSize: true,\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAuB;AACvB,kBAAqB;AACrB,oBAAmD;AACnD,2BAAuB;AACvB,kCAAsC;AACtC,yBAA2C;AACpC,MAAM,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,uCAAAA,MAAM,uBAAQ;AAAA,IAChC,SAAS;AAAA,IACT,UAAU,CAAc,uCAAAC,KAAK,oCAAsB;AAAA,MACjD,uBAAuB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA,UAAU;AAAA,MACV,QAAqB,uCAAAA,KAAK,4BAAAC,SAA2B;AAAA,QACnD,UAAuB,uCAAAD,KAAK,kBAAM;AAAA,UAChC,OAAO,4BAAO,MAAM;AAAA,UACpB,YAAY;AAAA,UACZ,UAAU;AAAA,QACZ,CAAC;AAAA,MACH,CAAC;AAAA,MACD,cAAc;AAAA,IAChB,CAAC,GAAgB,uCAAAA,KAAK,4BAAc;AAAA,MAClC,yBAAyB;AAAA,MACzB,uBAAuB;AAAA,MACvB;AAAA,MACA,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MAIA;AAAA,MACA,gBAAgB;AAAA,IAClB,CAAC,CAAC;AAAA,EACJ,CAAC;AACH;",
+  "names": ["_jsxs", "_jsx", "InputControlPrefixWrapper"]
+}