}

[40000] Fix | Delete

[40001] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/component.js

[40002] Fix | Delete

/**

[40003] Fix | Delete

* External dependencies

[40004] Fix | Delete

*/

[40005] Fix | Delete

[40006] Fix | Delete

/**

[40007] Fix | Delete

* WordPress dependencies

[40008] Fix | Delete

*/

[40009] Fix | Delete

[40010] Fix | Delete

[40011] Fix | Delete

[40012] Fix | Delete

/**

[40013] Fix | Delete

* Internal dependencies

[40014] Fix | Delete

*/

[40015] Fix | Delete

[40016] Fix | Delete

[40017] Fix | Delete

[40018] Fix | Delete

[40019] Fix | Delete

[40020] Fix | Delete

[40021] Fix | Delete

[40022] Fix | Delete

[40023] Fix | Delete

[40024] Fix | Delete

[40025] Fix | Delete

[40026] Fix | Delete

[40027] Fix | Delete

[40028] Fix | Delete

[40029] Fix | Delete

[40030] Fix | Delete

const getAriaLabelColorValue = colorValue => {

[40031] Fix | Delete

// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.

[40032] Fix | Delete

return colorValue.replace(/^var\((.+)\)$/, '$1');

[40033] Fix | Delete

};

[40034] Fix | Delete

const getColorObject = (colorValue, colors) => {

[40035] Fix | Delete

if (!colorValue || !colors) {

[40036] Fix | Delete

return;

[40037] Fix | Delete

}

[40038] Fix | Delete

if (isMultiplePaletteArray(colors)) {

[40039] Fix | Delete

// Multiple origins

[40040] Fix | Delete

let matchedColor;

[40041] Fix | Delete

colors.some(origin => origin.colors.some(color => {

[40042] Fix | Delete

if (color.color === colorValue) {

[40043] Fix | Delete

matchedColor = color;

[40044] Fix | Delete

return true;

[40045] Fix | Delete

}

[40046] Fix | Delete

return false;

[40047] Fix | Delete

}));

[40048] Fix | Delete

return matchedColor;

[40049] Fix | Delete

}

[40050] Fix | Delete

[40051] Fix | Delete

// Single origin

[40052] Fix | Delete

return colors.find(color => color.color === colorValue);

[40053] Fix | Delete

};

[40054] Fix | Delete

