onLoadedData: onLoad,

[59000] Fix | Delete

ref: mediaRef,

[59001] Fix | Delete

src: src

[59002] Fix | Delete

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

[59003] Fix | Delete

...props,

[59004] Fix | Delete

alt: alt,

[59005] Fix | Delete

className: "components-focal-point-picker__media components-focal-point-picker__media--image",

[59006] Fix | Delete

onLoad: onLoad,

[59007] Fix | Delete

ref: mediaRef,

[59008] Fix | Delete

src: src

[59009] Fix | Delete

});

[59010] Fix | Delete

}

[59011] Fix | Delete

[59012] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/index.js

[59013] Fix | Delete

/**

[59014] Fix | Delete

* External dependencies

[59015] Fix | Delete

*/

[59016] Fix | Delete

[59017] Fix | Delete

[59018] Fix | Delete

/**

[59019] Fix | Delete

* WordPress dependencies

[59020] Fix | Delete

*/

[59021] Fix | Delete

[59022] Fix | Delete

[59023] Fix | Delete

[59024] Fix | Delete

[59025] Fix | Delete

/**

[59026] Fix | Delete

* Internal dependencies

[59027] Fix | Delete

*/

[59028] Fix | Delete

[59029] Fix | Delete

[59030] Fix | Delete

[59031] Fix | Delete

[59032] Fix | Delete

[59033] Fix | Delete

[59034] Fix | Delete

[59035] Fix | Delete

[59036] Fix | Delete

[59037] Fix | Delete

[59038] Fix | Delete

const GRID_OVERLAY_TIMEOUT = 600;

[59039] Fix | Delete

[59040] Fix | Delete

/**

[59041] Fix | Delete

* Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image.

[59042] Fix | Delete

*

[59043] Fix | Delete

* This component addresses a specific problem: with large background images it is common to see undesirable crops,

[59044] Fix | Delete

* especially when viewing on smaller viewports such as mobile phones. This component allows the selection of

[59045] Fix | Delete

* the point with the most important visual information and returns it as a pair of numbers between 0 and 1.

[59046] Fix | Delete

* This value can be easily converted into the CSS `background-position` attribute, and will ensure that the

[59047] Fix | Delete

* focal point is never cropped out, regardless of viewport.

[59048] Fix | Delete

*

[59049] Fix | Delete

* - Example focal point picker value: `{ x: 0.5, y: 0.1 }`

[59050] Fix | Delete

* - Corresponding CSS: `background-position: 50% 10%;`

[59051] Fix | Delete

*

[59052] Fix | Delete

* ```jsx

[59053] Fix | Delete

* import { FocalPointPicker } from '@wordpress/components';

[59054] Fix | Delete

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

[59055] Fix | Delete

*

[59056] Fix | Delete

* const Example = () => {

[59057] Fix | Delete

* const [ focalPoint, setFocalPoint ] = useState( {

[59058] Fix | Delete

* x: 0.5,

[59059] Fix | Delete

* y: 0.5,

[59060] Fix | Delete

* } );

[59061] Fix | Delete

*

[59062] Fix | Delete

* const url = '/path/to/image';

[59063] Fix | Delete

*

[59064] Fix | Delete

* // Example function to render the CSS styles based on Focal Point Picker value

[59065] Fix | Delete

* const style = {

[59066] Fix | Delete

* backgroundImage: `url(${ url })`,

[59067] Fix | Delete

* backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`,

[59068] Fix | Delete

* };

[59069] Fix | Delete

*

[59070] Fix | Delete

* return (

[59071] Fix | Delete

* <>

[59072] Fix | Delete

* <FocalPointPicker

[59073] Fix | Delete

* url={ url }

[59074] Fix | Delete

* value={ focalPoint }

[59075] Fix | Delete

* onDragStart={ setFocalPoint }

[59076] Fix | Delete

* onDrag={ setFocalPoint }

[59077] Fix | Delete

* onChange={ setFocalPoint }

[59078] Fix | Delete

* />

[59079] Fix | Delete

* <div style={ style } />

[59080] Fix | Delete

* </>

[59081] Fix | Delete

* );

[59082] Fix | Delete

* };

[59083] Fix | Delete

* ```

[59084] Fix | Delete

*/

