if (multiple) {

[36500] Fix | Delete

// When `multiple`, just use the native browser styles

[36501] Fix | Delete

// without setting explicit height.

[36502] Fix | Delete

return;

[36503] Fix | Delete

}

[36504] Fix | Delete

const sizes = {

[36505] Fix | Delete

default: {

[36506] Fix | Delete

height: 40,

[36507] Fix | Delete

minHeight: 40,

[36508] Fix | Delete

paddingTop: 0,

[36509] Fix | Delete

paddingBottom: 0

[36510] Fix | Delete

},

[36511] Fix | Delete

small: {

[36512] Fix | Delete

height: 24,

[36513] Fix | Delete

minHeight: 24,

[36514] Fix | Delete

paddingTop: 0,

[36515] Fix | Delete

paddingBottom: 0

[36516] Fix | Delete

},

[36517] Fix | Delete

compact: {

[36518] Fix | Delete

height: 32,

[36519] Fix | Delete

minHeight: 32,

[36520] Fix | Delete

paddingTop: 0,

[36521] Fix | Delete

paddingBottom: 0

[36522] Fix | Delete

},

[36523] Fix | Delete

'__unstable-large': {

[36524] Fix | Delete

height: 40,

[36525] Fix | Delete

minHeight: 40,

[36526] Fix | Delete

paddingTop: 0,

[36527] Fix | Delete

paddingBottom: 0

[36528] Fix | Delete

}

[36529] Fix | Delete

};

[36530] Fix | Delete

if (!__next40pxDefaultSize) {

[36531] Fix | Delete

sizes.default = sizes.compact;

[36532] Fix | Delete

}

[36533] Fix | Delete

const style = sizes[selectSize] || sizes.default;

[36534] Fix | Delete

return /*#__PURE__*/emotion_react_browser_esm_css(style, true ? "" : 0, true ? "" : 0);

[36535] Fix | Delete

};

[36536] Fix | Delete

const chevronIconSize = 18;

[36537] Fix | Delete

const sizePaddings = ({

[36538] Fix | Delete

__next40pxDefaultSize,

[36539] Fix | Delete

multiple,

[36540] Fix | Delete

selectSize = 'default'

[36541] Fix | Delete

}) => {

[36542] Fix | Delete

const padding = {

[36543] Fix | Delete

default: 16,

[36544] Fix | Delete

small: 8,

[36545] Fix | Delete

compact: 8,

[36546] Fix | Delete

'__unstable-large': 16

[36547] Fix | Delete

};

[36548] Fix | Delete

if (!__next40pxDefaultSize) {

[36549] Fix | Delete

padding.default = padding.compact;

[36550] Fix | Delete

}

[36551] Fix | Delete

const selectedPadding = padding[selectSize] || padding.default;

[36552] Fix | Delete

return rtl({

[36553] Fix | Delete

paddingLeft: selectedPadding,

[36554] Fix | Delete

paddingRight: selectedPadding + chevronIconSize,

[36555] Fix | Delete

...(multiple ? {

[36556] Fix | Delete

paddingTop: selectedPadding,

[36557] Fix | Delete

paddingBottom: selectedPadding

[36558] Fix | Delete

} : {})

[36559] Fix | Delete

});

[36560] Fix | Delete

};

[36561] Fix | Delete

const overflowStyles = ({

[36562] Fix | Delete

multiple

[36563] Fix | Delete

}) => {

[36564] Fix | Delete

return {

[36565] Fix | Delete

overflow: multiple ? 'auto' : 'hidden'

[36566] Fix | Delete

};

[36567] Fix | Delete

};

[36568] Fix | Delete

[36569] Fix | Delete

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

[36570] Fix | Delete

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

[36571] Fix | Delete

[36572] Fix | Delete

const Select = /*#__PURE__*/emotion_styled_base_browser_esm("select", true ? {

[36573] Fix | Delete

target: "e1mv6sxx2"

[36574] Fix | Delete

} : 0)("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.gray[900], ";display:block;font-family:inherit;margin:0;width:100%;max-width:none;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;", select_control_styles_disabledStyles, ";", fontSizeStyles, ";", select_control_styles_sizeStyles, ";", sizePaddings, ";", overflowStyles, ";}" + ( true ? "" : 0));

[36575] Fix | Delete

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

[36576] Fix | Delete

target: "e1mv6sxx1"

[36577] Fix | Delete

} : 0)("margin-inline-end:", space(-1), ";line-height:0;" + ( true ? "" : 0));

[36578] Fix | Delete

