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

[41000] Fix | Delete

className: centeredClassName,

[41001] Fix | Delete

hideLabelFromVision: true,

[41002] Fix | Delete

label: (0,external_wp_i18n_namespaceObject.__)('Top border'),

[41003] Fix | Delete

onChange: newBorder => onChange(newBorder, 'top'),

[41004] Fix | Delete

__unstablePopoverProps: popoverProps,

[41005] Fix | Delete

value: value?.top,

[41006] Fix | Delete

...sharedBorderControlProps

[41007] Fix | Delete

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

[41008] Fix | Delete

hideLabelFromVision: true,

[41009] Fix | Delete

label: (0,external_wp_i18n_namespaceObject.__)('Left border'),

[41010] Fix | Delete

onChange: newBorder => onChange(newBorder, 'left'),

[41011] Fix | Delete

__unstablePopoverProps: popoverProps,

[41012] Fix | Delete

value: value?.left,

[41013] Fix | Delete

...sharedBorderControlProps

[41014] Fix | Delete

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

[41015] Fix | Delete

className: rightAlignedClassName,

[41016] Fix | Delete

hideLabelFromVision: true,

[41017] Fix | Delete

label: (0,external_wp_i18n_namespaceObject.__)('Right border'),

[41018] Fix | Delete

onChange: newBorder => onChange(newBorder, 'right'),

[41019] Fix | Delete

__unstablePopoverProps: popoverProps,

[41020] Fix | Delete

value: value?.right,

[41021] Fix | Delete

...sharedBorderControlProps

[41022] Fix | Delete

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

[41023] Fix | Delete

className: centeredClassName,

[41024] Fix | Delete

hideLabelFromVision: true,

[41025] Fix | Delete

label: (0,external_wp_i18n_namespaceObject.__)('Bottom border'),

[41026] Fix | Delete

onChange: newBorder => onChange(newBorder, 'bottom'),

[41027] Fix | Delete

__unstablePopoverProps: popoverProps,

[41028] Fix | Delete

value: value?.bottom,

[41029] Fix | Delete

...sharedBorderControlProps

[41030] Fix | Delete

})]

[41031] Fix | Delete

});

[41032] Fix | Delete

};

[41033] Fix | Delete

const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls');

[41034] Fix | Delete

/* harmony default export */ const border_box_control_split_controls_component = (ConnectedBorderBoxControlSplitControls);

[41035] Fix | Delete

[41036] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/unit-values.js

[41037] Fix | Delete

const UNITED_VALUE_REGEX = /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|svw|lvw|dvw|svh|lvh|dvh|svi|lvi|dvi|svb|lvb|dvb|svmin|lvmin|dvmin|svmax|lvmax|dvmax)?$/;

[41038] Fix | Delete

[41039] Fix | Delete

/**

[41040] Fix | Delete

* Parses a number and unit from a value.

[41041] Fix | Delete

*

[41042] Fix | Delete

* @param toParse Value to parse

[41043] Fix | Delete

*

[41044] Fix | Delete

* @return The extracted number and unit.

[41045] Fix | Delete

*/

[41046] Fix | Delete

function parseCSSUnitValue(toParse) {

[41047] Fix | Delete

const value = toParse.trim();

[41048] Fix | Delete

const matched = value.match(UNITED_VALUE_REGEX);

[41049] Fix | Delete

if (!matched) {

[41050] Fix | Delete

return [undefined, undefined];

[41051] Fix | Delete

}

[41052] Fix | Delete

const [, num, unit] = matched;

[41053] Fix | Delete

let numParsed = parseFloat(num);

[41054] Fix | Delete

numParsed = Number.isNaN(numParsed) ? undefined : numParsed;

[41055] Fix | Delete

return [numParsed, unit];

[41056] Fix | Delete

}

[41057] Fix | Delete

[41058] Fix | Delete

