ref: forwardedRef

[39000] Fix | Delete

});

[39001] Fix | Delete

}

[39002] Fix | Delete

[39003] Fix | Delete

/**

[39004] Fix | Delete

* A convenience wrapper for the `renderContent` when you want to apply

[39005] Fix | Delete

* different padding. (Default is `paddingSize="small"`).

[39006] Fix | Delete

*

[39007] Fix | Delete

* ```jsx

[39008] Fix | Delete

* import {

[39009] Fix | Delete

* Dropdown,

[39010] Fix | Delete

* __experimentalDropdownContentWrapper as DropdownContentWrapper,

[39011] Fix | Delete

* } from '@wordpress/components';

[39012] Fix | Delete

*

[39013] Fix | Delete

* <Dropdown

[39014] Fix | Delete

* renderContent={ () => (

[39015] Fix | Delete

* <DropdownContentWrapper paddingSize="medium">

[39016] Fix | Delete

* My dropdown content

[39017] Fix | Delete

* </DropdownContentWrapper>

[39018] Fix | Delete

* ) }

[39019] Fix | Delete

* />

[39020] Fix | Delete

* ```

[39021] Fix | Delete

*/

[39022] Fix | Delete

const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper');

[39023] Fix | Delete

/* harmony default export */ const dropdown_content_wrapper = (DropdownContentWrapper);

[39024] Fix | Delete

[39025] Fix | Delete

;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-palette/utils.js

[39026] Fix | Delete

/**

[39027] Fix | Delete

* External dependencies

[39028] Fix | Delete

*/

[39029] Fix | Delete

[39030] Fix | Delete

[39031] Fix | Delete

[39032] Fix | Delete

[39033] Fix | Delete

/**

[39034] Fix | Delete

* WordPress dependencies

[39035] Fix | Delete

*/

[39036] Fix | Delete

[39037] Fix | Delete

[39038] Fix | Delete

/**

[39039] Fix | Delete

* Internal dependencies

[39040] Fix | Delete

*/

[39041] Fix | Delete

[39042] Fix | Delete

k([names, a11y]);

[39043] Fix | Delete

const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => {

[39044] Fix | Delete

if (!currentValue) {

[39045] Fix | Delete

return '';

[39046] Fix | Delete

}

[39047] Fix | Delete

const currentValueIsCssVariable = /^var\(/.test(currentValue);

[39048] Fix | Delete

const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : w(currentValue).toHex();

[39049] Fix | Delete

[39050] Fix | Delete

// Normalize format of `colors` to simplify the following loop

[39051] Fix | Delete

[39052] Fix | Delete

const colorPalettes = showMultiplePalettes ? colors : [{

[39053] Fix | Delete

colors: colors

[39054] Fix | Delete

}];

[39055] Fix | Delete

for (const {

[39056] Fix | Delete

colors: paletteColors

[39057] Fix | Delete

} of colorPalettes) {

[39058] Fix | Delete

for (const {

[39059] Fix | Delete

name: colorName,

[39060] Fix | Delete

color: colorValue

[39061] Fix | Delete

} of paletteColors) {

[39062] Fix | Delete

const normalizedColorValue = currentValueIsCssVariable ? colorValue : w(colorValue).toHex();

[39063] Fix | Delete

if (normalizedCurrentValue === normalizedColorValue) {

[39064] Fix | Delete

return colorName;

[39065] Fix | Delete

}

[39066] Fix | Delete

}

[39067] Fix | Delete

}

[39068] Fix | Delete

[39069] Fix | Delete

// translators: shown when the user has picked a custom color (i.e not in the palette of colors).

[39070] Fix | Delete

return (0,external_wp_i18n_namespaceObject.__)('Custom');

[39071] Fix | Delete

};

[39072] Fix | Delete

[39073] Fix | Delete

// The PaletteObject type has a `colors` property (an array of ColorObject),

[39074] Fix | Delete

// while the ColorObject type has a `color` property (the CSS color value).

[39075] Fix | Delete

const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj);

[39076] Fix | Delete

const isMultiplePaletteArray = arr => {

[39077] Fix | Delete

return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj));

[39078] Fix | Delete

};

[39079] Fix | Delete

[39080] Fix | Delete