const InputControlSuffixWrapperWithClickThrough = /*#__PURE__*/emotion_styled_base_browser_esm(input_suffix_wrapper, true ? {

[36579] Fix | Delete

target: "e1mv6sxx0"

[36580] Fix | Delete

} : 0)("position:absolute;pointer-events:none;", rtl({

[36581] Fix | Delete

right: 0

[36582] Fix | Delete

}), ";" + ( true ? "" : 0));

[36583] Fix | Delete

[36584] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/icon/index.js

[36585] Fix | Delete

/**

[36586] Fix | Delete

* WordPress dependencies

[36587] Fix | Delete

*/

[36588] Fix | Delete

[36589] Fix | Delete

[36590] Fix | Delete

/** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */

[36591] Fix | Delete

[36592] Fix | Delete

/**

[36593] Fix | Delete

* Return an SVG icon.

[36594] Fix | Delete

*

[36595] Fix | Delete

* @param {IconProps} props icon is the SVG component to render

[36596] Fix | Delete

* size is a number specifiying the icon size in pixels

[36597] Fix | Delete

* Other props will be passed to wrapped SVG component

[36598] Fix | Delete

* @param {import('react').ForwardedRef<HTMLElement>} ref The forwarded ref to the SVG element.

[36599] Fix | Delete

*

[36600] Fix | Delete

* @return {JSX.Element} Icon component

[36601] Fix | Delete

*/

[36602] Fix | Delete

function icon_Icon({

[36603] Fix | Delete

icon,

[36604] Fix | Delete

size = 24,

[36605] Fix | Delete

...props

[36606] Fix | Delete

}, ref) {

[36607] Fix | Delete

return (0,external_wp_element_namespaceObject.cloneElement)(icon, {

[36608] Fix | Delete

width: size,

[36609] Fix | Delete

height: size,

[36610] Fix | Delete

...props,

[36611] Fix | Delete

ref

[36612] Fix | Delete

});

[36613] Fix | Delete

}

[36614] Fix | Delete

/* harmony default export */ const icons_build_module_icon = ((0,external_wp_element_namespaceObject.forwardRef)(icon_Icon));

[36615] Fix | Delete

[36616] Fix | Delete

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

[36617] Fix | Delete

/**

[36618] Fix | Delete

* WordPress dependencies

[36619] Fix | Delete

*/

[36620] Fix | Delete

[36621] Fix | Delete

[36622] Fix | Delete

const chevronDown = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(external_wp_primitives_namespaceObject.SVG, {

[36623] Fix | Delete

viewBox: "0 0 24 24",

[36624] Fix | Delete

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

[36625] Fix | Delete

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

[36626] Fix | Delete

d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"

[36627] Fix | Delete

})

[36628] Fix | Delete

});

[36629] Fix | Delete

/* harmony default export */ const chevron_down = (chevronDown);

[36630] Fix | Delete

[36631] Fix | Delete

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

[36632] Fix | Delete

/**

[36633] Fix | Delete

* WordPress dependencies

[36634] Fix | Delete

*/

[36635] Fix | Delete

[36636] Fix | Delete

[36637] Fix | Delete

/**

[36638] Fix | Delete

* Internal dependencies

[36639] Fix | Delete

*/

[36640] Fix | Delete

[36641] Fix | Delete

[36642] Fix | Delete

const SelectControlChevronDown = () => {

[36643] Fix | Delete

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

[36644] Fix | Delete

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

[36645] Fix | Delete

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

[36646] Fix | Delete

icon: chevron_down,

[36647] Fix | Delete

size: chevronIconSize

[36648] Fix | Delete

})

[36649] Fix | Delete

})

[36650] Fix | Delete

});

[36651] Fix | Delete

};

[36652] Fix | Delete

/* harmony default export */ const select_control_chevron_down = (SelectControlChevronDown);

[36653] Fix | Delete

[36654] Fix | Delete

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

[36655] Fix | Delete

/**

[36656] Fix | Delete

* External dependencies

[36657] Fix | Delete

*/

[36658] Fix | Delete

[36659] Fix | Delete

[36660] Fix | Delete

/**

[36661] Fix | Delete

* WordPress dependencies

[36662] Fix | Delete

*/

[36663] Fix | Delete

[36664] Fix | Delete

[36665] Fix | Delete

[36666] Fix | Delete

/**

[36667] Fix | Delete

* Internal dependencies

[36668] Fix | Delete

*/

[36669] Fix | Delete

[36670] Fix | Delete

