* This custom hook uses the ResizeObserver API to listen for resize events.

[66000] Fix | Delete

*/

[66001] Fix | Delete

const [resizeListener, sizes] = (0,external_wp_compose_namespaceObject.useResizeObserver)();

[66002] Fix | Delete

[66003] Fix | Delete

/*

[66004] Fix | Delete

* Indicates if the x/y axis is preferred.

[66005] Fix | Delete

* If set, we will avoid resetting the moveX and moveY values.

[66006] Fix | Delete

* This will allow for the preferred axis values to persist in the label.

[66007] Fix | Delete

*/

[66008] Fix | Delete

const isAxisControlled = !!axis;

[66009] Fix | Delete

[66010] Fix | Delete

/*

[66011] Fix | Delete

* The moveX and moveY values are used to track whether the label should

[66012] Fix | Delete

* display width, height, or width x height.

[66013] Fix | Delete

*/

[66014] Fix | Delete

const [moveX, setMoveX] = (0,external_wp_element_namespaceObject.useState)(false);

[66015] Fix | Delete

const [moveY, setMoveY] = (0,external_wp_element_namespaceObject.useState)(false);

[66016] Fix | Delete

[66017] Fix | Delete

/*

[66018] Fix | Delete

* Cached dimension values to check for width/height updates from the

[66019] Fix | Delete

* sizes property from useResizeAware()

[66020] Fix | Delete

*/

[66021] Fix | Delete

const {

[66022] Fix | Delete

width,

[66023] Fix | Delete

height

[66024] Fix | Delete

} = sizes;

[66025] Fix | Delete

const heightRef = (0,external_wp_element_namespaceObject.useRef)(height);

[66026] Fix | Delete

const widthRef = (0,external_wp_element_namespaceObject.useRef)(width);

[66027] Fix | Delete

[66028] Fix | Delete

/*

[66029] Fix | Delete

* This timeout is used with setMoveX and setMoveY to determine of

[66030] Fix | Delete

* both width and height values have changed at (roughly) the same time.

[66031] Fix | Delete

*/

[66032] Fix | Delete

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

[66033] Fix | Delete

const debounceUnsetMoveXY = (0,external_wp_element_namespaceObject.useCallback)(() => {

[66034] Fix | Delete

const unsetMoveXY = () => {

[66035] Fix | Delete

/*

[66036] Fix | Delete

* If axis is controlled, we will avoid resetting the moveX and moveY values.

[66037] Fix | Delete

* This will allow for the preferred axis values to persist in the label.

[66038] Fix | Delete

*/

[66039] Fix | Delete

if (isAxisControlled) {

[66040] Fix | Delete

return;

[66041] Fix | Delete

}

[66042] Fix | Delete

setMoveX(false);

[66043] Fix | Delete

setMoveY(false);

[66044] Fix | Delete

};

[66045] Fix | Delete

if (moveTimeoutRef.current) {

[66046] Fix | Delete

window.clearTimeout(moveTimeoutRef.current);

[66047] Fix | Delete

}

[66048] Fix | Delete

moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);

[66049] Fix | Delete

}, [fadeTimeout, isAxisControlled]);

[66050] Fix | Delete

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

[66051] Fix | Delete

/*

[66052] Fix | Delete

* On the initial render of useResizeAware, the height and width values are

[66053] Fix | Delete

* null. They are calculated then set using via an internal useEffect hook.

[66054] Fix | Delete

*/

[66055] Fix | Delete

const isRendered = width !== null || height !== null;

[66056] Fix | Delete

if (!isRendered) {

[66057] Fix | Delete

return;

[66058] Fix | Delete

}

[66059] Fix | Delete

const didWidthChange = width !== widthRef.current;

[66060] Fix | Delete

const didHeightChange = height !== heightRef.current;

[66061] Fix | Delete

if (!didWidthChange && !didHeightChange) {

[66062] Fix | Delete

return;

[66063] Fix | Delete

}

[66064] Fix | Delete

[66065] Fix | Delete

/*

[66066] Fix | Delete

* After the initial render, the useResizeAware will set the first

[66067] Fix | Delete

* width and height values. We'll sync those values with our

[66068] Fix | Delete

* width and height refs. However, we shouldn't render our Tooltip

[66069] Fix | Delete

* label on this first cycle.

[66070] Fix | Delete

*/

[66071] Fix | Delete