/**

[41059] Fix | Delete

* Combines a value and a unit into a unit value.

[41060] Fix | Delete

*

[41061] Fix | Delete

* @param value

[41062] Fix | Delete

* @param unit

[41063] Fix | Delete

*

[41064] Fix | Delete

* @return The unit value.

[41065] Fix | Delete

*/

[41066] Fix | Delete

function createCSSUnitValue(value, unit) {

[41067] Fix | Delete

return `${value}${unit}`;

[41068] Fix | Delete

}

[41069] Fix | Delete

[41070] Fix | Delete

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

[41071] Fix | Delete

/**

[41072] Fix | Delete

* External dependencies

[41073] Fix | Delete

*/

[41074] Fix | Delete

[41075] Fix | Delete

/**

[41076] Fix | Delete

* Internal dependencies

[41077] Fix | Delete

*/

[41078] Fix | Delete

[41079] Fix | Delete

const utils_sides = ['top', 'right', 'bottom', 'left'];

[41080] Fix | Delete

const borderProps = ['color', 'style', 'width'];

[41081] Fix | Delete

const isEmptyBorder = border => {

[41082] Fix | Delete

if (!border) {

[41083] Fix | Delete

return true;

[41084] Fix | Delete

}

[41085] Fix | Delete

return !borderProps.some(prop => border[prop] !== undefined);

[41086] Fix | Delete

};

[41087] Fix | Delete

const isDefinedBorder = border => {

[41088] Fix | Delete

// No border, no worries :)

[41089] Fix | Delete

if (!border) {

[41090] Fix | Delete

return false;

[41091] Fix | Delete

}

[41092] Fix | Delete

[41093] Fix | Delete

// If we have individual borders per side within the border object we

[41094] Fix | Delete

// need to check whether any of those side borders have been set.

[41095] Fix | Delete

if (hasSplitBorders(border)) {

[41096] Fix | Delete

const allSidesEmpty = utils_sides.every(side => isEmptyBorder(border[side]));

[41097] Fix | Delete

return !allSidesEmpty;

[41098] Fix | Delete

}

[41099] Fix | Delete

[41100] Fix | Delete

// If we have a top-level border only, check if that is empty. e.g.

[41101] Fix | Delete

// { color: undefined, style: undefined, width: undefined }

[41102] Fix | Delete

// Border radius can still be set within the border object as it is

[41103] Fix | Delete

// handled separately.

[41104] Fix | Delete

return !isEmptyBorder(border);

[41105] Fix | Delete

};

[41106] Fix | Delete

const isCompleteBorder = border => {

[41107] Fix | Delete

if (!border) {

[41108] Fix | Delete

return false;

[41109] Fix | Delete

}

[41110] Fix | Delete

return borderProps.every(prop => border[prop] !== undefined);

[41111] Fix | Delete

};

[41112] Fix | Delete

const hasSplitBorders = (border = {}) => {

[41113] Fix | Delete

return Object.keys(border).some(side => utils_sides.indexOf(side) !== -1);

[41114] Fix | Delete

};

[41115] Fix | Delete

const hasMixedBorders = borders => {

[41116] Fix | Delete

if (!hasSplitBorders(borders)) {

[41117] Fix | Delete

return false;

[41118] Fix | Delete

}

[41119] Fix | Delete

const shorthandBorders = utils_sides.map(side => getShorthandBorderStyle(borders?.[side]));

[41120] Fix | Delete

return !shorthandBorders.every(border => border === shorthandBorders[0]);

[41121] Fix | Delete

};

[41122] Fix | Delete

const getSplitBorders = border => {

[41123] Fix | Delete

if (!border || isEmptyBorder(border)) {

[41124] Fix | Delete

return undefined;

[41125] Fix | Delete

}

[41126] Fix | Delete

return {

[41127] Fix | Delete

top: border,

[41128] Fix | Delete

right: border,

[41129] Fix | Delete

bottom: border,

[41130] Fix | Delete

left: border

[41131] Fix | Delete

};

[41132] Fix | Delete

};

[41133] Fix | Delete