[36671] Fix | Delete

[36672] Fix | Delete

[36673] Fix | Delete

[36674] Fix | Delete

[36675] Fix | Delete

function select_control_useUniqueId(idProp) {

[36676] Fix | Delete

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

[36677] Fix | Delete

const id = `inspector-select-control-${instanceId}`;

[36678] Fix | Delete

return idProp || id;

[36679] Fix | Delete

}

[36680] Fix | Delete

function UnforwardedSelectControl(props, ref) {

[36681] Fix | Delete

const {

[36682] Fix | Delete

className,

[36683] Fix | Delete

disabled = false,

[36684] Fix | Delete

help,

[36685] Fix | Delete

hideLabelFromVision,

[36686] Fix | Delete

id: idProp,

[36687] Fix | Delete

label,

[36688] Fix | Delete

multiple = false,

[36689] Fix | Delete

onChange,

[36690] Fix | Delete

options = [],

[36691] Fix | Delete

size = 'default',

[36692] Fix | Delete

value: valueProp,

[36693] Fix | Delete

labelPosition = 'top',

[36694] Fix | Delete

children,

[36695] Fix | Delete

prefix,

[36696] Fix | Delete

suffix,

[36697] Fix | Delete

__next40pxDefaultSize = false,

[36698] Fix | Delete

__nextHasNoMarginBottom = false,

[36699] Fix | Delete

...restProps

[36700] Fix | Delete

} = useDeprecated36pxDefaultSizeProp(props);

[36701] Fix | Delete

const id = select_control_useUniqueId(idProp);

[36702] Fix | Delete

const helpId = help ? `${id}__help` : undefined;

[36703] Fix | Delete

[36704] Fix | Delete

// Disable reason: A select with an onchange throws a warning.

[36705] Fix | Delete

if (!options?.length && !children) {

[36706] Fix | Delete

return null;

[36707] Fix | Delete

}

[36708] Fix | Delete

const handleOnChange = event => {

[36709] Fix | Delete

if (props.multiple) {

[36710] Fix | Delete

const selectedOptions = Array.from(event.target.options).filter(({

[36711] Fix | Delete

selected

[36712] Fix | Delete

}) => selected);

[36713] Fix | Delete

const newValues = selectedOptions.map(({

[36714] Fix | Delete

value

[36715] Fix | Delete

}) => value);

[36716] Fix | Delete

props.onChange?.(newValues, {

[36717] Fix | Delete

event

[36718] Fix | Delete

});

[36719] Fix | Delete

return;

[36720] Fix | Delete

}

[36721] Fix | Delete

props.onChange?.(event.target.value, {

[36722] Fix | Delete

event

[36723] Fix | Delete

});

[36724] Fix | Delete

};

[36725] Fix | Delete

const classes = dist_clsx('components-select-control', className);

[36726] Fix | Delete

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

[36727] Fix | Delete

help: help,

[36728] Fix | Delete

id: id,

[36729] Fix | Delete

__nextHasNoMarginBottom: __nextHasNoMarginBottom,

[36730] Fix | Delete

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

[36731] Fix | Delete

className: classes,

[36732] Fix | Delete

disabled: disabled,

[36733] Fix | Delete

hideLabelFromVision: hideLabelFromVision,

[36734] Fix | Delete

id: id,

[36735] Fix | Delete

label: label,

[36736] Fix | Delete

size: size,

[36737] Fix | Delete

suffix: suffix || !multiple && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(select_control_chevron_down, {}),

[36738] Fix | Delete

prefix: prefix,

[36739] Fix | Delete

labelPosition: labelPosition,

[36740] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[36741] Fix | Delete

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

[36742] Fix | Delete

...restProps,

[36743] Fix | Delete

__next40pxDefaultSize: __next40pxDefaultSize,

[36744] Fix | Delete

"aria-describedby": helpId,

[36745] Fix | Delete

className: "components-select-control__input",

[36746] Fix | Delete

disabled: disabled,

[36747] Fix | Delete

id: id,

[36748] Fix | Delete

multiple: multiple,

[36749] Fix | Delete

onChange: handleOnChange,

[36750] Fix | Delete

ref: ref,

[36751] Fix | Delete

selectSize: size,

[36752] Fix | Delete

value: valueProp,

[36753] Fix | Delete

children: children || options.map((option, index) => {

[36754] Fix | Delete

const key = option.id || `${option.label}-${option.value}-${index}`;

[36755] Fix | Delete

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

[36756] Fix | Delete

value: option.value,

[36757] Fix | Delete

disabled: option.disabled,

[36758] Fix | Delete

hidden: option.hidden,

[36759] Fix | Delete

children: option.label

[36760] Fix | Delete

}, key);

[36761] Fix | Delete

})

