let resetValue = parseFloat(`${resetFallbackValue}`);

[37500] Fix | Delete

let onChangeResetValue = resetValue;

[37501] Fix | Delete

if (isNaN(resetValue)) {

[37502] Fix | Delete

resetValue = null;

[37503] Fix | Delete

onChangeResetValue = undefined;

[37504] Fix | Delete

}

[37505] Fix | Delete

setValue(resetValue);

[37506] Fix | Delete

[37507] Fix | Delete

/**

[37508] Fix | Delete

* Previously, this callback would always receive undefined as

[37509] Fix | Delete

* an argument. This behavior is unexpected, specifically

[37510] Fix | Delete

* when resetFallbackValue is defined.

[37511] Fix | Delete

*

[37512] Fix | Delete

* The value of undefined is not ideal. Passing it through

[37513] Fix | Delete

* to internal <input /> elements would change it from a

[37514] Fix | Delete

* controlled component to an uncontrolled component.

[37515] Fix | Delete

*

[37516] Fix | Delete

* For now, to minimize unexpected regressions, we're going to

[37517] Fix | Delete

* preserve the undefined callback argument, except when a

[37518] Fix | Delete

* resetFallbackValue is defined.

[37519] Fix | Delete

*/

[37520] Fix | Delete

onChange(onChangeResetValue);

[37521] Fix | Delete

};

[37522] Fix | Delete

const handleShowTooltip = () => setShowTooltip(true);

[37523] Fix | Delete

const handleHideTooltip = () => setShowTooltip(false);

[37524] Fix | Delete

const handleOnBlur = event => {

[37525] Fix | Delete

onBlur(event);

[37526] Fix | Delete

setIsFocused(false);

[37527] Fix | Delete

handleHideTooltip();

[37528] Fix | Delete

};

[37529] Fix | Delete

const handleOnFocus = event => {

[37530] Fix | Delete

onFocus(event);

[37531] Fix | Delete

setIsFocused(true);

[37532] Fix | Delete

handleShowTooltip();

[37533] Fix | Delete

};

[37534] Fix | Delete

