'shift+left': function shiftLeft() {

[23000] Fix | Delete

return _this2.saturate(-0.1);

[23001] Fix | Delete

},

[23002] Fix | Delete

home: function home() {

[23003] Fix | Delete

return _this2.saturate(-1);

[23004] Fix | Delete

}

[23005] Fix | Delete

};

[23006] Fix | Delete

/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */

[23007] Fix | Delete

[23008] Fix | Delete

return Object(external_wp_element_["createElement"])(keyboard_shortcuts, {

[23009] Fix | Delete

shortcuts: shortcuts

[23010] Fix | Delete

}, Object(external_wp_element_["createElement"])("div", {

[23011] Fix | Delete

style: {

[23012] Fix | Delete

background: "hsl(".concat(hsl.h, ",100%, 50%)")

[23013] Fix | Delete

},

[23014] Fix | Delete

className: "components-color-picker__saturation-color",

[23015] Fix | Delete

ref: this.container,

[23016] Fix | Delete

onMouseDown: this.handleMouseDown,

[23017] Fix | Delete

onTouchMove: this.handleChange,

[23018] Fix | Delete

onTouchStart: this.handleChange,

[23019] Fix | Delete

role: "application"

[23020] Fix | Delete

}, Object(external_wp_element_["createElement"])("div", {

[23021] Fix | Delete

className: "components-color-picker__saturation-white"

[23022] Fix | Delete

}), Object(external_wp_element_["createElement"])("div", {

[23023] Fix | Delete

className: "components-color-picker__saturation-black"

[23024] Fix | Delete

}), Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], {

[23025] Fix | Delete

"aria-label": Object(external_wp_i18n_["__"])('Choose a shade'),

[23026] Fix | Delete

"aria-describedby": "color-picker-saturation-".concat(instanceId),

[23027] Fix | Delete

className: "components-color-picker__saturation-pointer",

[23028] Fix | Delete

style: pointerLocation,

[23029] Fix | Delete

onKeyDown: this.preventKeyEvents

[23030] Fix | Delete

}), Object(external_wp_element_["createElement"])(visually_hidden["a" /* default */], {

[23031] Fix | Delete

id: "color-picker-saturation-".concat(instanceId)

[23032] Fix | Delete

}, Object(external_wp_i18n_["__"])('Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.'))));

[23033] Fix | Delete

/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */

[23034] Fix | Delete

}

[23035] Fix | Delete

}]);

[23036] Fix | Delete

[23037] Fix | Delete

return Saturation;

[23038] Fix | Delete

}(external_wp_element_["Component"]);

[23039] Fix | Delete

/* harmony default export */ var saturation = (Object(external_wp_compose_["compose"])(external_wp_compose_["pure"], external_wp_compose_["withInstanceId"])(saturation_Saturation));

[23040] Fix | Delete

[23041] Fix | Delete

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

[23042] Fix | Delete

[23043] Fix | Delete

[23044] Fix | Delete

[23045] Fix | Delete

[23046] Fix | Delete

[23047] Fix | Delete

[23048] Fix | Delete

[23049] Fix | Delete

[23050] Fix | Delete

[23051] Fix | Delete

function color_picker_createSuper(Derived) { var hasNativeReflectConstruct = color_picker_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = Object(getPrototypeOf["a" /* default */])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = Object(getPrototypeOf["a" /* default */])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return Object(possibleConstructorReturn["a" /* default */])(this, result); }; }

[23052] Fix | Delete

[23053] Fix | Delete

function color_picker_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

[23054] Fix | Delete

[23055] Fix | Delete

function color_picker_ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

[23056] Fix | Delete

[23057] Fix | Delete