if (width && !widthRef.current && height && !heightRef.current) {

[66072] Fix | Delete

widthRef.current = width;

[66073] Fix | Delete

heightRef.current = height;

[66074] Fix | Delete

return;

[66075] Fix | Delete

}

[66076] Fix | Delete

[66077] Fix | Delete

/*

[66078] Fix | Delete

* After the first cycle, we can track width and height changes.

[66079] Fix | Delete

*/

[66080] Fix | Delete

if (didWidthChange) {

[66081] Fix | Delete

setMoveX(true);

[66082] Fix | Delete

widthRef.current = width;

[66083] Fix | Delete

}

[66084] Fix | Delete

if (didHeightChange) {

[66085] Fix | Delete

setMoveY(true);

[66086] Fix | Delete

heightRef.current = height;

[66087] Fix | Delete

}

[66088] Fix | Delete

onResize({

[66089] Fix | Delete

width,

[66090] Fix | Delete

height

[66091] Fix | Delete

});

[66092] Fix | Delete

debounceUnsetMoveXY();

[66093] Fix | Delete

}, [width, height, onResize, debounceUnsetMoveXY]);

[66094] Fix | Delete

const label = getSizeLabel({

[66095] Fix | Delete

axis,

[66096] Fix | Delete

height,

[66097] Fix | Delete

moveX,

[66098] Fix | Delete

moveY,

[66099] Fix | Delete

position,

[66100] Fix | Delete

showPx,

[66101] Fix | Delete

width

[66102] Fix | Delete

});

[66103] Fix | Delete

return {

[66104] Fix | Delete

label,

[66105] Fix | Delete

resizeListener

[66106] Fix | Delete

};

[66107] Fix | Delete

}

[66108] Fix | Delete

/**

[66109] Fix | Delete

* Gets the resize label based on width and height values (as well as recent changes).

[66110] Fix | Delete

*

[66111] Fix | Delete

* @param props

[66112] Fix | Delete

* @param props.axis Only shows the label corresponding to the axis.

[66113] Fix | Delete

* @param props.height Height value.

[66114] Fix | Delete

* @param props.moveX Recent width (x axis) changes.

[66115] Fix | Delete

* @param props.moveY Recent width (y axis) changes.

[66116] Fix | Delete

* @param props.position Adjusts label value.

[66117] Fix | Delete

* @param props.showPx Whether to add `PX` to the label.

[66118] Fix | Delete

* @param props.width Width value.

[66119] Fix | Delete

*

[66120] Fix | Delete

* @return The rendered label.

[66121] Fix | Delete

*/

[66122] Fix | Delete

function getSizeLabel({

[66123] Fix | Delete

axis,

[66124] Fix | Delete

height,

[66125] Fix | Delete

moveX = false,

[66126] Fix | Delete

moveY = false,

[66127] Fix | Delete

position = POSITIONS.bottom,

[66128] Fix | Delete

showPx = false,

[66129] Fix | Delete

width

[66130] Fix | Delete

}) {

[66131] Fix | Delete

if (!moveX && !moveY) {

[66132] Fix | Delete

return undefined;

[66133] Fix | Delete

}

[66134] Fix | Delete

[66135] Fix | Delete

/*

[66136] Fix | Delete

* Corner position...

[66137] Fix | Delete

* We want the label to appear like width x height.

[66138] Fix | Delete

*/

[66139] Fix | Delete

if (position === POSITIONS.corner) {

[66140] Fix | Delete

return `${width} x ${height}`;

[66141] Fix | Delete

}

[66142] Fix | Delete

[66143] Fix | Delete

/*

[66144] Fix | Delete

* Other POSITIONS...

[66145] Fix | Delete

* The label will combine both width x height values if both

[66146] Fix | Delete

* values have recently been changed.

[66147] Fix | Delete

*

[66148] Fix | Delete

* Otherwise, only width or height will be displayed.

[66149] Fix | Delete

* The `PX` unit will be added, if specified by the `showPx` prop.

[66150] Fix | Delete

*/

[66151] Fix | Delete

const labelUnit = showPx ? ' px' : '';

[66152] Fix | Delete

if (axis) {

[66153] Fix | Delete

if (axis === 'x' && moveX) {

[66154] Fix | Delete

return `${width}${labelUnit}`;

[66155] Fix | Delete

}

[66156] Fix | Delete

if (axis === 'y' && moveY) {

[66157] Fix | Delete

return `${height}${labelUnit}`;

[66158] Fix | Delete

}

[66159] Fix | Delete

}

[66160] Fix | Delete

if (moveX && moveY) {

[66161] Fix | Delete

return `${width} x ${height}`;

[66162] Fix | Delete

}

[66163] Fix | Delete

if (moveX) {

[66164] Fix | Delete

return `${width}${labelUnit}`;

[66165] Fix | Delete

}

[66166] Fix | Delete

if (moveY) {

[66167] Fix | Delete

return `${height}${labelUnit}`;

[66168] Fix | Delete

}

[66169] Fix | Delete

return undefined;

[66170] Fix | Delete

}