/**

[39081] Fix | Delete

* Transform a CSS variable used as background color into the color value itself.

[39082] Fix | Delete

*

[39083] Fix | Delete

* @param value The color value that may be a CSS variable.

[39084] Fix | Delete

* @param element The element for which to get the computed style.

[39085] Fix | Delete

* @return The background color value computed from a element.

[39086] Fix | Delete

*/

[39087] Fix | Delete

const normalizeColorValue = (value, element) => {

[39088] Fix | Delete

const currentValueIsCssVariable = /^var\(/.test(value !== null && value !== void 0 ? value : '');

[39089] Fix | Delete

if (!currentValueIsCssVariable || element === null) {

[39090] Fix | Delete

return value;

[39091] Fix | Delete

}

[39092] Fix | Delete

const {

[39093] Fix | Delete

ownerDocument

[39094] Fix | Delete

} = element;

[39095] Fix | Delete

const {

[39096] Fix | Delete

defaultView

[39097] Fix | Delete

} = ownerDocument;

[39098] Fix | Delete

const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor;

[39099] Fix | Delete

return computedBackgroundColor ? w(computedBackgroundColor).toHex() : value;

[39100] Fix | Delete

};

[39101] Fix | Delete

[39102] Fix | Delete

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

[39103] Fix | Delete

/**

[39104] Fix | Delete

* External dependencies

[39105] Fix | Delete

*/

[39106] Fix | Delete

[39107] Fix | Delete

[39108] Fix | Delete

[39109] Fix | Delete

[39110] Fix | Delete

[39111] Fix | Delete

[39112] Fix | Delete

/**

[39113] Fix | Delete

* WordPress dependencies

[39114] Fix | Delete

*/

[39115] Fix | Delete

[39116] Fix | Delete

[39117] Fix | Delete

[39118] Fix | Delete

[39119] Fix | Delete

/**

[39120] Fix | Delete

* Internal dependencies

[39121] Fix | Delete

*/

[39122] Fix | Delete

[39123] Fix | Delete

[39124] Fix | Delete

[39125] Fix | Delete

[39126] Fix | Delete

[39127] Fix | Delete

[39128] Fix | Delete

[39129] Fix | Delete

[39130] Fix | Delete

[39131] Fix | Delete

[39132] Fix | Delete

k([names, a11y]);

[39133] Fix | Delete

function SinglePalette({

[39134] Fix | Delete

className,

[39135] Fix | Delete

clearColor,

[39136] Fix | Delete

colors,

[39137] Fix | Delete

onChange,

[39138] Fix | Delete

value,

[39139] Fix | Delete

...additionalProps

[39140] Fix | Delete

}) {

[39141] Fix | Delete

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

[39142] Fix | Delete

return colors.map(({

[39143] Fix | Delete

color,

[39144] Fix | Delete

name

[39145] Fix | Delete

}, index) => {

[39146] Fix | Delete

const colordColor = w(color);

[39147] Fix | Delete

const isSelected = value === color;

[39148] Fix | Delete

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

[39149] Fix | Delete

isSelected: isSelected,

[39150] Fix | Delete

selectedIconProps: isSelected ? {

[39151] Fix | Delete

fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'

[39152] Fix | Delete

} : {},

[39153] Fix | Delete

tooltipText: name ||

[39154] Fix | Delete

// translators: %s: color hex code e.g: "#f00".

[39155] Fix | Delete

(0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color),

[39156] Fix | Delete

style: {

[39157] Fix | Delete

backgroundColor: color,

[39158] Fix | Delete

color

[39159] Fix | Delete

},

[39160] Fix | Delete

onClick: isSelected ? clearColor : () => onChange(color, index),

[39161] Fix | Delete

"aria-label": name ?

[39162] Fix | Delete

// translators: %s: The name of the color e.g: "vivid red".

[39163] Fix | Delete

(0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color: %s'), name) :

[39164] Fix | Delete

// translators: %s: color hex code e.g: "#f00".

[39165] Fix | Delete

(0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color)

[39166] Fix | Delete

}, `${color}-${index}`);

[39167] Fix | Delete

});

[39168] Fix | Delete

}, [colors, value, onChange, clearColor]);

[39169] Fix | Delete

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

[39170] Fix | Delete

