justify: 'flex-end',

[32000] Fix | Delete

align: 'flex-end'

[32001] Fix | Delete

},

[32002] Fix | Delete

center: {

[32003] Fix | Delete

justify: 'center',

[32004] Fix | Delete

align: 'center'

[32005] Fix | Delete

},

[32006] Fix | Delete

edge: {

[32007] Fix | Delete

justify: 'space-between',

[32008] Fix | Delete

align: 'center'

[32009] Fix | Delete

},

[32010] Fix | Delete

left: {

[32011] Fix | Delete

justify: 'center',

[32012] Fix | Delete

align: 'flex-start'

[32013] Fix | Delete

},

[32014] Fix | Delete

right: {

[32015] Fix | Delete

justify: 'center',

[32016] Fix | Delete

align: 'flex-end'

[32017] Fix | Delete

},

[32018] Fix | Delete

stretch: {

[32019] Fix | Delete

align: 'stretch'

[32020] Fix | Delete

},

[32021] Fix | Delete

top: {

[32022] Fix | Delete

justify: 'flex-start',

[32023] Fix | Delete

align: 'center'

[32024] Fix | Delete

},

[32025] Fix | Delete

topLeft: {

[32026] Fix | Delete

justify: 'flex-start',

[32027] Fix | Delete

align: 'flex-start'

[32028] Fix | Delete

},

[32029] Fix | Delete

topRight: {

[32030] Fix | Delete

justify: 'flex-start',

[32031] Fix | Delete

align: 'flex-end'

[32032] Fix | Delete

}

[32033] Fix | Delete

};

[32034] Fix | Delete

function getAlignmentProps(alignment, direction = 'row') {

[32035] Fix | Delete

if (!isValueDefined(alignment)) {

[32036] Fix | Delete

return {};

[32037] Fix | Delete

}

[32038] Fix | Delete

const isVertical = direction === 'column';

[32039] Fix | Delete

const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;

[32040] Fix | Delete

const alignmentProps = alignment in props ? props[alignment] : {

[32041] Fix | Delete

align: alignment

[32042] Fix | Delete

};

[32043] Fix | Delete

return alignmentProps;

[32044] Fix | Delete

}

[32045] Fix | Delete

[32046] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/get-valid-children.js

[32047] Fix | Delete

/**

[32048] Fix | Delete

* External dependencies

[32049] Fix | Delete

*/

[32050] Fix | Delete

[32051] Fix | Delete

/**

[32052] Fix | Delete

* WordPress dependencies

[32053] Fix | Delete

*/

[32054] Fix | Delete

[32055] Fix | Delete

[32056] Fix | Delete

/**

[32057] Fix | Delete

* Gets a collection of available children elements from a React component's children prop.

[32058] Fix | Delete

*

[32059] Fix | Delete

* @param children

[32060] Fix | Delete

*

[32061] Fix | Delete

* @return An array of available children.

[32062] Fix | Delete

*/

[32063] Fix | Delete

function getValidChildren(children) {

[32064] Fix | Delete

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

[32065] Fix | Delete

return [children];

[32066] Fix | Delete

}

[32067] Fix | Delete

return external_wp_element_namespaceObject.Children.toArray(children).filter(child => (0,external_wp_element_namespaceObject.isValidElement)(child));

[32068] Fix | Delete

}

[32069] Fix | Delete

[32070] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/hook.js

[32071] Fix | Delete

/**

[32072] Fix | Delete

* External dependencies

[32073] Fix | Delete

*/

[32074] Fix | Delete

[32075] Fix | Delete

/**

[32076] Fix | Delete

* Internal dependencies

[32077] Fix | Delete

*/

[32078] Fix | Delete

[32079] Fix | Delete

[32080] Fix | Delete

[32081] Fix | Delete

[32082] Fix | Delete

[32083] Fix | Delete

[32084] Fix | Delete