[66171] Fix | Delete

[66172] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js

[66173] Fix | Delete

[66174] Fix | Delete

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

[66175] Fix | Delete

/**

[66176] Fix | Delete

* External dependencies

[66177] Fix | Delete

*/

[66178] Fix | Delete

[66179] Fix | Delete

/**

[66180] Fix | Delete

* Internal dependencies

[66181] Fix | Delete

*/

[66182] Fix | Delete

[66183] Fix | Delete

[66184] Fix | Delete

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

[66185] Fix | Delete

target: "e1wq7y4k3"

[66186] Fix | Delete

} : 0)( true ? {

[66187] Fix | Delete

name: "1cd7zoc",

[66188] Fix | Delete

styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0"

[66189] Fix | Delete

} : 0);

[66190] Fix | Delete

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

[66191] Fix | Delete

target: "e1wq7y4k2"

[66192] Fix | Delete

} : 0)( true ? {

[66193] Fix | Delete

name: "ajymcs",

[66194] Fix | Delete

styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear"

[66195] Fix | Delete

} : 0);

[66196] Fix | Delete

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

[66197] Fix | Delete

target: "e1wq7y4k1"

[66198] Fix | Delete

} : 0)("background:", COLORS.theme.foreground, ";border-radius:2px;box-sizing:border-box;font-family:", font('default.fontFamily'), ";font-size:12px;color:", COLORS.theme.foregroundInverted, ";padding:4px 8px;position:relative;" + ( true ? "" : 0));

[66199] Fix | Delete

[66200] Fix | Delete

// TODO: Resolve need to use &&& to increase specificity

[66201] Fix | Delete

// https://github.com/WordPress/gutenberg/issues/18483

[66202] Fix | Delete

[66203] Fix | Delete

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

[66204] Fix | Delete

target: "e1wq7y4k0"

[66205] Fix | Delete

} : 0)("&&&{color:", COLORS.theme.foregroundInverted, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + ( true ? "" : 0));

[66206] Fix | Delete

[66207] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/label.js

[66208] Fix | Delete

/**

[66209] Fix | Delete

* External dependencies

[66210] Fix | Delete

*/

[66211] Fix | Delete

[66212] Fix | Delete

/**

[66213] Fix | Delete

* WordPress dependencies

[66214] Fix | Delete

*/

[66215] Fix | Delete

[66216] Fix | Delete

[66217] Fix | Delete

[66218] Fix | Delete

/**

[66219] Fix | Delete

* Internal dependencies

[66220] Fix | Delete

*/

[66221] Fix | Delete

[66222] Fix | Delete

[66223] Fix | Delete

[66224] Fix | Delete

[66225] Fix | Delete

const CORNER_OFFSET = 4;

[66226] Fix | Delete

const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;

[66227] Fix | Delete