const getBorderDiff = (original, updated) => {

[41134] Fix | Delete

const diff = {};

[41135] Fix | Delete

if (original.color !== updated.color) {

[41136] Fix | Delete

diff.color = updated.color;

[41137] Fix | Delete

}

[41138] Fix | Delete

if (original.style !== updated.style) {

[41139] Fix | Delete

diff.style = updated.style;

[41140] Fix | Delete

}

[41141] Fix | Delete

if (original.width !== updated.width) {

[41142] Fix | Delete

diff.width = updated.width;

[41143] Fix | Delete

}

[41144] Fix | Delete

return diff;

[41145] Fix | Delete

};

[41146] Fix | Delete

const getCommonBorder = borders => {

[41147] Fix | Delete

if (!borders) {

[41148] Fix | Delete

return undefined;

[41149] Fix | Delete

}

[41150] Fix | Delete

const colors = [];

[41151] Fix | Delete

const styles = [];

[41152] Fix | Delete

const widths = [];

[41153] Fix | Delete

utils_sides.forEach(side => {

[41154] Fix | Delete

colors.push(borders[side]?.color);

[41155] Fix | Delete

styles.push(borders[side]?.style);

[41156] Fix | Delete

widths.push(borders[side]?.width);

[41157] Fix | Delete

});

[41158] Fix | Delete

const allColorsMatch = colors.every(value => value === colors[0]);

[41159] Fix | Delete

const allStylesMatch = styles.every(value => value === styles[0]);

[41160] Fix | Delete

const allWidthsMatch = widths.every(value => value === widths[0]);

[41161] Fix | Delete

return {

[41162] Fix | Delete

color: allColorsMatch ? colors[0] : undefined,

[41163] Fix | Delete

style: allStylesMatch ? styles[0] : undefined,

[41164] Fix | Delete

width: allWidthsMatch ? widths[0] : getMostCommonUnit(widths)

[41165] Fix | Delete

};

[41166] Fix | Delete

};

[41167] Fix | Delete

const getShorthandBorderStyle = (border, fallbackBorder) => {

[41168] Fix | Delete

if (isEmptyBorder(border)) {

[41169] Fix | Delete

return fallbackBorder;

[41170] Fix | Delete

}

[41171] Fix | Delete

const {

[41172] Fix | Delete

color: fallbackColor,

[41173] Fix | Delete

style: fallbackStyle,

[41174] Fix | Delete

width: fallbackWidth

[41175] Fix | Delete

} = fallbackBorder || {};

[41176] Fix | Delete

const {

[41177] Fix | Delete

color = fallbackColor,

[41178] Fix | Delete

style = fallbackStyle,

[41179] Fix | Delete

width = fallbackWidth

[41180] Fix | Delete

} = border;

[41181] Fix | Delete

const hasVisibleBorder = !!width && width !== '0' || !!color;

[41182] Fix | Delete

const borderStyle = hasVisibleBorder ? style || 'solid' : style;

[41183] Fix | Delete

return [width, borderStyle, color].filter(Boolean).join(' ');

[41184] Fix | Delete

};

[41185] Fix | Delete

const getMostCommonUnit = values => {

[41186] Fix | Delete

// Collect all the CSS units.

[41187] Fix | Delete

const units = values.map(value => value === undefined ? undefined : parseCSSUnitValue(`${value}`)[1]);

[41188] Fix | Delete

[41189] Fix | Delete

// Return the most common unit out of only the defined CSS units.

[41190] Fix | Delete

const filteredUnits = units.filter(value => value !== undefined);

[41191] Fix | Delete

return mode(filteredUnits);

[41192] Fix | Delete

};

[41193] Fix | Delete

[41194] Fix | Delete

/**

[41195] Fix | Delete

* Finds the mode value out of the array passed favouring the first value

[41196] Fix | Delete

* as a tiebreaker.

[41197] Fix | Delete

*

[41198] Fix | Delete

* @param values Values to determine the mode from.

[41199] Fix | Delete

*

[41200] Fix | Delete

* @return The mode value.

[41201] Fix | Delete

*/

