var distance = directionBaseValue * modifier * directionModifier;
_nextValue = roundClamp(add(currentValue, distance), min, max, modifier);
state.value = _nextValue;
* Handles commit (ENTER key press or on blur if isPressEnterToChange)
if (type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT) {
state.value = roundClamp(currentValue, min, max);
return Object(external_wp_element_["createElement"])(number_control_styles_Input, Object(esm_extends["a" /* default */])({
autoComplete: autoComplete,
dragDirection: dragDirection,
hideHTMLArrows: hideHTMLArrows,
isDragEnabled: isDragEnabled,
__unstableStateReducer: state_composeStateReducers(numberControlStateReducer, stateReducer)
/* harmony default export */ var number_control = (Object(external_wp_element_["forwardRef"])(NumberControl));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/styles/angle-picker-control-styles.js
function angle_picker_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
var angle_picker_control_styles_Root = /*#__PURE__*/styled_base_browser_esm(flex_Flex, {
styles: "max-width:200px;"
var CircleRoot = styled_base_browser_esm("div", {
})("border-radius:50%;border:1px solid ", colors_color('ui.borderLight'), ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;" + ( true ? "" : undefined));
var CircleIndicatorWrapper = styled_base_browser_esm("div", {
label: "CircleIndicatorWrapper"
styles: "box-sizing:border-box;position:relative;width:100%;height:100%;"
var CircleIndicator = styled_base_browser_esm("div", {
})("background:", colors_color('ui.border'), ";border-radius:50%;border:3px solid ", colors_color('ui.border'), ";bottom:0;box-sizing:border-box;display:block;height:1px;left:0;margin:auto;position:absolute;right:0;top:-", CIRCLE_SIZE / 2, "px;width:1px;" + ( true ? "" : undefined));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/angle-circle.js
function AngleCircle(_ref) {
onChange = _ref.onChange,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["value", "onChange"]);
var angleCircleRef = Object(external_wp_element_["useRef"])();
var angleCircleCenter = Object(external_wp_element_["useRef"])();
var previousCursorValue = Object(external_wp_element_["useRef"])();
var setAngleCircleCenter = function setAngleCircleCenter() {
var rect = angleCircleRef.current.getBoundingClientRect();
angleCircleCenter.current = {
x: rect.x + rect.width / 2,
y: rect.y + rect.height / 2
var changeAngleToPosition = function changeAngleToPosition(event) {
var _angleCircleCenter$cu = angleCircleCenter.current,
centerX = _angleCircleCenter$cu.x,
centerY = _angleCircleCenter$cu.y;
var ownerDocument = angleCircleRef.current.ownerDocument; // Prevent (drag) mouse events from selecting and accidentally
// triggering actions from other elements.
event.preventDefault(); // Ensure the input isn't focused as preventDefault would leave it
ownerDocument.activeElement.blur();
onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
var _useDragging = Object(external_wp_compose_["__experimentalUseDragging"])({
onDragStart: function onDragStart(event) {
changeAngleToPosition(event);
onDragMove: changeAngleToPosition,
onDragEnd: changeAngleToPosition
startDrag = _useDragging.startDrag,
isDragging = _useDragging.isDragging;
Object(external_wp_element_["useEffect"])(function () {
if (previousCursorValue.current === undefined) {
previousCursorValue.current = document.body.style.cursor;
document.body.style.cursor = 'grabbing';
document.body.style.cursor = previousCursorValue.current || null;
previousCursorValue.current = undefined;
/* eslint-disable jsx-a11y/no-static-element-interactions */
Object(external_wp_element_["createElement"])(CircleRoot, Object(esm_extends["a" /* default */])({
className: "components-angle-picker-control__angle-circle",
}, props), Object(external_wp_element_["createElement"])(CircleIndicatorWrapper, {
transform: "rotate(".concat(value, "deg)")
className: "components-angle-picker-control__angle-circle-indicator-wrapper"
}, Object(external_wp_element_["createElement"])(CircleIndicator, {
className: "components-angle-picker-control__angle-circle-indicator"
/* eslint-enable jsx-a11y/no-static-element-interactions */
function getAngle(centerX, centerY, pointX, pointY) {
var y = pointY - centerY;
var x = pointX - centerX;
var angleInRadians = Math.atan2(y, x);
var angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;
/* harmony default export */ var angle_circle = (AngleCircle);
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/index.js
function AnglePickerControl(_ref) {
var className = _ref.className,
hideLabelFromVision = _ref.hideLabelFromVision,
label = _ref$label === void 0 ? Object(external_wp_i18n_["__"])('Angle') : _ref$label,
onChange = _ref.onChange,
props = Object(objectWithoutProperties["a" /* default */])(_ref, ["className", "hideLabelFromVision", "id", "label", "onChange", "value"]);
var instanceId = Object(external_wp_compose_["useInstanceId"])(AnglePickerControl, 'components-angle-picker-control__input');
var id = idProp || instanceId;
var handleOnNumberChange = function handleOnNumberChange(unprocessedValue) {
var inputValue = unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0;
var classes = classnames_default()('components-angle-picker-control', className);
return Object(external_wp_element_["createElement"])(base_control, Object(esm_extends["a" /* default */])({
hideLabelFromVision: hideLabelFromVision,
}, props), Object(external_wp_element_["createElement"])(angle_picker_control_styles_Root, null, Object(external_wp_element_["createElement"])(block, null, Object(external_wp_element_["createElement"])(number_control, {
className: "components-angle-picker-control__input-field",
onChange: handleOnNumberChange,
})), Object(external_wp_element_["createElement"])(flex_item, null, Object(external_wp_element_["createElement"])(angle_circle, {
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js + 2 modules
var toConsumableArray = __webpack_require__("KQm4");
// EXTERNAL MODULE: external ["wp","richText"]
var external_wp_richText_ = __webpack_require__("qRz9");
// EXTERNAL MODULE: ./node_modules/@wordpress/components/build-module/button/index.js
var build_module_button = __webpack_require__("kA6J");
// EXTERNAL MODULE: ./node_modules/@wordpress/components/build-module/popover/index.js + 1 modules
var popover = __webpack_require__("oXO/");
// EXTERNAL MODULE: external ["wp","a11y"]
var external_wp_a11y_ = __webpack_require__("gdqT");
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-spoken-messages/index.js
* A Higher Order Component used to be provide speak and debounced speak
* @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak
* @param {WPComponent} Component The component to be wrapped.
* @return {WPComponent} The wrapped component.
/* harmony default export */ var with_spoken_messages = (Object(external_wp_compose_["createHigherOrderComponent"])(function (Component) {
return function (props) {
return Object(external_wp_element_["createElement"])(Component, Object(esm_extends["a" /* default */])({}, props, {
speak: external_wp_a11y_["speak"],
debouncedSpeak: Object(external_wp_compose_["useDebounce"])(external_wp_a11y_["speak"], 500)
}, 'withSpokenMessages'));
// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/index.js
* A raw completer option.
* @typedef {*} CompleterOption
* @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them.
* @callback FnGetOptionKeywords
* @param {CompleterOption} option a completer option.
* @return {string[]} list of key words to search.
* @callback FnIsOptionDisabled
* @param {CompleterOption} option a completer option.
* @return {string[]} whether or not the given option is disabled.
* @callback FnGetOptionLabel
* @param {CompleterOption} option a completer option.
* @return {(string|Array.<(string|WPElement)>)} list of react components to render.
* @callback FnAllowContext
* @param {string} before the string before the auto complete trigger and query.
* @param {string} after the string after the autocomplete trigger and query.
* @return {boolean} true if the completer can handle.
* @typedef {Object} OptionCompletion
* @property {'insert-at-caret'|'replace'} action the intended placement of the completion.
* @property {OptionCompletionValue} value the completion value.
* @typedef {(string|WPElement|Object)} OptionCompletionValue
* @callback FnGetOptionCompletion
* @param {CompleterOption} value the value of the completer option.
* @param {string} query the text value of the autocomplete query.
* @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an
* OptionCompletionValue is returned, the
* completion action defaults to `insert-at-caret`.
* @typedef {Object} WPCompleter
* @property {string} name a way to identify a completer, useful for selective overriding.
* @property {?string} className A class to apply to the popup menu.
* @property {string} triggerPrefix the prefix that will display the menu.
* @property {(CompleterOption[]|FnGetOptions)} options the completer options or a function to get them.
* @property {?FnGetOptionKeywords} getOptionKeywords get the keywords for a given option.
* @property {?FnIsOptionDisabled} isOptionDisabled get whether or not the given option is disabled.
* @property {FnGetOptionLabel} getOptionLabel get the label for a given option.
* @property {?FnAllowContext} allowContext filter the context under which the autocomplete activates.
* @property {FnGetOptionCompletion} getOptionCompletion get the completion associated with a given option.
function filterOptions(search) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var maxResults = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10;
for (var i = 0; i < options.length; i++) {
var option = options[i]; // Merge label into keywords
var _option$keywords = option.keywords,
keywords = _option$keywords === void 0 ? [] : _option$keywords;
if ('string' === typeof option.label) {
keywords = [].concat(Object(toConsumableArray["a" /* default */])(keywords), [option.label]);
var isMatch = keywords.some(function (keyword) {
return search.test(Object(external_lodash_["deburr"])(keyword));
filtered.push(option); // Abort early if max reached
if (filtered.length === maxResults) {
var autocomplete_getAutoCompleterUI = function getAutoCompleterUI(autocompleter) {
var useItems = autocompleter.useItems ? autocompleter.useItems : function (filterValue) {
var _useState = Object(external_wp_element_["useState"])([]),
_useState2 = Object(slicedToArray["a" /* default */])(_useState, 2),
setItems = _useState2[1];
* We support both synchronous and asynchronous retrieval of completer options
* but internally treat all as async so we maintain a single, consistent code path.
* Because networks can be slow, and the internet is wonderfully unpredictable,
* we don't want two promises updating the state at once. This ensures that only
* the most recent promise will act on `optionsData`. This doesn't use the state
* because `setState` is batched, and so there's no guarantee that setting
* `activePromise` in the state would result in it actually being in `this.state`
* before the promise resolves and we check to see if this is the active promise or not.
Object(external_wp_element_["useLayoutEffect"])(function () {
var options = autocompleter.options,
isDebounced = autocompleter.isDebounced;
var loadOptions = Object(external_lodash_["debounce"])(function () {
var promise = Promise.resolve(typeof options === 'function' ? options(filterValue) : options).then(function (optionsData) {
var keyedOptions = optionsData.map(function (optionData, optionIndex) {
key: "".concat(autocompleter.name, "-").concat(optionIndex),
label: autocompleter.getOptionLabel(optionData),
keywords: autocompleter.getOptionKeywords ? autocompleter.getOptionKeywords(optionData) : [],
isDisabled: autocompleter.isOptionDisabled ? autocompleter.isOptionDisabled(optionData) : false
}); // create a regular expression to filter the options
var search = new RegExp('(?:\\b|\\s|^)' + Object(external_lodash_["escapeRegExp"])(filterValue), 'i');
setItems(filterOptions(search, keyedOptions));
}, isDebounced ? 250 : 0);
var promise = loadOptions();
function AutocompleterUI(_ref) {
var filterValue = _ref.filterValue,
instanceId = _ref.instanceId,
listBoxId = _ref.listBoxId,
className = _ref.className,
selectedIndex = _ref.selectedIndex,
onChangeOptions = _ref.onChangeOptions,
onSelect = _ref.onSelect,
contentRef = _ref.contentRef;
var _useItems = useItems(filterValue),
_useItems2 = Object(slicedToArray["a" /* default */])(_useItems, 1),
var anchorRef = Object(external_wp_richText_["useAnchorRef"])({