function resize_tooltip_label_Label({

[66228] Fix | Delete

label,

[66229] Fix | Delete

position = POSITIONS.corner,

[66230] Fix | Delete

zIndex = 1000,

[66231] Fix | Delete

...props

[66232] Fix | Delete

}, ref) {

[66233] Fix | Delete

const showLabel = !!label;

[66234] Fix | Delete

const isBottom = position === POSITIONS.bottom;

[66235] Fix | Delete

const isCorner = position === POSITIONS.corner;

[66236] Fix | Delete

if (!showLabel) {

[66237] Fix | Delete

return null;

[66238] Fix | Delete

}

[66239] Fix | Delete

let style = {

[66240] Fix | Delete

opacity: showLabel ? 1 : undefined,

[66241] Fix | Delete

zIndex

[66242] Fix | Delete

};

[66243] Fix | Delete

let labelStyle = {};

[66244] Fix | Delete

if (isBottom) {

[66245] Fix | Delete

style = {

[66246] Fix | Delete

...style,

[66247] Fix | Delete

position: 'absolute',

[66248] Fix | Delete

bottom: CURSOR_OFFSET_TOP * -1,

[66249] Fix | Delete

left: '50%',

[66250] Fix | Delete

transform: 'translate(-50%, 0)'

[66251] Fix | Delete

};

[66252] Fix | Delete

labelStyle = {

[66253] Fix | Delete

transform: `translate(0, 100%)`

[66254] Fix | Delete

};

[66255] Fix | Delete

}

[66256] Fix | Delete

if (isCorner) {

[66257] Fix | Delete

style = {

[66258] Fix | Delete

...style,

[66259] Fix | Delete

position: 'absolute',

[66260] Fix | Delete

top: CORNER_OFFSET,

[66261] Fix | Delete

right: (0,external_wp_i18n_namespaceObject.isRTL)() ? undefined : CORNER_OFFSET,

[66262] Fix | Delete

left: (0,external_wp_i18n_namespaceObject.isRTL)() ? CORNER_OFFSET : undefined

[66263] Fix | Delete

};

[66264] Fix | Delete

}

[66265] Fix | Delete

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

[66266] Fix | Delete

"aria-hidden": "true",

[66267] Fix | Delete

className: "components-resizable-tooltip__tooltip-wrapper",

[66268] Fix | Delete

ref: ref,

[66269] Fix | Delete

style: style,

[66270] Fix | Delete

...props,

[66271] Fix | Delete

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

[66272] Fix | Delete

className: "components-resizable-tooltip__tooltip",

[66273] Fix | Delete

style: labelStyle,

[66274] Fix | Delete

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

[66275] Fix | Delete

as: "span",

[66276] Fix | Delete

children: label

[66277] Fix | Delete

})

[66278] Fix | Delete

})

[66279] Fix | Delete

});

[66280] Fix | Delete

}

[66281] Fix | Delete

const label_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(resize_tooltip_label_Label);

[66282] Fix | Delete

/* harmony default export */ const resize_tooltip_label = (label_ForwardedComponent);

[66283] Fix | Delete

[66284] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/index.js

[66285] Fix | Delete

/**

[66286] Fix | Delete

* External dependencies

[66287] Fix | Delete

*/

[66288] Fix | Delete

[66289] Fix | Delete

/**

[66290] Fix | Delete

* WordPress dependencies

[66291] Fix | Delete

*/

[66292] Fix | Delete

[66293] Fix | Delete

[66294] Fix | Delete

/**

[66295] Fix | Delete

* Internal dependencies

[66296] Fix | Delete

*/

[66297] Fix | Delete

[66298] Fix | Delete

[66299] Fix | Delete

[66300] Fix | Delete

[66301] Fix | Delete

[66302] Fix | Delete

const resize_tooltip_noop = () => {};

[66303] Fix | Delete

function ResizeTooltip({

[66304] Fix | Delete

axis,

[66305] Fix | Delete

className,

[66306] Fix | Delete

fadeTimeout = 180,

[66307] Fix | Delete

isVisible = true,

[66308] Fix | Delete

labelRef,

[66309] Fix | Delete

onResize = resize_tooltip_noop,

[66310] Fix | Delete

position = POSITIONS.bottom,

[66311] Fix | Delete

showPx = true,

[66312] Fix | Delete

zIndex = 1000,

[66313] Fix | Delete

...props

[66314] Fix | Delete

}, ref) {

[66315] Fix | Delete

const {

[66316] Fix | Delete

label,

[66317] Fix | Delete

resizeListener

[66318] Fix | Delete

} = useResizeLabel({

[66319] Fix | Delete

axis,

[66320] Fix | Delete

fadeTimeout,

[66321] Fix | Delete

onResize,

[66322] Fix | Delete

showPx,

[66323] Fix | Delete

position

[66324] Fix | Delete

});

[66325] Fix | Delete

if (!isVisible) {

[66326] Fix | Delete

return null;

[66327] Fix | Delete

}

[66328] Fix | Delete

const classes = dist_clsx('components-resize-tooltip', className);

[66329] Fix | Delete

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

[66330] Fix | Delete

"aria-hidden": "true",

[66331] Fix | Delete

className: classes,

[66332] Fix | Delete

ref: ref,

[66333] Fix | Delete

...props,

[66334] Fix | Delete

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

[66335] Fix | Delete

"aria-hidden": props['aria-hidden'],

[66336] Fix | Delete

label: label,

[66337] Fix | Delete

position: position,

[66338] Fix | Delete

ref: labelRef,

[66339] Fix | Delete

zIndex: zIndex

[66340] Fix | Delete

})]