const offsetStyle = {

[37535] Fix | Delete

[(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: fillValueOffset

[37536] Fix | Delete

};

[37537] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(base_control, {

[37538] Fix | Delete

__nextHasNoMarginBottom: __nextHasNoMarginBottom,

[37539] Fix | Delete

className: classes,

[37540] Fix | Delete

label: label,

[37541] Fix | Delete

hideLabelFromVision: hideLabelFromVision,

[37542] Fix | Delete

id: `${id}`,

[37543] Fix | Delete

help: help,

[37544] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(range_control_styles_Root, {

[37545] Fix | Delete

className: "components-range-control__root",

[37546] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[37547] Fix | Delete

children: [beforeIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(BeforeIconWrapper, {

[37548] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {

[37549] Fix | Delete

icon: beforeIcon

[37550] Fix | Delete

})

[37551] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(range_control_styles_Wrapper, {

[37552] Fix | Delete

__nextHasNoMarginBottom: __nextHasNoMarginBottom,

[37553] Fix | Delete

className: wrapperClasses,

[37554] Fix | Delete

color: colorProp,

[37555] Fix | Delete

marks: !!marks,

[37556] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(input_range, {

[37557] Fix | Delete

...otherProps,

[37558] Fix | Delete

className: "components-range-control__slider",

[37559] Fix | Delete

describedBy: describedBy,

[37560] Fix | Delete

disabled: disabled,

[37561] Fix | Delete

id: `${id}`,

[37562] Fix | Delete

label: label,

[37563] Fix | Delete

max: max,

[37564] Fix | Delete

min: min,

[37565] Fix | Delete

onBlur: handleOnBlur,

[37566] Fix | Delete

onChange: handleOnRangeChange,

[37567] Fix | Delete

onFocus: handleOnFocus,

[37568] Fix | Delete

onMouseMove: onMouseMove,

[37569] Fix | Delete

onMouseLeave: onMouseLeave,

[37570] Fix | Delete

ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]),

[37571] Fix | Delete

step: step,

[37572] Fix | Delete

value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined

[37573] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(RangeRail, {

[37574] Fix | Delete

"aria-hidden": true,

[37575] Fix | Delete

disabled: disabled,

[37576] Fix | Delete

marks: marks,

[37577] Fix | Delete

max: max,

[37578] Fix | Delete

min: min,

[37579] Fix | Delete

railColor: railColor,

[37580] Fix | Delete

step: step,

[37581] Fix | Delete

value: rangeFillValue

[37582] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Track, {

[37583] Fix | Delete

"aria-hidden": true,

[37584] Fix | Delete

className: "components-range-control__track",

[37585] Fix | Delete

disabled: disabled,

[37586] Fix | Delete

style: {

[37587] Fix | Delete

width: fillValueOffset

[37588] Fix | Delete

},

[37589] Fix | Delete

trackColor: trackColor

[37590] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ThumbWrapper, {

[37591] Fix | Delete

className: "components-range-control__thumb-wrapper",

[37592] Fix | Delete

style: offsetStyle,

[37593] Fix | Delete

disabled: disabled,

[37594] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(Thumb, {

[37595] Fix | Delete

"aria-hidden": true,

[37596] Fix | Delete

isFocused: isThumbFocused,

[37597] Fix | Delete

disabled: disabled

[37598] Fix | Delete

})

[37599] Fix | Delete

}), enableTooltip && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(SimpleTooltip, {

[37600] Fix | Delete

className: "components-range-control__tooltip",

[37601] Fix | Delete

inputRef: inputRef,

[37602] Fix | Delete

tooltipPosition: "bottom",

[37603] Fix | Delete

renderTooltipContent: renderTooltipContent,

[37604] Fix | Delete

show: isCurrentlyFocused || showTooltip,

[37605] Fix | Delete

style: offsetStyle,

[37606] Fix | Delete

value: value

[37607] Fix | Delete

})]

[37608] Fix | Delete

}), afterIcon && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(AfterIconWrapper, {

[37609] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_icon, {

[37610] Fix | Delete

icon: afterIcon

[37611] Fix | Delete

})

[37612] Fix | Delete

}), hasInputField && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputNumber, {

[37613] Fix | Delete

"aria-label": label,

[37614] Fix | Delete

className: "components-range-control__number",

[37615] Fix | Delete

disabled: disabled,

[37616] Fix | Delete

inputMode: "decimal",

[37617] Fix | Delete

isShiftStepEnabled: isShiftStepEnabled,

[37618] Fix | Delete

max: max,

[37619] Fix | Delete

min: min,

[37620] Fix | Delete

onBlur: handleOnInputNumberBlur,

[37621] Fix | Delete

onChange: handleOnChange,

[37622] Fix | Delete

shiftStep: shiftStep,

[37623] Fix | Delete

size: __next40pxDefaultSize ? '__unstable-large' : 'default',

[37624] Fix | Delete

__unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16),

[37625] Fix | Delete

step: step

[37626] Fix | Delete

// @ts-expect-error TODO: Investigate if the `null` value is necessary

[37627] Fix | Delete

,

[37628] Fix | Delete

value: inputSliderValue

[37629] Fix | Delete

}), allowReset && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(ActionRightWrapper, {

[37630] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[37631] Fix | Delete

className: "components-range-control__reset",

[37632] Fix | Delete

disabled: disabled || value === undefined,

[37633] Fix | Delete

variant: "secondary",

[37634] Fix | Delete

size: "small",

[37635] Fix | Delete

onClick: handleOnReset,

[37636] Fix | Delete

children: (0,external_wp_i18n_namespaceObject.__)('Reset')

[37637] Fix | Delete

})

[37638] Fix | Delete

})]

[37639] Fix | Delete

})

[37640] Fix | Delete

});