className: className,

[39171] Fix | Delete

options: colorOptions,

[39172] Fix | Delete

...additionalProps

[39173] Fix | Delete

});

[39174] Fix | Delete

}

[39175] Fix | Delete

function MultiplePalettes({

[39176] Fix | Delete

className,

[39177] Fix | Delete

clearColor,

[39178] Fix | Delete

colors,

[39179] Fix | Delete

onChange,

[39180] Fix | Delete

value,

[39181] Fix | Delete

headingLevel

[39182] Fix | Delete

}) {

[39183] Fix | Delete

const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultiplePalettes, 'color-palette');

[39184] Fix | Delete

if (colors.length === 0) {

[39185] Fix | Delete

return null;

[39186] Fix | Delete

}

[39187] Fix | Delete

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

[39188] Fix | Delete

spacing: 3,

[39189] Fix | Delete

className: className,

[39190] Fix | Delete

children: colors.map(({

[39191] Fix | Delete

name,

[39192] Fix | Delete

colors: colorPalette

[39193] Fix | Delete

}, index) => {

[39194] Fix | Delete

const id = `${instanceId}-${index}`;

[39195] Fix | Delete

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

[39196] Fix | Delete

spacing: 2,

[39197] Fix | Delete

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

[39198] Fix | Delete

id: id,

[39199] Fix | Delete

level: headingLevel,

[39200] Fix | Delete

children: name

[39201] Fix | Delete

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

[39202] Fix | Delete

clearColor: clearColor,

[39203] Fix | Delete

colors: colorPalette,

[39204] Fix | Delete

onChange: newColor => onChange(newColor, index),

[39205] Fix | Delete

value: value,

[39206] Fix | Delete

"aria-labelledby": id

[39207] Fix | Delete

})]

[39208] Fix | Delete

}, index);

[39209] Fix | Delete

})

[39210] Fix | Delete

});

[39211] Fix | Delete

}

[39212] Fix | Delete

function CustomColorPickerDropdown({

[39213] Fix | Delete

isRenderedInSidebar,

[39214] Fix | Delete

popoverProps: receivedPopoverProps,

[39215] Fix | Delete

...props

[39216] Fix | Delete

}) {

[39217] Fix | Delete

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

[39218] Fix | Delete

shift: true,

[39219] Fix | Delete

// Disabling resize as it would otherwise cause the popover to show

[39220] Fix | Delete

// scrollbars while dragging the color picker's handle close to the

[39221] Fix | Delete

// popover edge.

[39222] Fix | Delete

resize: false,

[39223] Fix | Delete

...(isRenderedInSidebar ? {

[39224] Fix | Delete

// When in the sidebar: open to the left (stacking),

[39225] Fix | Delete

// leaving the same gap as the parent popover.

[39226] Fix | Delete

placement: 'left-start',

[39227] Fix | Delete

offset: 34

[39228] Fix | Delete

} : {

[39229] Fix | Delete

// Default behavior: open below the anchor

[39230] Fix | Delete

placement: 'bottom',

[39231] Fix | Delete

offset: 8

[39232] Fix | Delete

}),

[39233] Fix | Delete

...receivedPopoverProps

[39234] Fix | Delete

}), [isRenderedInSidebar, receivedPopoverProps]);

[39235] Fix | Delete

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

[39236] Fix | Delete

contentClassName: "components-color-palette__custom-color-dropdown-content",

[39237] Fix | Delete

popoverProps: popoverProps,

[39238] Fix | Delete

...props

[39239] Fix | Delete

});

[39240] Fix | Delete

}

[39241] Fix | Delete