[41202] Fix | Delete

function mode(values) {

[41203] Fix | Delete

if (values.length === 0) {

[41204] Fix | Delete

return undefined;

[41205] Fix | Delete

}

[41206] Fix | Delete

const map = {};

[41207] Fix | Delete

let maxCount = 0;

[41208] Fix | Delete

let currentMode;

[41209] Fix | Delete

values.forEach(value => {

[41210] Fix | Delete

map[value] = map[value] === undefined ? 1 : map[value] + 1;

[41211] Fix | Delete

if (map[value] > maxCount) {

[41212] Fix | Delete

currentMode = value;

[41213] Fix | Delete

maxCount = map[value];

[41214] Fix | Delete

}

[41215] Fix | Delete

});

[41216] Fix | Delete

return currentMode;

[41217] Fix | Delete

}

[41218] Fix | Delete

[41219] Fix | Delete

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

[41220] Fix | Delete

/**

[41221] Fix | Delete

* WordPress dependencies

[41222] Fix | Delete

*/

[41223] Fix | Delete

[41224] Fix | Delete

[41225] Fix | Delete

/**

[41226] Fix | Delete

* Internal dependencies

[41227] Fix | Delete

*/

[41228] Fix | Delete

[41229] Fix | Delete

[41230] Fix | Delete

[41231] Fix | Delete

[41232] Fix | Delete

function useBorderBoxControl(props) {

[41233] Fix | Delete

const {

[41234] Fix | Delete

className,

[41235] Fix | Delete

colors = [],

[41236] Fix | Delete

onChange,

[41237] Fix | Delete

enableAlpha = false,

[41238] Fix | Delete

enableStyle = true,

[41239] Fix | Delete

size = 'default',

[41240] Fix | Delete

value,

[41241] Fix | Delete

__experimentalIsRenderedInSidebar = false,

[41242] Fix | Delete

__next40pxDefaultSize,

[41243] Fix | Delete

...otherProps

[41244] Fix | Delete

} = useContextSystem(props, 'BorderBoxControl');

[41245] Fix | Delete

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

[41246] Fix | Delete

const mixedBorders = hasMixedBorders(value);

[41247] Fix | Delete

const splitBorders = hasSplitBorders(value);

[41248] Fix | Delete

const linkedValue = splitBorders ? getCommonBorder(value) : value;

[41249] Fix | Delete

const splitValue = splitBorders ? value : getSplitBorders(value);

[41250] Fix | Delete

[41251] Fix | Delete

// If no numeric width value is set, the unit select will be disabled.

[41252] Fix | Delete

const hasWidthValue = !isNaN(parseFloat(`${linkedValue?.width}`));

[41253] Fix | Delete

const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!mixedBorders);

[41254] Fix | Delete

const toggleLinked = () => setIsLinked(!isLinked);

[41255] Fix | Delete

const onLinkedChange = newBorder => {

[41256] Fix | Delete

if (!newBorder) {

[41257] Fix | Delete

return onChange(undefined);

[41258] Fix | Delete

}

[41259] Fix | Delete

[41260] Fix | Delete

// If we have all props defined on the new border apply it.

[41261] Fix | Delete

if (!mixedBorders || isCompleteBorder(newBorder)) {

[41262] Fix | Delete

return onChange(isEmptyBorder(newBorder) ? undefined : newBorder);

[41263] Fix | Delete

}

[41264] Fix | Delete

[41265] Fix | Delete

// If we had mixed borders we might have had some shared border props

[41266] Fix | Delete

// that we need to maintain. For example; we could have mixed borders

[41267] Fix | Delete

// with all the same color but different widths. Then from the linked

[41268] Fix | Delete

// control we change the color. We should keep the separate widths.

[41269] Fix | Delete

const changes = getBorderDiff(linkedValue, newBorder);

[41270] Fix | Delete

const updatedBorders = {

[41271] Fix | Delete

top: {

[41272] Fix | Delete

...value?.top,

[41273] Fix | Delete

...changes

[41274] Fix | Delete

},

[41275] Fix | Delete

right: {

[41276] Fix | Delete

...value?.right,

[41277] Fix | Delete

...changes

[41278] Fix | Delete

},

[41279] Fix | Delete

bottom: {

[41280] Fix | Delete

...value?.bottom,

[41281] Fix | Delete

...changes

[41282] Fix | Delete

},

[41283] Fix | Delete

left: {

[41284] Fix | Delete

...value?.left,

[41285] Fix | Delete

...changes

[41286] Fix | Delete

}

[41287] Fix | Delete

};

[41288] Fix | Delete

if (hasMixedBorders(updatedBorders)) {

[41289] Fix | Delete

return onChange(updatedBorders);

[41290] Fix | Delete

}

[41291] Fix | Delete

const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top;

[41292] Fix | Delete

onChange(filteredResult);

[41293] Fix | Delete

};