function useHStack(props) {

[32085] Fix | Delete

const {

[32086] Fix | Delete

alignment = 'edge',

[32087] Fix | Delete

children,

[32088] Fix | Delete

direction,

[32089] Fix | Delete

spacing = 2,

[32090] Fix | Delete

...otherProps

[32091] Fix | Delete

} = useContextSystem(props, 'HStack');

[32092] Fix | Delete

const align = getAlignmentProps(alignment, direction);

[32093] Fix | Delete

const validChildren = getValidChildren(children);

[32094] Fix | Delete

const clonedChildren = validChildren.map((child, index) => {

[32095] Fix | Delete

const _isSpacer = hasConnectNamespace(child, ['Spacer']);

[32096] Fix | Delete

if (_isSpacer) {

[32097] Fix | Delete

const childElement = child;

[32098] Fix | Delete

const _key = childElement.key || `hstack-${index}`;

[32099] Fix | Delete

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

[32100] Fix | Delete

isBlock: true,

[32101] Fix | Delete

...childElement.props

[32102] Fix | Delete

}, _key);

[32103] Fix | Delete

}

[32104] Fix | Delete

return child;

[32105] Fix | Delete

});

[32106] Fix | Delete

const propsForFlex = {

[32107] Fix | Delete

children: clonedChildren,

[32108] Fix | Delete

direction,

[32109] Fix | Delete

justify: 'center',

[32110] Fix | Delete

...align,

[32111] Fix | Delete

...otherProps,

[32112] Fix | Delete

gap: spacing

[32113] Fix | Delete

};

[32114] Fix | Delete

[32115] Fix | Delete

// Omit `isColumn` because it's not used in HStack.

[32116] Fix | Delete

const {

[32117] Fix | Delete

isColumn,

[32118] Fix | Delete

...flexProps

[32119] Fix | Delete

} = useFlex(propsForFlex);

[32120] Fix | Delete

return flexProps;

[32121] Fix | Delete

}

[32122] Fix | Delete

[32123] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/component.js

[32124] Fix | Delete

/**

[32125] Fix | Delete

* Internal dependencies

[32126] Fix | Delete

*/

[32127] Fix | Delete

[32128] Fix | Delete

[32129] Fix | Delete

[32130] Fix | Delete

[32131] Fix | Delete

[32132] Fix | Delete

function UnconnectedHStack(props, forwardedRef) {

[32133] Fix | Delete

const hStackProps = useHStack(props);

[32134] Fix | Delete

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

[32135] Fix | Delete

...hStackProps,

[32136] Fix | Delete

ref: forwardedRef

[32137] Fix | Delete

});

[32138] Fix | Delete

}

[32139] Fix | Delete

[32140] Fix | Delete

/**

[32141] Fix | Delete

* `HStack` (Horizontal Stack) arranges child elements in a horizontal line.

[32142] Fix | Delete

*

[32143] Fix | Delete

* `HStack` can render anything inside.

[32144] Fix | Delete

*

[32145] Fix | Delete

* ```jsx

[32146] Fix | Delete

* import {

[32147] Fix | Delete

* __experimentalHStack as HStack,

[32148] Fix | Delete

* __experimentalText as Text,

[32149] Fix | Delete

* } from `@wordpress/components`;

[32150] Fix | Delete

*

[32151] Fix | Delete

* function Example() {

[32152] Fix | Delete

* return (

[32153] Fix | Delete

* <HStack>

[32154] Fix | Delete

* <Text>Code</Text>

[32155] Fix | Delete

* <Text>is</Text>

[32156] Fix | Delete

* <Text>Poetry</Text>

[32157] Fix | Delete

* </HStack>

[32158] Fix | Delete

* );

[32159] Fix | Delete

* }

[32160] Fix | Delete

* ```

[32161] Fix | Delete

*/

[32162] Fix | Delete

const HStack = contextConnect(UnconnectedHStack, 'HStack');

[32163] Fix | Delete

/* harmony default export */ const h_stack_component = (HStack);

[32164] Fix | Delete

[32165] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/number-control/index.js

[32166] Fix | Delete

/**

[32167] Fix | Delete

* External dependencies

[32168] Fix | Delete

*/

[32169] Fix | Delete

[32170] Fix | Delete

/**

[32171] Fix | Delete

* WordPress dependencies

[32172] Fix | Delete

*/

[32173] Fix | Delete

[32174] Fix | Delete

[32175] Fix | Delete

[32176] Fix | Delete

[32177] Fix | Delete

[32178] Fix | Delete

[32179] Fix | Delete

/**

[32180] Fix | Delete

* Internal dependencies

[32181] Fix | Delete

*/

[32182] Fix | Delete

[32183] Fix | Delete

[32184] Fix | Delete

[32185] Fix | Delete

[32186] Fix | Delete

[32187] Fix | Delete

[32188] Fix | Delete

[32189] Fix | Delete

[32190] Fix | Delete