const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => {

[40055] Fix | Delete

if (isStyleEnabled) {

[40056] Fix | Delete

if (colorObject) {

[40057] Fix | Delete

const ariaLabelValue = getAriaLabelColorValue(colorObject.color);

[40058] Fix | Delete

return style ? (0,external_wp_i18n_namespaceObject.sprintf)(

[40059] Fix | Delete

// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid".

[40060] Fix | Delete

'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)(

[40061] Fix | Delete

// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:".

[40062] Fix | Delete

'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue);

[40063] Fix | Delete

}

[40064] Fix | Delete

if (colorValue) {

[40065] Fix | Delete

const ariaLabelValue = getAriaLabelColorValue(colorValue);

[40066] Fix | Delete

return style ? (0,external_wp_i18n_namespaceObject.sprintf)(

[40067] Fix | Delete

// translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid".

[40068] Fix | Delete

'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)(

[40069] Fix | Delete

// translators: %1$s: The color's hex code e.g: "#f00".

[40070] Fix | Delete

'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue);

[40071] Fix | Delete

}

[40072] Fix | Delete

return (0,external_wp_i18n_namespaceObject.__)('Border color and style picker.');

[40073] Fix | Delete

}

[40074] Fix | Delete

if (colorObject) {

[40075] Fix | Delete

return (0,external_wp_i18n_namespaceObject.sprintf)(

[40076] Fix | Delete

// translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00".

[40077] Fix | Delete

'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color));

[40078] Fix | Delete

}

[40079] Fix | Delete

if (colorValue) {

[40080] Fix | Delete

return (0,external_wp_i18n_namespaceObject.sprintf)(

[40081] Fix | Delete

// translators: %1$s: The color's hex code e.g: "#f00".

[40082] Fix | Delete

'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue));

[40083] Fix | Delete

}

[40084] Fix | Delete

return (0,external_wp_i18n_namespaceObject.__)('Border color picker.');

[40085] Fix | Delete

};

[40086] Fix | Delete

const BorderControlDropdown = (props, forwardedRef) => {

[40087] Fix | Delete

const {

[40088] Fix | Delete

__experimentalIsRenderedInSidebar,

[40089] Fix | Delete

border,

[40090] Fix | Delete

colors,

[40091] Fix | Delete

disableCustomColors,

[40092] Fix | Delete

enableAlpha,

[40093] Fix | Delete

enableStyle,

[40094] Fix | Delete

indicatorClassName,

[40095] Fix | Delete

indicatorWrapperClassName,

[40096] Fix | Delete

isStyleSettable,

[40097] Fix | Delete

onReset,

[40098] Fix | Delete

onColorChange,

[40099] Fix | Delete

onStyleChange,

[40100] Fix | Delete

popoverContentClassName,

[40101] Fix | Delete

popoverControlsClassName,

[40102] Fix | Delete

resetButtonClassName,

[40103] Fix | Delete

showDropdownHeader,

[40104] Fix | Delete

size,

[40105] Fix | Delete

__unstablePopoverProps,

[40106] Fix | Delete

...otherProps

[40107] Fix | Delete

} = useBorderControlDropdown(props);

[40108] Fix | Delete

const {

[40109] Fix | Delete

color,

[40110] Fix | Delete

style

[40111] Fix | Delete

} = border || {};

[40112] Fix | Delete

const colorObject = getColorObject(color, colors);

[40113] Fix | Delete

const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle);

[40114] Fix | Delete

const showResetButton = color || style && style !== 'none';

[40115] Fix | Delete

const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined;

[40116] Fix | Delete

const renderToggle = ({

[40117] Fix | Delete

onToggle

[40118] Fix | Delete

}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_button, {

[40119] Fix | Delete

onClick: onToggle,

[40120] Fix | Delete

variant: "tertiary",

[40121] Fix | Delete

"aria-label": toggleAriaLabel,

[40122] Fix | Delete

tooltipPosition: dropdownPosition,

[40123] Fix | Delete

label: (0,external_wp_i18n_namespaceObject.__)('Border color and style picker'),

[40124] Fix | Delete

showTooltip: true,

[40125] Fix | Delete

__next40pxDefaultSize: size === '__unstable-large' ? true : false,

[40126] Fix | Delete

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

[40127] Fix | Delete

className: indicatorWrapperClassName,

[40128] Fix | Delete

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

[40129] Fix | Delete

className: indicatorClassName,

[40130] Fix | Delete

colorValue: color

[40131] Fix | Delete

})

[40132] Fix | Delete

})

[40133] Fix | Delete

});

[40134] Fix | Delete

const renderContent = ({

[40135] Fix | Delete

onClose

[40136] Fix | Delete

}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_ReactJSXRuntime_namespaceObject.Fragment, {

[40137] Fix | Delete

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

[40138] Fix | Delete

paddingSize: "medium",

[40139] Fix | Delete

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

[40140] Fix | Delete

className: popoverControlsClassName,

[40141] Fix | Delete

spacing: 6,

[40142] Fix | Delete

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

[40143] Fix | Delete

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

[40144] Fix | Delete

children: (0,external_wp_i18n_namespaceObject.__)('Border color')

[40145] Fix | Delete

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

[40146] Fix | Delete

size: "small",

[40147] Fix | Delete

label: (0,external_wp_i18n_namespaceObject.__)('Close border color'),

[40148] Fix | Delete

icon: close_small,

[40149] Fix | Delete

onClick: onClose

[40150] Fix | Delete

})]