[36762] Fix | Delete

})

[36763] Fix | Delete

})

[36764] Fix | Delete

});

[36765] Fix | Delete

}

[36766] Fix | Delete

[36767] Fix | Delete

/**

[36768] Fix | Delete

* `SelectControl` allows users to select from a single or multiple option menu.

[36769] Fix | Delete

* It functions as a wrapper around the browser's native `<select>` element.

[36770] Fix | Delete

*

[36771] Fix | Delete

* ```jsx

[36772] Fix | Delete

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

[36773] Fix | Delete

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

[36774] Fix | Delete

*

[36775] Fix | Delete

* const MySelectControl = () => {

[36776] Fix | Delete

* const [ size, setSize ] = useState( '50%' );

[36777] Fix | Delete

*

[36778] Fix | Delete

* return (

[36779] Fix | Delete

* <SelectControl

[36780] Fix | Delete

* label="Size"

[36781] Fix | Delete

* value={ size }

[36782] Fix | Delete

* options={ [

[36783] Fix | Delete

* { label: 'Big', value: '100%' },

[36784] Fix | Delete

* { label: 'Medium', value: '50%' },

[36785] Fix | Delete

* { label: 'Small', value: '25%' },

[36786] Fix | Delete

* ] }

[36787] Fix | Delete

* onChange={ setSize }

[36788] Fix | Delete

* />

[36789] Fix | Delete

* );

[36790] Fix | Delete

* };

[36791] Fix | Delete

* ```

[36792] Fix | Delete

*/

[36793] Fix | Delete

const SelectControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSelectControl);

[36794] Fix | Delete

/* harmony default export */ const select_control = (SelectControl);

[36795] Fix | Delete

[36796] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-state.js

[36797] Fix | Delete

/**

[36798] Fix | Delete

* WordPress dependencies

[36799] Fix | Delete

*/

[36800] Fix | Delete

[36801] Fix | Delete

[36802] Fix | Delete

/**

[36803] Fix | Delete

* Internal dependencies

[36804] Fix | Delete

*/

[36805] Fix | Delete

[36806] Fix | Delete

[36807] Fix | Delete

/**

[36808] Fix | Delete

* @template T

[36809] Fix | Delete

* @typedef Options

[36810] Fix | Delete

* @property {T} [initial] Initial value

[36811] Fix | Delete

* @property {T | ""} fallback Fallback value

[36812] Fix | Delete

*/

[36813] Fix | Delete

[36814] Fix | Delete

/** @type {Readonly<{ initial: undefined, fallback: '' }>} */

[36815] Fix | Delete

const defaultOptions = {

[36816] Fix | Delete

initial: undefined,

[36817] Fix | Delete

/**

[36818] Fix | Delete

* Defaults to empty string, as that is preferred for usage with

[36819] Fix | Delete

* <input />, <textarea />, and <select /> form elements.

[36820] Fix | Delete

*/

[36821] Fix | Delete

fallback: ''

[36822] Fix | Delete

};

[36823] Fix | Delete

[36824] Fix | Delete

/**

[36825] Fix | Delete

* Custom hooks for "controlled" components to track and consolidate internal

[36826] Fix | Delete

* state and incoming values. This is useful for components that render

[36827] Fix | Delete

* `input`, `textarea`, or `select` HTML elements.

[36828] Fix | Delete

*

[36829] Fix | Delete

* https://reactjs.org/docs/forms.html#controlled-components

[36830] Fix | Delete

*

[36831] Fix | Delete

* At first, a component using useControlledState receives an initial prop

[36832] Fix | Delete

* value, which is used as initial internal state.

[36833] Fix | Delete

*

[36834] Fix | Delete

* This internal state can be maintained and updated without

[36835] Fix | Delete

* relying on new incoming prop values.

[36836] Fix | Delete

*

[36837] Fix | Delete

* Unlike the basic useState hook, useControlledState's state can

[36838] Fix | Delete

* be updated if a new incoming prop value is changed.

[36839] Fix | Delete

*

[36840] Fix | Delete

* @template T

[36841] Fix | Delete

*

[36842] Fix | Delete

* @param {T | undefined} currentState The current value.

[36843] Fix | Delete

* @param {Options<T>} [options=defaultOptions] Additional options for the hook.

[36844] Fix | Delete

*

[36845] Fix | Delete

* @return {[T | "", (nextState: T) => void]} The controlled value and the value setter.

[36846] Fix | Delete

*/