function color_picker_objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { color_picker_ownKeys(Object(source), true).forEach(function (key) { Object(esm_defineProperty["a" /* default */])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { color_picker_ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

[23058] Fix | Delete

[23059] Fix | Delete

/**

[23060] Fix | Delete

* Parts of this source were derived and modified from react-color,

[23061] Fix | Delete

* released under the MIT license.

[23062] Fix | Delete

*

[23063] Fix | Delete

* https://github.com/casesandberg/react-color/

[23064] Fix | Delete

*

[23065] Fix | Delete

* Copyright (c) 2015 Case Sandberg

[23066] Fix | Delete

*

[23067] Fix | Delete

* Permission is hereby granted, free of charge, to any person obtaining a copy

[23068] Fix | Delete

* of this software and associated documentation files (the "Software"), to deal

[23069] Fix | Delete

* in the Software without restriction, including without limitation the rights

[23070] Fix | Delete

* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

[23071] Fix | Delete

* copies of the Software, and to permit persons to whom the Software is

[23072] Fix | Delete

* furnished to do so, subject to the following conditions:

[23073] Fix | Delete

*

[23074] Fix | Delete

* The above copyright notice and this permission notice shall be included in

[23075] Fix | Delete

* all copies or substantial portions of the Software.

[23076] Fix | Delete

*

[23077] Fix | Delete

* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

[23078] Fix | Delete

* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

[23079] Fix | Delete

* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

[23080] Fix | Delete

* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

[23081] Fix | Delete

* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

[23082] Fix | Delete

* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN

[23083] Fix | Delete

* THE SOFTWARE.

[23084] Fix | Delete

*/

[23085] Fix | Delete

[23086] Fix | Delete

/**

[23087] Fix | Delete

* External dependencies

[23088] Fix | Delete

*/

[23089] Fix | Delete

[23090] Fix | Delete

[23091] Fix | Delete

/**

[23092] Fix | Delete

* WordPress dependencies

[23093] Fix | Delete

*/

[23094] Fix | Delete

[23095] Fix | Delete

[23096] Fix | Delete

/**

[23097] Fix | Delete

* Internal dependencies

[23098] Fix | Delete

*/

[23099] Fix | Delete

[23100] Fix | Delete

[23101] Fix | Delete

[23102] Fix | Delete

[23103] Fix | Delete

[23104] Fix | Delete

[23105] Fix | Delete

[23106] Fix | Delete

var toLowerCase = function toLowerCase(value) {

[23107] Fix | Delete

return String(value).toLowerCase();

[23108] Fix | Delete

};

[23109] Fix | Delete

[23110] Fix | Delete

var color_picker_isValueEmpty = function isValueEmpty(data) {

[23111] Fix | Delete

if (data.source === 'hex' && !data.hex) {

[23112] Fix | Delete

return true;

[23113] Fix | Delete

} else if (data.source === 'hsl' && (!data.h || !data.s || !data.l)) {

[23114] Fix | Delete

return true;

[23115] Fix | Delete

} else if (data.source === 'rgb' && (!data.r || !data.g || !data.b) && (!data.h || !data.s || !data.v || !data.a) && (!data.h || !data.s || !data.l || !data.a)) {

[23116] Fix | Delete

return true;

[23117] Fix | Delete

}

[23118] Fix | Delete

[23119] Fix | Delete

return false;

[23120] Fix | Delete

};

[23121] Fix | Delete

[23122] Fix | Delete

var color_picker_isValidColor = function isValidColor(colors) {

[23123] Fix | Delete

return colors.hex ? isValidHex(colors.hex) : simpleCheckForValidColor(colors);

[23124] Fix | Delete

};

[23125] Fix | Delete

/**

[23126] Fix | Delete

* Function that creates the new color object

[23127] Fix | Delete

* from old data and the new value.

[23128] Fix | Delete

*

[23129] Fix | Delete

* @param {Object} oldColors The old color object.

[23130] Fix | Delete

* @param {string} oldColors.hex

[23131] Fix | Delete

* @param {Object} oldColors.rgb

[23132] Fix | Delete

* @param {number} oldColors.rgb.r

[23133] Fix | Delete

* @param {number} oldColors.rgb.g

[23134] Fix | Delete

* @param {number} oldColors.rgb.b

[23135] Fix | Delete

* @param {number} oldColors.rgb.a

[23136] Fix | Delete

* @param {Object} oldColors.hsl

[23137] Fix | Delete

* @param {number} oldColors.hsl.h

[23138] Fix | Delete

* @param {number} oldColors.hsl.s

[23139] Fix | Delete

* @param {number} oldColors.hsl.l

[23140] Fix | Delete

* @param {number} oldColors.hsl.a

[23141] Fix | Delete

* @param {string} oldColors.draftHex Same format as oldColors.hex

[23142] Fix | Delete

* @param {Object} oldColors.draftRgb Same format as oldColors.rgb

[23143] Fix | Delete

* @param {Object} oldColors.draftHsl Same format as oldColors.hsl

[23144] Fix | Delete

* @param {Object} data Data containing the new value to update.

[23145] Fix | Delete

* @param {Object} data.source One of `hex`, `rgb`, `hsl`.

[23146] Fix | Delete

* @param {string|number} data.value Value to update.

[23147] Fix | Delete

* @param {string} data.valueKey Depends on `data.source` values:

[23148] Fix | Delete

* - when source = `rgb`, valuKey can be `r`, `g`, `b`, or `a`.

[23149] Fix | Delete

* - when source = `hsl`, valuKey can be `h`, `s`, `l`, or `a`.

[23150] Fix | Delete

* @return {Object} A new color object for a specific source. For example:

[23151] Fix | Delete

* { source: 'rgb', r: 1, g: 2, b:3, a:0 }

[23152] Fix | Delete

*/

[23153] Fix | Delete

[23154] Fix | Delete

[23155] Fix | Delete

var color_picker_dataToColors = function dataToColors(oldColors, _ref) {

[23156] Fix | Delete

var source = _ref.source,

[23157] Fix | Delete

valueKey = _ref.valueKey,

[23158] Fix | Delete

value = _ref.value;

[23159] Fix | Delete

[23160] Fix | Delete

if (source === 'hex') {

[23161] Fix | Delete

return Object(esm_defineProperty["a" /* default */])({

[23162] Fix | Delete

source: source

[23163] Fix | Delete

}, source, value);

[23164] Fix | Delete

}

[23165] Fix | Delete

[23166] Fix | Delete

return color_picker_objectSpread({

[23167] Fix | Delete

source: source

[23168] Fix | Delete

}, color_picker_objectSpread(color_picker_objectSpread({}, oldColors[source]), Object(esm_defineProperty["a" /* default */])({}, valueKey, value)));

[23169] Fix | Delete

};

[23170] Fix | Delete

[23171] Fix | Delete

var color_picker_ColorPicker = /*#__PURE__*/function (_Component) {

[23172] Fix | Delete

Object(inherits["a" /* default */])(ColorPicker, _Component);

[23173] Fix | Delete

[23174] Fix | Delete

var _super = color_picker_createSuper(ColorPicker);

[23175] Fix | Delete

[23176] Fix | Delete

function ColorPicker(_ref3) {

[23177] Fix | Delete

var _this;

[23178] Fix | Delete

[23179] Fix | Delete

var _ref3$color = _ref3.color,

[23180] Fix | Delete

color = _ref3$color === void 0 ? '0071a1' : _ref3$color;

[23181] Fix | Delete

[23182] Fix | Delete

Object(classCallCheck["a" /* default */])(this, ColorPicker);

[23183] Fix | Delete

[23184] Fix | Delete

_this = _super.apply(this, arguments);

[23185] Fix | Delete

var colors = colorToState(color);

[23186] Fix | Delete

_this.state = color_picker_objectSpread(color_picker_objectSpread({}, colors), {}, {

[23187] Fix | Delete

draftHex: toLowerCase(colors.hex),

[23188] Fix | Delete

draftRgb: colors.rgb,

[23189] Fix | Delete

draftHsl: colors.hsl

[23190] Fix | Delete

});

[23191] Fix | Delete

_this.commitValues = _this.commitValues.bind(Object(assertThisInitialized["a" /* default */])(_this));

[23192] Fix | Delete

_this.setDraftValues = _this.setDraftValues.bind(Object(assertThisInitialized["a" /* default */])(_this));

[23193] Fix | Delete

_this.resetDraftValues = _this.resetDraftValues.bind(Object(assertThisInitialized["a" /* default */])(_this));

[23194] Fix | Delete

_this.handleInputChange = _this.handleInputChange.bind(Object(assertThisInitialized["a" /* default */])(_this));

[23195] Fix | Delete

return _this;

[23196] Fix | Delete

}

[23197] Fix | Delete

[23198] Fix | Delete

Object(createClass["a" /* default */])(ColorPicker, [{

[23199] Fix | Delete

key: "commitValues",

[23200] Fix | Delete

value: function commitValues(data) {

[23201] Fix | Delete

var _this$props = this.props,

[23202] Fix | Delete

oldHue = _this$props.oldHue,

[23203] Fix | Delete

_this$props$onChangeC = _this$props.onChangeComplete,

[23204] Fix | Delete

onChangeComplete = _this$props$onChangeC === void 0 ? external_lodash_["noop"] : _this$props$onChangeC;

[23205] Fix | Delete

[23206] Fix | Delete

if (color_picker_isValidColor(data)) {

[23207] Fix | Delete

var colors = colorToState(data, data.h || oldHue);

[23208] Fix | Delete

this.setState(color_picker_objectSpread(color_picker_objectSpread({}, colors), {}, {

[23209] Fix | Delete

draftHex: toLowerCase(colors.hex),

[23210] Fix | Delete

draftHsl: colors.hsl,

[23211] Fix | Delete

draftRgb: colors.rgb

[23212] Fix | Delete

}), Object(external_lodash_["debounce"])(Object(external_lodash_["partial"])(onChangeComplete, colors), 100));

[23213] Fix | Delete

}

[23214] Fix | Delete

}

[23215] Fix | Delete

}, {

[23216] Fix | Delete

key: "resetDraftValues",

[23217] Fix | Delete

value: function resetDraftValues() {

[23218] Fix | Delete

this.setState({

[23219] Fix | Delete

draftHex: this.state.hex,

[23220] Fix | Delete

draftHsl: this.state.hsl,

[23221] Fix | Delete

draftRgb: this.state.rgb

[23222] Fix | Delete

});

[23223] Fix | Delete

}

[23224] Fix | Delete

}, {

[23225] Fix | Delete

key: "setDraftValues",

[23226] Fix | Delete

value: function setDraftValues(data) {

[23227] Fix | Delete

switch (data.source) {

[23228] Fix | Delete

case 'hex':

[23229] Fix | Delete

this.setState({

[23230] Fix | Delete

draftHex: toLowerCase(data.hex)

[23231] Fix | Delete

});

[23232] Fix | Delete

break;

[23233] Fix | Delete

[23234] Fix | Delete

case 'rgb':

[23235] Fix | Delete

this.setState({

[23236] Fix | Delete

draftRgb: data

[23237] Fix | Delete

});

[23238] Fix | Delete

break;

[23239] Fix | Delete

[23240] Fix | Delete

case 'hsl':

[23241] Fix | Delete

this.setState({

[23242] Fix | Delete

draftHsl: data

[23243] Fix | Delete

});

[23244] Fix | Delete

break;

[23245] Fix | Delete

}

[23246] Fix | Delete

}

[23247] Fix | Delete

}, {

[23248] Fix | Delete

key: "handleInputChange",

[23249] Fix | Delete

value: function handleInputChange(data) {

[23250] Fix | Delete

switch (data.state) {

[23251] Fix | Delete

case 'reset':

[23252] Fix | Delete

this.resetDraftValues();

[23253] Fix | Delete

break;

[23254] Fix | Delete

[23255] Fix | Delete

case 'commit':

[23256] Fix | Delete

var colors = color_picker_dataToColors(this.state, data);

[23257] Fix | Delete

[23258] Fix | Delete

if (!color_picker_isValueEmpty(colors)) {

[23259] Fix | Delete

this.commitValues(colors);

[23260] Fix | Delete

}

[23261] Fix | Delete

[23262] Fix | Delete

break;

[23263] Fix | Delete

[23264] Fix | Delete

case 'draft':

[23265] Fix | Delete

this.setDraftValues(color_picker_dataToColors(this.state, data));

[23266] Fix | Delete

break;

[23267] Fix | Delete

}

[23268] Fix | Delete

}

[23269] Fix | Delete

}, {

[23270] Fix | Delete

key: "render",

[23271] Fix | Delete

value: function render() {

[23272] Fix | Delete

var _this$props2 = this.props,

[23273] Fix | Delete

className = _this$props2.className,

[23274] Fix | Delete

disableAlpha = _this$props2.disableAlpha;

[23275] Fix | Delete

var _this$state = this.state,

[23276] Fix | Delete

color = _this$state.color,

[23277] Fix | Delete

hsl = _this$state.hsl,

[23278] Fix | Delete

hsv = _this$state.hsv,

[23279] Fix | Delete

rgb = _this$state.rgb,

[23280] Fix | Delete

draftHex = _this$state.draftHex,

[23281] Fix | Delete

draftHsl = _this$state.draftHsl,

[23282] Fix | Delete

draftRgb = _this$state.draftRgb;

[23283] Fix | Delete

var classes = classnames_default()(className, {

[23284] Fix | Delete

'components-color-picker': true,

[23285] Fix | Delete

'is-alpha-disabled': disableAlpha,

[23286] Fix | Delete

'is-alpha-enabled': !disableAlpha

[23287] Fix | Delete

});

[23288] Fix | Delete

return Object(external_wp_element_["createElement"])("div", {

[23289] Fix | Delete

className: classes

[23290] Fix | Delete

}, Object(external_wp_element_["createElement"])("div", {

[23291] Fix | Delete

className: "components-color-picker__saturation"

[23292] Fix | Delete

}, Object(external_wp_element_["createElement"])(saturation, {

[23293] Fix | Delete

hsl: hsl,

[23294] Fix | Delete

hsv: hsv,

[23295] Fix | Delete

onChange: this.commitValues

[23296] Fix | Delete

})), Object(external_wp_element_["createElement"])("div", {

[23297] Fix | Delete

className: "components-color-picker__body"

[23298] Fix | Delete

}, Object(external_wp_element_["createElement"])("div", {

[23299] Fix | Delete

className: "components-color-picker__controls"

[23300] Fix | Delete

}, Object(external_wp_element_["createElement"])("div", {

[23301] Fix | Delete

className: "components-color-picker__swatch"

[23302] Fix | Delete

}, Object(external_wp_element_["createElement"])("div", {

[23303] Fix | Delete

className: "components-color-picker__active",

[23304] Fix | Delete

style: {

[23305] Fix | Delete

backgroundColor: color && color.toRgbString()

[23306] Fix | Delete

}

[23307] Fix | Delete

})), Object(external_wp_element_["createElement"])("div", {

[23308] Fix | Delete

className: "components-color-picker__toggles"

[23309] Fix | Delete

}, Object(external_wp_element_["createElement"])(hue, {

[23310] Fix | Delete

hsl: hsl,

[23311] Fix | Delete

onChange: this.commitValues

[23312] Fix | Delete

}), disableAlpha ? null : Object(external_wp_element_["createElement"])(color_picker_alpha, {

[23313] Fix | Delete

rgb: rgb,

[23314] Fix | Delete

hsl: hsl,

[23315] Fix | Delete

onChange: this.commitValues

[23316] Fix | Delete

}))), Object(external_wp_element_["createElement"])(inputs, {

[23317] Fix | Delete

rgb: draftRgb,

[23318] Fix | Delete

hsl: draftHsl,

[23319] Fix | Delete

hex: draftHex,

[23320] Fix | Delete

onChange: this.handleInputChange,

[23321] Fix | Delete

disableAlpha: disableAlpha

[23322] Fix | Delete

})));

[23323] Fix | Delete

}

[23324] Fix | Delete

}]);

[23325] Fix | Delete

[23326] Fix | Delete

return ColorPicker;

[23327] Fix | Delete

}(external_wp_element_["Component"]);

[23328] Fix | Delete

[23329] Fix | Delete

[23330] Fix | Delete

[23331] Fix | Delete

// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-edit/index.js

[23332] Fix | Delete

[23333] Fix | Delete

[23334] Fix | Delete

[23335] Fix | Delete

[23336] Fix | Delete

/**

[23337] Fix | Delete

* External dependencies

[23338] Fix | Delete

*/

[23339] Fix | Delete

[23340] Fix | Delete

[23341] Fix | Delete

/**

[23342] Fix | Delete

* WordPress dependencies

[23343] Fix | Delete

*/

[23344] Fix | Delete

[23345] Fix | Delete

[23346] Fix | Delete

[23347] Fix | Delete

[23348] Fix | Delete

/**

[23349] Fix | Delete

* Internal dependencies

[23350] Fix | Delete

*/

[23351] Fix | Delete

[23352] Fix | Delete

[23353] Fix | Delete

[23354] Fix | Delete

[23355] Fix | Delete

[23356] Fix | Delete

[23357] Fix | Delete

[23358] Fix | Delete

[23359] Fix | Delete

function DropdownOpenOnMount(_ref) {

[23360] Fix | Delete

var shouldOpen = _ref.shouldOpen,

[23361] Fix | Delete

isOpen = _ref.isOpen,

[23362] Fix | Delete

onToggle = _ref.onToggle;

[23363] Fix | Delete

Object(external_wp_element_["useEffect"])(function () {

[23364] Fix | Delete

if (shouldOpen && !isOpen) {

[23365] Fix | Delete

onToggle();

[23366] Fix | Delete

}

[23367] Fix | Delete

}, []);

[23368] Fix | Delete

return null;

[23369] Fix | Delete

}

[23370] Fix | Delete

[23371] Fix | Delete

function ColorOption(_ref2) {

[23372] Fix | Delete

var color = _ref2.color,

[23373] Fix | Delete

name = _ref2.name,

[23374] Fix | Delete

slug = _ref2.slug,

[23375] Fix | Delete

_onChange = _ref2.onChange,

[23376] Fix | Delete

onRemove = _ref2.onRemove,

[23377] Fix | Delete

onConfirm = _ref2.onConfirm,

[23378] Fix | Delete

_ref2$confirmLabel = _ref2.confirmLabel,

[23379] Fix | Delete

confirmLabel = _ref2$confirmLabel === void 0 ? Object(external_wp_i18n_["__"])('OK') : _ref2$confirmLabel,

[23380] Fix | Delete

_ref2$isEditingNameOn = _ref2.isEditingNameOnMount,

[23381] Fix | Delete

isEditingNameOnMount = _ref2$isEditingNameOn === void 0 ? false : _ref2$isEditingNameOn,

[23382] Fix | Delete

_ref2$isEditingColorO = _ref2.isEditingColorOnMount,

[23383] Fix | Delete

isEditingColorOnMount = _ref2$isEditingColorO === void 0 ? false : _ref2$isEditingColorO,

[23384] Fix | Delete

onCancel = _ref2.onCancel,

[23385] Fix | Delete

_ref2$immutableColorS = _ref2.immutableColorSlugs,

[23386] Fix | Delete

immutableColorSlugs = _ref2$immutableColorS === void 0 ? [] : _ref2$immutableColorS;

[23387] Fix | Delete

[23388] Fix | Delete

var _useState = Object(external_wp_element_["useState"])(false),

[23389] Fix | Delete

_useState2 = Object(slicedToArray["a" /* default */])(_useState, 2),

[23390] Fix | Delete

isHover = _useState2[0],

[23391] Fix | Delete

setIsHover = _useState2[1];

[23392] Fix | Delete

[23393] Fix | Delete

var _useState3 = Object(external_wp_element_["useState"])(false),

[23394] Fix | Delete

_useState4 = Object(slicedToArray["a" /* default */])(_useState3, 2),

[23395] Fix | Delete

isFocused = _useState4[0],

[23396] Fix | Delete

setIsFocused = _useState4[1];

[23397] Fix | Delete

[23398] Fix | Delete

var _useState5 = Object(external_wp_element_["useState"])(isEditingNameOnMount),

[23399] Fix | Delete

_useState6 = Object(slicedToArray["a" /* default */])(_useState5, 2),

[23400] Fix | Delete

isEditingName = _useState6[0],

[23401] Fix | Delete

setIsEditingName = _useState6[1];

[23402] Fix | Delete

[23403] Fix | Delete

var _useState7 = Object(external_wp_element_["useState"])(false),

[23404] Fix | Delete

_useState8 = Object(slicedToArray["a" /* default */])(_useState7, 2),

[23405] Fix | Delete

isShowingAdvancedPanel = _useState8[0],

[23406] Fix | Delete

setIsShowingAdvancedPanel = _useState8[1];

[23407] Fix | Delete

[23408] Fix | Delete

var isShowingControls = (isHover || isFocused || isEditingName || isShowingAdvancedPanel) && !immutableColorSlugs.includes(slug);

[23409] Fix | Delete

return Object(external_wp_element_["createElement"])("div", {

[23410] Fix | Delete

tabIndex: 0,

[23411] Fix | Delete

className: classnames_default()('components-color-edit__color-option', {

[23412] Fix | Delete

'is-hover': isHover && !isEditingName && !isShowingAdvancedPanel

[23413] Fix | Delete

}),

[23414] Fix | Delete

onMouseEnter: function onMouseEnter() {

[23415] Fix | Delete

return setIsHover(true);

[23416] Fix | Delete

},

[23417] Fix | Delete

onMouseLeave: function onMouseLeave() {

[23418] Fix | Delete

return setIsHover(false);

[23419] Fix | Delete

},

[23420] Fix | Delete

onFocus: function onFocus() {

[23421] Fix | Delete

return setIsFocused(true);

[23422] Fix | Delete

},

[23423] Fix | Delete

onBlur: function onBlur() {

[23424] Fix | Delete

return setIsFocused(false);

[23425] Fix | Delete

},

[23426] Fix | Delete

"aria-label": name ? // translators: %s: The name of the color e.g: "vivid red".

[23427] Fix | Delete

Object(external_wp_i18n_["sprintf"])(Object(external_wp_i18n_["__"])('Color: %s'), name) : // translators: %s: color hex code e.g: "#f00".

[23428] Fix | Delete

Object(external_wp_i18n_["sprintf"])(Object(external_wp_i18n_["__"])('Color code: %s'), color)

[23429] Fix | Delete

}, Object(external_wp_element_["createElement"])("div", {

[23430] Fix | Delete

className: "components-color-edit__color-option-main-area"

[23431] Fix | Delete

}, Object(external_wp_element_["createElement"])(Dropdown, {

[23432] Fix | Delete

renderToggle: function renderToggle(_ref3) {

[23433] Fix | Delete

var isOpen = _ref3.isOpen,

[23434] Fix | Delete

onToggle = _ref3.onToggle;

[23435] Fix | Delete

return Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(DropdownOpenOnMount, {

[23436] Fix | Delete

shouldOpen: isEditingColorOnMount,

[23437] Fix | Delete

isOpen: isOpen,

[23438] Fix | Delete

onToggle: onToggle

[23439] Fix | Delete

}), Object(external_wp_element_["createElement"])(CircularOptionPicker.Option, {

[23440] Fix | Delete

style: {

[23441] Fix | Delete

backgroundColor: color,

[23442] Fix | Delete

color: color

[23443] Fix | Delete

},

[23444] Fix | Delete

"aria-expanded": isOpen,

[23445] Fix | Delete

"aria-haspopup": "true",

[23446] Fix | Delete

onClick: onToggle,

[23447] Fix | Delete

"aria-label": Object(external_wp_i18n_["__"])('Edit color value')

[23448] Fix | Delete

}));

[23449] Fix | Delete

},

[23450] Fix | Delete

renderContent: function renderContent() {

[23451] Fix | Delete

return Object(external_wp_element_["createElement"])(color_picker_ColorPicker, {

[23452] Fix | Delete

color: color,

[23453] Fix | Delete

onChangeComplete: function onChangeComplete(newColor) {

[23454] Fix | Delete

return _onChange({

[23455] Fix | Delete

color: newColor.hex,

[23456] Fix | Delete

slug: slug,

[23457] Fix | Delete

name: name

[23458] Fix | Delete

});

[23459] Fix | Delete

},

[23460] Fix | Delete

disableAlpha: true

[23461] Fix | Delete

});

[23462] Fix | Delete

}

[23463] Fix | Delete

}), !isEditingName && Object(external_wp_element_["createElement"])("div", {

[23464] Fix | Delete

className: "components-color-edit__color-option-color-name"

[23465] Fix | Delete

}, name), isEditingName && Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(text_control, {

[23466] Fix | Delete

className: "components-color-edit__color-option-color-name-input",

[23467] Fix | Delete

hideLabelFromVision: true,

[23468] Fix | Delete

onChange: function onChange(newColorName) {

[23469] Fix | Delete

return _onChange({

[23470] Fix | Delete

color: color,

[23471] Fix | Delete

slug: Object(external_lodash_["kebabCase"])(newColorName),

[23472] Fix | Delete

name: newColorName

[23473] Fix | Delete

});

[23474] Fix | Delete

},

[23475] Fix | Delete

label: Object(external_wp_i18n_["__"])('Color name'),

[23476] Fix | Delete

placeholder: Object(external_wp_i18n_["__"])('Name'),

[23477] Fix | Delete

value: name

[23478] Fix | Delete

}), Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], {

[23479] Fix | Delete

onClick: function onClick() {

[23480] Fix | Delete

setIsEditingName(false);

[23481] Fix | Delete

setIsFocused(false);

[23482] Fix | Delete

[23483] Fix | Delete

if (onConfirm) {

[23484] Fix | Delete

onConfirm();

[23485] Fix | Delete

}

[23486] Fix | Delete

},

[23487] Fix | Delete

isPrimary: true

[23488] Fix | Delete

}, confirmLabel)), !isEditingName && Object(external_wp_element_["createElement"])(external_wp_element_["Fragment"], null, Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], {

[23489] Fix | Delete

className: classnames_default()({

[23490] Fix | Delete

'components-color-edit__hidden-control': !isShowingControls

[23491] Fix | Delete

}),

[23492] Fix | Delete

icon: edit["a" /* default */],

[23493] Fix | Delete

label: Object(external_wp_i18n_["__"])('Edit color name'),

[23494] Fix | Delete

onClick: function onClick() {

[23495] Fix | Delete

return setIsEditingName(true);

[23496] Fix | Delete

}

[23497] Fix | Delete

}), Object(external_wp_element_["createElement"])(build_module_button["a" /* default */], {

[23498] Fix | Delete

className: classnames_default()({

[23499] Fix | Delete