[40151] Fix | Delete

}) : undefined, /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(color_palette, {

[40152] Fix | Delete

className: popoverContentClassName,

[40153] Fix | Delete

value: color,

[40154] Fix | Delete

onChange: onColorChange,

[40155] Fix | Delete

colors,

[40156] Fix | Delete

disableCustomColors,

[40157] Fix | Delete

__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,

[40158] Fix | Delete

clearable: false,

[40159] Fix | Delete

enableAlpha: enableAlpha

[40160] Fix | Delete

}), enableStyle && isStyleSettable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_style_picker_component, {

[40161] Fix | Delete

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

[40162] Fix | Delete

value: style,

[40163] Fix | Delete

onChange: onStyleChange

[40164] Fix | Delete

})]

[40165] Fix | Delete

})

[40166] Fix | Delete

}), showResetButton && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, {

[40167] Fix | Delete

paddingSize: "none",

[40168] Fix | Delete

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

[40169] Fix | Delete

className: resetButtonClassName,

[40170] Fix | Delete

variant: "tertiary",

[40171] Fix | Delete

onClick: () => {

[40172] Fix | Delete

onReset();

[40173] Fix | Delete

onClose();

[40174] Fix | Delete

},

[40175] Fix | Delete

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

[40176] Fix | Delete

})

[40177] Fix | Delete

})]

[40178] Fix | Delete

});

[40179] Fix | Delete

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

[40180] Fix | Delete

renderToggle: renderToggle,

[40181] Fix | Delete

renderContent: renderContent,

[40182] Fix | Delete

popoverProps: {

[40183] Fix | Delete

...__unstablePopoverProps

[40184] Fix | Delete

},

[40185] Fix | Delete

...otherProps,

[40186] Fix | Delete

ref: forwardedRef

[40187] Fix | Delete

});

[40188] Fix | Delete

};

[40189] Fix | Delete

const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown');

[40190] Fix | Delete

/* harmony default export */ const border_control_dropdown_component = (ConnectedBorderControlDropdown);

[40191] Fix | Delete

[40192] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/unit-select-control.js

[40193] Fix | Delete

/**

[40194] Fix | Delete

* External dependencies

[40195] Fix | Delete

*/

[40196] Fix | Delete

[40197] Fix | Delete

/**

[40198] Fix | Delete

* WordPress dependencies

[40199] Fix | Delete

*/

[40200] Fix | Delete

[40201] Fix | Delete

[40202] Fix | Delete

/**

[40203] Fix | Delete

* Internal dependencies

[40204] Fix | Delete

*/

[40205] Fix | Delete

[40206] Fix | Delete

[40207] Fix | Delete

[40208] Fix | Delete

[40209] Fix | Delete

function UnitSelectControl({

[40210] Fix | Delete

className,

[40211] Fix | Delete

isUnitSelectTabbable: isTabbable = true,

[40212] Fix | Delete

onChange,

[40213] Fix | Delete

size = 'default',

[40214] Fix | Delete

unit = 'px',

[40215] Fix | Delete

units = CSS_UNITS,

[40216] Fix | Delete

...props

[40217] Fix | Delete

}, ref) {

[40218] Fix | Delete

if (!hasUnits(units) || units?.length === 1) {

[40219] Fix | Delete

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

[40220] Fix | Delete

className: "components-unit-control__unit-label",

[40221] Fix | Delete

selectSize: size,

[40222] Fix | Delete

children: unit

[40223] Fix | Delete

});

[40224] Fix | Delete

}

[40225] Fix | Delete

const handleOnChange = event => {

[40226] Fix | Delete

const {

[40227] Fix | Delete

value: unitValue

[40228] Fix | Delete

} = event.target;

[40229] Fix | Delete

const data = units.find(option => option.value === unitValue);

[40230] Fix | Delete

onChange?.(unitValue, {

[40231] Fix | Delete

event,

[40232] Fix | Delete

data

[40233] Fix | Delete

});

[40234] Fix | Delete

};