[59085] Fix | Delete

function FocalPointPicker({

[59086] Fix | Delete

__nextHasNoMarginBottom,

[59087] Fix | Delete

__next40pxDefaultSize = false,

[59088] Fix | Delete

autoPlay = true,

[59089] Fix | Delete

className,

[59090] Fix | Delete

help,

[59091] Fix | Delete

label,

[59092] Fix | Delete

onChange,

[59093] Fix | Delete

onDrag,

[59094] Fix | Delete

onDragEnd,

[59095] Fix | Delete

onDragStart,

[59096] Fix | Delete

resolvePoint,

[59097] Fix | Delete

url,

[59098] Fix | Delete

value: valueProp = {

[59099] Fix | Delete

x: 0.5,

[59100] Fix | Delete

y: 0.5

[59101] Fix | Delete

},

[59102] Fix | Delete

...restProps

[59103] Fix | Delete

}) {

[59104] Fix | Delete

const [point, setPoint] = (0,external_wp_element_namespaceObject.useState)(valueProp);

[59105] Fix | Delete

const [showGridOverlay, setShowGridOverlay] = (0,external_wp_element_namespaceObject.useState)(false);

[59106] Fix | Delete

const {

[59107] Fix | Delete

startDrag,

[59108] Fix | Delete

endDrag,

[59109] Fix | Delete

isDragging

[59110] Fix | Delete

} = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({

[59111] Fix | Delete

onDragStart: event => {

[59112] Fix | Delete

dragAreaRef.current?.focus();

[59113] Fix | Delete

const value = getValueWithinDragArea(event);

[59114] Fix | Delete

[59115] Fix | Delete

// `value` can technically be undefined if getValueWithinDragArea() is

[59116] Fix | Delete

// called before dragAreaRef is set, but this shouldn't happen in reality.

[59117] Fix | Delete

if (!value) {

[59118] Fix | Delete

return;

[59119] Fix | Delete

}

[59120] Fix | Delete

onDragStart?.(value, event);

[59121] Fix | Delete

setPoint(value);

[59122] Fix | Delete

},

[59123] Fix | Delete

onDragMove: event => {

[59124] Fix | Delete

// Prevents text-selection when dragging.

[59125] Fix | Delete

event.preventDefault();

[59126] Fix | Delete

const value = getValueWithinDragArea(event);

[59127] Fix | Delete

if (!value) {

[59128] Fix | Delete

return;

[59129] Fix | Delete

}

[59130] Fix | Delete

onDrag?.(value, event);

[59131] Fix | Delete

setPoint(value);

[59132] Fix | Delete

},

[59133] Fix | Delete

onDragEnd: () => {

[59134] Fix | Delete

onDragEnd?.();

[59135] Fix | Delete

onChange?.(point);

[59136] Fix | Delete

}

[59137] Fix | Delete

});

[59138] Fix | Delete

[59139] Fix | Delete

// Uses the internal point while dragging or else the value from props.

[59140] Fix | Delete

const {

[59141] Fix | Delete

x,

[59142] Fix | Delete

y

[59143] Fix | Delete

} = isDragging ? point : valueProp;

[59144] Fix | Delete

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

[59145] Fix | Delete

const [bounds, setBounds] = (0,external_wp_element_namespaceObject.useState)(INITIAL_BOUNDS);

[59146] Fix | Delete

const refUpdateBounds = (0,external_wp_element_namespaceObject.useRef)(() => {

[59147] Fix | Delete

if (!dragAreaRef.current) {

[59148] Fix | Delete

return;

[59149] Fix | Delete

}

[59150] Fix | Delete

const {

[59151] Fix | Delete

clientWidth: width,

[59152] Fix | Delete

clientHeight: height

[59153] Fix | Delete

} = dragAreaRef.current;

[59154] Fix | Delete

// Falls back to initial bounds if the ref has no size. Since styles

[59155] Fix | Delete

// give the drag area dimensions even when the media has not loaded

[59156] Fix | Delete

// this should only happen in unit tests (jsdom).

[59157] Fix | Delete

setBounds(width > 0 && height > 0 ? {

[59158] Fix | Delete

width,

[59159] Fix | Delete

height

[59160] Fix | Delete

} : {

[59161] Fix | Delete

...INITIAL_BOUNDS

[59162] Fix | Delete

});

[59163] Fix | Delete

});

[59164] Fix | Delete

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

[59165] Fix | Delete

const updateBounds = refUpdateBounds.current;

[59166] Fix | Delete

if (!dragAreaRef.current) {

[59167] Fix | Delete

return;

[59168] Fix | Delete

}

[59169] Fix | Delete

const {

[59170] Fix | Delete

defaultView

[59171] Fix | Delete

} = dragAreaRef.current.ownerDocument;

[59172] Fix | Delete

defaultView?.addEventListener('resize', updateBounds);

[59173] Fix | Delete

return () => defaultView?.removeEventListener('resize', updateBounds);

[59174] Fix | Delete

}, []);