[36847] Fix | Delete

function use_controlled_state_useControlledState(currentState, options = defaultOptions) {

[36848] Fix | Delete

const {

[36849] Fix | Delete

initial,

[36850] Fix | Delete

fallback

[36851] Fix | Delete

} = {

[36852] Fix | Delete

...defaultOptions,

[36853] Fix | Delete

...options

[36854] Fix | Delete

};

[36855] Fix | Delete

const [internalState, setInternalState] = (0,external_wp_element_namespaceObject.useState)(currentState);

[36856] Fix | Delete

const hasCurrentState = isValueDefined(currentState);

[36857] Fix | Delete

[36858] Fix | Delete

/*

[36859] Fix | Delete

* Resets internal state if value every changes from uncontrolled <-> controlled.

[36860] Fix | Delete

*/

[36861] Fix | Delete

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

[36862] Fix | Delete

if (hasCurrentState && internalState) {

[36863] Fix | Delete

setInternalState(undefined);

[36864] Fix | Delete

}

[36865] Fix | Delete

}, [hasCurrentState, internalState]);

[36866] Fix | Delete

const state = getDefinedValue([currentState, internalState, initial], fallback);

[36867] Fix | Delete

[36868] Fix | Delete

/* eslint-disable jsdoc/no-undefined-types */

[36869] Fix | Delete

/** @type {(nextState: T) => void} */

[36870] Fix | Delete

const setState = (0,external_wp_element_namespaceObject.useCallback)(nextState => {

[36871] Fix | Delete

if (!hasCurrentState) {

[36872] Fix | Delete

setInternalState(nextState);

[36873] Fix | Delete

}

[36874] Fix | Delete

}, [hasCurrentState]);

[36875] Fix | Delete

/* eslint-enable jsdoc/no-undefined-types */

[36876] Fix | Delete

[36877] Fix | Delete

return [state, setState];

[36878] Fix | Delete

}

[36879] Fix | Delete

/* harmony default export */ const use_controlled_state = (use_controlled_state_useControlledState);

[36880] Fix | Delete

[36881] Fix | Delete

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

[36882] Fix | Delete

/**

[36883] Fix | Delete

* WordPress dependencies

[36884] Fix | Delete

*/

[36885] Fix | Delete

[36886] Fix | Delete

[36887] Fix | Delete

/**

[36888] Fix | Delete

* Internal dependencies

[36889] Fix | Delete

*/

[36890] Fix | Delete

[36891] Fix | Delete

[36892] Fix | Delete

/**

[36893] Fix | Delete

* A float supported clamp function for a specific value.

[36894] Fix | Delete

*

[36895] Fix | Delete

* @param value The value to clamp.

[36896] Fix | Delete

* @param min The minimum value.

[36897] Fix | Delete

* @param max The maximum value.

[36898] Fix | Delete

*

[36899] Fix | Delete

* @return A (float) number

[36900] Fix | Delete

*/

[36901] Fix | Delete

function floatClamp(value, min, max) {

[36902] Fix | Delete

if (typeof value !== 'number') {

[36903] Fix | Delete

return null;

[36904] Fix | Delete

}

[36905] Fix | Delete

return parseFloat(`${math_clamp(value, min, max)}`);

[36906] Fix | Delete

}

[36907] Fix | Delete

[36908] Fix | Delete

/**

[36909] Fix | Delete

* Hook to store a clamped value, derived from props.

[36910] Fix | Delete

*

[36911] Fix | Delete

* @param settings

[36912] Fix | Delete

* @return The controlled value and the value setter.

[36913] Fix | Delete

*/

[36914] Fix | Delete

function useControlledRangeValue(settings) {

[36915] Fix | Delete

const {

[36916] Fix | Delete

min,

[36917] Fix | Delete

max,

[36918] Fix | Delete

value: valueProp,

[36919] Fix | Delete

initial

[36920] Fix | Delete

} = settings;

[36921] Fix | Delete

const [state, setInternalState] = use_controlled_state(floatClamp(valueProp, min, max), {

[36922] Fix | Delete

initial: floatClamp(initial !== null && initial !== void 0 ? initial : null, min, max),

[36923] Fix | Delete

fallback: null

[36924] Fix | Delete

});

[36925] Fix | Delete

const setState = (0,external_wp_element_namespaceObject.useCallback)(nextValue => {

[36926] Fix | Delete

if (nextValue === null) {

[36927] Fix | Delete

setInternalState(null);

[36928] Fix | Delete

} else {

[36929] Fix | Delete

setInternalState(floatClamp(nextValue, min, max));

[36930] Fix | Delete

}

[36931] Fix | Delete

}, [min, max, setInternalState]);

[36932] Fix | Delete

[36933] Fix | Delete

// `state` can't be an empty string because we specified a fallback value of

[36934] Fix | Delete

// `null` in `useControlledState`

[36935] Fix | Delete

return [state, setState];

[36936] Fix | Delete

}