[40235] Fix | Delete

const classes = dist_clsx('components-unit-control__select', className);

[40236] Fix | Delete

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

[40237] Fix | Delete

ref: ref,

[40238] Fix | Delete

className: classes,

[40239] Fix | Delete

onChange: handleOnChange,

[40240] Fix | Delete

selectSize: size,

[40241] Fix | Delete

tabIndex: isTabbable ? undefined : -1,

[40242] Fix | Delete

value: unit,

[40243] Fix | Delete

...props,

[40244] Fix | Delete

children: units.map(option => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("option", {

[40245] Fix | Delete

value: option.value,

[40246] Fix | Delete

children: option.label

[40247] Fix | Delete

}, option.value))

[40248] Fix | Delete

});

[40249] Fix | Delete

}

[40250] Fix | Delete

/* harmony default export */ const unit_select_control = ((0,external_wp_element_namespaceObject.forwardRef)(UnitSelectControl));

[40251] Fix | Delete

[40252] Fix | Delete

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

[40253] Fix | Delete

/**

[40254] Fix | Delete

* External dependencies

[40255] Fix | Delete

*/

[40256] Fix | Delete

[40257] Fix | Delete

[40258] Fix | Delete

[40259] Fix | Delete

/**

[40260] Fix | Delete

* WordPress dependencies

[40261] Fix | Delete

*/

[40262] Fix | Delete

[40263] Fix | Delete

[40264] Fix | Delete

[40265] Fix | Delete

[40266] Fix | Delete

/**

[40267] Fix | Delete

* Internal dependencies

[40268] Fix | Delete

*/

[40269] Fix | Delete

[40270] Fix | Delete

[40271] Fix | Delete

[40272] Fix | Delete

[40273] Fix | Delete

[40274] Fix | Delete

[40275] Fix | Delete

[40276] Fix | Delete

[40277] Fix | Delete

function UnforwardedUnitControl(unitControlProps, forwardedRef) {

[40278] Fix | Delete

const {

[40279] Fix | Delete

__unstableStateReducer,

[40280] Fix | Delete

autoComplete = 'off',

[40281] Fix | Delete

// @ts-expect-error Ensure that children is omitted from restProps

[40282] Fix | Delete

children,

[40283] Fix | Delete

className,

[40284] Fix | Delete

disabled = false,

[40285] Fix | Delete

disableUnits = false,

[40286] Fix | Delete

isPressEnterToChange = false,

[40287] Fix | Delete

isResetValueOnUnitChange = false,

[40288] Fix | Delete

isUnitSelectTabbable = true,

[40289] Fix | Delete

label,

[40290] Fix | Delete

onChange: onChangeProp,

[40291] Fix | Delete

onUnitChange,

[40292] Fix | Delete

size = 'default',

[40293] Fix | Delete

unit: unitProp,

[40294] Fix | Delete

units: unitsProp = CSS_UNITS,

[40295] Fix | Delete

value: valueProp,

[40296] Fix | Delete

onFocus: onFocusProp,

[40297] Fix | Delete

...props

[40298] Fix | Delete

} = useDeprecated36pxDefaultSizeProp(unitControlProps);

[40299] Fix | Delete

if ('unit' in unitControlProps) {

[40300] Fix | Delete

external_wp_deprecated_default()('UnitControl unit prop', {

[40301] Fix | Delete

since: '5.6',

[40302] Fix | Delete

hint: 'The unit should be provided within the `value` prop.',

[40303] Fix | Delete

version: '6.2'

[40304] Fix | Delete

});

[40305] Fix | Delete

}

[40306] Fix | Delete

[40307] Fix | Delete

// The `value` prop, in theory, should not be `null`, but the following line

[40308] Fix | Delete

// ensures it fallback to `undefined` in case a consumer of `UnitControl`

[40309] Fix | Delete

// still passes `null` as a `value`.

[40310] Fix | Delete

const nonNullValueProp = valueProp !== null && valueProp !== void 0 ? valueProp : undefined;

[40311] Fix | Delete

const [units, reFirstCharacterOfUnits] = (0,external_wp_element_namespaceObject.useMemo)(() => {

[40312] Fix | Delete

const list = getUnitsWithCurrentUnit(nonNullValueProp, unitProp, unitsProp);

[40313] Fix | Delete

const [{

[40314] Fix | Delete

value: firstUnitValue = ''

[40315] Fix | Delete

} = {}, ...rest] = list;

[40316] Fix | Delete

const firstCharacters = rest.reduce((carry, {

[40317] Fix | Delete

value

[40318] Fix | Delete

}) => {

[40319] Fix | Delete

const first = escapeRegExp(value?.substring(0, 1) || '');

[40320] Fix | Delete

return carry.includes(first) ? carry : `${carry}|${first}`;

[40321] Fix | Delete

}, escapeRegExp(firstUnitValue.substring(0, 1)));

[40322] Fix | Delete

return [list, new RegExp(`^(?:${firstCharacters})$`, 'i')];

[40323] Fix | Delete

}, [nonNullValueProp, unitProp, unitsProp]);

[40324] Fix | Delete

const [parsedQuantity, parsedUnit] = getParsedQuantityAndUnit(nonNullValueProp, unitProp, units);

[40325] Fix | Delete

const [unit, setUnit] = use_controlled_state(units.length === 1 ? units[0].value : unitProp, {

[40326] Fix | Delete

initial: parsedUnit,

[40327] Fix | Delete

fallback: ''

[40328] Fix | Delete

});

[40329] Fix | Delete

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

[40330] Fix | Delete

if (parsedUnit !== undefined) {

[40331] Fix | Delete

setUnit(parsedUnit);

[40332] Fix | Delete

}

[40333] Fix | Delete

}, [parsedUnit, setUnit]);