[41294] Fix | Delete

const onSplitChange = (newBorder, side) => {

[41295] Fix | Delete

const updatedBorders = {

[41296] Fix | Delete

...splitValue,

[41297] Fix | Delete

[side]: newBorder

[41298] Fix | Delete

};

[41299] Fix | Delete

if (hasMixedBorders(updatedBorders)) {

[41300] Fix | Delete

onChange(updatedBorders);

[41301] Fix | Delete

} else {

[41302] Fix | Delete

onChange(newBorder);

[41303] Fix | Delete

}

[41304] Fix | Delete

};

[41305] Fix | Delete

const cx = useCx();

[41306] Fix | Delete

const classes = (0,external_wp_element_namespaceObject.useMemo)(() => {

[41307] Fix | Delete

return cx(borderBoxControl, className);

[41308] Fix | Delete

}, [cx, className]);

[41309] Fix | Delete

const linkedControlClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {

[41310] Fix | Delete

return cx(linkedBorderControl());

[41311] Fix | Delete

}, [cx]);

[41312] Fix | Delete

const wrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => {

[41313] Fix | Delete

return cx(wrapper);

[41314] Fix | Delete

}, [cx]);

[41315] Fix | Delete

return {

[41316] Fix | Delete

...otherProps,

[41317] Fix | Delete

className: classes,

[41318] Fix | Delete

colors,

[41319] Fix | Delete

disableUnits: mixedBorders && !hasWidthValue,

[41320] Fix | Delete

enableAlpha,

[41321] Fix | Delete

enableStyle,

[41322] Fix | Delete

hasMixedBorders: mixedBorders,

[41323] Fix | Delete

isLinked,

[41324] Fix | Delete

linkedControlClassName,

[41325] Fix | Delete

onLinkedChange,

[41326] Fix | Delete

onSplitChange,

[41327] Fix | Delete

toggleLinked,

[41328] Fix | Delete

linkedValue,

[41329] Fix | Delete

size: computedSize,

[41330] Fix | Delete

splitValue,

[41331] Fix | Delete

wrapperClassName,

[41332] Fix | Delete

__experimentalIsRenderedInSidebar

[41333] Fix | Delete

};

[41334] Fix | Delete

}

[41335] Fix | Delete

[41336] Fix | Delete

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

[41337] Fix | Delete

/**

[41338] Fix | Delete

* WordPress dependencies

[41339] Fix | Delete

*/

[41340] Fix | Delete

[41341] Fix | Delete

[41342] Fix | Delete

[41343] Fix | Delete

[41344] Fix | Delete

/**

[41345] Fix | Delete

* Internal dependencies

[41346] Fix | Delete

*/

[41347] Fix | Delete

[41348] Fix | Delete

[41349] Fix | Delete

[41350] Fix | Delete

[41351] Fix | Delete

[41352] Fix | Delete

[41353] Fix | Delete

[41354] Fix | Delete

[41355] Fix | Delete

[41356] Fix | Delete

[41357] Fix | Delete