[66341] Fix | Delete

});

[66342] Fix | Delete

}

[66343] Fix | Delete

const resize_tooltip_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(ResizeTooltip);

[66344] Fix | Delete

/* harmony default export */ const resize_tooltip = (resize_tooltip_ForwardedComponent);

[66345] Fix | Delete

[66346] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/index.js

[66347] Fix | Delete

/**

[66348] Fix | Delete

* WordPress dependencies

[66349] Fix | Delete

*/

[66350] Fix | Delete

[66351] Fix | Delete

[66352] Fix | Delete

/**

[66353] Fix | Delete

* External dependencies

[66354] Fix | Delete

*/

[66355] Fix | Delete

[66356] Fix | Delete

[66357] Fix | Delete

/**

[66358] Fix | Delete

* Internal dependencies

[66359] Fix | Delete

*/

[66360] Fix | Delete

[66361] Fix | Delete

[66362] Fix | Delete

[66363] Fix | Delete

const HANDLE_CLASS_NAME = 'components-resizable-box__handle';

[66364] Fix | Delete

const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle';

[66365] Fix | Delete

const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle';

[66366] Fix | Delete

const HANDLE_CLASSES = {

[66367] Fix | Delete

top: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'),

[66368] Fix | Delete

right: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'),

[66369] Fix | Delete

bottom: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'),

[66370] Fix | Delete

left: dist_clsx(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'),

[66371] Fix | Delete

topLeft: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'),

[66372] Fix | Delete

topRight: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'),

[66373] Fix | Delete

bottomRight: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'),

[66374] Fix | Delete

bottomLeft: dist_clsx(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left')

[66375] Fix | Delete

};

[66376] Fix | Delete

[66377] Fix | Delete

// Removes the inline styles in the drag handles.

[66378] Fix | Delete

const HANDLE_STYLES_OVERRIDES = {

[66379] Fix | Delete

width: undefined,

[66380] Fix | Delete

height: undefined,

[66381] Fix | Delete

top: undefined,

[66382] Fix | Delete

right: undefined,

[66383] Fix | Delete

bottom: undefined,

[66384] Fix | Delete

left: undefined

[66385] Fix | Delete

};

[66386] Fix | Delete

const HANDLE_STYLES = {

[66387] Fix | Delete

top: HANDLE_STYLES_OVERRIDES,

[66388] Fix | Delete

right: HANDLE_STYLES_OVERRIDES,

[66389] Fix | Delete

bottom: HANDLE_STYLES_OVERRIDES,

[66390] Fix | Delete

left: HANDLE_STYLES_OVERRIDES,

[66391] Fix | Delete

topLeft: HANDLE_STYLES_OVERRIDES,

[66392] Fix | Delete

topRight: HANDLE_STYLES_OVERRIDES,

[66393] Fix | Delete

bottomRight: HANDLE_STYLES_OVERRIDES,

[66394] Fix | Delete

bottomLeft: HANDLE_STYLES_OVERRIDES

[66395] Fix | Delete

};

[66396] Fix | Delete

function UnforwardedResizableBox({

[66397] Fix | Delete

className,

[66398] Fix | Delete

children,

[66399] Fix | Delete

showHandle = true,

[66400] Fix | Delete

__experimentalShowTooltip: showTooltip = false,

[66401] Fix | Delete

__experimentalTooltipProps: tooltipProps = {},

[66402] Fix | Delete

...props

[66403] Fix | Delete

}, ref) {

[66404] Fix | Delete

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

[66405] Fix | Delete

className: dist_clsx('components-resizable-box__container', showHandle && 'has-show-handle', className),

[66406] Fix | Delete

handleClasses: HANDLE_CLASSES,

[66407] Fix | Delete

handleStyles: HANDLE_STYLES,

[66408] Fix | Delete

ref: ref,

[66409] Fix | Delete

...props,

[66410] Fix | Delete

children: [children, showTooltip && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(resize_tooltip, {

[66411] Fix | Delete

...tooltipProps

[66412] Fix | Delete

})]

[66413] Fix | Delete

});

[66414] Fix | Delete

}