function UnforwardedColorPalette(props, forwardedRef) {

[39242] Fix | Delete

const {

[39243] Fix | Delete

asButtons,

[39244] Fix | Delete

loop,

[39245] Fix | Delete

clearable = true,

[39246] Fix | Delete

colors = [],

[39247] Fix | Delete

disableCustomColors = false,

[39248] Fix | Delete

enableAlpha = false,

[39249] Fix | Delete

onChange,

[39250] Fix | Delete

value,

[39251] Fix | Delete

__experimentalIsRenderedInSidebar = false,

[39252] Fix | Delete

headingLevel = 2,

[39253] Fix | Delete

'aria-label': ariaLabel,

[39254] Fix | Delete

'aria-labelledby': ariaLabelledby,

[39255] Fix | Delete

...additionalProps

[39256] Fix | Delete

} = props;

[39257] Fix | Delete

const [normalizedColorValue, setNormalizedColorValue] = (0,external_wp_element_namespaceObject.useState)(value);

[39258] Fix | Delete

const clearColor = (0,external_wp_element_namespaceObject.useCallback)(() => onChange(undefined), [onChange]);

[39259] Fix | Delete

const customColorPaletteCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => {

[39260] Fix | Delete

setNormalizedColorValue(normalizeColorValue(value, node));

[39261] Fix | Delete

}, [value]);

[39262] Fix | Delete

const hasMultipleColorOrigins = isMultiplePaletteArray(colors);

[39263] Fix | Delete

const buttonLabelName = (0,external_wp_element_namespaceObject.useMemo)(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]);

[39264] Fix | Delete

const renderCustomColorPicker = () => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(dropdown_content_wrapper, {

[39265] Fix | Delete

paddingSize: "none",

[39266] Fix | Delete

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

[39267] Fix | Delete

color: normalizedColorValue,

[39268] Fix | Delete

onChange: color => onChange(color),

[39269] Fix | Delete

enableAlpha: enableAlpha

[39270] Fix | Delete

})

[39271] Fix | Delete

});

[39272] Fix | Delete

const isHex = value?.startsWith('#');

[39273] Fix | Delete

[39274] Fix | Delete

// Leave hex values as-is. Remove the `var()` wrapper from CSS vars.

[39275] Fix | Delete

const displayValue = value?.replace(/^var\((.+)\)$/, '$1');

[39276] Fix | Delete

const customColorAccessibleLabel = !!displayValue ? (0,external_wp_i18n_namespaceObject.sprintf)(

[39277] Fix | Delete

// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".

[39278] Fix | Delete

(0,external_wp_i18n_namespaceObject.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0,external_wp_i18n_namespaceObject.__)('Custom color picker.');

[39279] Fix | Delete

const paletteCommonProps = {

[39280] Fix | Delete

clearColor,

[39281] Fix | Delete

onChange,

[39282] Fix | Delete

value

[39283] Fix | Delete

};

[39284] Fix | Delete

const actions = !!clearable && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(build_module_circular_option_picker.ButtonAction, {

[39285] Fix | Delete

onClick: clearColor,

[39286] Fix | Delete

children: (0,external_wp_i18n_namespaceObject.__)('Clear')

[39287] Fix | Delete

});

[39288] Fix | Delete

let metaProps;

[39289] Fix | Delete

if (asButtons) {

[39290] Fix | Delete

metaProps = {

[39291] Fix | Delete

asButtons: true

[39292] Fix | Delete

};

[39293] Fix | Delete

} else {

[39294] Fix | Delete

const _metaProps = {

[39295] Fix | Delete

asButtons: false,

[39296] Fix | Delete

loop

[39297] Fix | Delete

};

[39298] Fix | Delete

if (ariaLabel) {

[39299] Fix | Delete

metaProps = {

[39300] Fix | Delete

..._metaProps,

[39301] Fix | Delete

'aria-label': ariaLabel

[39302] Fix | Delete

};

[39303] Fix | Delete

} else if (ariaLabelledby) {

[39304] Fix | Delete

metaProps = {

[39305] Fix | Delete

..._metaProps,

[39306] Fix | Delete

'aria-labelledby': ariaLabelledby

[39307] Fix | Delete

};

[39308] Fix | Delete

} else {

[39309] Fix | Delete

metaProps = {

[39310] Fix | Delete

..._metaProps,

[39311] Fix | Delete

'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.')

[39312] Fix | Delete

};

[39313] Fix | Delete

}

[39314] Fix | Delete

}

[39315] Fix | Delete

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

[39316] Fix | Delete

spacing: 3,

[39317] Fix | Delete

ref: forwardedRef,

[39318] Fix | Delete

...additionalProps,

[39319] Fix | Delete