[37641] Fix | Delete

}

[37642] Fix | Delete

[37643] Fix | Delete

/**

[37644] Fix | Delete

* RangeControls are used to make selections from a range of incremental values.

[37645] Fix | Delete

*

[37646] Fix | Delete

* ```jsx

[37647] Fix | Delete

* import { RangeControl } from '@wordpress/components';

[37648] Fix | Delete

* import { useState } from '@wordpress/element';

[37649] Fix | Delete

*

[37650] Fix | Delete

* const MyRangeControl = () => {

[37651] Fix | Delete

* const [ isChecked, setChecked ] = useState( true );

[37652] Fix | Delete

* return (

[37653] Fix | Delete

* <RangeControl

[37654] Fix | Delete

* help="Please select how transparent you would like this."

[37655] Fix | Delete

* initialPosition={50}

[37656] Fix | Delete

* label="Opacity"

[37657] Fix | Delete

* max={100}

[37658] Fix | Delete

* min={0}

[37659] Fix | Delete

* onChange={() => {}}

[37660] Fix | Delete

* />

[37661] Fix | Delete

* );

[37662] Fix | Delete

* };

[37663] Fix | Delete

* ```

[37664] Fix | Delete

*/

[37665] Fix | Delete

const RangeControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRangeControl);

[37666] Fix | Delete

/* harmony default export */ const range_control = (RangeControl);

[37667] Fix | Delete

[37668] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/styles.js

[37669] Fix | Delete

[37670] Fix | Delete

/**

[37671] Fix | Delete

* External dependencies

[37672] Fix | Delete

*/

[37673] Fix | Delete

[37674] Fix | Delete

/**

[37675] Fix | Delete

* Internal dependencies

[37676] Fix | Delete

*/

[37677] Fix | Delete

[37678] Fix | Delete

[37679] Fix | Delete

[37680] Fix | Delete

[37681] Fix | Delete

[37682] Fix | Delete

[37683] Fix | Delete

[37684] Fix | Delete

[37685] Fix | Delete

[37686] Fix | Delete

const NumberControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? {

[37687] Fix | Delete

target: "ez9hsf47"

[37688] Fix | Delete

} : 0)("width:", space(24), ";" + ( true ? "" : 0));

[37689] Fix | Delete

const styles_SelectControl = /*#__PURE__*/emotion_styled_base_browser_esm(select_control, true ? {

[37690] Fix | Delete

target: "ez9hsf46"

[37691] Fix | Delete

} : 0)("margin-left:", space(-2), ";width:5em;" + ( true ? "" : 0));

[37692] Fix | Delete

const styles_RangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control, true ? {

[37693] Fix | Delete

target: "ez9hsf45"

[37694] Fix | Delete

} : 0)("flex:1;margin-right:", space(2), ";" + ( true ? "" : 0));

[37695] Fix | Delete

[37696] Fix | Delete

// Make the Hue circle picker not go out of the bar.

[37697] Fix | Delete

const interactiveHueStyles = `

[37698] Fix | Delete

.react-colorful__interactive {

[37699] Fix | Delete

width: calc( 100% - ${space(2)} );

[37700] Fix | Delete

margin-left: ${space(1)};

[37701] Fix | Delete

}`;

[37702] Fix | Delete

const AuxiliaryColorArtefactWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {

[37703] Fix | Delete

target: "ez9hsf44"

[37704] Fix | Delete

} : 0)("padding-top:", space(2), ";padding-right:0;padding-left:0;padding-bottom:0;" + ( true ? "" : 0));

[37705] Fix | Delete

const AuxiliaryColorArtefactHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? {

[37706] Fix | Delete

target: "ez9hsf43"

[37707] Fix | Delete

} : 0)("padding-left:", space(4), ";padding-right:", space(4), ";" + ( true ? "" : 0));

[37708] Fix | Delete

const ColorInputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? {

[37709] Fix | Delete

target: "ez9hsf42"

[37710] Fix | Delete

} : 0)("padding-top:", space(4), ";padding-left:", space(4), ";padding-right:", space(3), ";padding-bottom:", space(5), ";" + ( true ? "" : 0));

[37711] Fix | Delete

const ColorfulWrapper = /*#__PURE__*/emotion_styled_base_browser_esm("div", true ? {

[37712] Fix | Delete

target: "ez9hsf41"

[37713] Fix | Delete

} : 0)(boxSizingReset, ";width:216px;.react-colorful{display:flex;flex-direction:column;align-items:center;width:216px;height:auto;}.react-colorful__saturation{width:100%;border-radius:0;height:216px;margin-bottom:", space(4), ";border-bottom:none;}.react-colorful__hue,.react-colorful__alpha{width:184px;height:16px;border-radius:16px;margin-bottom:", space(2), ";}.react-colorful__pointer{height:16px;width:16px;border:none;box-shadow:0 0 2px 0 rgba( 0, 0, 0, 0.25 );outline:2px solid transparent;}.react-colorful__pointer-fill{box-shadow:inset 0 0 0 ", config_values.borderWidthFocus, " #fff;}", interactiveHueStyles, ";" + ( true ? "" : 0));

[37714] Fix | Delete

const CopyButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? {

[37715] Fix | Delete

target: "ez9hsf40"

[37716] Fix | Delete

} : 0)("&&&&&{min-width:", space(6), ";padding:0;>svg{margin-right:0;}}" + ( true ? "" : 0));

[37717] Fix | Delete

[37718] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/copy.js

[37719] Fix | Delete

/**

[37720] Fix | Delete

* WordPress dependencies

[37721] Fix | Delete

*/

[37722] Fix | Delete

[37723] Fix | Delete

[37724] Fix | Delete

const copy_copy = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {

[37725] Fix | Delete

xmlns: "http://www.w3.org/2000/svg",

[37726] Fix | Delete

viewBox: "0 0 24 24",

[37727] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.Path, {

[37728] Fix | Delete

fillRule: "evenodd",

[37729] Fix | Delete

clipRule: "evenodd",

[37730] Fix | Delete

d: "M5 4.5h11a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V5a.5.5 0 0 1 .5-.5ZM3 5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm17 3v10.75c0 .69-.56 1.25-1.25 1.25H6v1.5h12.75a2.75 2.75 0 0 0 2.75-2.75V8H20Z"

[37731] Fix | Delete

})

[37732] Fix | Delete

});

[37733] Fix | Delete

/* harmony default export */ const library_copy = (copy_copy);

[37734] Fix | Delete

[37735] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-copy-button.js

[37736] Fix | Delete

/**

[37737] Fix | Delete

* WordPress dependencies

[37738] Fix | Delete

*/

[37739] Fix | Delete

[37740] Fix | Delete

[37741] Fix | Delete

[37742] Fix | Delete

[37743] Fix | Delete

[37744] Fix | Delete

/**

[37745] Fix | Delete

* Internal dependencies

[37746] Fix | Delete

*/

[37747] Fix | Delete

[37748] Fix | Delete

[37749] Fix | Delete

[37750] Fix | Delete