[36937] Fix | Delete

[36938] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/styles/range-control-styles.js

[36939] Fix | Delete

[36940] Fix | Delete

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

[36941] Fix | Delete

/**

[36942] Fix | Delete

* External dependencies

[36943] Fix | Delete

*/

[36944] Fix | Delete

[36945] Fix | Delete

/**

[36946] Fix | Delete

* Internal dependencies

[36947] Fix | Delete

*/

[36948] Fix | Delete

[36949] Fix | Delete

[36950] Fix | Delete

[36951] Fix | Delete

const rangeHeightValue = 30;

[36952] Fix | Delete

const railHeight = 4;

[36953] Fix | Delete

const rangeHeight = () => /*#__PURE__*/emotion_react_browser_esm_css({

[36954] Fix | Delete

height: rangeHeightValue,

[36955] Fix | Delete

minHeight: rangeHeightValue

[36956] Fix | Delete

}, true ? "" : 0, true ? "" : 0);

[36957] Fix | Delete

const thumbSize = 12;

[36958] Fix | Delete

const deprecatedHeight = ({

[36959] Fix | Delete

__next40pxDefaultSize

[36960] Fix | Delete

}) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css({

[36961] Fix | Delete

minHeight: rangeHeightValue

[36962] Fix | Delete

}, true ? "" : 0, true ? "" : 0);

[36963] Fix | Delete

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

[36964] Fix | Delete

target: "e1epgpqk14"

[36965] Fix | Delete

} : 0)("-webkit-tap-highlight-color:transparent;align-items:center;display:flex;justify-content:flex-start;padding:0;position:relative;touch-action:none;width:100%;min-height:40px;", deprecatedHeight, ";" + ( true ? "" : 0));

[36966] Fix | Delete

const wrapperColor = ({

[36967] Fix | Delete

color = COLORS.ui.borderFocus

[36968] Fix | Delete

}) => /*#__PURE__*/emotion_react_browser_esm_css({

[36969] Fix | Delete

color

[36970] Fix | Delete

}, true ? "" : 0, true ? "" : 0);

[36971] Fix | Delete

const wrapperMargin = ({

[36972] Fix | Delete

marks,

[36973] Fix | Delete

__nextHasNoMarginBottom

[36974] Fix | Delete

}) => {

[36975] Fix | Delete

if (!__nextHasNoMarginBottom) {

[36976] Fix | Delete

return /*#__PURE__*/emotion_react_browser_esm_css({

[36977] Fix | Delete

marginBottom: marks ? 16 : undefined

[36978] Fix | Delete

}, true ? "" : 0, true ? "" : 0);

[36979] Fix | Delete

}

[36980] Fix | Delete

return '';

[36981] Fix | Delete

};

[36982] Fix | Delete

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

[36983] Fix | Delete

target: "e1epgpqk13"

[36984] Fix | Delete

} : 0)("display:block;flex:1;position:relative;width:100%;", wrapperColor, ";", rangeHeight, ";", wrapperMargin, ";" + ( true ? "" : 0));

[36985] Fix | Delete

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

[36986] Fix | Delete

target: "e1epgpqk12"

[36987] Fix | Delete

} : 0)("display:flex;margin-top:", railHeight, "px;", rtl({

[36988] Fix | Delete

marginRight: 6

[36989] Fix | Delete

}), ";" + ( true ? "" : 0));

[36990] Fix | Delete

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

[36991] Fix | Delete

target: "e1epgpqk11"

[36992] Fix | Delete

} : 0)("display:flex;margin-top:", railHeight, "px;", rtl({

[36993] Fix | Delete

marginLeft: 6

[36994] Fix | Delete

}), ";" + ( true ? "" : 0));

[36995] Fix | Delete

const railBackgroundColor = ({

[36996] Fix | Delete

disabled,

[36997] Fix | Delete

railColor

[36998] Fix | Delete

}) => {

[36999] Fix | Delete