[59175] Fix | Delete

[59176] Fix | Delete

// Updates the bounds to cover cases of unspecified media or load failures.

[59177] Fix | Delete

(0,external_wp_compose_namespaceObject.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []);

[59178] Fix | Delete

[59179] Fix | Delete

// TODO: Consider refactoring getValueWithinDragArea() into a pure function.

[59180] Fix | Delete

// https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173

[59181] Fix | Delete

const getValueWithinDragArea = ({

[59182] Fix | Delete

clientX,

[59183] Fix | Delete

clientY,

[59184] Fix | Delete

shiftKey

[59185] Fix | Delete

}) => {

[59186] Fix | Delete

if (!dragAreaRef.current) {

[59187] Fix | Delete

return;

[59188] Fix | Delete

}

[59189] Fix | Delete

const {

[59190] Fix | Delete

top,

[59191] Fix | Delete

left

[59192] Fix | Delete

} = dragAreaRef.current.getBoundingClientRect();

[59193] Fix | Delete

let nextX = (clientX - left) / bounds.width;

[59194] Fix | Delete

let nextY = (clientY - top) / bounds.height;

[59195] Fix | Delete

// Enables holding shift to jump values by 10%.

[59196] Fix | Delete

if (shiftKey) {

[59197] Fix | Delete

nextX = Math.round(nextX / 0.1) * 0.1;

[59198] Fix | Delete

nextY = Math.round(nextY / 0.1) * 0.1;

[59199] Fix | Delete

}

[59200] Fix | Delete

return getFinalValue({

[59201] Fix | Delete

x: nextX,

[59202] Fix | Delete

y: nextY

[59203] Fix | Delete

});

[59204] Fix | Delete

};

[59205] Fix | Delete

const getFinalValue = value => {

[59206] Fix | Delete

var _resolvePoint;

[59207] Fix | Delete

const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value;

[59208] Fix | Delete

resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1));

[59209] Fix | Delete

resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1));

[59210] Fix | Delete

const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2;

[59211] Fix | Delete

return {

[59212] Fix | Delete

x: roundToTwoDecimalPlaces(resolvedValue.x),

[59213] Fix | Delete

y: roundToTwoDecimalPlaces(resolvedValue.y)

[59214] Fix | Delete

};

[59215] Fix | Delete

};

[59216] Fix | Delete