const ColorCopyButton = props => {

[37751] Fix | Delete

const {

[37752] Fix | Delete

color,

[37753] Fix | Delete

colorType

[37754] Fix | Delete

} = props;

[37755] Fix | Delete

const [copiedColor, setCopiedColor] = (0,external_wp_element_namespaceObject.useState)(null);

[37756] Fix | Delete

const copyTimer = (0,external_wp_element_namespaceObject.useRef)();

[37757] Fix | Delete

const copyRef = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(() => {

[37758] Fix | Delete

switch (colorType) {

[37759] Fix | Delete

case 'hsl':

[37760] Fix | Delete

{

[37761] Fix | Delete

return color.toHslString();

[37762] Fix | Delete

}

[37763] Fix | Delete

case 'rgb':

[37764] Fix | Delete

{

[37765] Fix | Delete

return color.toRgbString();

[37766] Fix | Delete

}

[37767] Fix | Delete

default:

[37768] Fix | Delete

case 'hex':

[37769] Fix | Delete

{

[37770] Fix | Delete

return color.toHex();

[37771] Fix | Delete

}

[37772] Fix | Delete

}

[37773] Fix | Delete

}, () => {

[37774] Fix | Delete

if (copyTimer.current) {

[37775] Fix | Delete

clearTimeout(copyTimer.current);

[37776] Fix | Delete

}

[37777] Fix | Delete

setCopiedColor(color.toHex());

[37778] Fix | Delete

copyTimer.current = setTimeout(() => {

[37779] Fix | Delete

setCopiedColor(null);

[37780] Fix | Delete

copyTimer.current = undefined;

[37781] Fix | Delete

}, 3000);

[37782] Fix | Delete

});

[37783] Fix | Delete

(0,external_wp_element_namespaceObject.useEffect)(() => {

[37784] Fix | Delete

// Clear copyTimer on component unmount.

[37785] Fix | Delete

return () => {

[37786] Fix | Delete

if (copyTimer.current) {

[37787] Fix | Delete

clearTimeout(copyTimer.current);

[37788] Fix | Delete

}

[37789] Fix | Delete

};

[37790] Fix | Delete

}, []);

[37791] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(tooltip, {

[37792] Fix | Delete

delay: 0,

[37793] Fix | Delete

hideOnClick: false,

[37794] Fix | Delete

text: copiedColor === color.toHex() ? (0,external_wp_i18n_namespaceObject.__)('Copied!') : (0,external_wp_i18n_namespaceObject.__)('Copy'),

[37795] Fix | Delete

children: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CopyButton, {

[37796] Fix | Delete

size: "small",

[37797] Fix | Delete

ref: copyRef,

[37798] Fix | Delete

icon: library_copy,

[37799] Fix | Delete

showTooltip: false

[37800] Fix | Delete

})

[37801] Fix | Delete

});

[37802] Fix | Delete

};

[37803] Fix | Delete

[37804] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/input-with-slider.js

[37805] Fix | Delete

/**

[37806] Fix | Delete

* Internal dependencies

[37807] Fix | Delete

*/

[37808] Fix | Delete

[37809] Fix | Delete

[37810] Fix | Delete

[37811] Fix | Delete

[37812] Fix | Delete

[37813] Fix | Delete

[37814] Fix | Delete

[37815] Fix | Delete

[37816] Fix | Delete