[32191] Fix | Delete

[32192] Fix | Delete

[32193] Fix | Delete

const number_control_noop = () => {};

[32194] Fix | Delete

function UnforwardedNumberControl(props, forwardedRef) {

[32195] Fix | Delete

const {

[32196] Fix | Delete

__unstableStateReducer: stateReducerProp,

[32197] Fix | Delete

className,

[32198] Fix | Delete

dragDirection = 'n',

[32199] Fix | Delete

hideHTMLArrows = false,

[32200] Fix | Delete

spinControls = hideHTMLArrows ? 'none' : 'native',

[32201] Fix | Delete

isDragEnabled = true,

[32202] Fix | Delete

isShiftStepEnabled = true,

[32203] Fix | Delete

label,

[32204] Fix | Delete

max = Infinity,

[32205] Fix | Delete

min = -Infinity,

[32206] Fix | Delete

required = false,

[32207] Fix | Delete

shiftStep = 10,

[32208] Fix | Delete

step = 1,

[32209] Fix | Delete

spinFactor = 1,

[32210] Fix | Delete

type: typeProp = 'number',

[32211] Fix | Delete

value: valueProp,

[32212] Fix | Delete

size = 'default',

[32213] Fix | Delete

suffix,

[32214] Fix | Delete

onChange = number_control_noop,

[32215] Fix | Delete

...restProps

[32216] Fix | Delete

} = useDeprecated36pxDefaultSizeProp(props);

[32217] Fix | Delete

if (hideHTMLArrows) {

[32218] Fix | Delete

external_wp_deprecated_default()('wp.components.NumberControl hideHTMLArrows prop ', {

[32219] Fix | Delete

alternative: 'spinControls="none"',

[32220] Fix | Delete

since: '6.2',

[32221] Fix | Delete

version: '6.3'

[32222] Fix | Delete

});

[32223] Fix | Delete

}

[32224] Fix | Delete

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

[32225] Fix | Delete

const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]);

[32226] Fix | Delete

const isStepAny = step === 'any';

[32227] Fix | Delete

const baseStep = isStepAny ? 1 : ensureNumber(step);

[32228] Fix | Delete

const baseSpin = ensureNumber(spinFactor) * baseStep;

[32229] Fix | Delete

const baseValue = roundClamp(0, min, max, baseStep);

[32230] Fix | Delete

const constrainValue = (value, stepOverride) => {

[32231] Fix | Delete

// When step is "any" clamp the value, otherwise round and clamp it.

[32232] Fix | Delete

// Use '' + to convert to string for use in input value attribute.

[32233] Fix | Delete

return isStepAny ? '' + Math.min(max, Math.max(min, ensureNumber(value))) : '' + roundClamp(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);

[32234] Fix | Delete

};

[32235] Fix | Delete

const autoComplete = typeProp === 'number' ? 'off' : undefined;

[32236] Fix | Delete

const classes = dist_clsx('components-number-control', className);

[32237] Fix | Delete

const cx = useCx();

[32238] Fix | Delete

const spinButtonClasses = cx(size === 'small' && styles.smallSpinButtons);

[32239] Fix | Delete

const spinValue = (value, direction, event) => {

[32240] Fix | Delete

event?.preventDefault();

[32241] Fix | Delete

const shift = event?.shiftKey && isShiftStepEnabled;

[32242] Fix | Delete

const delta = shift ? ensureNumber(shiftStep) * baseSpin : baseSpin;

[32243] Fix | Delete

let nextValue = isValueEmpty(value) ? baseValue : value;

[32244] Fix | Delete

if (direction === 'up') {

[32245] Fix | Delete

nextValue = add(nextValue, delta);

[32246] Fix | Delete

} else if (direction === 'down') {

[32247] Fix | Delete

nextValue = subtract(nextValue, delta);

[32248] Fix | Delete

}

[32249] Fix | Delete

return constrainValue(nextValue, shift ? delta : undefined);

[32250] Fix | Delete

};

[32251] Fix | Delete

[32252] Fix | Delete

/**

[32253] Fix | Delete

* "Middleware" function that intercepts updates from InputControl.

[32254] Fix | Delete

* This allows us to tap into actions to transform the (next) state for

[32255] Fix | Delete

* InputControl.

[32256] Fix | Delete

*

[32257] Fix | Delete

* @return The updated state to apply to InputControl

[32258] Fix | Delete

*/