const arrowKeyStep = event => {

[59217] Fix | Delete

const {

[59218] Fix | Delete

code,

[59219] Fix | Delete

shiftKey

[59220] Fix | Delete

} = event;

[59221] Fix | Delete

if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) {

[59222] Fix | Delete

return;

[59223] Fix | Delete

}

[59224] Fix | Delete

event.preventDefault();

[59225] Fix | Delete

const value = {

[59226] Fix | Delete

x,

[59227] Fix | Delete

y

[59228] Fix | Delete

};

[59229] Fix | Delete

const step = shiftKey ? 0.1 : 0.01;

[59230] Fix | Delete

const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step;

[59231] Fix | Delete

const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x';

[59232] Fix | Delete

value[axis] = value[axis] + delta;

[59233] Fix | Delete

onChange?.(getFinalValue(value));

[59234] Fix | Delete

};

[59235] Fix | Delete

const focalPointPosition = {

[59236] Fix | Delete

left: x !== undefined ? x * bounds.width : 0.5 * bounds.width,

[59237] Fix | Delete

top: y !== undefined ? y * bounds.height : 0.5 * bounds.height

[59238] Fix | Delete

};

[59239] Fix | Delete

const classes = dist_clsx('components-focal-point-picker-control', className);

[59240] Fix | Delete

const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FocalPointPicker);

[59241] Fix | Delete

const id = `inspector-focal-point-picker-control-${instanceId}`;

[59242] Fix | Delete

use_update_effect(() => {

[59243] Fix | Delete

setShowGridOverlay(true);

[59244] Fix | Delete

const timeout = window.setTimeout(() => {

[59245] Fix | Delete

setShowGridOverlay(false);

[59246] Fix | Delete

}, GRID_OVERLAY_TIMEOUT);

[59247] Fix | Delete

return () => window.clearTimeout(timeout);

[59248] Fix | Delete

}, [x, y]);

[59249] Fix | Delete

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

[59250] Fix | Delete

...restProps,

[59251] Fix | Delete

__nextHasNoMarginBottom: __nextHasNoMarginBottom,

[59252] Fix | Delete

label: label,

[59253] Fix | Delete

id: id,

[59254] Fix | Delete

help: help,

[59255] Fix | Delete

className: classes,

[59256] Fix | Delete

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

[59257] Fix | Delete

className: "components-focal-point-picker-wrapper",

[59258] Fix | Delete

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

[59259] Fix | Delete

className: "components-focal-point-picker",

[59260] Fix | Delete

onKeyDown: arrowKeyStep,

[59261] Fix | Delete

onMouseDown: startDrag,

[59262] Fix | Delete

onBlur: () => {

[59263] Fix | Delete

if (isDragging) {

[59264] Fix | Delete

endDrag();

[59265] Fix | Delete

}

[59266] Fix | Delete

},

[59267] Fix | Delete

ref: dragAreaRef,

[59268] Fix | Delete

role: "button",

[59269] Fix | Delete

tabIndex: -1,

[59270] Fix | Delete

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

[59271] Fix | Delete

bounds: bounds,

[59272] Fix | Delete

showOverlay: showGridOverlay

[59273] Fix | Delete

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

[59274] Fix | Delete

alt: (0,external_wp_i18n_namespaceObject.__)('Media preview'),

[59275] Fix | Delete

autoPlay: autoPlay,

[59276] Fix | Delete

onLoad: refUpdateBounds.current,

[59277] Fix | Delete

src: url

[59278] Fix | Delete

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

[59279] Fix | Delete

...focalPointPosition,

[59280] Fix | Delete

isDragging: isDragging

[59281] Fix | Delete

})]

[59282] Fix | Delete

})

[59283] Fix | Delete

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

[59284] Fix | Delete

__nextHasNoMarginBottom: __nextHasNoMarginBottom,

[59285] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[59286] Fix | Delete

hasHelpText: !!help,

[59287] Fix | Delete

point: {

[59288] Fix | Delete

x,

[59289] Fix | Delete

y

[59290] Fix | Delete

},