const component_BorderLabel = props => {

[41358] Fix | Delete

const {

[41359] Fix | Delete

label,

[41360] Fix | Delete

hideLabelFromVision

[41361] Fix | Delete

} = props;

[41362] Fix | Delete

if (!label) {

[41363] Fix | Delete

return null;

[41364] Fix | Delete

}

[41365] Fix | Delete

return hideLabelFromVision ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(visually_hidden_component, {

[41366] Fix | Delete

as: "label",

[41367] Fix | Delete

children: label

[41368] Fix | Delete

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

[41369] Fix | Delete

children: label

[41370] Fix | Delete

});

[41371] Fix | Delete

};

[41372] Fix | Delete

const UnconnectedBorderBoxControl = (props, forwardedRef) => {

[41373] Fix | Delete

const {

[41374] Fix | Delete

className,

[41375] Fix | Delete

colors,

[41376] Fix | Delete

disableCustomColors,

[41377] Fix | Delete

disableUnits,

[41378] Fix | Delete

enableAlpha,

[41379] Fix | Delete

enableStyle,

[41380] Fix | Delete

hasMixedBorders,

[41381] Fix | Delete

hideLabelFromVision,

[41382] Fix | Delete

isLinked,

[41383] Fix | Delete

label,

[41384] Fix | Delete

linkedControlClassName,

[41385] Fix | Delete

linkedValue,

[41386] Fix | Delete

onLinkedChange,

[41387] Fix | Delete

onSplitChange,

[41388] Fix | Delete

popoverPlacement,

[41389] Fix | Delete

popoverOffset,

[41390] Fix | Delete

size,

[41391] Fix | Delete

splitValue,

[41392] Fix | Delete

toggleLinked,

[41393] Fix | Delete

wrapperClassName,

[41394] Fix | Delete

__experimentalIsRenderedInSidebar,

[41395] Fix | Delete

...otherProps

[41396] Fix | Delete

} = useBorderBoxControl(props);

[41397] Fix | Delete

[41398] Fix | Delete

// Use internal state instead of a ref to make sure that the component

[41399] Fix | Delete

// re-renders when the popover's anchor updates.

[41400] Fix | Delete

const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null);

[41401] Fix | Delete

[41402] Fix | Delete

// Memoize popoverProps to avoid returning a new object every time.

[41403] Fix | Delete

const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? {

[41404] Fix | Delete

placement: popoverPlacement,

[41405] Fix | Delete

offset: popoverOffset,

[41406] Fix | Delete

anchor: popoverAnchor,

[41407] Fix | Delete

shift: true

[41408] Fix | Delete

} : undefined, [popoverPlacement, popoverOffset, popoverAnchor]);

[41409] Fix | Delete

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

[41410] Fix | Delete

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

[41411] Fix | Delete

className: className,

[41412] Fix | Delete

...otherProps,

[41413] Fix | Delete

ref: mergedRef,

[41414] Fix | Delete

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

[41415] Fix | Delete

label: label,

[41416] Fix | Delete

hideLabelFromVision: hideLabelFromVision

[41417] Fix | Delete

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

[41418] Fix | Delete

className: wrapperClassName,

[41419] Fix | Delete