[32259] Fix | Delete

const numberControlStateReducer = (state, action) => {

[32260] Fix | Delete

const nextState = {

[32261] Fix | Delete

...state

[32262] Fix | Delete

};

[32263] Fix | Delete

const {

[32264] Fix | Delete

type,

[32265] Fix | Delete

payload

[32266] Fix | Delete

} = action;

[32267] Fix | Delete

const event = payload.event;

[32268] Fix | Delete

const currentValue = nextState.value;

[32269] Fix | Delete

[32270] Fix | Delete

/**

[32271] Fix | Delete

* Handles custom UP and DOWN Keyboard events

[32272] Fix | Delete

*/

[32273] Fix | Delete

if (type === PRESS_UP || type === PRESS_DOWN) {

[32274] Fix | Delete

nextState.value = spinValue(currentValue, type === PRESS_UP ? 'up' : 'down', event);

[32275] Fix | Delete

}

[32276] Fix | Delete

[32277] Fix | Delete

/**

[32278] Fix | Delete

* Handles drag to update events

[32279] Fix | Delete

*/

[32280] Fix | Delete

if (type === DRAG && isDragEnabled) {

[32281] Fix | Delete

const [x, y] = payload.delta;

[32282] Fix | Delete

const enableShift = payload.shiftKey && isShiftStepEnabled;

[32283] Fix | Delete

const modifier = enableShift ? ensureNumber(shiftStep) * baseSpin : baseSpin;

[32284] Fix | Delete

let directionModifier;

[32285] Fix | Delete

let delta;

[32286] Fix | Delete

switch (dragDirection) {

[32287] Fix | Delete

case 'n':

[32288] Fix | Delete

delta = y;

[32289] Fix | Delete

directionModifier = -1;

[32290] Fix | Delete

break;

[32291] Fix | Delete

case 'e':

[32292] Fix | Delete

delta = x;

[32293] Fix | Delete

directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1;

[32294] Fix | Delete

break;

[32295] Fix | Delete

case 's':

[32296] Fix | Delete

delta = y;

[32297] Fix | Delete

directionModifier = 1;

[32298] Fix | Delete

break;

[32299] Fix | Delete

case 'w':

[32300] Fix | Delete

delta = x;

[32301] Fix | Delete

directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1;

[32302] Fix | Delete

break;

[32303] Fix | Delete

}

[32304] Fix | Delete

if (delta !== 0) {

[32305] Fix | Delete

delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);

[32306] Fix | Delete

const distance = delta * modifier * directionModifier;

[32307] Fix | Delete

nextState.value = constrainValue(

[32308] Fix | Delete

// @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined

[32309] Fix | Delete

add(currentValue, distance), enableShift ? modifier : undefined);

[32310] Fix | Delete

}

[32311] Fix | Delete

}

[32312] Fix | Delete

[32313] Fix | Delete

/**

[32314] Fix | Delete

* Handles commit (ENTER key press or blur)

[32315] Fix | Delete

*/

[32316] Fix | Delete

if (type === PRESS_ENTER || type === COMMIT) {

[32317] Fix | Delete

const applyEmptyValue = required === false && currentValue === '';

[32318] Fix | Delete

nextState.value = applyEmptyValue ? currentValue :

[32319] Fix | Delete

// @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined

[32320] Fix | Delete

constrainValue(currentValue);

[32321] Fix | Delete

}

[32322] Fix | Delete

return nextState;

[32323] Fix | Delete

};

[32324] Fix | Delete

const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), {

[32325] Fix | Delete

// Set event.target to the <input> so that consumers can use

[32326] Fix | Delete

// e.g. event.target.validity.

[32327] Fix | Delete

event: {

[32328] Fix | Delete

...event,

[32329] Fix | Delete

target: inputRef.current

[32330] Fix | Delete

}

[32331] Fix | Delete

});

[32332] Fix | Delete

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

[32333] Fix | Delete

autoComplete: autoComplete,

[32334] Fix | Delete

inputMode: "numeric",

[32335] Fix | Delete

...restProps,

[32336] Fix | Delete

className: classes,

[32337] Fix | Delete

dragDirection: dragDirection,

[32338] Fix | Delete

hideHTMLArrows: spinControls !== 'native',

[32339] Fix | Delete

isDragEnabled: isDragEnabled,

[32340] Fix | Delete

label: label,

[32341] Fix | Delete

