@wordpress/components 35.1.1-next.v.202606191442.0 → 36.0.0

package/src/menu/test/index.tsx

@@ -31,22 +31,6 @@ const resetTypeahead = () => {
 
 describe( 'Menu', () => {
 	let user: ReturnType< typeof userEvent.setup >;
-	let originalGetClientRects: () => DOMRectList;
-
-	beforeAll( () => {
-		// Code that considers focusability considers rects in whether the
-		// element is visible, but since jsdom does not simulate layout, we
-		// need to fake it. This should ideally be a global test mock to
-		// faithfully emulate a true browser environment.
-		originalGetClientRects = window.Element.prototype.getClientRects;
-		window.Element.prototype.getClientRects = jest.fn(
-			() => [ { width: 1, height: 1 } ] as unknown as DOMRectList
-		);
-	} );
-
-	afterAll( () => {
-		window.Element.prototype.getClientRects = originalGetClientRects;
-	} );
 
 	beforeEach( () => {
 		user = userEvent.setup();

package/src/menu-item/test/__snapshots__/index.js.snap

@@ -20,6 +20,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
   <svg
     aria-hidden="true"
     class="components-menu-items__item-icon has-icon-right"
+    fill="currentColor"
     focusable="false"
     height="24"
     viewBox="0 0 24 24"
@@ -79,6 +80,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
   <svg
     aria-hidden="true"
     class="components-menu-items__item-icon has-icon-right"
+    fill="currentColor"
     focusable="false"
     height="24"
     viewBox="0 0 24 24"

package/src/modal/test/index.tsx

@@ -269,9 +269,6 @@ describe( 'Modal', () => {
 	} );
 
 	describe( 'Focus handling', () => {
-		const originalGetClientRects =
-			window.HTMLElement.prototype.getClientRects;
-
 		const FocusMountDemo = ( {
 			focusOnMount,
 		}: Pick< ModalProps, 'focusOnMount' > ) => {
@@ -300,27 +297,6 @@ describe( 'Modal', () => {
 			);
 		};
 
-		beforeEach( () => {
-			/**
-			 * The test environment does not have a layout engine, so we need to mock
-			 * the getClientRects method. This ensures that the focusable elements can be
-			 * found by the `focusOnMount` logic which depends on layout information
-			 * to determine if the element is visible or not.
-			 * See https://github.com/WordPress/gutenberg/blob/trunk/packages/dom/src/focusable.js#L55-L61.
-			 */
-			// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
-			window.HTMLElement.prototype.getClientRects = function () {
-				return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-			};
-		} );
-
-		afterEach( () => {
-			// Restore original HTMLElement prototype.
-			// See beforeEach for details.
-			window.HTMLElement.prototype.getClientRects =
-				originalGetClientRects;
-		} );
-
 		it( 'should focus the Modal dialog by default when `focusOnMount` prop is not provided', async () => {
 			const user = userEvent.setup();
 

package/src/navigable-container/test/navigable-menu.tsx

@@ -28,23 +28,7 @@ const getNavigableMenuFocusables = () => [
 	screen.getByRole( 'link', { name: 'Item 4' } ),
 ];
 
-const originalGetClientRects = window.HTMLElement.prototype.getClientRects;
-
 describe( 'NavigableMenu', () => {
-	beforeAll( () => {
-		// Mocking `getClientRects()` is necessary to pass a check performed by
-		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
-		// from the `@wordpress/dom` package.
-		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
-		window.HTMLElement.prototype.getClientRects = function () {
-			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-		};
-	} );
-
-	afterAll( () => {
-		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	it( 'moves focus on its focusable children by using the up/down arrow keys', async () => {
 		const user = userEvent.setup();
 

package/src/navigable-container/test/tababble-container.tsx

@@ -35,23 +35,7 @@ const getTabbableContainerTabbables = () => [
 	screen.getByRole( 'link', { name: 'Item 4' } ),
 ];
 
-const originalGetClientRects = window.HTMLElement.prototype.getClientRects;
-
 describe( 'TabbableContainer', () => {
-	beforeAll( () => {
-		// Mocking `getClientRects()` is necessary to pass a check performed by
-		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
-		// from the `@wordpress/dom` package.
-		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
-		window.HTMLElement.prototype.getClientRects = function () {
-			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-		};
-	} );
-
-	afterAll( () => {
-		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	it( 'moves focus on its tabbable children by using the tab key', async () => {
 		const user = userEvent.setup();
 

package/src/navigator/test/index.tsx

@@ -469,30 +469,6 @@ const getNavigationButton = ( buttonKey: keyof typeof BUTTON_TEXT ) =>
 	screen.getByRole( 'button', { name: BUTTON_TEXT[ buttonKey ] } );
 
 describe( 'Navigator', () => {
-	const originalGetClientRects = window.Element.prototype.getClientRects;
-
-	// `getClientRects` needs to be mocked so that `isVisible` from the `@wordpress/dom`
-	// `focusable` module can pass, in a JSDOM env where the DOM elements have no width/height.
-	const mockedGetClientRects = jest.fn( () => [
-		{
-			x: 0,
-			y: 0,
-			width: 100,
-			height: 100,
-		},
-	] );
-
-	beforeAll( () => {
-		// @ts-expect-error There's no need for an exact mock, this is just needed
-		// for the tests to pass (see `mockedGetClientRects` inline comments).
-		window.Element.prototype.getClientRects =
-			jest.fn( mockedGetClientRects );
-	} );
-
-	afterAll( () => {
-		window.Element.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	it( 'should render', () => {
 		render( <MyNavigation /> );
 

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -48,6 +48,7 @@ exports[`Notice should match snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
+        fill="currentColor"
         focusable="false"
         height="24"
         viewBox="0 0 24 24"

package/src/placeholder/stories/index.story.tsx

@@ -48,7 +48,6 @@ const Template: StoryFn< typeof Placeholder > = ( args ) => {
 		<Placeholder { ...args }>
 			<div>
 				<TextControl
-					__next40pxDefaultSize
 					label="Sample Field"
 					placeholder="Enter something here"
 					value={ value }

package/src/resizable-box/index.tsx

@@ -9,7 +9,7 @@ import { forwardRef } from '@wordpress/element';
 import clsx from 'clsx';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
-import type { ReactNode, ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
@@ -88,7 +88,6 @@ const HANDLE_STYLES = {
 };
 
 type ResizableBoxProps = ResizableProps & {
-	children: ReactNode;
 	showHandle?: boolean;
 	__experimentalShowTooltip?: boolean;
 	__experimentalTooltipProps?: Parameters< typeof ResizeTooltip >[ 0 ];

package/src/tab-panel/test/index.tsx

@@ -35,8 +35,6 @@ const TABS = [
 const getSelectedTab = async () =>
 	await screen.findByRole( 'tab', { selected: true } );
 
-let originalGetClientRects: () => DOMRectList;
-
 describe.each( [
 	[ 'uncontrolled', TabPanel ],
 	// The controlled component tests will be added once we certify the
@@ -45,21 +43,6 @@ describe.each( [
 ] )( 'TabPanel %s', ( ...modeAndComponent ) => {
 	const [ , Component ] = modeAndComponent;
 
-	beforeAll( () => {
-		originalGetClientRects = window.HTMLElement.prototype.getClientRects;
-		// Mocking `getClientRects()` is necessary to pass a check performed by
-		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
-		// from the `@wordpress/dom` package.
-		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
-		window.HTMLElement.prototype.getClientRects = function () {
-			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-		};
-	} );
-
-	afterAll( () => {
-		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	describe( 'Accessibility and semantics', () => {
 		it( 'should use the correct aria attributes', async () => {
 			const panelRenderFunction = jest.fn();

package/src/tabs/test/index.tsx

@@ -176,8 +176,6 @@ const ControlledTabs = ( {
 	);
 };
 
-let originalGetClientRects: () => DOMRectList;
-
 async function waitForComponentToBeInitializedWithSelectedTab(
 	selectedTabName: string | undefined
 ) {
@@ -218,21 +216,6 @@ async function waitForComponentToBeInitializedWithSelectedTab(
 }
 
 describe( 'Tabs', () => {
-	beforeAll( () => {
-		originalGetClientRects = window.HTMLElement.prototype.getClientRects;
-		// Mocking `getClientRects()` is necessary to pass a check performed by
-		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
-		// from the `@wordpress/dom` package.
-		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
-		window.HTMLElement.prototype.getClientRects = function () {
-			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-		};
-	} );
-
-	afterAll( () => {
-		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	describe( 'Adherence to spec and basic behavior', () => {
 		it( 'should apply the correct roles, semantics and attributes', async () => {
 			await render( <UncontrolledTabs tabs={ TABS } /> );

package/src/text-control/README.md

@@ -62,7 +62,6 @@ const MyTextControl = () => {
 
 	return (
 		<TextControl
-			__next40pxDefaultSize
 			label="Additional CSS Class"
 			value={ className }
 			onChange={ ( value ) => setClassName( value ) }
@@ -127,14 +126,6 @@ A function that receives the value of the input.
 -   Type: `function`
 -   Required: Yes
 
-#### __next40pxDefaultSize
-
-Start opting into the larger default height that will become the default size in a future version.
-
--   Type: `Boolean`
--   Required: No
--   Default: `false`
-
 ## Related components
 
 -   To offer users more constrained options for input, use SelectControl, RadioControl, CheckboxControl, or RangeControl.

package/src/text-control/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import type { ChangeEvent, ForwardedRef } from 'react';
-import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,16 +15,15 @@ import { forwardRef } from '@wordpress/element';
 import BaseControl from '../base-control';
 import type { WordPressComponentProps } from '../context';
 import type { TextControlProps } from './types';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedTextControl(
 	props: WordPressComponentProps< TextControlProps, 'input', false >,
 	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
-		// Prevent passing this to `input`.
+		// Prevent passing legacy props to `input`.
 		__nextHasNoMarginBottom: _,
-		__next40pxDefaultSize = false,
+		__next40pxDefaultSize: __,
 		label,
 		hideLabelFromVision,
 		value,
@@ -40,12 +38,6 @@ function UnforwardedTextControl(
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'TextControl',
-		size: undefined,
-		__next40pxDefaultSize,
-	} );
-
 	return (
 		<BaseControl
 			label={ label }
@@ -55,9 +47,7 @@ function UnforwardedTextControl(
 			className={ className }
 		>
 			<input
-				className={ clsx( 'components-text-control__input', {
-					'is-next-40px-default-size': __next40pxDefaultSize,
-				} ) }
+				className="components-text-control__input"
 				type={ type }
 				id={ id }
 				value={ value }
@@ -82,7 +72,6 @@ function UnforwardedTextControl(
  *
  *   return (
  *     <TextControl
- *       __next40pxDefaultSize
  *       label="Additional CSS Class"
  *       value={ className }
  *       onChange={ ( value ) => setClassName( value ) }

package/src/text-control/stories/index.story.tsx

@@ -46,7 +46,6 @@ const DefaultTemplate: StoryFn< typeof TextControl > = ( {
 
 	return (
 		<TextControl
-			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v ) => {
@@ -61,7 +60,6 @@ export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
 	{}
 );
 Default.args = {
-	__next40pxDefaultSize: true,
 	placeholder: 'Placeholder',
 };
 

package/src/text-control/style.scss

@@ -18,7 +18,7 @@
 .components-text-control__input[type="month"],
 .components-text-control__input[type="number"] {
 	width: 100%;
-	height: $grid-unit-40;
+	height: $grid-unit-50;
 	// Override input style margin in WP forms.css.
 	margin: 0;
 	background: $components-color-background;
@@ -26,19 +26,15 @@
 	@include input-control( $components-color-accent );
 	border-color: $components-color-border;
 
+	// Subtract 1px to account for the border, which isn't included on the element
+	// on newer components like InputControl, SelectControl, etc.
+	// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
+	padding-left: $grid-unit-15;
+	padding-right: $grid-unit-15;
+
 	&::placeholder {
 		color: $components-color-dark-gray-placeholder;
 	}
-
-	&.is-next-40px-default-size {
-		height: $grid-unit-50;
-
-		// Subtract 1px to account for the border, which isn't included on the element
-		// on newer components like InputControl, SelectControl, etc.
-		// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
-		padding-left: $grid-unit-15;
-		padding-right: $grid-unit-15;
-	}
 }
 
 .components-text-control__input[type="email"],

package/src/text-control/test/text-control.tsx

@@ -6,11 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import _TextControl from '..';
-
-const TextControl = ( props: React.ComponentProps< typeof _TextControl > ) => {
-	return <_TextControl { ...props } __next40pxDefaultSize />;
-};
+import TextControl from '..';
 
 const noop = () => {};
 

package/src/text-control/types.ts

@@ -39,7 +39,8 @@ export type TextControlProps = Pick<
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 };

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -274,6 +274,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             >
               <svg
                 aria-hidden="true"
+                fill="currentColor"
                 focusable="false"
                 height="24"
                 viewBox="0 0 24 24"
@@ -308,6 +309,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             >
               <svg
                 aria-hidden="true"
+                fill="currentColor"
                 focusable="false"
                 height="24"
                 viewBox="0 0 24 24"
@@ -848,6 +850,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             >
               <svg
                 aria-hidden="true"
+                fill="currentColor"
                 focusable="false"
                 height="24"
                 viewBox="0 0 24 24"
@@ -882,6 +885,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             >
               <svg
                 aria-hidden="true"
+                fill="currentColor"
                 focusable="false"
                 height="24"
                 viewBox="0 0 24 24"

package/src/tools-panel/tools-panel/README.md

@@ -126,7 +126,6 @@ export function DimensionPanel() {
 				onDeselect={ () => setPadding( undefined ) }
 			>
 				<BoxControl
-					__next40pxDefaultSize
 					label={ __( 'Padding' ) }
 					onChange={ setPadding }
 					values={ padding }
@@ -139,7 +138,6 @@ export function DimensionPanel() {
 				onDeselect={ () => setMargin( undefined ) }
 			>
 				<BoxControl
-					__next40pxDefaultSize
 					label={ __( 'Margin' ) }
 					onChange={ setMargin }
 					values={ margin }

package/src/tree-grid/test/index.tsx

@@ -24,29 +24,6 @@ const TestButton = forwardRef(
 );
 
 describe( 'TreeGrid', () => {
-	const originalGetClientRects = window.Element.prototype.getClientRects;
-
-	// `getClientRects` needs to be mocked so that `isVisible` from the `@wordpress/dom`
-	// `focusable` module can pass, in a JSDOM env where the DOM elements have no width/height.
-	const mockedGetClientRects = jest.fn( () => [
-		{
-			x: 0,
-			y: 0,
-			width: 100,
-			height: 100,
-		},
-	] );
-
-	beforeAll( () => {
-		// @ts-expect-error - This is just a mock
-		window.Element.prototype.getClientRects =
-			jest.fn( mockedGetClientRects );
-	} );
-
-	afterAll( () => {
-		window.Element.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	describe( 'simple rendering', () => {
 		it( 'renders a table, tbody and any child elements', () => {
 			const { container } = render(

package/src/validated-form-controls/components/text-control.tsx

@@ -17,11 +17,7 @@ const UnforwardedValidatedTextControl = (
 		customValidity,
 		markWhenOptional,
 		...restProps
-	}: Omit<
-		React.ComponentProps< typeof TextControl >,
-		'__next40pxDefaultSize'
-	> &
-		ValidatedControlProps,
+	}: React.ComponentProps< typeof TextControl > & ValidatedControlProps,
 	forwardedRef: React.ForwardedRef< HTMLInputElement >
 ) => {
 	const validityTargetRef = useRef< HTMLInputElement >( null );
@@ -34,11 +30,7 @@ const UnforwardedValidatedTextControl = (
 			customValidity={ customValidity }
 			getValidityTarget={ () => validityTargetRef.current }
 		>
-			<TextControl
-				__next40pxDefaultSize
-				ref={ mergedRefs }
-				{ ...restProps }
-			/>
+			<TextControl ref={ mergedRefs } { ...restProps } />
 		</ControlWithError>
 	);
 };

package/build/box-control/input-control.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/box-control/input-control.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { useState } from '@wordpress/element';\nimport { settings } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { CUSTOM_VALUE_SETTINGS, getMergedValue, getAllowedSides, getPresetIndexFromValue, getPresetValueFromIndex, isValuePreset, isValuesDefined, isValueMixed, LABELS } from './utils';\nimport { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';\nimport Button from '../button';\nimport { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nconst noop = () => {};\nfunction getSidesToModify(side, sides, isAlt) {\n  const allowedSides = getAllowedSides(sides);\n  let modifiedSides = [];\n  switch (side) {\n    case 'all':\n      modifiedSides = ['top', 'bottom', 'left', 'right'];\n      break;\n    case 'horizontal':\n      modifiedSides = ['left', 'right'];\n      break;\n    case 'vertical':\n      modifiedSides = ['top', 'bottom'];\n      break;\n    default:\n      modifiedSides = [side];\n  }\n  if (isAlt) {\n    switch (side) {\n      case 'top':\n        modifiedSides.push('bottom');\n        break;\n      case 'bottom':\n        modifiedSides.push('top');\n        break;\n      case 'left':\n        modifiedSides.push('left');\n        break;\n      case 'right':\n        modifiedSides.push('right');\n        break;\n    }\n  }\n  return modifiedSides.filter(s => allowedSides.has(s));\n}\nexport default function BoxInputControl({\n  __next40pxDefaultSize,\n  onChange = noop,\n  onFocus = noop,\n  values,\n  selectedUnits,\n  setSelectedUnits,\n  sides,\n  side,\n  min = 0,\n  presets,\n  presetKey,\n  ...props\n}) {\n  const defaultValuesToModify = getSidesToModify(side, sides);\n  const handleOnFocus = event => {\n    onFocus(event, {\n      side\n    });\n  };\n  const handleOnChange = nextValues => {\n    onChange(nextValues);\n  };\n  const handleRawOnValueChange = next => {\n    const nextValues = {\n      ...values\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      nextValues[modifiedSide] = next;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnValueChange = (next, extra) => {\n    const nextValues = {\n      ...values\n    };\n    const isNumeric = next !== undefined && !isNaN(parseFloat(next));\n    const nextValue = isNumeric ? next : undefined;\n    const modifiedSides = getSidesToModify(side, sides,\n    /**\n     * Supports changing pair sides. For example, holding the ALT key\n     * when changing the TOP will also update BOTTOM.\n     */\n    // @ts-expect-error - TODO: event.altKey is only present when the change event was\n    // triggered by a keyboard event. Should this feature be implemented differently so\n    // it also works with drag events?\n    !!extra?.event.altKey);\n    modifiedSides.forEach(modifiedSide => {\n      nextValues[modifiedSide] = nextValue;\n    });\n    handleOnChange(nextValues);\n  };\n  const handleOnUnitChange = next => {\n    const newUnits = {\n      ...selectedUnits\n    };\n    defaultValuesToModify.forEach(modifiedSide => {\n      newUnits[modifiedSide] = next;\n    });\n    setSelectedUnits(newUnits);\n  };\n  const mergedValue = getMergedValue(values, defaultValuesToModify);\n  const hasValues = isValuesDefined(values);\n  const isMixed = hasValues && defaultValuesToModify.length > 1 && isValueMixed(values, defaultValuesToModify);\n  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(mergedValue);\n  const computedUnit = hasValues ? parsedUnit : selectedUnits[defaultValuesToModify[0]];\n  const generatedId = useInstanceId(BoxInputControl, 'box-control-input');\n  const inputId = [generatedId, side].join('-');\n  const isMixedUnit = defaultValuesToModify.length > 1 && mergedValue === undefined && defaultValuesToModify.some(s => selectedUnits[s] !== computedUnit);\n  const usedValue = mergedValue === undefined && computedUnit ? computedUnit : mergedValue;\n  const mixedPlaceholder = isMixed || isMixedUnit ? __('Mixed') : undefined;\n  const hasPresets = presets && presets.length > 0 && presetKey;\n  const hasPresetValue = hasPresets && mergedValue !== undefined && !isMixed && isValuePreset(mergedValue, presetKey);\n  const [showCustomValueControl, setShowCustomValueControl] = useState(!hasPresets || !hasPresetValue && !isMixed && mergedValue !== undefined);\n  const presetIndex = hasPresetValue ? getPresetIndexFromValue(mergedValue, presetKey, presets) : undefined;\n  const marks = hasPresets ? [{\n    value: 0,\n    label: '',\n    tooltip: __('None')\n  }, ...presets.map((preset, index) => ({\n    value: index + 1,\n    label: '',\n    tooltip: preset.name ?? preset.slug\n  }))] : [];\n  return /*#__PURE__*/_jsxs(InputWrapper, {\n    expanded: true,\n    children: [/*#__PURE__*/_jsx(FlexedBoxControlIcon, {\n      side: side,\n      sides: sides\n    }), showCustomValueControl && /*#__PURE__*/_jsxs(_Fragment, {\n      children: [/*#__PURE__*/_jsx(Tooltip, {\n        placement: \"top-end\",\n        text: LABELS[side],\n        children: /*#__PURE__*/_jsx(StyledUnitControl, {\n          ...props,\n          min: min,\n          __shouldNotWarnDeprecated36pxSize: true,\n          __next40pxDefaultSize: __next40pxDefaultSize,\n          className: \"component-box-control__unit-control\",\n          id: inputId,\n          isPressEnterToChange: true,\n          disableUnits: isMixed || isMixedUnit,\n          value: usedValue,\n          onChange: handleOnValueChange,\n          onUnitChange: handleOnUnitChange,\n          onFocus: handleOnFocus,\n          label: LABELS[side],\n          placeholder: mixedPlaceholder,\n          hideLabelFromVision: true\n        })\n      }), /*#__PURE__*/_jsx(FlexedRangeControl, {\n        __next40pxDefaultSize: __next40pxDefaultSize,\n        __shouldNotWarnDeprecated36pxSize: true,\n        \"aria-controls\": inputId,\n        label: LABELS[side],\n        hideLabelFromVision: true,\n        onChange: newValue => {\n          handleOnValueChange(newValue !== undefined ? [newValue, computedUnit].join('') : undefined);\n        },\n        min: isFinite(min) ? min : 0,\n        max: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.max ?? 10,\n        step: CUSTOM_VALUE_SETTINGS[computedUnit ?? 'px']?.step ?? 0.1,\n        value: parsedQuantity ?? 0,\n        withInputField: false\n      })]\n    }), hasPresets && !showCustomValueControl && /*#__PURE__*/_jsx(FlexedRangeControl, {\n      __next40pxDefaultSize: true,\n      className: \"spacing-sizes-control__range-control\",\n      value: presetIndex !== undefined ? presetIndex + 1 : 0,\n      onChange: newIndex => {\n        const newValue = newIndex === 0 || newIndex === undefined ? undefined : getPresetValueFromIndex(newIndex - 1, presetKey, presets);\n        handleRawOnValueChange(newValue);\n      },\n      withInputField: false,\n      \"aria-valuenow\": presetIndex !== undefined ? presetIndex + 1 : 0,\n      \"aria-valuetext\": marks[presetIndex !== undefined ? presetIndex + 1 : 0].tooltip,\n      renderTooltipContent: index => marks[!index ? 0 : index].tooltip,\n      min: 0,\n      max: marks.length - 1,\n      marks: marks,\n      label: LABELS[side],\n      hideLabelFromVision: true\n    }), hasPresets && /*#__PURE__*/_jsx(Button, {\n      label: showCustomValueControl ? __('Use size preset') : __('Set custom size'),\n      icon: settings,\n      onClick: () => {\n        setShowCustomValueControl(!showCustomValueControl);\n      },\n      isPressed: showCustomValueControl,\n      size: \"small\",\n      iconSize: 24\n    })]\n  }, `box-control-${side}`);\n}"],
-  "mappings": "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",
-  "names": ["import_utils", "_jsxs", "_jsx", "_Fragment", "Tooltip", "Button"]
-}