[40334] Fix | Delete

const classes = dist_clsx('components-unit-control',

[40335] Fix | Delete

// This class is added for legacy purposes to maintain it on the outer

[40336] Fix | Delete

// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139

[40337] Fix | Delete

'components-unit-control-wrapper', className);

[40338] Fix | Delete

const handleOnQuantityChange = (nextQuantityValue, changeProps) => {

[40339] Fix | Delete

if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) {

[40340] Fix | Delete

onChangeProp?.('', changeProps);

[40341] Fix | Delete

return;

[40342] Fix | Delete

}

[40343] Fix | Delete

[40344] Fix | Delete

/*

[40345] Fix | Delete

* Customizing the onChange callback.

[40346] Fix | Delete

* This allows as to broadcast a combined value+unit to onChange.

[40347] Fix | Delete

*/

[40348] Fix | Delete

const onChangeValue = getValidParsedQuantityAndUnit(nextQuantityValue, units, parsedQuantity, unit).join('');

[40349] Fix | Delete

onChangeProp?.(onChangeValue, changeProps);

[40350] Fix | Delete

};

[40351] Fix | Delete

const handleOnUnitChange = (nextUnitValue, changeProps) => {

[40352] Fix | Delete

const {

[40353] Fix | Delete

data

[40354] Fix | Delete

} = changeProps;

[40355] Fix | Delete

let nextValue = `${parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : ''}${nextUnitValue}`;

[40356] Fix | Delete

if (isResetValueOnUnitChange && data?.default !== undefined) {

[40357] Fix | Delete

nextValue = `${data.default}${nextUnitValue}`;

[40358] Fix | Delete

}

[40359] Fix | Delete

onChangeProp?.(nextValue, changeProps);

[40360] Fix | Delete

onUnitChange?.(nextUnitValue, changeProps);

[40361] Fix | Delete

setUnit(nextUnitValue);

[40362] Fix | Delete

};

[40363] Fix | Delete

let handleOnKeyDown;

[40364] Fix | Delete