max: max,

[32342] Fix | Delete

min: min,

[32343] Fix | Delete

ref: mergedRef,

[32344] Fix | Delete

required: required,

[32345] Fix | Delete

step: step,

[32346] Fix | Delete

type: typeProp

[32347] Fix | Delete

// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components

[32348] Fix | Delete

,

[32349] Fix | Delete

value: valueProp,

[32350] Fix | Delete

__unstableStateReducer: (state, action) => {

[32351] Fix | Delete

var _stateReducerProp;

[32352] Fix | Delete

const baseState = numberControlStateReducer(state, action);

[32353] Fix | Delete

return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState;

[32354] Fix | Delete

},

[32355] Fix | Delete

size: size,

[32356] Fix | Delete

suffix: spinControls === 'custom' ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {

[32357] Fix | Delete

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

[32358] Fix | Delete

marginBottom: 0,

[32359] Fix | Delete

marginRight: 2,

[32360] Fix | Delete

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

[32361] Fix | Delete

spacing: 1,

[32362] Fix | Delete

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

[32363] Fix | Delete

className: spinButtonClasses,

[32364] Fix | Delete

icon: library_plus,

[32365] Fix | Delete

size: "small",

[32366] Fix | Delete

label: (0,external_wp_i18n_namespaceObject.__)('Increment'),

[32367] Fix | Delete

onClick: buildSpinButtonClickHandler('up')

[32368] Fix | Delete

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

[32369] Fix | Delete

className: spinButtonClasses,

[32370] Fix | Delete

icon: library_reset,

[32371] Fix | Delete

size: "small",

[32372] Fix | Delete

label: (0,external_wp_i18n_namespaceObject.__)('Decrement'),

[32373] Fix | Delete

onClick: buildSpinButtonClickHandler('down')

[32374] Fix | Delete

})]

[32375] Fix | Delete

})

[32376] Fix | Delete

})]

[32377] Fix | Delete

}) : suffix,

[32378] Fix | Delete

onChange: onChange

[32379] Fix | Delete

});

[32380] Fix | Delete

}

[32381] Fix | Delete

const NumberControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNumberControl);

[32382] Fix | Delete

/* harmony default export */ const number_control = (NumberControl);

[32383] Fix | Delete

[32384] Fix | Delete

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

[32385] Fix | Delete

[32386] Fix | Delete

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)."; }

[32387] Fix | Delete

/**

[32388] Fix | Delete

* External dependencies

[32389] Fix | Delete

*/

[32390] Fix | Delete

[32391] Fix | Delete

/**

[32392] Fix | Delete

* Internal dependencies

[32393] Fix | Delete

*/

[32394] Fix | Delete

[32395] Fix | Delete

[32396] Fix | Delete

[32397] Fix | Delete

[32398] Fix | Delete

const CIRCLE_SIZE = 32;

[32399] Fix | Delete

const INNER_CIRCLE_SIZE = 6;

[32400] Fix | Delete

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

[32401] Fix | Delete

target: "eln3bjz3"

[32402] Fix | Delete

} : 0)("border-radius:50%;border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;:active{cursor:grabbing;}" + ( true ? "" : 0));

[32403] Fix | Delete

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

[32404] Fix | Delete

target: "eln3bjz2"

[32405] Fix | Delete

} : 0)( true ? {

[32406] Fix | Delete

name: "1r307gh",

[32407] Fix | Delete

styles: "box-sizing:border-box;position:relative;width:100%;height:100%;:focus-visible{outline:none;}"

[32408] Fix | Delete

} : 0);

[32409] Fix | Delete

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

[32410] Fix | Delete

target: "eln3bjz1"

[32411] Fix | Delete

} : 0)("background:", COLORS.theme.accent, ";border-radius:50%;box-sizing:border-box;display:block;left:50%;top:4px;transform:translateX( -50% );position:absolute;width:", INNER_CIRCLE_SIZE, "px;height:", INNER_CIRCLE_SIZE, "px;" + ( true ? "" : 0));

[32412] Fix | Delete

const UnitText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? {

[32413] Fix | Delete

target: "eln3bjz0"

[32414] Fix | Delete

} : 0)("color:", COLORS.theme.accent, ";margin-right:", space(3), ";" + ( true ? "" : 0));

[32415] Fix | Delete

[32416] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/angle-circle.js

[32417] Fix | Delete