children: [!disableCustomColors && /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(CustomColorPickerDropdown, {

[39320] Fix | Delete

isRenderedInSidebar: __experimentalIsRenderedInSidebar,

[39321] Fix | Delete

renderContent: renderCustomColorPicker,

[39322] Fix | Delete

renderToggle: ({

[39323] Fix | Delete

isOpen,

[39324] Fix | Delete

onToggle

[39325] Fix | Delete

}) => /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsxs)(v_stack_component, {

[39326] Fix | Delete

className: "components-color-palette__custom-color-wrapper",

[39327] Fix | Delete

spacing: 0,

[39328] Fix | Delete

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

[39329] Fix | Delete

ref: customColorPaletteCallbackRef,

[39330] Fix | Delete

className: "components-color-palette__custom-color-button",

[39331] Fix | Delete

"aria-expanded": isOpen,

[39332] Fix | Delete

"aria-haspopup": "true",

[39333] Fix | Delete

onClick: onToggle,

[39334] Fix | Delete

"aria-label": customColorAccessibleLabel,

[39335] Fix | Delete

style: {

[39336] Fix | Delete

background: value

[39337] Fix | Delete

},

[39338] Fix | Delete

type: "button"

[39339] Fix | Delete

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

[39340] Fix | Delete

className: "components-color-palette__custom-color-text-wrapper",

[39341] Fix | Delete

spacing: 0.5,

[39342] Fix | Delete

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

[39343] Fix | Delete

className: "components-color-palette__custom-color-name",

[39344] Fix | Delete

children: value ? buttonLabelName : (0,external_wp_i18n_namespaceObject.__)('No color selected')

[39345] Fix | Delete

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

[39346] Fix | Delete

className: dist_clsx('components-color-palette__custom-color-value', {

[39347] Fix | Delete

'components-color-palette__custom-color-value--is-hex': isHex

[39348] Fix | Delete

}),

[39349] Fix | Delete

children: displayValue

[39350] Fix | Delete

})]

[39351] Fix | Delete

})]

[39352] Fix | Delete

})

[39353] Fix | Delete

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

[39354] Fix | Delete

...metaProps,

[39355] Fix | Delete

actions: actions,

[39356] Fix | Delete

options: hasMultipleColorOrigins ? /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(MultiplePalettes, {

[39357] Fix | Delete

...paletteCommonProps,

[39358] Fix | Delete

headingLevel: headingLevel,

[39359] Fix | Delete

colors: colors,

[39360] Fix | Delete

value: value

[39361] Fix | Delete

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

[39362] Fix | Delete

...paletteCommonProps,

[39363] Fix | Delete

colors: colors,

[39364] Fix | Delete

value: value

[39365] Fix | Delete

})

[39366] Fix | Delete

})]

[39367] Fix | Delete

});

[39368] Fix | Delete

}

[39369] Fix | Delete

[39370] Fix | Delete

/**

[39371] Fix | Delete

* Allows the user to pick a color from a list of pre-defined color entries.

[39372] Fix | Delete

*

[39373] Fix | Delete

* ```jsx

[39374] Fix | Delete

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

[39375] Fix | Delete

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

[39376] Fix | Delete

*

[39377] Fix | Delete

* const MyColorPalette = () => {

[39378] Fix | Delete

* const [ color, setColor ] = useState ( '#f00' )

[39379] Fix | Delete

* const colors = [

[39380] Fix | Delete

* { name: 'red', color: '#f00' },

[39381] Fix | Delete

* { name: 'white', color: '#fff' },

[39382] Fix | Delete

* { name: 'blue', color: '#00f' },

[39383] Fix | Delete

* ];

[39384] Fix | Delete

* return (

[39385] Fix | Delete

* <ColorPalette

[39386] Fix | Delete

* colors={ colors }

[39387] Fix | Delete

* value={ color }

[39388] Fix | Delete

* onChange={ ( color ) => setColor( color ) }

[39389] Fix | Delete

* />

[39390] Fix | Delete

* );

[39391] Fix | Delete

* } );

[39392] Fix | Delete

* ```

[39393] Fix | Delete

*/

[39394] Fix | Delete

const ColorPalette = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorPalette);

[39395] Fix | Delete

/* harmony default export */ const color_palette = (ColorPalette);

[39396] Fix | Delete

[39397] Fix | Delete

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

[39398] Fix | Delete