[59291] Fix | Delete

onChange: value => {

[59292] Fix | Delete

onChange?.(getFinalValue(value));

[59293] Fix | Delete

}

[59294] Fix | Delete

})]

[59295] Fix | Delete

});

[59296] Fix | Delete

}

[59297] Fix | Delete

/* harmony default export */ const focal_point_picker = (FocalPointPicker);

[59298] Fix | Delete

[59299] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focusable-iframe/index.js

[59300] Fix | Delete

/**

[59301] Fix | Delete

* WordPress dependencies

[59302] Fix | Delete

*/

[59303] Fix | Delete

[59304] Fix | Delete

[59305] Fix | Delete

/**

[59306] Fix | Delete

* Internal dependencies

[59307] Fix | Delete

*/

[59308] Fix | Delete

[59309] Fix | Delete

function FocusableIframe({

[59310] Fix | Delete

iframeRef,

[59311] Fix | Delete

...props

[59312] Fix | Delete

}) {

[59313] Fix | Delete

const ref = (0,external_wp_compose_namespaceObject.useMergeRefs)([iframeRef, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]);

[59314] Fix | Delete

external_wp_deprecated_default()('wp.components.FocusableIframe', {

[59315] Fix | Delete

since: '5.9',

[59316] Fix | Delete

alternative: 'wp.compose.useFocusableIframe'

[59317] Fix | Delete

});

[59318] Fix | Delete

// Disable reason: The rendered iframe is a pass-through component,

[59319] Fix | Delete

// assigning props inherited from the rendering parent. It's the

[59320] Fix | Delete

// responsibility of the parent to assign a title.

[59321] Fix | Delete

// eslint-disable-next-line jsx-a11y/iframe-has-title

[59322] Fix | Delete

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

[59323] Fix | Delete

ref: ref,

[59324] Fix | Delete

...props

[59325] Fix | Delete

});

[59326] Fix | Delete

}

[59327] Fix | Delete

[59328] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/settings.js

[59329] Fix | Delete

/**

[59330] Fix | Delete

* WordPress dependencies

[59331] Fix | Delete

*/

[59332] Fix | Delete

[59333] Fix | Delete

[59334] Fix | Delete

[59335] Fix | Delete

const settings = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(external_wp_primitives_namespaceObject.SVG, {

[59336] Fix | Delete

xmlns: "http://www.w3.org/2000/svg",

[59337] Fix | Delete

viewBox: "0 0 24 24",

[59338] Fix | Delete

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

[59339] Fix | Delete

d: "m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"

[59340] Fix | Delete

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

[59341] Fix | Delete

d: "m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"

[59342] Fix | Delete

})]

[59343] Fix | Delete

});

[59344] Fix | Delete

/* harmony default export */ const library_settings = (settings);

[59345] Fix | Delete

[59346] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/utils.js

[59347] Fix | Delete

/**

[59348] Fix | Delete

* WordPress dependencies

[59349] Fix | Delete

*/

[59350] Fix | Delete

[59351] Fix | Delete

/**

[59352] Fix | Delete

* Internal dependencies

[59353] Fix | Delete

*/

[59354] Fix | Delete

[59355] Fix | Delete

[59356] Fix | Delete

[59357] Fix | Delete

/**

[59358] Fix | Delete

* Some themes use css vars for their font sizes, so until we

[59359] Fix | Delete

* have the way of calculating them don't display them.

[59360] Fix | Delete

*

[59361] Fix | Delete

* @param value The value that is checked.

[59362] Fix | Delete

* @return Whether the value is a simple css value.

[59363] Fix | Delete

*/

[59364] Fix | Delete

function isSimpleCssValue(value) {

[59365] Fix | Delete

const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;

[59366] Fix | Delete

return sizeRegex.test(String(value));

[59367] Fix | Delete

}

[59368] Fix | Delete

[59369] Fix | Delete