/**

[32418] Fix | Delete

* WordPress dependencies

[32419] Fix | Delete

*/

[32420] Fix | Delete

[32421] Fix | Delete

[32422] Fix | Delete

[32423] Fix | Delete

/**

[32424] Fix | Delete

* Internal dependencies

[32425] Fix | Delete

*/

[32426] Fix | Delete

[32427] Fix | Delete

[32428] Fix | Delete

function AngleCircle({

[32429] Fix | Delete

value,

[32430] Fix | Delete

onChange,

[32431] Fix | Delete

...props

[32432] Fix | Delete

}) {

[32433] Fix | Delete

const angleCircleRef = (0,external_wp_element_namespaceObject.useRef)(null);

[32434] Fix | Delete

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

[32435] Fix | Delete

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

[32436] Fix | Delete

const setAngleCircleCenter = () => {

[32437] Fix | Delete

if (angleCircleRef.current === null) {

[32438] Fix | Delete

return;

[32439] Fix | Delete

}

[32440] Fix | Delete

const rect = angleCircleRef.current.getBoundingClientRect();

[32441] Fix | Delete

angleCircleCenter.current = {

[32442] Fix | Delete

x: rect.x + rect.width / 2,

[32443] Fix | Delete

y: rect.y + rect.height / 2

[32444] Fix | Delete

};

[32445] Fix | Delete

};

[32446] Fix | Delete

const changeAngleToPosition = event => {

[32447] Fix | Delete

if (event === undefined) {

[32448] Fix | Delete

return;

[32449] Fix | Delete

}

[32450] Fix | Delete

[32451] Fix | Delete

// Prevent (drag) mouse events from selecting and accidentally

[32452] Fix | Delete

// triggering actions from other elements.

[32453] Fix | Delete

event.preventDefault();

[32454] Fix | Delete

// Input control needs to lose focus and by preventDefault above, it doesn't.

[32455] Fix | Delete

event.target?.focus();

[32456] Fix | Delete

if (angleCircleCenter.current !== undefined && onChange !== undefined) {

[32457] Fix | Delete

const {

[32458] Fix | Delete

x: centerX,

[32459] Fix | Delete

y: centerY

[32460] Fix | Delete

} = angleCircleCenter.current;

[32461] Fix | Delete

onChange(getAngle(centerX, centerY, event.clientX, event.clientY));

[32462] Fix | Delete

}

[32463] Fix | Delete

};

[32464] Fix | Delete

const {

[32465] Fix | Delete

startDrag,

[32466] Fix | Delete

isDragging

[32467] Fix | Delete

} = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({

[32468] Fix | Delete

onDragStart: event => {

[32469] Fix | Delete

setAngleCircleCenter();

[32470] Fix | Delete

changeAngleToPosition(event);

[32471] Fix | Delete

},

[32472] Fix | Delete

onDragMove: changeAngleToPosition,

[32473] Fix | Delete

onDragEnd: changeAngleToPosition

[32474] Fix | Delete

});

[32475] Fix | Delete

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

[32476] Fix | Delete

if (isDragging) {

[32477] Fix | Delete

if (previousCursorValue.current === undefined) {

[32478] Fix | Delete

previousCursorValue.current = document.body.style.cursor;

[32479] Fix | Delete

}

[32480] Fix | Delete

document.body.style.cursor = 'grabbing';

[32481] Fix | Delete

} else {

[32482] Fix | Delete

document.body.style.cursor = previousCursorValue.current || '';

[32483] Fix | Delete

previousCursorValue.current = undefined;

[32484] Fix | Delete

}

[32485] Fix | Delete

}, [isDragging]);

[32486] Fix | Delete

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

[32487] Fix | Delete

ref: angleCircleRef,

[32488] Fix | Delete

onMouseDown: startDrag,

[32489] Fix | Delete

className: "components-angle-picker-control__angle-circle",

[32490] Fix | Delete

...props,

[32491] Fix | Delete

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

[32492] Fix | Delete

style: value ? {

[32493] Fix | Delete

transform: `rotate(${value}deg)`

[32494] Fix | Delete

} : undefined,

[32495] Fix | Delete

className: "components-angle-picker-control__angle-circle-indicator-wrapper",

[32496] Fix | Delete

tabIndex: -1,

[32497] Fix | Delete

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

[32498] Fix | Delete

className: "components-angle-picker-control__angle-circle-indicator"

[32499] Fix | Delete