if (!disableUnits && isUnitSelectTabbable && units.length) {

[40365] Fix | Delete

handleOnKeyDown = event => {

[40366] Fix | Delete

props.onKeyDown?.(event);

[40367] Fix | Delete

// Unless the meta key was pressed (to avoid interfering with

[40368] Fix | Delete

// shortcuts, e.g. pastes), moves focus to the unit select if a key

[40369] Fix | Delete

// matches the first character of a unit.

[40370] Fix | Delete

if (!event.metaKey && reFirstCharacterOfUnits.test(event.key)) {

[40371] Fix | Delete

refInputSuffix.current?.focus();

[40372] Fix | Delete

}

[40373] Fix | Delete

};

[40374] Fix | Delete

}

[40375] Fix | Delete

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

[40376] Fix | Delete

const inputSuffix = !disableUnits ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(unit_select_control, {

[40377] Fix | Delete

ref: refInputSuffix,

[40378] Fix | Delete

"aria-label": (0,external_wp_i18n_namespaceObject.__)('Select unit'),

[40379] Fix | Delete

disabled: disabled,

[40380] Fix | Delete

isUnitSelectTabbable: isUnitSelectTabbable,

[40381] Fix | Delete

onChange: handleOnUnitChange,

[40382] Fix | Delete

size: ['small', 'compact'].includes(size) || size === 'default' && !props.__next40pxDefaultSize ? 'small' : 'default',

[40383] Fix | Delete

unit: unit,

[40384] Fix | Delete

units: units,

[40385] Fix | Delete

onFocus: onFocusProp,

[40386] Fix | Delete

onBlur: unitControlProps.onBlur

[40387] Fix | Delete

}) : null;

[40388] Fix | Delete

let step = props.step;

[40389] Fix | Delete

[40390] Fix | Delete

/*

[40391] Fix | Delete

* If no step prop has been passed, lookup the active unit and

[40392] Fix | Delete

* try to get step from `units`, or default to a value of `1`

[40393] Fix | Delete

*/

[40394] Fix | Delete

if (!step && units) {

[40395] Fix | Delete

var _activeUnit$step;

[40396] Fix | Delete

const activeUnit = units.find(option => option.value === unit);

[40397] Fix | Delete

step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;

[40398] Fix | Delete

}

[40399] Fix | Delete

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

[40400] Fix | Delete

...props,

[40401] Fix | Delete

autoComplete: autoComplete,

[40402] Fix | Delete

className: classes,

[40403] Fix | Delete

disabled: disabled,

[40404] Fix | Delete

spinControls: "none",

[40405] Fix | Delete

isPressEnterToChange: isPressEnterToChange,

[40406] Fix | Delete

label: label,

[40407] Fix | Delete

onKeyDown: handleOnKeyDown,

[40408] Fix | Delete

onChange: handleOnQuantityChange,

[40409] Fix | Delete

ref: forwardedRef,

[40410] Fix | Delete

size: size,

[40411] Fix | Delete

suffix: inputSuffix,

[40412] Fix | Delete

type: isPressEnterToChange ? 'text' : 'number',

[40413] Fix | Delete

value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '',

[40414] Fix | Delete

step: step,

[40415] Fix | Delete

onFocus: onFocusProp,

[40416] Fix | Delete

__unstableStateReducer: __unstableStateReducer

[40417] Fix | Delete

});

[40418] Fix | Delete

}

[40419] Fix | Delete

[40420] Fix | Delete

/**

[40421] Fix | Delete

* `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).

[40422] Fix | Delete

*

[40423] Fix | Delete

*

[40424] Fix | Delete

* ```jsx

[40425] Fix | Delete

* import { __experimentalUnitControl as UnitControl } from '@wordpress/components';

[40426] Fix | Delete

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

[40427] Fix | Delete

*

[40428] Fix | Delete

* const Example = () => {

[40429] Fix | Delete

* const [ value, setValue ] = useState( '10px' );

[40430] Fix | Delete

*

[40431] Fix | Delete

* return <UnitControl onChange={ setValue } value={ value } />;

[40432] Fix | Delete

* };

[40433] Fix | Delete

* ```

[40434] Fix | Delete

*/