/**

[59370] Fix | Delete

* If all of the given font sizes have the same unit (e.g. 'px'), return that

[59371] Fix | Delete

* unit. Otherwise return null.

[59372] Fix | Delete

*

[59373] Fix | Delete

* @param fontSizes List of font sizes.

[59374] Fix | Delete

* @return The common unit, or null.

[59375] Fix | Delete

*/

[59376] Fix | Delete

function getCommonSizeUnit(fontSizes) {

[59377] Fix | Delete

const [firstFontSize, ...otherFontSizes] = fontSizes;

[59378] Fix | Delete

if (!firstFontSize) {

[59379] Fix | Delete

return null;

[59380] Fix | Delete

}

[59381] Fix | Delete

const [, firstUnit] = parseQuantityAndUnitFromRawValue(firstFontSize.size);

[59382] Fix | Delete

const areAllSizesSameUnit = otherFontSizes.every(fontSize => {

[59383] Fix | Delete

const [, unit] = parseQuantityAndUnitFromRawValue(fontSize.size);

[59384] Fix | Delete

return unit === firstUnit;

[59385] Fix | Delete

});

[59386] Fix | Delete

return areAllSizesSameUnit ? firstUnit : null;

[59387] Fix | Delete

}

[59388] Fix | Delete

[59389] Fix | Delete

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

[59390] Fix | Delete

[59391] Fix | Delete

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

[59392] Fix | Delete

/**

[59393] Fix | Delete

* External dependencies

[59394] Fix | Delete

*/

[59395] Fix | Delete

[59396] Fix | Delete

/**

[59397] Fix | Delete

* Internal dependencies

[59398] Fix | Delete

*/

[59399] Fix | Delete

[59400] Fix | Delete

[59401] Fix | Delete

[59402] Fix | Delete

[59403] Fix | Delete

[59404] Fix | Delete

const styles_Container = /*#__PURE__*/emotion_styled_base_browser_esm("fieldset", true ? {

[59405] Fix | Delete

target: "e8tqeku4"

[59406] Fix | Delete

} : 0)( true ? {

[59407] Fix | Delete

name: "1t1ytme",

[59408] Fix | Delete

styles: "border:0;margin:0;padding:0"

[59409] Fix | Delete

} : 0);

[59410] Fix | Delete

const styles_Header = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? {

[59411] Fix | Delete

target: "e8tqeku3"

[59412] Fix | Delete

} : 0)("height:", space(4), ";" + ( true ? "" : 0));

[59413] Fix | Delete

const HeaderToggle = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? {

[59414] Fix | Delete

target: "e8tqeku2"

[59415] Fix | Delete

} : 0)("margin-top:", space(-1), ";" + ( true ? "" : 0));

[59416] Fix | Delete

const HeaderLabel = /*#__PURE__*/emotion_styled_base_browser_esm(base_control.VisualLabel, true ? {

[59417] Fix | Delete

target: "e8tqeku1"

[59418] Fix | Delete

} : 0)("display:flex;gap:", space(1), ";justify-content:flex-start;margin-bottom:0;" + ( true ? "" : 0));

[59419] Fix | Delete

const HeaderHint = /*#__PURE__*/emotion_styled_base_browser_esm("span", true ? {

[59420] Fix | Delete

target: "e8tqeku0"

[59421] Fix | Delete

} : 0)("color:", COLORS.gray[700], ";" + ( true ? "" : 0));

[59422] Fix | Delete

[59423] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/font-size-picker-select.js

[59424] Fix | Delete

/**

[59425] Fix | Delete

* WordPress dependencies

[59426] Fix | Delete

*/

[59427] Fix | Delete

[59428] Fix | Delete

[59429] Fix | Delete

/**

[59430] Fix | Delete

* Internal dependencies

[59431] Fix | Delete

*/

[59432] Fix | Delete

[59433] Fix | Delete

[59434] Fix | Delete