[66415] Fix | Delete

const ResizableBox = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedResizableBox);

[66416] Fix | Delete

/* harmony default export */ const resizable_box = (ResizableBox);

[66417] Fix | Delete

[66418] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/responsive-wrapper/index.js

[66419] Fix | Delete

/**

[66420] Fix | Delete

* External dependencies

[66421] Fix | Delete

*/

[66422] Fix | Delete

[66423] Fix | Delete

[66424] Fix | Delete

/**

[66425] Fix | Delete

* WordPress dependencies

[66426] Fix | Delete

*/

[66427] Fix | Delete

[66428] Fix | Delete

[66429] Fix | Delete

/**

[66430] Fix | Delete

* Internal dependencies

[66431] Fix | Delete

*/

[66432] Fix | Delete

[66433] Fix | Delete

/**

[66434] Fix | Delete

* A wrapper component that maintains its aspect ratio when resized.

[66435] Fix | Delete

*

[66436] Fix | Delete

* ```jsx

[66437] Fix | Delete

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

[66438] Fix | Delete

*

[66439] Fix | Delete

* const MyResponsiveWrapper = () => (

[66440] Fix | Delete

* <ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>

[66441] Fix | Delete

* <img

[66442] Fix | Delete

* src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"

[66443] Fix | Delete

* alt="WordPress"

[66444] Fix | Delete

* />

[66445] Fix | Delete

* </ResponsiveWrapper>

[66446] Fix | Delete

* );

[66447] Fix | Delete

* ```

[66448] Fix | Delete

*/

[66449] Fix | Delete

function ResponsiveWrapper({

[66450] Fix | Delete

naturalWidth,

[66451] Fix | Delete

naturalHeight,

[66452] Fix | Delete

children,

[66453] Fix | Delete

isInline = false

[66454] Fix | Delete

}) {

[66455] Fix | Delete

if (external_wp_element_namespaceObject.Children.count(children) !== 1) {

[66456] Fix | Delete

return null;

[66457] Fix | Delete

}

[66458] Fix | Delete

const TagName = isInline ? 'span' : 'div';

[66459] Fix | Delete

let aspectRatio;

[66460] Fix | Delete

if (naturalWidth && naturalHeight) {

[66461] Fix | Delete

aspectRatio = `${naturalWidth} / ${naturalHeight}`;

[66462] Fix | Delete

}

[66463] Fix | Delete

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

[66464] Fix | Delete

className: "components-responsive-wrapper",

[66465] Fix | Delete

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

[66466] Fix | Delete

children: (0,external_wp_element_namespaceObject.cloneElement)(children, {

[66467] Fix | Delete

className: dist_clsx('components-responsive-wrapper__content', children.props.className),

[66468] Fix | Delete

style: {

[66469] Fix | Delete

...children.props.style,

[66470] Fix | Delete

aspectRatio

[66471] Fix | Delete

}

[66472] Fix | Delete

})

[66473] Fix | Delete

})

[66474] Fix | Delete

});

[66475] Fix | Delete

}

[66476] Fix | Delete

/* harmony default export */ const responsive_wrapper = (ResponsiveWrapper);

[66477] Fix | Delete

[66478] Fix | Delete

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

[66479] Fix | Delete

/**

[66480] Fix | Delete

* WordPress dependencies

[66481] Fix | Delete

*/

[66482] Fix | Delete

[66483] Fix | Delete

[66484] Fix | Delete

[66485] Fix | Delete

/**

[66486] Fix | Delete

* Internal dependencies

[66487] Fix | Delete

*/

[66488] Fix | Delete

[66489] Fix | Delete

[66490] Fix | Delete

const observeAndResizeJS = function () {

[66491] Fix | Delete

const {

[66492] Fix | Delete

MutationObserver

[66493] Fix | Delete

} = window;

[66494] Fix | Delete

if (!MutationObserver || !document.body || !window.parent) {

[66495] Fix | Delete

return;

[66496] Fix | Delete

}

[66497] Fix | Delete

function sendResize() {

[66498] Fix | Delete

const clientBoundingRect = document.body.getBoundingClientRect();

[66499] Fix | Delete