[40435] Fix | Delete

const UnitControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedUnitControl);

[40436] Fix | Delete

[40437] Fix | Delete

/* harmony default export */ const unit_control = (UnitControl);

[40438] Fix | Delete

[40439] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control/hook.js

[40440] Fix | Delete

/**

[40441] Fix | Delete

* WordPress dependencies

[40442] Fix | Delete

*/

[40443] Fix | Delete

[40444] Fix | Delete

[40445] Fix | Delete

/**

[40446] Fix | Delete

* Internal dependencies

[40447] Fix | Delete

*/

[40448] Fix | Delete

[40449] Fix | Delete

[40450] Fix | Delete

[40451] Fix | Delete

[40452] Fix | Delete

// If either width or color are defined, the border is considered valid

[40453] Fix | Delete

// and a border style can be set as well.

[40454] Fix | Delete

const isValidBorder = border => {

[40455] Fix | Delete

const hasWidth = border?.width !== undefined && border.width !== '';

[40456] Fix | Delete

const hasColor = border?.color !== undefined;

[40457] Fix | Delete

return hasWidth || hasColor;

[40458] Fix | Delete

};

[40459] Fix | Delete

function useBorderControl(props) {

[40460] Fix | Delete

const {

[40461] Fix | Delete

className,

[40462] Fix | Delete

colors = [],

[40463] Fix | Delete

isCompact,

[40464] Fix | Delete

onChange,

[40465] Fix | Delete

enableAlpha = true,

[40466] Fix | Delete

enableStyle = true,

[40467] Fix | Delete

shouldSanitizeBorder = true,

[40468] Fix | Delete

size = 'default',

[40469] Fix | Delete

value: border,

[40470] Fix | Delete

width,

[40471] Fix | Delete

__experimentalIsRenderedInSidebar = false,

[40472] Fix | Delete

__next40pxDefaultSize,

[40473] Fix | Delete

...otherProps

[40474] Fix | Delete

} = useContextSystem(props, 'BorderControl');

[40475] Fix | Delete

const computedSize = size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;

[40476] Fix | Delete

const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width);

[40477] Fix | Delete

const widthUnit = originalWidthUnit || 'px';

[40478] Fix | Delete

const hadPreviousZeroWidth = widthValue === 0;

[40479] Fix | Delete

const [colorSelection, setColorSelection] = (0,external_wp_element_namespaceObject.useState)();

[40480] Fix | Delete

const [styleSelection, setStyleSelection] = (0,external_wp_element_namespaceObject.useState)();

[40481] Fix | Delete

const isStyleSettable = shouldSanitizeBorder ? isValidBorder(border) : true;

[40482] Fix | Delete

const onBorderChange = (0,external_wp_element_namespaceObject.useCallback)(newBorder => {

[40483] Fix | Delete

if (shouldSanitizeBorder && !isValidBorder(newBorder)) {

[40484] Fix | Delete

onChange(undefined);

[40485] Fix | Delete

return;

[40486] Fix | Delete

}

[40487] Fix | Delete

onChange(newBorder);

[40488] Fix | Delete

}, [onChange, shouldSanitizeBorder]);

[40489] Fix | Delete

const onWidthChange = (0,external_wp_element_namespaceObject.useCallback)(newWidth => {

[40490] Fix | Delete

const newWidthValue = newWidth === '' ? undefined : newWidth;

[40491] Fix | Delete

const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth);

[40492] Fix | Delete

const hasZeroWidth = parsedValue === 0;

[40493] Fix | Delete

const updatedBorder = {

[40494] Fix | Delete

...border,

[40495] Fix | Delete

width: newWidthValue

[40496] Fix | Delete

};

[40497] Fix | Delete

[40498] Fix | Delete

// Setting the border width explicitly to zero will also set the

[40499] Fix | Delete