[39399] Fix | Delete

/**

[39400] Fix | Delete

* External dependencies

[39401] Fix | Delete

*/

[39402] Fix | Delete

[39403] Fix | Delete

/**

[39404] Fix | Delete

* Internal dependencies

[39405] Fix | Delete

*/

[39406] Fix | Delete

[39407] Fix | Delete

[39408] Fix | Delete

[39409] Fix | Delete

[39410] Fix | Delete

[39411] Fix | Delete

// Using `selectSize` instead of `size` to avoid a type conflict with the

[39412] Fix | Delete

// `size` HTML attribute of the `select` element.

[39413] Fix | Delete

[39414] Fix | Delete

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

[39415] Fix | Delete

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

[39416] Fix | Delete

[39417] Fix | Delete

const ValueInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? {

[39418] Fix | Delete

target: "e1bagdl32"

[39419] Fix | Delete

} : 0)("&&&{input{display:block;width:100%;}", BackdropUI, "{transition:box-shadow 0.1s linear;}}" + ( true ? "" : 0));

[39420] Fix | Delete

const baseUnitLabelStyles = ({

[39421] Fix | Delete

selectSize

[39422] Fix | Delete

}) => {

[39423] Fix | Delete

const sizes = {

[39424] Fix | Delete

small: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;padding:2px 1px;width:20px;color:", COLORS.gray[800], ";font-size:8px;line-height:1;letter-spacing:-0.5px;text-transform:uppercase;text-align-last:center;" + ( true ? "" : 0), true ? "" : 0),

[39425] Fix | Delete

default: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;min-width:24px;max-width:48px;height:24px;margin-inline-end:", space(2), ";padding:", space(1), ";color:", COLORS.theme.accent, ";font-size:13px;line-height:1;text-align-last:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0), true ? "" : 0)

[39426] Fix | Delete

};

[39427] Fix | Delete

return sizes[selectSize];

[39428] Fix | Delete

};

[39429] Fix | Delete

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

[39430] Fix | Delete

target: "e1bagdl31"

[39431] Fix | Delete

} : 0)("&&&{pointer-events:none;", baseUnitLabelStyles, ";color:", COLORS.gray[900], ";}" + ( true ? "" : 0));

[39432] Fix | Delete

const unitSelectSizes = ({

[39433] Fix | Delete

selectSize = 'default'

[39434] Fix | Delete

}) => {

[39435] Fix | Delete

const sizes = {

[39436] Fix | Delete

small: /*#__PURE__*/emotion_react_browser_esm_css("height:100%;border:1px solid transparent;transition:box-shadow 0.1s linear,border 0.1s linear;", rtl({

[39437] Fix | Delete

borderTopLeftRadius: 0,

[39438] Fix | Delete

borderBottomLeftRadius: 0

[39439] Fix | Delete

})(), " &:not(:disabled):hover{background-color:", COLORS.gray[100], ";}&:focus{border:1px solid ", COLORS.ui.borderFocus, ";box-shadow:inset 0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline-offset:0;outline:2px solid transparent;z-index:1;}" + ( true ? "" : 0), true ? "" : 0),

[39440] Fix | Delete

default: /*#__PURE__*/emotion_react_browser_esm_css("display:flex;justify-content:center;align-items:center;&:hover{color:", COLORS.ui.borderFocus, ";box-shadow:inset 0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidth, " solid transparent;}&:focus{box-shadow:0 0 0 ", config_values.borderWidthFocus + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidthFocus, " solid transparent;}" + ( true ? "" : 0), true ? "" : 0)

[39441] Fix | Delete

};

[39442] Fix | Delete

return sizes[selectSize];

[39443] Fix | Delete

};

[39444] Fix | Delete

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

[39445] Fix | Delete

target: "e1bagdl30"

[39446] Fix | Delete

} : 0)("&&&{appearance:none;background:transparent;border-radius:2px;border:none;display:block;outline:none;margin:0;min-height:auto;font-family:inherit;", baseUnitLabelStyles, ";", unitSelectSizes, ";&:not( :disabled ){cursor:pointer;}}" + ( true ? "" : 0));

[39447] Fix | Delete

[39448] Fix | Delete

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

[39449] Fix | Delete

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

[39450] Fix | Delete