children: [isLinked ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(border_control_component, {

[41420] Fix | Delete

className: linkedControlClassName,

[41421] Fix | Delete

colors: colors,

[41422] Fix | Delete

disableUnits: disableUnits,

[41423] Fix | Delete

disableCustomColors: disableCustomColors,

[41424] Fix | Delete

enableAlpha: enableAlpha,

[41425] Fix | Delete

enableStyle: enableStyle,

[41426] Fix | Delete

onChange: onLinkedChange,

[41427] Fix | Delete

placeholder: hasMixedBorders ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined,

[41428] Fix | Delete

__unstablePopoverProps: popoverProps,

[41429] Fix | Delete

shouldSanitizeBorder: false // This component will handle that.

[41430] Fix | Delete

,

[41431] Fix | Delete

value: linkedValue,

[41432] Fix | Delete

withSlider: true,

[41433] Fix | Delete

width: size === '__unstable-large' ? '116px' : '110px',

[41434] Fix | Delete

__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,

[41435] Fix | Delete

size: size

[41436] Fix | Delete

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

[41437] Fix | Delete

colors: colors,

[41438] Fix | Delete

disableCustomColors: disableCustomColors,

[41439] Fix | Delete

enableAlpha: enableAlpha,

[41440] Fix | Delete

enableStyle: enableStyle,

[41441] Fix | Delete

onChange: onSplitChange,

[41442] Fix | Delete

popoverPlacement: popoverPlacement,

[41443] Fix | Delete

popoverOffset: popoverOffset,

[41444] Fix | Delete

value: splitValue,

[41445] Fix | Delete

__experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,

[41446] Fix | Delete

size: size

[41447] Fix | Delete

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

[41448] Fix | Delete

onClick: toggleLinked,

[41449] Fix | Delete

isLinked: isLinked,

[41450] Fix | Delete

size: size

[41451] Fix | Delete

})]

[41452] Fix | Delete

})]

[41453] Fix | Delete

});

[41454] Fix | Delete

};

[41455] Fix | Delete

[41456] Fix | Delete

/**

[41457] Fix | Delete

* The `BorderBoxControl` effectively has two view states. The first, a "linked"

[41458] Fix | Delete

* view, allows configuration of a flat border via a single `BorderControl`.

[41459] Fix | Delete

* The second, a "split" view, contains a `BorderControl` for each side

[41460] Fix | Delete

* as well as a visualizer for the currently selected borders. Each view also

[41461] Fix | Delete

* contains a button to toggle between the two.

[41462] Fix | Delete

*

[41463] Fix | Delete

* When switching from the "split" view to "linked", if the individual side

[41464] Fix | Delete

* borders are not consistent, the "linked" view will display any border

[41465] Fix | Delete

* properties selections that are consistent while showing a mixed state for

[41466] Fix | Delete

* those that aren't. For example, if all borders had the same color and style

[41467] Fix | Delete

* but different widths, then the border dropdown in the "linked" view's

[41468] Fix | Delete

* `BorderControl` would show that consistent color and style but the "linked"

[41469] Fix | Delete

* view's width input would show "Mixed" placeholder text.

[41470] Fix | Delete

*

[41471] Fix | Delete

* ```jsx

[41472] Fix | Delete

* import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';

[41473] Fix | Delete

* import { __ } from '@wordpress/i18n';

[41474] Fix | Delete

*

[41475] Fix | Delete

* const colors = [

[41476] Fix | Delete

* { name: 'Blue 20', color: '#72aee6' },

[41477] Fix | Delete

* // ...

[41478] Fix | Delete

* ];

[41479] Fix | Delete

*

[41480] Fix | Delete

* const MyBorderBoxControl = () => {

[41481] Fix | Delete

* const defaultBorder = {

[41482] Fix | Delete

* color: '#72aee6',

[41483] Fix | Delete

* style: 'dashed',

[41484] Fix | Delete

* width: '1px',

[41485] Fix | Delete

* };

[41486] Fix | Delete

* const [ borders, setBorders ] = useState( {

[41487] Fix | Delete

* top: defaultBorder,

[41488] Fix | Delete

* right: defaultBorder,

[41489] Fix | Delete

* bottom: defaultBorder,

[41490] Fix | Delete

* left: defaultBorder,

[41491] Fix | Delete

* } );

[41492] Fix | Delete

* const onChange = ( newBorders ) => setBorders( newBorders );

[41493] Fix | Delete

*

[41494] Fix | Delete

* return (

[41495] Fix | Delete

* <BorderBoxControl

[41496] Fix | Delete

* colors={ colors }

[41497] Fix | Delete

* label={ __( 'Borders' ) }

[41498] Fix | Delete

* onChange={ onChange }

[41499] Fix | Delete