[59435] Fix | Delete

[59436] Fix | Delete

const DEFAULT_OPTION = {

[59437] Fix | Delete

key: 'default',

[59438] Fix | Delete

name: (0,external_wp_i18n_namespaceObject.__)('Default'),

[59439] Fix | Delete

value: undefined

[59440] Fix | Delete

};

[59441] Fix | Delete

const CUSTOM_OPTION = {

[59442] Fix | Delete

key: 'custom',

[59443] Fix | Delete

name: (0,external_wp_i18n_namespaceObject.__)('Custom')

[59444] Fix | Delete

};

[59445] Fix | Delete

const FontSizePickerSelect = props => {

[59446] Fix | Delete

var _options$find;

[59447] Fix | Delete

const {

[59448] Fix | Delete

__next40pxDefaultSize,

[59449] Fix | Delete

fontSizes,

[59450] Fix | Delete

value,

[59451] Fix | Delete

disableCustomFontSizes,

[59452] Fix | Delete

size,

[59453] Fix | Delete

onChange,

[59454] Fix | Delete

onSelectCustom

[59455] Fix | Delete

} = props;

[59456] Fix | Delete

const areAllSizesSameUnit = !!getCommonSizeUnit(fontSizes);

[59457] Fix | Delete

const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => {

[59458] Fix | Delete

let hint;

[59459] Fix | Delete

if (areAllSizesSameUnit) {

[59460] Fix | Delete

const [quantity] = parseQuantityAndUnitFromRawValue(fontSize.size);

[59461] Fix | Delete

if (quantity !== undefined) {

[59462] Fix | Delete

hint = String(quantity);

[59463] Fix | Delete

}

[59464] Fix | Delete

} else if (isSimpleCssValue(fontSize.size)) {

[59465] Fix | Delete

hint = String(fontSize.size);

[59466] Fix | Delete

}

[59467] Fix | Delete

return {

[59468] Fix | Delete

key: fontSize.slug,

[59469] Fix | Delete

name: fontSize.name || fontSize.slug,

[59470] Fix | Delete

value: fontSize.size,

[59471] Fix | Delete

__experimentalHint: hint

[59472] Fix | Delete

};

[59473] Fix | Delete

}), ...(disableCustomFontSizes ? [] : [CUSTOM_OPTION])];

[59474] Fix | Delete

const selectedOption = value ? (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : CUSTOM_OPTION : DEFAULT_OPTION;

[59475] Fix | Delete

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

[59476] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[59477] Fix | Delete

className: "components-font-size-picker__select",

[59478] Fix | Delete

label: (0,external_wp_i18n_namespaceObject.__)('Font size'),

[59479] Fix | Delete

hideLabelFromVision: true,

[59480] Fix | Delete

describedBy: (0,external_wp_i18n_namespaceObject.sprintf)(

[59481] Fix | Delete

// translators: %s: Currently selected font size.

[59482] Fix | Delete

(0,external_wp_i18n_namespaceObject.__)('Currently selected font size: %s'), selectedOption.name),

[59483] Fix | Delete

options: options,

[59484] Fix | Delete

value: selectedOption,

[59485] Fix | Delete

__experimentalShowSelectedHint: true,

[59486] Fix | Delete

onChange: ({

[59487] Fix | Delete

selectedItem

[59488] Fix | Delete

}) => {

[59489] Fix | Delete

if (selectedItem === CUSTOM_OPTION) {

[59490] Fix | Delete

onSelectCustom();

[59491] Fix | Delete

} else {

[59492] Fix | Delete

onChange(selectedItem.value);

[59493] Fix | Delete

}

[59494] Fix | Delete

},

[59495] Fix | Delete

size: size

[59496] Fix | Delete

});

[59497] Fix | Delete

};

[59498] Fix | Delete

/* harmony default export */ const font_size_picker_select = (FontSizePickerSelect);

[59499] Fix | Delete