/**

[39451] Fix | Delete

* External dependencies

[39452] Fix | Delete

*/

[39453] Fix | Delete

[39454] Fix | Delete

[39455] Fix | Delete

/**

[39456] Fix | Delete

* Internal dependencies

[39457] Fix | Delete

*/

[39458] Fix | Delete

[39459] Fix | Delete

[39460] Fix | Delete

[39461] Fix | Delete

[39462] Fix | Delete

const styles_labelStyles = true ? {

[39463] Fix | Delete

name: "f3vz0n",

[39464] Fix | Delete

styles: "font-weight:500"

[39465] Fix | Delete

} : 0;

[39466] Fix | Delete

const focusBoxShadow = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:inset ", config_values.controlBoxShadowFocus, ";" + ( true ? "" : 0), true ? "" : 0);

[39467] Fix | Delete

const borderControl = /*#__PURE__*/emotion_react_browser_esm_css("border:0;padding:0;margin:0;", boxSizingReset, ";" + ( true ? "" : 0), true ? "" : 0);

[39468] Fix | Delete

const innerWrapper = () => /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:1 1 40%;}&& ", UnitSelect, "{min-height:0;}" + ( true ? "" : 0), true ? "" : 0);

[39469] Fix | Delete

[39470] Fix | Delete

/*

[39471] Fix | Delete

* This style is only applied to the UnitControl wrapper when the border width

[39472] Fix | Delete

* field should be a set width. Omitting this allows the UnitControl &

[39473] Fix | Delete

* RangeControl to share the available width in a 40/60 split respectively.

[39474] Fix | Delete

*/

[39475] Fix | Delete

const styles_wrapperWidth = /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:0 0 auto;}" + ( true ? "" : 0), true ? "" : 0);

[39476] Fix | Delete

const wrapperHeight = size => {

[39477] Fix | Delete

return /*#__PURE__*/emotion_react_browser_esm_css("height:", size === '__unstable-large' ? '40px' : '30px', ";" + ( true ? "" : 0), true ? "" : 0);

[39478] Fix | Delete

};

[39479] Fix | Delete

const borderControlDropdown = /*#__PURE__*/emotion_react_browser_esm_css("background:#fff;&&>button{aspect-ratio:1;padding:0;display:flex;align-items:center;justify-content:center;", rtl({

[39480] Fix | Delete

borderRadius: `2px 0 0 2px`

[39481] Fix | Delete

}, {

[39482] Fix | Delete

borderRadius: `0 2px 2px 0`

[39483] Fix | Delete

})(), " border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";&:focus,&:hover:not( :disabled ){", focusBoxShadow, " border-color:", COLORS.ui.borderFocus, ";z-index:1;position:relative;}}" + ( true ? "" : 0), true ? "" : 0);

[39484] Fix | Delete

const colorIndicatorBorder = border => {

[39485] Fix | Delete

const {

[39486] Fix | Delete

color,

[39487] Fix | Delete

style

[39488] Fix | Delete

} = border || {};

[39489] Fix | Delete

const fallbackColor = !!style && style !== 'none' ? COLORS.gray[300] : undefined;

[39490] Fix | Delete

return /*#__PURE__*/emotion_react_browser_esm_css("border-style:", style === 'none' ? 'solid' : style, ";border-color:", color || fallbackColor, ";" + ( true ? "" : 0), true ? "" : 0);

[39491] Fix | Delete

};

[39492] Fix | Delete

const colorIndicatorWrapper = (border, size) => {

[39493] Fix | Delete

const {

[39494] Fix | Delete

style

[39495] Fix | Delete

} = border || {};

[39496] Fix | Delete

return /*#__PURE__*/emotion_react_browser_esm_css("border-radius:9999px;border:2px solid transparent;", style ? colorIndicatorBorder(border) : undefined, " width:", size === '__unstable-large' ? '24px' : '22px', ";height:", size === '__unstable-large' ? '24px' : '22px', ";padding:", size === '__unstable-large' ? '2px' : '1px', ";&>span{height:", space(4), ";width:", space(4), ";background:linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);}" + ( true ? "" : 0), true ? "" : 0);

[39497] Fix | Delete

};

[39498] Fix | Delete

[39499] Fix | Delete