const InputWithSlider = ({

[37817] Fix | Delete

min,

[37818] Fix | Delete

max,

[37819] Fix | Delete

label,

[37820] Fix | Delete

abbreviation,

[37821] Fix | Delete

onChange,

[37822] Fix | Delete

value

[37823] Fix | Delete

}) => {

[37824] Fix | Delete

const onNumberControlChange = newValue => {

[37825] Fix | Delete

if (!newValue) {

[37826] Fix | Delete

onChange(0);

[37827] Fix | Delete

return;

[37828] Fix | Delete

}

[37829] Fix | Delete

if (typeof newValue === 'string') {

[37830] Fix | Delete

onChange(parseInt(newValue, 10));

[37831] Fix | Delete

return;

[37832] Fix | Delete

}

[37833] Fix | Delete

onChange(newValue);

[37834] Fix | Delete

};

[37835] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(h_stack_component, {

[37836] Fix | Delete

spacing: 4,

[37837] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(NumberControlWrapper, {

[37838] Fix | Delete

min: min,

[37839] Fix | Delete

max: max,

[37840] Fix | Delete

label: label,

[37841] Fix | Delete

hideLabelFromVision: true,

[37842] Fix | Delete

value: value,

[37843] Fix | Delete

onChange: onNumberControlChange,

[37844] Fix | Delete

prefix: /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(spacer_component, {

[37845] Fix | Delete

as: text_component,

[37846] Fix | Delete

paddingLeft: space(4),

[37847] Fix | Delete

color: COLORS.theme.accent,

[37848] Fix | Delete

lineHeight: 1,

[37849] Fix | Delete

children: abbreviation

[37850] Fix | Delete

}),

[37851] Fix | Delete

spinControls: "none",

[37852] Fix | Delete

size: "__unstable-large"

[37853] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(styles_RangeControl, {

[37854] Fix | Delete

__nextHasNoMarginBottom: true,

[37855] Fix | Delete

label: label,

[37856] Fix | Delete

hideLabelFromVision: true,

[37857] Fix | Delete

min: min,

[37858] Fix | Delete

max: max,

[37859] Fix | Delete

value: value

[37860] Fix | Delete

// @ts-expect-error

[37861] Fix | Delete

// See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185

[37862] Fix | Delete

,

[37863] Fix | Delete

onChange: onChange,

[37864] Fix | Delete

withInputField: false

[37865] Fix | Delete

})]

[37866] Fix | Delete

});

[37867] Fix | Delete

};

[37868] Fix | Delete

[37869] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/rgb-input.js

[37870] Fix | Delete

/**

[37871] Fix | Delete

* External dependencies

[37872] Fix | Delete

*/

[37873] Fix | Delete

[37874] Fix | Delete

[37875] Fix | Delete

/**

[37876] Fix | Delete

* Internal dependencies

[37877] Fix | Delete

*/

[37878] Fix | Delete

[37879] Fix | Delete

[37880] Fix | Delete

[37881] Fix | Delete

[37882] Fix | Delete

const RgbInput = ({

[37883] Fix | Delete

color,

[37884] Fix | Delete

onChange,

[37885] Fix | Delete

enableAlpha

[37886] Fix | Delete

}) => {

[37887] Fix | Delete

const {

[37888] Fix | Delete

r,

[37889] Fix | Delete

g,

[37890] Fix | Delete

b,

[37891] Fix | Delete

a

[37892] Fix | Delete

} = color.toRgb();

[37893] Fix | Delete

return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {

[37894] Fix | Delete

children: [/*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, {

[37895] Fix | Delete

min: 0,

[37896] Fix | Delete

max: 255,

[37897] Fix | Delete

label: "Red",

[37898] Fix | Delete

abbreviation: "R",

[37899] Fix | Delete

value: r,

[37900] Fix | Delete

onChange: nextR => onChange(w({

[37901] Fix | Delete

r: nextR,

[37902] Fix | Delete

g,

[37903] Fix | Delete

b,

[37904] Fix | Delete

a

[37905] Fix | Delete

}))

[37906] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, {

[37907] Fix | Delete

min: 0,

[37908] Fix | Delete

max: 255,

[37909] Fix | Delete

label: "Green",

[37910] Fix | Delete

abbreviation: "G",

[37911] Fix | Delete

value: g,

[37912] Fix | Delete

onChange: nextG => onChange(w({

[37913] Fix | Delete

r,

[37914] Fix | Delete

g: nextG,

[37915] Fix | Delete

b,

[37916] Fix | Delete

a

[37917] Fix | Delete

}))

[37918] Fix | Delete

}), /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, {

[37919] Fix | Delete

min: 0,

[37920] Fix | Delete

max: 255,

[37921] Fix | Delete

label: "Blue",

[37922] Fix | Delete

abbreviation: "B",

[37923] Fix | Delete

value: b,

[37924] Fix | Delete

onChange: nextB => onChange(w({

[37925] Fix | Delete

r,

[37926] Fix | Delete

g,

[37927] Fix | Delete

b: nextB,

[37928] Fix | Delete

a

[37929] Fix | Delete

}))

[37930] Fix | Delete

}), enableAlpha && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(InputWithSlider, {

[37931] Fix | Delete

min: 0,

[37932] Fix | Delete

max: 100,

[37933] Fix | Delete

label: "Alpha",

[37934] Fix | Delete

abbreviation: "A",

[37935] Fix | Delete

value: Math.trunc(a * 100),

[37936] Fix | Delete

onChange: nextA => onChange(w({

[37937] Fix | Delete

r,

[37938] Fix | Delete

g,

[37939] Fix | Delete

b,

[37940] Fix | Delete

a: nextA / 100

[37941] Fix | Delete

}))

[37942] Fix | Delete

})]

[37943] Fix | Delete

});

[37944] Fix | Delete

};

[37945] Fix | Delete

[37946] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hsl-input.js

[37947] Fix | Delete

/**

[37948] Fix | Delete

* External dependencies

[37949] Fix | Delete

*/

[37950] Fix | Delete

[37951] Fix | Delete

[37952] Fix | Delete

/**

[37953] Fix | Delete

* WordPress dependencies

[37954] Fix | Delete

*/

[37955] Fix | Delete

[37956] Fix | Delete

[37957] Fix | Delete

/**

[37958] Fix | Delete

* Internal dependencies

[37959] Fix | Delete

*/

[37960] Fix | Delete

[37961] Fix | Delete

[37962] Fix | Delete

[37963] Fix | Delete

[37964] Fix | Delete

const HslInput = ({

[37965] Fix | Delete

color,

[37966] Fix | Delete

onChange,

[37967] Fix | Delete

enableAlpha

[37968] Fix | Delete

}) => {

[37969] Fix | Delete

const colorPropHSLA = (0,external_wp_element_namespaceObject.useMemo)(() => color.toHsl(), [color]);

[37970] Fix | Delete

const [internalHSLA, setInternalHSLA] = (0,external_wp_element_namespaceObject.useState)({

[37971] Fix | Delete

...colorPropHSLA

[37972] Fix | Delete

});

[37973] Fix | Delete

const isInternalColorSameAsReceivedColor = color.isEqual(w(internalHSLA));

[37974] Fix | Delete

(0,external_wp_element_namespaceObject.useEffect)(() => {

[37975] Fix | Delete

if (!isInternalColorSameAsReceivedColor) {

[37976] Fix | Delete

// Keep internal HSLA color up to date with the received color prop

[37977] Fix | Delete

setInternalHSLA(colorPropHSLA);

[37978] Fix | Delete

}

[37979] Fix | Delete

}, [colorPropHSLA, isInternalColorSameAsReceivedColor]);

[37980] Fix | Delete

[37981] Fix | Delete

// If the internal color is equal to the received color prop, we can use the

[37982] Fix | Delete

// HSLA values from the local state which, compared to the received color prop,

[37983] Fix | Delete

// retain more details about the actual H and S values that the user selected,

[37984] Fix | Delete

// and thus allow for better UX when interacting with the H and S sliders.

[37985] Fix | Delete

const colorValue = isInternalColorSameAsReceivedColor ? internalHSLA : colorPropHSLA;

[37986] Fix | Delete

const updateHSLAValue = partialNewValue => {

[37987] Fix | Delete

const nextOnChangeValue = w({

[37988] Fix | Delete

...colorValue,

[37989] Fix | Delete

...partialNewValue

[37990] Fix | Delete

});

[37991] Fix | Delete

[37992] Fix | Delete

// Fire `onChange` only if the resulting color is different from the

[37993] Fix | Delete

// current one.

[37994] Fix | Delete

// Otherwise, update the internal HSLA color to cause a re-render.

[37995] Fix | Delete

if (!color.isEqual(nextOnChangeValue)) {

[37996] Fix | Delete

onChange(nextOnChangeValue);

[37997] Fix | Delete

} else {

[37998] Fix | Delete

setInternalHSLA(prevHSLA => ({

[37999] Fix | Delete