@wordpress/components 19.6.1-next.a55ed9455a.0 → 19.7.0

package/build-module/unit-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["noop","omit","classnames","forwardRef","useMemo","useRef","useEffect","__","ENTER","inputControlActionTypes","composeStateReducers","Root","ValueInput","UnitSelectControl","CSS_UNITS","getParsedQuantityAndUnit","getUnitsWithCurrentUnit","getValidParsedQuantityAndUnit","useControlledState","UnitControl","forwardedRef","__unstableStateReducer","stateReducer","state","autoComplete","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onUnitChange","size","style","unit","unitProp","units","unitsProp","value","valueProp","props","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","keyCode","unitControlStateReducer","action","type","COMMIT","toString","inputSuffix","step","activeUnit","ForwardedUnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n\tChangeEvent,\n} from 'react';\nimport { noop, omit } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { ENTER } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { composeStateReducers } from '../input-control/reducer/reducer';\nimport { Root, ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnitControl(\n\t{\n\t\t__unstableStateReducer: stateReducer = ( state ) => state,\n\t\tautoComplete = 'off',\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange = noop,\n\t\tonUnitChange = noop,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\t...props\n\t}: WordPressComponentProps< UnitControlProps, 'input', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tsetUnit( parsedUnit );\n\t}, [ parsedUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number | undefined >( undefined );\n\n\tconst classes = classnames( 'components-unit-control', className );\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: { event: ChangeEvent< HTMLInputElement > }\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChange( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChange( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChange( nextValue, changeProps );\n\t\tonUnitChange( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [\n\t\t\tvalidParsedQuantity,\n\t\t\tvalidParsedUnit,\n\t\t] = getValidParsedQuantityAndUnit(\n\t\t\tevent.currentTarget.value,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\tonChange(\n\t\t\t\t`${ validParsedQuantity ?? '' }${ validParsedUnit }`,\n\t\t\t\tchangeProps\n\t\t\t);\n\t\t\tonUnitChange( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = mayUpdateUnit;\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { keyCode } = event;\n\t\tif ( keyCode === ENTER ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @param  state  State from InputControl\n\t * @param  action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t */\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\t/*\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t */\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tstate.value = ( refParsedQuantity.current ?? '' ).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn state;\n\t};\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<Root className=\"components-unit-control-wrapper\" style={ style }>\n\t\t\t<ValueInput\n\t\t\t\taria-label={ label }\n\t\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t\t{ ...omit( props, [ 'children' ] ) }\n\t\t\t\tautoComplete={ autoComplete }\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tlabel={ label }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\t\tonChange={ handleOnQuantityChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ inputSuffix }\n\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\tstep={ step }\n\t\t\t\t__unstableStateReducer={ composeStateReducers(\n\t\t\t\t\tunitControlStateReducer,\n\t\t\t\t\tstateReducer\n\t\t\t\t) }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a value as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '10px' );\n *\n *   return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nconst ForwardedUnitControl = forwardRef( UnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default ForwardedUnitControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["omit","classnames","deprecated","forwardRef","useMemo","useRef","useEffect","__","inputControlActionTypes","Root","ValueInput","UnitSelectControl","CSS_UNITS","getParsedQuantityAndUnit","getUnitsWithCurrentUnit","getValidParsedQuantityAndUnit","useControlledState","UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","style","unit","unitProp","units","unitsProp","value","valueProp","props","since","hint","version","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","key","unitControlStateReducer","state","action","nextState","type","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n\tChangeEvent,\n\tPointerEvent,\n} from 'react';\nimport { omit } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { Root, ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tautoComplete = 'off',\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tstyle,\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number | undefined >( undefined );\n\n\tconst classes = classnames( 'components-unit-control', className );\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent:\n\t\t\t\t| ChangeEvent< HTMLInputElement >\n\t\t\t\t| PointerEvent< HTMLInputElement >;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [\n\t\t\tvalidParsedQuantity,\n\t\t\tvalidParsedUnit,\n\t\t] = getValidParsedQuantityAndUnit(\n\t\t\tevent.currentTarget.value,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\tonChangeProp?.(\n\t\t\t\t`${ validParsedQuantity ?? '' }${ validParsedUnit }`,\n\t\t\t\tchangeProps\n\t\t\t);\n\t\t\tonUnitChange?.( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = mayUpdateUnit;\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tif ( key === 'Enter' ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @param  state  State from InputControl\n\t * @param  action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t */\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\t/*\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t */\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tnextState.value = (\n\t\t\t\t\trefParsedQuantity.current ?? ''\n\t\t\t\t).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn nextState;\n\t};\n\n\tlet stateReducer: StateReducer = unitControlStateReducer;\n\tif ( stateReducerProp ) {\n\t\tstateReducer = ( state, action ) => {\n\t\t\tconst baseState = unitControlStateReducer( state, action );\n\t\t\treturn stateReducerProp( baseState, action );\n\t\t};\n\t}\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<Root className=\"components-unit-control-wrapper\" style={ style }>\n\t\t\t<ValueInput\n\t\t\t\taria-label={ label }\n\t\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t\t{ ...omit( props, [ 'children' ] ) }\n\t\t\t\tautoComplete={ autoComplete }\n\t\t\t\tclassName={ classes }\n\t\t\t\tdisabled={ disabled }\n\t\t\t\tdisableUnits={ disableUnits }\n\t\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\t\tlabel={ label }\n\t\t\t\tonBlur={ handleOnBlur }\n\t\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\t\tonChange={ handleOnQuantityChange }\n\t\t\t\tref={ forwardedRef }\n\t\t\t\tsize={ size }\n\t\t\t\tsuffix={ inputSuffix }\n\t\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\t\tstep={ step }\n\t\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\t/>\n\t\t</Root>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '10px' );\n *\n *   return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}

package/build-module/unit-control/unit-select-control.js

@@ -4,7 +4,6 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 import { UnitSelect, UnitLabel } from './styles/unit-control-styles';
 import { CSS_UNITS, hasUnits } from './utils';
@@ -12,7 +11,7 @@ export default function UnitSelectControl(_ref) {
   let {
     className,
     isUnitSelectTabbable: isTabbable = true,
-    onChange = noop,
+    onChange,
     size = 'default',
     unit = 'px',
     units = CSS_UNITS,
@@ -31,7 +30,7 @@ export default function UnitSelectControl(_ref) {
       value: unitValue
     } = event.target;
     const data = units.find(option => option.value === unitValue);
-    onChange(unitValue, {
+    onChange === null || onChange === void 0 ? void 0 : onChange(unitValue, {
       event,
       data
     });

package/build-module/unit-control/unit-select-control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/unit-select-control.tsx"],"names":["noop","classnames","UnitSelect","UnitLabel","CSS_UNITS","hasUnits","UnitSelectControl","className","isUnitSelectTabbable","isTabbable","onChange","size","unit","units","props","length","handleOnChange","event","value","unitValue","target","data","find","option","classes","undefined","map","label"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAOA,SAASC,UAAT,EAAqBC,SAArB,QAAsC,8BAAtC;AACA,SAASC,SAAT,EAAoBC,QAApB,QAAoC,SAApC;AAGA,eAAe,SAASC,iBAAT,OAQyD;AAAA,MAR7B;AAC1CC,IAAAA,SAD0C;AAE1CC,IAAAA,oBAAoB,EAAEC,UAAU,GAAG,IAFO;AAG1CC,IAAAA,QAAQ,GAAGV,IAH+B;AAI1CW,IAAAA,IAAI,GAAG,SAJmC;AAK1CC,IAAAA,IAAI,GAAG,IALmC;AAM1CC,IAAAA,KAAK,GAAGT,SANkC;AAO1C,OAAGU;AAPuC,GAQ6B;;AACvE,MAAK,CAAET,QAAQ,CAAEQ,KAAF,CAAV,IAAuB,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEE,MAAP,MAAkB,CAA9C,EAAkD;AACjD,WACC,cAAC,SAAD;AACC,MAAA,SAAS,EAAC,qCADX;AAEC,MAAA,UAAU,EAAGJ;AAFd,OAIGC,IAJH,CADD;AAQA;;AAED,QAAMI,cAAc,GAAKC,KAAF,IAA+C;AACrE,UAAM;AAAEC,MAAAA,KAAK,EAAEC;AAAT,QAAuBF,KAAK,CAACG,MAAnC;AACA,UAAMC,IAAI,GAAGR,KAAK,CAACS,IAAN,CAAcC,MAAF,IAAcA,MAAM,CAACL,KAAP,KAAiBC,SAA3C,CAAb;AAEAT,IAAAA,QAAQ,CAAES,SAAF,EAAa;AAAEF,MAAAA,KAAF;AAASI,MAAAA;AAAT,KAAb,CAAR;AACA,GALD;;AAOA,QAAMG,OAAO,GAAGvB,UAAU,CAAE,iCAAF,EAAqCM,SAArC,CAA1B;AAEA,SACC,cAAC,UAAD;AACC,IAAA,SAAS,EAAGiB,OADb;AAEC,IAAA,QAAQ,EAAGR,cAFZ;AAGC,IAAA,UAAU,EAAGL,IAHd;AAIC,IAAA,QAAQ,EAAGF,UAAU,GAAGgB,SAAH,GAAe,CAAC,CAJtC;AAKC,IAAA,KAAK,EAAGb;AALT,KAMME,KANN,GAQGD,KAAK,CAACa,GAAN,CAAaH,MAAF,IACZ;AAAQ,IAAA,KAAK,EAAGA,MAAM,CAACL,KAAvB;AAA+B,IAAA,GAAG,EAAGK,MAAM,CAACL;AAA5C,KACGK,MAAM,CAACI,KADV,CADC,CARH,CADD;AAgBA","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { UnitSelect, UnitLabel } from './styles/unit-control-styles';\nimport { CSS_UNITS, hasUnits } from './utils';\nimport type { UnitSelectControlProps } from './types';\n\nexport default function UnitSelectControl( {\n\tclassName,\n\tisUnitSelectTabbable: isTabbable = true,\n\tonChange = noop,\n\tsize = 'default',\n\tunit = 'px',\n\tunits = CSS_UNITS,\n\t...props\n}: WordPressComponentProps< UnitSelectControlProps, 'select', false > ) {\n\tif ( ! hasUnits( units ) || units?.length === 1 ) {\n\t\treturn (\n\t\t\t<UnitLabel\n\t\t\t\tclassName=\"components-unit-control__unit-label\"\n\t\t\t\tselectSize={ size }\n\t\t\t>\n\t\t\t\t{ unit }\n\t\t\t</UnitLabel>\n\t\t);\n\t}\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {\n\t\tconst { value: unitValue } = event.target;\n\t\tconst data = units.find( ( option ) => option.value === unitValue );\n\n\t\tonChange( unitValue, { event, data } );\n\t};\n\n\tconst classes = classnames( 'components-unit-control__select', className );\n\n\treturn (\n\t\t<UnitSelect\n\t\t\tclassName={ classes }\n\t\t\tonChange={ handleOnChange }\n\t\t\tselectSize={ size }\n\t\t\ttabIndex={ isTabbable ? undefined : -1 }\n\t\t\tvalue={ unit }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ units.map( ( option ) => (\n\t\t\t\t<option value={ option.value } key={ option.value }>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</option>\n\t\t\t) ) }\n\t\t</UnitSelect>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/unit-select-control.tsx"],"names":["classnames","UnitSelect","UnitLabel","CSS_UNITS","hasUnits","UnitSelectControl","className","isUnitSelectTabbable","isTabbable","onChange","size","unit","units","props","length","handleOnChange","event","value","unitValue","target","data","find","option","classes","undefined","map","label"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAOA,SAASC,UAAT,EAAqBC,SAArB,QAAsC,8BAAtC;AACA,SAASC,SAAT,EAAoBC,QAApB,QAAoC,SAApC;AAGA,eAAe,SAASC,iBAAT,OAQyD;AAAA,MAR7B;AAC1CC,IAAAA,SAD0C;AAE1CC,IAAAA,oBAAoB,EAAEC,UAAU,GAAG,IAFO;AAG1CC,IAAAA,QAH0C;AAI1CC,IAAAA,IAAI,GAAG,SAJmC;AAK1CC,IAAAA,IAAI,GAAG,IALmC;AAM1CC,IAAAA,KAAK,GAAGT,SANkC;AAO1C,OAAGU;AAPuC,GAQ6B;;AACvE,MAAK,CAAET,QAAQ,CAAEQ,KAAF,CAAV,IAAuB,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEE,MAAP,MAAkB,CAA9C,EAAkD;AACjD,WACC,cAAC,SAAD;AACC,MAAA,SAAS,EAAC,qCADX;AAEC,MAAA,UAAU,EAAGJ;AAFd,OAIGC,IAJH,CADD;AAQA;;AAED,QAAMI,cAAc,GAAKC,KAAF,IAA+C;AACrE,UAAM;AAAEC,MAAAA,KAAK,EAAEC;AAAT,QAAuBF,KAAK,CAACG,MAAnC;AACA,UAAMC,IAAI,GAAGR,KAAK,CAACS,IAAN,CAAcC,MAAF,IAAcA,MAAM,CAACL,KAAP,KAAiBC,SAA3C,CAAb;AAEAT,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAIS,SAAJ,EAAe;AAAEF,MAAAA,KAAF;AAASI,MAAAA;AAAT,KAAf,CAAR;AACA,GALD;;AAOA,QAAMG,OAAO,GAAGvB,UAAU,CAAE,iCAAF,EAAqCM,SAArC,CAA1B;AAEA,SACC,cAAC,UAAD;AACC,IAAA,SAAS,EAAGiB,OADb;AAEC,IAAA,QAAQ,EAAGR,cAFZ;AAGC,IAAA,UAAU,EAAGL,IAHd;AAIC,IAAA,QAAQ,EAAGF,UAAU,GAAGgB,SAAH,GAAe,CAAC,CAJtC;AAKC,IAAA,KAAK,EAAGb;AALT,KAMME,KANN,GAQGD,KAAK,CAACa,GAAN,CAAaH,MAAF,IACZ;AAAQ,IAAA,KAAK,EAAGA,MAAM,CAACL,KAAvB;AAA+B,IAAA,GAAG,EAAGK,MAAM,CAACL;AAA5C,KACGK,MAAM,CAACI,KADV,CADC,CARH,CADD;AAgBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { UnitSelect, UnitLabel } from './styles/unit-control-styles';\nimport { CSS_UNITS, hasUnits } from './utils';\nimport type { UnitSelectControlProps } from './types';\n\nexport default function UnitSelectControl( {\n\tclassName,\n\tisUnitSelectTabbable: isTabbable = true,\n\tonChange,\n\tsize = 'default',\n\tunit = 'px',\n\tunits = CSS_UNITS,\n\t...props\n}: WordPressComponentProps< UnitSelectControlProps, 'select', false > ) {\n\tif ( ! hasUnits( units ) || units?.length === 1 ) {\n\t\treturn (\n\t\t\t<UnitLabel\n\t\t\t\tclassName=\"components-unit-control__unit-label\"\n\t\t\t\tselectSize={ size }\n\t\t\t>\n\t\t\t\t{ unit }\n\t\t\t</UnitLabel>\n\t\t);\n\t}\n\n\tconst handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {\n\t\tconst { value: unitValue } = event.target;\n\t\tconst data = units.find( ( option ) => option.value === unitValue );\n\n\t\tonChange?.( unitValue, { event, data } );\n\t};\n\n\tconst classes = classnames( 'components-unit-control__select', className );\n\n\treturn (\n\t\t<UnitSelect\n\t\t\tclassName={ classes }\n\t\t\tonChange={ handleOnChange }\n\t\t\tselectSize={ size }\n\t\t\ttabIndex={ isTabbable ? undefined : -1 }\n\t\t\tvalue={ unit }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ units.map( ( option ) => (\n\t\t\t\t<option value={ option.value } key={ option.value }>\n\t\t\t\t\t{ option.label }\n\t\t\t\t</option>\n\t\t\t) ) }\n\t\t</UnitSelect>\n\t);\n}\n"]}

package/build-style/style-rtl.css

@@ -595,11 +595,11 @@ p + .components-button.is-tertiary {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-.components-checkbox-control__input[type=checkbox]:checked {
+.components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
   background: var(--wp-admin-theme-color);
   border-color: var(--wp-admin-theme-color);
 }
-.components-checkbox-control__input[type=checkbox]:checked::-ms-check {
+.components-checkbox-control__input[type=checkbox]:checked::-ms-check, .components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check {
   opacity: 0;
 }
 .components-checkbox-control__input[type=checkbox]:checked::before {
@@ -621,7 +621,8 @@ p + .components-button.is-tertiary {
   }
 }
 
-svg.components-checkbox-control__checked {
+svg.components-checkbox-control__checked,
+svg.components-checkbox-control__indeterminate {
   fill: #fff;
   cursor: pointer;
   position: absolute;
@@ -634,7 +635,8 @@ svg.components-checkbox-control__checked {
   pointer-events: none;
 }
 @media (min-width: 600px) {
-  svg.components-checkbox-control__checked {
+  svg.components-checkbox-control__checked,
+svg.components-checkbox-control__indeterminate {
     right: -2px;
     top: -2px;
   }
@@ -893,11 +895,10 @@ input.components-combobox-control__input[type=text]:focus {
   position: relative;
   border: none;
   background: none;
-  display: block;
   border-radius: 2px;
-  height: 48px;
+  height: 64px;
+  padding: 12px;
   font-family: inherit;
-  text-align: left;
   width: 100%;
   background-image: repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0), repeating-linear-gradient(-45deg, #e0e0e0 25%, transparent 25%, transparent 75%, #e0e0e0 75%, #e0e0e0);
   background-position: 100% 0, 25px 25px;
@@ -940,6 +941,15 @@ input.components-combobox-control__input[type=text]:focus {
     margin-bottom: -60px;
   }
 }
+.components-color-palette__custom-color-name {
+  text-align: right;
+}
+
+.components-color-palette__custom-color-value {
+  margin-right: 16px;
+  text-transform: uppercase;
+}
+
 .components-custom-gradient-picker__gradient-bar:not(.has-gradient) {
   opacity: 0.4;
 }
@@ -1048,12 +1058,19 @@ input.components-combobox-control__input[type=text]:focus {
 .components-custom-select-control__button {
   border: 1px solid #757575;
   border-radius: 2px;
-  min-height: 30px;
   min-width: 130px;
   position: relative;
   text-align: right;
 }
+.components-custom-select-control__button:not(.is-next-36px-default-size) {
+  min-height: 30px;
+}
 .components-custom-select-control__button.components-custom-select-control__button {
+  padding-right: 16px;
+  padding-left: 32px;
+}
+.components-custom-select-control__button.components-custom-select-control__button:not(.is-next-36px-default-size) {
+  padding-right: 8px;
   padding-left: 24px;
 }
 .components-custom-select-control__button:focus:not(:disabled) {
@@ -1090,10 +1107,13 @@ input.components-combobox-control__input[type=text]:focus {
   display: grid;
   grid-template-columns: auto auto;
   list-style-type: none;
-  padding: 8px;
+  padding: 8px 16px;
   cursor: default;
   line-height: 28px;
 }
+.components-custom-select-control__item:not(.is-next-36px-default-size) {
+  padding: 8px;
+}
 .components-custom-select-control__item.has-hint {
   grid-template-columns: auto auto 30px;
 }
@@ -4748,178 +4768,6 @@ div.components-toolbar > div + div.has-left-divider::before {
   height: 20px;
 }
 
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child:last-child,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > * .components-button,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child:last-child,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > * .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child:last-child,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child:last-child .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > .components-button.components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > * .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child:last-child,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child:last-child .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > .components-button.components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > * .components-button,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child:last-child,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child:last-child .components-button,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > .components-button.components-button,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > * .components-button {
-  min-width: 48px;
-  padding-right: 12px;
-  padding-left: 12px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child:last-child::before,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button::before, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button::before, .block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot.components-dropdown > * .components-button::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child:last-child::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child:last-child .components-button::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > .components-button.components-button::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot.components-dropdown > * .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child:last-child::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child:last-child .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > .components-button.components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar.components-dropdown > * .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child:last-child::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child:last-child .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > .components-button.components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown.components-dropdown > * .components-button::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child:last-child::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child:last-child .components-button::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > .components-button.components-button::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group.components-dropdown > * .components-button::before {
-  right: 8px;
-  left: 8px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:first-child > .components-button,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:first-child > .components-button,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:first-child > .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:first-child > .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child .components-button,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:first-child > .components-button,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child .components-button {
-  min-width: 42px;
-  padding-right: 11px;
-  padding-left: 6px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:first-child::before,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:first-child > .components-button::before,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:first-child::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:first-child > .components-button::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:first-child .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:first-child::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:first-child > .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:first-child .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:first-child::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:first-child > .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:first-child .components-button::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:first-child::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:first-child > .components-button::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:first-child .components-button::before {
-  right: 8px;
-  left: 2px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button {
-  min-width: 36px;
-  padding-right: 6px;
-  padding-left: 6px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button svg,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button svg,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button svg,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button svg,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button svg,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button svg,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button svg,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button svg,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button svg,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button svg,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button svg,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button svg,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button svg,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button svg {
-  min-width: 24px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button::before,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div > .components-button::before,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div > .components-button::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div > .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div > .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown .components-button::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div > .components-button::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown .components-button::before {
-  right: 2px;
-  left: 2px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:last-child,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:last-child > .components-button,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:last-child,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:last-child > .components-button,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:last-child,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:last-child > .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:last-child .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:last-child,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:last-child > .components-button,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:last-child .components-button,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:last-child,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:last-child > .components-button,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:last-child .components-button {
-  min-width: 42px;
-  padding-right: 6px;
-  padding-left: 11px;
-}
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-button:last-child::before,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > div:last-child > .components-button::before,
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-button:last-child::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > div:last-child > .components-button::before,
-.block-editor-block-toolbar > .components-toolbar-group > .block-editor-block-toolbar__slot > .components-dropdown:last-child .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-button:last-child::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > div:last-child > .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar > .components-dropdown:last-child .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-button:last-child::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > div:last-child > .components-button::before,
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown > .components-dropdown:last-child .components-button::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-button:last-child::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > div:last-child > .components-button::before,
-.block-editor-block-toolbar .block-editor-block-toolbar__slot .components-toolbar-group > .components-dropdown:last-child .components-button::before {
-  right: 2px;
-  left: 8px;
-}
-
 .components-tooltip.components-popover {
   z-index: 1000002;
 }