@wordpress/components 27.6.0 → 28.0.1

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","deprecated","forwardRef","useMemo","useRef","useEffect","__","ValueInput","UnitSelectControl","CSS_UNITS","getParsedQuantityAndUnit","getUnitsWithCurrentUnit","getValidParsedQuantityAndUnit","useControlledState","escapeRegExp","useDeprecated36pxDefaultSizeProp","UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","value","valueProp","onFocus","onFocusProp","props","since","hint","version","nonNullValueProp","undefined","reFirstCharacterOfUnits","list","firstUnitValue","rest","firstCharacters","reduce","carry","first","substring","includes","RegExp","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","handleOnKeyDown","event","onKeyDown","metaKey","test","key","refInputSuffix","current","focus","inputSuffix","createElement","ref","__next40pxDefaultSize","onBlur","step","_activeUnit$step","activeUnit","find","option","spinControls","suffix","type","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits"],"sources":["@wordpress/components/src/unit-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';\nimport clsx from 'clsx';\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 '../context';\nimport { 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 { escapeRegExp } from '../utils/strings';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\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,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\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\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonFocus: onFocusProp,\n\t\t...props\n\t} = useDeprecated36pxDefaultSizeProp( 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, reFirstCharacterOfUnits ] = useMemo( () => {\n\t\tconst list = getUnitsWithCurrentUnit(\n\t\t\tnonNullValueProp,\n\t\t\tunitProp,\n\t\t\tunitsProp\n\t\t);\n\t\tconst [ { value: firstUnitValue = '' } = {}, ...rest ] = list;\n\t\tconst firstCharacters = rest.reduce(\n\t\t\t( carry, { value } ) => {\n\t\t\t\tconst first = escapeRegExp( value?.substring( 0, 1 ) || '' );\n\t\t\t\treturn carry.includes( first )\n\t\t\t\t\t? carry\n\t\t\t\t\t: `${ carry }|${ first }`;\n\t\t\t},\n\t\t\tescapeRegExp( firstUnitValue.substring( 0, 1 ) )\n\t\t);\n\t\treturn [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];\n\t}, [ nonNullValueProp, unitProp, unitsProp ] );\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\tunits.length === 1 ? units[ 0 ].value : unitProp,\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, setUnit ] );\n\n\tconst classes = clsx(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\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\tlet handleOnKeyDown;\n\tif ( ! disableUnits && isUnitSelectTabbable && units.length ) {\n\t\thandleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\t\tprops.onKeyDown?.( event );\n\t\t\t// Unless the meta key was pressed (to avoid interfering with\n\t\t\t// shortcuts, e.g. pastes), moves focus to the unit select if a key\n\t\t\t// matches the first character of a unit.\n\t\t\tif (\n\t\t\t\t! event.metaKey &&\n\t\t\t\treFirstCharacterOfUnits.test( event.key )\n\t\t\t) {\n\t\t\t\trefInputSuffix.current?.focus();\n\t\t\t}\n\t\t};\n\t}\n\n\tconst refInputSuffix = useRef< HTMLSelectElement >( null );\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\tref={ refInputSuffix }\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={\n\t\t\t\t[ 'small', 'compact' ].includes( size ) ||\n\t\t\t\t( size === 'default' && ! props.__next40pxDefaultSize )\n\t\t\t\t\t? 'small'\n\t\t\t\t\t: 'default'\n\t\t\t}\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonFocus={ onFocusProp }\n\t\t\tonBlur={ unitControlProps.onBlur }\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<ValueInput\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\tonFocus={ onFocusProp }\n\t\t\t__unstableStateReducer={ __unstableStateReducer }\n\t\t/>\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 * ```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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["clsx","deprecated","forwardRef","useMemo","useRef","useEffect","__","ValueInput","UnitSelectControl","CSS_UNITS","getParsedQuantityAndUnit","getUnitsWithCurrentUnit","getValidParsedQuantityAndUnit","useControlledState","escapeRegExp","useDeprecated36pxDefaultSizeProp","jsx","_jsx","UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","value","valueProp","onFocus","onFocusProp","props","since","hint","version","nonNullValueProp","undefined","reFirstCharacterOfUnits","list","firstUnitValue","rest","firstCharacters","reduce","carry","first","substring","includes","RegExp","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","handleOnKeyDown","event","onKeyDown","metaKey","test","key","refInputSuffix","current","focus","inputSuffix","ref","__next40pxDefaultSize","onBlur","step","_activeUnit$step","activeUnit","find","option","spinControls","suffix","type","UnitControl","parseQuantityAndUnitFromRawValue","useCustomUnits"],"sources":["@wordpress/components/src/unit-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';\nimport clsx from 'clsx';\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 '../context';\nimport { 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 { escapeRegExp } from '../utils/strings';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';\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,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\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\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonFocus: onFocusProp,\n\t\t...props\n\t} = useDeprecated36pxDefaultSizeProp( 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, reFirstCharacterOfUnits ] = useMemo( () => {\n\t\tconst list = getUnitsWithCurrentUnit(\n\t\t\tnonNullValueProp,\n\t\t\tunitProp,\n\t\t\tunitsProp\n\t\t);\n\t\tconst [ { value: firstUnitValue = '' } = {}, ...rest ] = list;\n\t\tconst firstCharacters = rest.reduce(\n\t\t\t( carry, { value } ) => {\n\t\t\t\tconst first = escapeRegExp( value?.substring( 0, 1 ) || '' );\n\t\t\t\treturn carry.includes( first )\n\t\t\t\t\t? carry\n\t\t\t\t\t: `${ carry }|${ first }`;\n\t\t\t},\n\t\t\tescapeRegExp( firstUnitValue.substring( 0, 1 ) )\n\t\t);\n\t\treturn [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];\n\t}, [ nonNullValueProp, unitProp, unitsProp ] );\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\tunits.length === 1 ? units[ 0 ].value : unitProp,\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, setUnit ] );\n\n\tconst classes = clsx(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\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\tlet handleOnKeyDown;\n\tif ( ! disableUnits && isUnitSelectTabbable && units.length ) {\n\t\thandleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\t\tprops.onKeyDown?.( event );\n\t\t\t// Unless the meta key was pressed (to avoid interfering with\n\t\t\t// shortcuts, e.g. pastes), moves focus to the unit select if a key\n\t\t\t// matches the first character of a unit.\n\t\t\tif (\n\t\t\t\t! event.metaKey &&\n\t\t\t\treFirstCharacterOfUnits.test( event.key )\n\t\t\t) {\n\t\t\t\trefInputSuffix.current?.focus();\n\t\t\t}\n\t\t};\n\t}\n\n\tconst refInputSuffix = useRef< HTMLSelectElement >( null );\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\tref={ refInputSuffix }\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={\n\t\t\t\t[ 'small', 'compact' ].includes( size ) ||\n\t\t\t\t( size === 'default' && ! props.__next40pxDefaultSize )\n\t\t\t\t\t? 'small'\n\t\t\t\t\t: 'default'\n\t\t\t}\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonFocus={ onFocusProp }\n\t\t\tonBlur={ unitControlProps.onBlur }\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<ValueInput\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\tonFocus={ onFocusProp }\n\t\t\t__unstableStateReducer={ __unstableStateReducer }\n\t\t/>\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 * ```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"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
@@ -19,6 +18,9 @@ import { CSS_UNITS, hasUnits, getAccessibleLabelForUnit } from './utils';
 import { useRef, useCallback, useMemo, memo } from '@wordpress/element';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 function UnitControl({
   currentInput,
   label,
@@ -53,18 +55,21 @@ function UnitControl({
   const accessibilityLabel = sprintf(__('Current unit is %s'), unit);
   const accessibilityHint = Platform.OS === 'ios' ? __('Double tap to open Action Sheet with available options') : __('Double tap to open Bottom Sheet with available options');
   const renderUnitButton = useMemo(() => {
-    const unitButton = createElement(View, {
-      style: styles.unitButton
-    }, createElement(Text, {
-      style: unitButtonTextStyle
-    }, unit));
+    const unitButton = /*#__PURE__*/_jsx(View, {
+      style: styles.unitButton,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: unitButtonTextStyle,
+        children: unit
+      })
+    });
     if (hasUnits(units) && units?.length > 1) {
-      return createElement(TouchableWithoutFeedback, {
+      return /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
         onPress: onPickerPresent,
         accessibilityLabel: accessibilityLabel,
         accessibilityRole: "button",
-        accessibilityHint: accessibilityHint
-      }, unitButton);
+        accessibilityHint: accessibilityHint,
+        children: unitButton
+      });
     }
     return unitButton;
   }, [onPickerPresent, accessibilityLabel, accessibilityHint, unitButtonTextStyle, unit, units]);
@@ -89,17 +94,18 @@ function UnitControl({
     if (units === false) {
       return null;
     }
-    return createElement(View, {
+    return /*#__PURE__*/_jsxs(View, {
       style: styles.unitMenu,
-      ref: anchorNodeRef
-    }, renderUnitButton, hasUnits(units) && units?.length > 1 ? createElement(Picker, {
-      ref: pickerRef,
-      options: units,
-      onChange: onUnitChange,
-      hideCancelButton: true,
-      leftAlign: true,
-      getAnchor: getAnchor
-    }) : null);
+      ref: anchorNodeRef,
+      children: [renderUnitButton, hasUnits(units) && units?.length > 1 ? /*#__PURE__*/_jsx(Picker, {
+        ref: pickerRef,
+        options: units,
+        onChange: onUnitChange,
+        hideCancelButton: true,
+        leftAlign: true,
+        getAnchor: getAnchor
+      }) : null]
+    });
   }, [pickerRef, units, onUnitChange, getAnchor, renderUnitButton]);
   let step = props.step;
 
@@ -113,35 +119,39 @@ function UnitControl({
     step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
   }
   const decimalNum = getDecimal(step);
-  return createElement(Fragment, null, unit !== '%' ? createElement(StepperCell, {
-    label: label,
-    max: max,
-    min: min,
-    onChange: onChange,
-    separatorType: separatorType,
-    value: value,
-    step: step,
-    defaultValue: initialControlValue,
-    shouldDisplayTextInput: true,
-    decimalNum: decimalNum,
-    openUnitPicker: onPickerPresent,
-    unitLabel: getAccessibleLabelForUnit(unit),
-    ...props
-  }, renderUnitPicker()) : createElement(RangeCell, {
-    label: label,
-    onChange: onChange,
-    minimumValue: min,
-    maximumValue: max,
-    value: value,
-    step: step,
-    unit: unit,
-    defaultValue: initialControlValue,
-    separatorType: separatorType,
-    decimalNum: decimalNum,
-    openUnitPicker: onPickerPresent,
-    unitLabel: getAccessibleLabelForUnit(unit),
-    ...props
-  }, renderUnitPicker()));
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: unit !== '%' ? /*#__PURE__*/_jsx(StepperCell, {
+      label: label,
+      max: max,
+      min: min,
+      onChange: onChange,
+      separatorType: separatorType,
+      value: value,
+      step: step,
+      defaultValue: initialControlValue,
+      shouldDisplayTextInput: true,
+      decimalNum: decimalNum,
+      openUnitPicker: onPickerPresent,
+      unitLabel: getAccessibleLabelForUnit(unit),
+      ...props,
+      children: renderUnitPicker()
+    }) : /*#__PURE__*/_jsx(RangeCell, {
+      label: label,
+      onChange: onChange,
+      minimumValue: min,
+      maximumValue: max,
+      value: value,
+      step: step,
+      unit: unit,
+      defaultValue: initialControlValue,
+      separatorType: separatorType,
+      decimalNum: decimalNum,
+      openUnitPicker: onPickerPresent,
+      unitLabel: getAccessibleLabelForUnit(unit),
+      ...props,
+      children: renderUnitPicker()
+    })
+  });
 }
 export { useCustomUnits } from './utils';
 export default memo(withPreferredColorScheme(UnitControl));

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

@@ -1 +1 @@
-{"version":3,"names":["Text","View","TouchableWithoutFeedback","Platform","findNodeHandle","RangeCell","StepperCell","Picker","styles","CSS_UNITS","hasUnits","getAccessibleLabelForUnit","useRef","useCallback","useMemo","memo","withPreferredColorScheme","__","sprintf","UnitControl","currentInput","label","value","onChange","onUnitChange","initialPosition","min","max","separatorType","units","unit","getStylesFromColorScheme","props","pickerRef","anchorNodeRef","onPickerPresent","current","presentPicker","currentInputValue","initialControlValue","isFinite","unitButtonTextStyle","unitButtonText","unitButtonTextDark","accessibilityLabel","accessibilityHint","OS","renderUnitButton","unitButton","createElement","style","length","onPress","accessibilityRole","getAnchor","undefined","getDecimal","step","stepToString","splitStep","toString","split","renderUnitPicker","unitMenu","ref","options","hideCancelButton","leftAlign","_activeUnit$step","activeUnit","find","option","decimalNum","Fragment","defaultValue","shouldDisplayTextInput","openUnitPicker","unitLabel","minimumValue","maximumValue","useCustomUnits"],"sources":["@wordpress/components/src/unit-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tText,\n\tView,\n\tTouchableWithoutFeedback,\n\tPlatform,\n\tfindNodeHandle,\n} from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\nimport Picker from '../mobile/picker';\nimport styles from './style.scss';\nimport { CSS_UNITS, hasUnits, getAccessibleLabelForUnit } from './utils';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useMemo, memo } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\nfunction UnitControl( {\n\tcurrentInput,\n\tlabel,\n\tvalue,\n\tonChange,\n\tonUnitChange,\n\tinitialPosition,\n\tmin,\n\tmax,\n\tseparatorType,\n\tunits = CSS_UNITS,\n\tunit,\n\tgetStylesFromColorScheme,\n\t...props\n} ) {\n\tconst pickerRef = useRef();\n\tconst anchorNodeRef = useRef();\n\n\tconst onPickerPresent = useCallback( () => {\n\t\tif ( pickerRef?.current ) {\n\t\t\tpickerRef.current.presentPicker();\n\t\t}\n\t\t// Disable reason: this should be fixed by the native team.\n\t\t// It would be great if this could be done in the context of\n\t\t// https://github.com/WordPress/gutenberg/pull/39218\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ pickerRef?.current ] );\n\n\tconst currentInputValue = currentInput === null ? value : currentInput;\n\tconst initialControlValue = isFinite( currentInputValue )\n\t\t? currentInputValue\n\t\t: initialPosition;\n\n\tconst unitButtonTextStyle = getStylesFromColorScheme(\n\t\tstyles.unitButtonText,\n\t\tstyles.unitButtonTextDark\n\t);\n\n\t/* translators: accessibility text. Inform about current unit value. %s: Current unit value. */\n\tconst accessibilityLabel = sprintf( __( 'Current unit is %s' ), unit );\n\n\tconst accessibilityHint =\n\t\tPlatform.OS === 'ios'\n\t\t\t? __( 'Double tap to open Action Sheet with available options' )\n\t\t\t: __( 'Double tap to open Bottom Sheet with available options' );\n\n\tconst renderUnitButton = useMemo( () => {\n\t\tconst unitButton = (\n\t\t\t<View style={ styles.unitButton }>\n\t\t\t\t<Text style={ unitButtonTextStyle }>{ unit }</Text>\n\t\t\t</View>\n\t\t);\n\n\t\tif ( hasUnits( units ) && units?.length > 1 ) {\n\t\t\treturn (\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ onPickerPresent }\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t>\n\t\t\t\t\t{ unitButton }\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t);\n\t\t}\n\n\t\treturn unitButton;\n\t}, [\n\t\tonPickerPresent,\n\t\taccessibilityLabel,\n\t\taccessibilityHint,\n\t\tunitButtonTextStyle,\n\t\tunit,\n\t\tunits,\n\t] );\n\n\tconst getAnchor = useCallback(\n\t\t() =>\n\t\t\tanchorNodeRef?.current\n\t\t\t\t? findNodeHandle( anchorNodeRef?.current )\n\t\t\t\t: undefined,\n\t\t// Disable reason: this should be fixed by the native team.\n\t\t// It would be great if this could be done in the context of\n\t\t// https://github.com/WordPress/gutenberg/pull/39218\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[ anchorNodeRef?.current ]\n\t);\n\n\tconst getDecimal = ( step ) => {\n\t\t// Return the decimal offset based on the step size.\n\t\t// if step size is 0.1 we expect the offset to be 1.\n\t\t// for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );\n\t\t// steps are defined in the CSS_UNITS and they vary from unit to unit.\n\t\tconst stepToString = step;\n\t\tconst splitStep = stepToString.toString().split( '.' );\n\t\treturn splitStep[ 1 ] ? splitStep[ 1 ].length : 0;\n\t};\n\n\tconst renderUnitPicker = useCallback( () => {\n\t\t// Keeping for legacy reasons, although `false` should not be a valid\n\t\t// value for the `units` prop anymore.\n\t\tif ( units === false ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.unitMenu } ref={ anchorNodeRef }>\n\t\t\t\t{ renderUnitButton }\n\t\t\t\t{ hasUnits( units ) && units?.length > 1 ? (\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tref={ pickerRef }\n\t\t\t\t\t\toptions={ units }\n\t\t\t\t\t\tonChange={ onUnitChange }\n\t\t\t\t\t\thideCancelButton\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tgetAnchor={ getAnchor }\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</View>\n\t\t);\n\t}, [ pickerRef, units, onUnitChange, getAnchor, renderUnitButton ] );\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\tconst decimalNum = getDecimal( step );\n\n\treturn (\n\t\t<>\n\t\t\t{ unit !== '%' ? (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tshouldDisplayTextInput\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</StepperCell>\n\t\t\t) : (\n\t\t\t\t<RangeCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tminimumValue={ min }\n\t\t\t\t\tmaximumValue={ max }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tunit={ unit }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</RangeCell>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport { useCustomUnits } from './utils';\nexport default memo( withPreferredColorScheme( UnitControl ) );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Text","View","TouchableWithoutFeedback","Platform","findNodeHandle","RangeCell","StepperCell","Picker","styles","CSS_UNITS","hasUnits","getAccessibleLabelForUnit","useRef","useCallback","useMemo","memo","withPreferredColorScheme","__","sprintf","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","UnitControl","currentInput","label","value","onChange","onUnitChange","initialPosition","min","max","separatorType","units","unit","getStylesFromColorScheme","props","pickerRef","anchorNodeRef","onPickerPresent","current","presentPicker","currentInputValue","initialControlValue","isFinite","unitButtonTextStyle","unitButtonText","unitButtonTextDark","accessibilityLabel","accessibilityHint","OS","renderUnitButton","unitButton","style","children","length","onPress","accessibilityRole","getAnchor","undefined","getDecimal","step","stepToString","splitStep","toString","split","renderUnitPicker","unitMenu","ref","options","hideCancelButton","leftAlign","_activeUnit$step","activeUnit","find","option","decimalNum","defaultValue","shouldDisplayTextInput","openUnitPicker","unitLabel","minimumValue","maximumValue","useCustomUnits"],"sources":["@wordpress/components/src/unit-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tText,\n\tView,\n\tTouchableWithoutFeedback,\n\tPlatform,\n\tfindNodeHandle,\n} from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\nimport Picker from '../mobile/picker';\nimport styles from './style.scss';\nimport { CSS_UNITS, hasUnits, getAccessibleLabelForUnit } from './utils';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useMemo, memo } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\nfunction UnitControl( {\n\tcurrentInput,\n\tlabel,\n\tvalue,\n\tonChange,\n\tonUnitChange,\n\tinitialPosition,\n\tmin,\n\tmax,\n\tseparatorType,\n\tunits = CSS_UNITS,\n\tunit,\n\tgetStylesFromColorScheme,\n\t...props\n} ) {\n\tconst pickerRef = useRef();\n\tconst anchorNodeRef = useRef();\n\n\tconst onPickerPresent = useCallback( () => {\n\t\tif ( pickerRef?.current ) {\n\t\t\tpickerRef.current.presentPicker();\n\t\t}\n\t\t// Disable reason: this should be fixed by the native team.\n\t\t// It would be great if this could be done in the context of\n\t\t// https://github.com/WordPress/gutenberg/pull/39218\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ pickerRef?.current ] );\n\n\tconst currentInputValue = currentInput === null ? value : currentInput;\n\tconst initialControlValue = isFinite( currentInputValue )\n\t\t? currentInputValue\n\t\t: initialPosition;\n\n\tconst unitButtonTextStyle = getStylesFromColorScheme(\n\t\tstyles.unitButtonText,\n\t\tstyles.unitButtonTextDark\n\t);\n\n\t/* translators: accessibility text. Inform about current unit value. %s: Current unit value. */\n\tconst accessibilityLabel = sprintf( __( 'Current unit is %s' ), unit );\n\n\tconst accessibilityHint =\n\t\tPlatform.OS === 'ios'\n\t\t\t? __( 'Double tap to open Action Sheet with available options' )\n\t\t\t: __( 'Double tap to open Bottom Sheet with available options' );\n\n\tconst renderUnitButton = useMemo( () => {\n\t\tconst unitButton = (\n\t\t\t<View style={ styles.unitButton }>\n\t\t\t\t<Text style={ unitButtonTextStyle }>{ unit }</Text>\n\t\t\t</View>\n\t\t);\n\n\t\tif ( hasUnits( units ) && units?.length > 1 ) {\n\t\t\treturn (\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ onPickerPresent }\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t>\n\t\t\t\t\t{ unitButton }\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t);\n\t\t}\n\n\t\treturn unitButton;\n\t}, [\n\t\tonPickerPresent,\n\t\taccessibilityLabel,\n\t\taccessibilityHint,\n\t\tunitButtonTextStyle,\n\t\tunit,\n\t\tunits,\n\t] );\n\n\tconst getAnchor = useCallback(\n\t\t() =>\n\t\t\tanchorNodeRef?.current\n\t\t\t\t? findNodeHandle( anchorNodeRef?.current )\n\t\t\t\t: undefined,\n\t\t// Disable reason: this should be fixed by the native team.\n\t\t// It would be great if this could be done in the context of\n\t\t// https://github.com/WordPress/gutenberg/pull/39218\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[ anchorNodeRef?.current ]\n\t);\n\n\tconst getDecimal = ( step ) => {\n\t\t// Return the decimal offset based on the step size.\n\t\t// if step size is 0.1 we expect the offset to be 1.\n\t\t// for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );\n\t\t// steps are defined in the CSS_UNITS and they vary from unit to unit.\n\t\tconst stepToString = step;\n\t\tconst splitStep = stepToString.toString().split( '.' );\n\t\treturn splitStep[ 1 ] ? splitStep[ 1 ].length : 0;\n\t};\n\n\tconst renderUnitPicker = useCallback( () => {\n\t\t// Keeping for legacy reasons, although `false` should not be a valid\n\t\t// value for the `units` prop anymore.\n\t\tif ( units === false ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.unitMenu } ref={ anchorNodeRef }>\n\t\t\t\t{ renderUnitButton }\n\t\t\t\t{ hasUnits( units ) && units?.length > 1 ? (\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tref={ pickerRef }\n\t\t\t\t\t\toptions={ units }\n\t\t\t\t\t\tonChange={ onUnitChange }\n\t\t\t\t\t\thideCancelButton\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tgetAnchor={ getAnchor }\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</View>\n\t\t);\n\t}, [ pickerRef, units, onUnitChange, getAnchor, renderUnitButton ] );\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\tconst decimalNum = getDecimal( step );\n\n\treturn (\n\t\t<>\n\t\t\t{ unit !== '%' ? (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tshouldDisplayTextInput\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</StepperCell>\n\t\t\t) : (\n\t\t\t\t<RangeCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tminimumValue={ min }\n\t\t\t\t\tmaximumValue={ max }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tunit={ unit }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</RangeCell>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport { useCustomUnits } from './utils';\nexport default memo( withPreferredColorScheme( UnitControl ) );\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -14,6 +13,7 @@ import { forwardRef } from '@wordpress/element';
 
 import { UnitSelect, UnitLabel } from './styles/unit-control-styles';
 import { CSS_UNITS, hasUnits } from './utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnitSelectControl({
   className,
   isUnitSelectTabbable: isTabbable = true,
@@ -24,10 +24,11 @@ function UnitSelectControl({
   ...props
 }, ref) {
   if (!hasUnits(units) || units?.length === 1) {
-    return createElement(UnitLabel, {
+    return /*#__PURE__*/_jsx(UnitLabel, {
       className: "components-unit-control__unit-label",
-      selectSize: size
-    }, unit);
+      selectSize: size,
+      children: unit
+    });
   }
   const handleOnChange = event => {
     const {
@@ -40,18 +41,19 @@ function UnitSelectControl({
     });
   };
   const classes = clsx('components-unit-control__select', className);
-  return createElement(UnitSelect, {
+  return /*#__PURE__*/_jsx(UnitSelect, {
     ref: ref,
     className: classes,
     onChange: handleOnChange,
     selectSize: size,
     tabIndex: isTabbable ? undefined : -1,
     value: unit,
-    ...props
-  }, units.map(option => createElement("option", {
-    value: option.value,
-    key: option.value
-  }, option.label)));
+    ...props,
+    children: units.map(option => /*#__PURE__*/_jsx("option", {
+      value: option.value,
+      children: option.label
+    }, option.value))
+  });
 }
 export default forwardRef(UnitSelectControl);
 //# sourceMappingURL=unit-select-control.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","forwardRef","UnitSelect","UnitLabel","CSS_UNITS","hasUnits","UnitSelectControl","className","isUnitSelectTabbable","isTabbable","onChange","size","unit","units","props","ref","length","createElement","selectSize","handleOnChange","event","value","unitValue","target","data","find","option","classes","tabIndex","undefined","map","key","label"],"sources":["@wordpress/components/src/unit-control/unit-select-control.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { UnitSelect, UnitLabel } from './styles/unit-control-styles';\nimport { CSS_UNITS, hasUnits } from './utils';\nimport type { UnitSelectControlProps } from './types';\n\nfunction UnitSelectControl(\n\t{\n\t\tclassName,\n\t\tisUnitSelectTabbable: isTabbable = true,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunit = 'px',\n\t\tunits = CSS_UNITS,\n\t\t...props\n\t}: WordPressComponentProps< UnitSelectControlProps, 'select', false >,\n\tref: ForwardedRef< any >\n) {\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 = clsx( 'components-unit-control__select', className );\n\n\treturn (\n\t\t<UnitSelect\n\t\t\tref={ ref }\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}\nexport default forwardRef( UnitSelectControl );\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,UAAU,EAAEC,SAAS,QAAQ,8BAA8B;AACpE,SAASC,SAAS,EAAEC,QAAQ,QAAQ,SAAS;AAG7C,SAASC,iBAAiBA,CACzB;EACCC,SAAS;EACTC,oBAAoB,EAAEC,UAAU,GAAG,IAAI;EACvCC,QAAQ;EACRC,IAAI,GAAG,SAAS;EAChBC,IAAI,GAAG,IAAI;EACXC,KAAK,GAAGT,SAAS;EACjB,GAAGU;AACgE,CAAC,EACrEC,GAAwB,EACvB;EACD,IAAK,CAAEV,QAAQ,CAAEQ,KAAM,CAAC,IAAIA,KAAK,EAAEG,MAAM,KAAK,CAAC,EAAG;IACjD,OACCC,aAAA,CAACd,SAAS;MACTI,SAAS,EAAC,qCAAqC;MAC/CW,UAAU,EAAGP;IAAM,GAEjBC,IACQ,CAAC;EAEd;EAEA,MAAMO,cAAc,GAAKC,KAAuC,IAAM;IACrE,MAAM;MAAEC,KAAK,EAAEC;IAAU,CAAC,GAAGF,KAAK,CAACG,MAAM;IACzC,MAAMC,IAAI,GAAGX,KAAK,CAACY,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACL,KAAK,KAAKC,SAAU,CAAC;IAEnEZ,QAAQ,GAAIY,SAAS,EAAE;MAAEF,KAAK;MAAEI;IAAK,CAAE,CAAC;EACzC,CAAC;EAED,MAAMG,OAAO,GAAG3B,IAAI,CAAE,iCAAiC,EAAEO,SAAU,CAAC;EAEpE,OACCU,aAAA,CAACf,UAAU;IACVa,GAAG,EAAGA,GAAK;IACXR,SAAS,EAAGoB,OAAS;IACrBjB,QAAQ,EAAGS,cAAgB;IAC3BD,UAAU,EAAGP,IAAM;IACnBiB,QAAQ,EAAGnB,UAAU,GAAGoB,SAAS,GAAG,CAAC,CAAG;IACxCR,KAAK,EAAGT,IAAM;IAAA,GACTE;EAAK,GAERD,KAAK,CAACiB,GAAG,CAAIJ,MAAM,IACpBT,aAAA;IAAQI,KAAK,EAAGK,MAAM,CAACL,KAAO;IAACU,GAAG,EAAGL,MAAM,CAACL;EAAO,GAChDK,MAAM,CAACM,KACF,CACP,CACS,CAAC;AAEf;AACA,eAAe/B,UAAU,CAAEK,iBAAkB,CAAC","ignoreList":[]}
+{"version":3,"names":["clsx","forwardRef","UnitSelect","UnitLabel","CSS_UNITS","hasUnits","jsx","_jsx","UnitSelectControl","className","isUnitSelectTabbable","isTabbable","onChange","size","unit","units","props","ref","length","selectSize","children","handleOnChange","event","value","unitValue","target","data","find","option","classes","tabIndex","undefined","map","label"],"sources":["@wordpress/components/src/unit-control/unit-select-control.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ChangeEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { UnitSelect, UnitLabel } from './styles/unit-control-styles';\nimport { CSS_UNITS, hasUnits } from './utils';\nimport type { UnitSelectControlProps } from './types';\n\nfunction UnitSelectControl(\n\t{\n\t\tclassName,\n\t\tisUnitSelectTabbable: isTabbable = true,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tunit = 'px',\n\t\tunits = CSS_UNITS,\n\t\t...props\n\t}: WordPressComponentProps< UnitSelectControlProps, 'select', false >,\n\tref: ForwardedRef< any >\n) {\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 = clsx( 'components-unit-control__select', className );\n\n\treturn (\n\t\t<UnitSelect\n\t\t\tref={ ref }\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}\nexport default forwardRef( UnitSelectControl );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAGvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAEA,SAASC,UAAU,EAAEC,SAAS,QAAQ,8BAA8B;AACpE,SAASC,SAAS,EAAEC,QAAQ,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG9C,SAASC,iBAAiBA,CACzB;EACCC,SAAS;EACTC,oBAAoB,EAAEC,UAAU,GAAG,IAAI;EACvCC,QAAQ;EACRC,IAAI,GAAG,SAAS;EAChBC,IAAI,GAAG,IAAI;EACXC,KAAK,GAAGX,SAAS;EACjB,GAAGY;AACgE,CAAC,EACrEC,GAAwB,EACvB;EACD,IAAK,CAAEZ,QAAQ,CAAEU,KAAM,CAAC,IAAIA,KAAK,EAAEG,MAAM,KAAK,CAAC,EAAG;IACjD,oBACCX,IAAA,CAACJ,SAAS;MACTM,SAAS,EAAC,qCAAqC;MAC/CU,UAAU,EAAGN,IAAM;MAAAO,QAAA,EAEjBN;IAAI,CACI,CAAC;EAEd;EAEA,MAAMO,cAAc,GAAKC,KAAuC,IAAM;IACrE,MAAM;MAAEC,KAAK,EAAEC;IAAU,CAAC,GAAGF,KAAK,CAACG,MAAM;IACzC,MAAMC,IAAI,GAAGX,KAAK,CAACY,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACL,KAAK,KAAKC,SAAU,CAAC;IAEnEZ,QAAQ,GAAIY,SAAS,EAAE;MAAEF,KAAK;MAAEI;IAAK,CAAE,CAAC;EACzC,CAAC;EAED,MAAMG,OAAO,GAAG7B,IAAI,CAAE,iCAAiC,EAAES,SAAU,CAAC;EAEpE,oBACCF,IAAA,CAACL,UAAU;IACVe,GAAG,EAAGA,GAAK;IACXR,SAAS,EAAGoB,OAAS;IACrBjB,QAAQ,EAAGS,cAAgB;IAC3BF,UAAU,EAAGN,IAAM;IACnBiB,QAAQ,EAAGnB,UAAU,GAAGoB,SAAS,GAAG,CAAC,CAAG;IACxCR,KAAK,EAAGT,IAAM;IAAA,GACTE,KAAK;IAAAI,QAAA,EAERL,KAAK,CAACiB,GAAG,CAAIJ,MAAM,iBACpBrB,IAAA;MAAQgB,KAAK,EAAGK,MAAM,CAACL,KAAO;MAAAH,QAAA,EAC3BQ,MAAM,CAACK;IAAK,GADsBL,MAAM,CAACL,KAEpC,CACP;EAAC,CACQ,CAAC;AAEf;AACA,eAAetB,UAAU,CAAEO,iBAAkB,CAAC","ignoreList":[]}

package/build-module/utils/style-mixins.js

@@ -1,6 +1,5 @@
 export { boxSizingReset } from './box-sizing';
 export { rgba } from './colors';
-export { reduceMotion } from './reduce-motion';
 export { rtl } from './rtl';
 export { font } from './font';
 export { breakpoint } from './breakpoint';

package/build-module/utils/style-mixins.js.map

@@ -1 +1 @@
-{"version":3,"names":["boxSizingReset","rgba","reduceMotion","rtl","font","breakpoint","default","CONFIG","COLORS","baseLabelTypography"],"sources":["@wordpress/components/src/utils/style-mixins.js"],"sourcesContent":["export { boxSizingReset } from './box-sizing';\nexport { rgba } from './colors';\nexport { reduceMotion } from './reduce-motion';\nexport { rtl } from './rtl';\nexport { font } from './font';\nexport { breakpoint } from './breakpoint';\nexport { default as CONFIG } from './config-values';\nexport { COLORS } from './colors-values';\nexport { baseLabelTypography } from './base-label';\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,cAAc;AAC7C,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,GAAG,QAAQ,OAAO;AAC3B,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,OAAO,IAAIC,MAAM,QAAQ,iBAAiB;AACnD,SAASC,MAAM,QAAQ,iBAAiB;AACxC,SAASC,mBAAmB,QAAQ,cAAc","ignoreList":[]}
+{"version":3,"names":["boxSizingReset","rgba","rtl","font","breakpoint","default","CONFIG","COLORS","baseLabelTypography"],"sources":["@wordpress/components/src/utils/style-mixins.js"],"sourcesContent":["export { boxSizingReset } from './box-sizing';\nexport { rgba } from './colors';\nexport { rtl } from './rtl';\nexport { font } from './font';\nexport { breakpoint } from './breakpoint';\nexport { default as CONFIG } from './config-values';\nexport { COLORS } from './colors-values';\nexport { baseLabelTypography } from './base-label';\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,cAAc;AAC7C,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,GAAG,QAAQ,OAAO;AAC3B,SAASC,IAAI,QAAQ,QAAQ;AAC7B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,OAAO,IAAIC,MAAM,QAAQ,iBAAiB;AACnD,SAASC,MAAM,QAAQ,iBAAiB;AACxC,SAASC,mBAAmB,QAAQ,cAAc","ignoreList":[]}

package/build-module/v-stack/component.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,9 +9,10 @@ import { createElement } from "react";
 import { contextConnect } from '../context';
 import { View } from '../view';
 import { useVStack } from './hook';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedVStack(props, forwardedRef) {
   const vStackProps = useVStack(props);
-  return createElement(View, {
+  return /*#__PURE__*/_jsx(View, {
     ...vStackProps,
     ref: forwardedRef
   });

package/build-module/v-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["contextConnect","View","useVStack","UnconnectedVStack","props","forwardedRef","vStackProps","createElement","ref","VStack"],"sources":["@wordpress/components/src/v-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useVStack } from './hook';\nimport type { VStackProps } from './types';\n\nfunction UnconnectedVStack(\n\tprops: WordPressComponentProps< VStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst vStackProps = useVStack( props );\n\n\treturn <View { ...vStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `VStack` (or Vertical Stack) is a layout component that arranges child\n * elements in a vertical line.\n *\n * `VStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalText as Text,\n * \t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<VStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nexport const VStack = contextConnect( UnconnectedVStack, 'VStack' );\n\nexport default VStack;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,SAAS,QAAQ,QAAQ;AAGlC,SAASC,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAGJ,SAAS,CAAEE,KAAM,CAAC;EAEtC,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,WAAW;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,MAAM,GAAGT,cAAc,CAAEG,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeM,MAAM","ignoreList":[]}
+{"version":3,"names":["contextConnect","View","useVStack","jsx","_jsx","UnconnectedVStack","props","forwardedRef","vStackProps","ref","VStack"],"sources":["@wordpress/components/src/v-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useVStack } from './hook';\nimport type { VStackProps } from './types';\n\nfunction UnconnectedVStack(\n\tprops: WordPressComponentProps< VStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst vStackProps = useVStack( props );\n\n\treturn <View { ...vStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `VStack` (or Vertical Stack) is a layout component that arranges child\n * elements in a vertical line.\n *\n * `VStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalText as Text,\n * \t__experimentalVStack as VStack,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<VStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</VStack>\n * \t);\n * }\n * ```\n */\nexport const VStack = contextConnect( UnconnectedVStack, 'VStack' );\n\nexport default VStack;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,SAAS,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGnC,SAASC,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAMC,WAAW,GAAGN,SAAS,CAAEI,KAAM,CAAC;EAEtC,oBAAOF,IAAA,CAACH,IAAI;IAAA,GAAMO,WAAW;IAAGC,GAAG,EAAGF;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,MAAM,GAAGV,cAAc,CAAEK,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeK,MAAM","ignoreList":[]}

package/build-module/view/component.js

@@ -1,5 +1,4 @@
 import _styled from "@emotion/styled/base";
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -12,7 +11,7 @@ import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-
+import { jsx as _jsx } from "react/jsx-runtime";
 const PolymorphicDiv = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e19lxcc00"
 } : {
@@ -23,7 +22,7 @@ function UnforwardedView({
   as,
   ...restProps
 }, ref) {
-  return createElement(PolymorphicDiv, {
+  return /*#__PURE__*/_jsx(PolymorphicDiv, {
     as: as,
     ref: ref,
     ...restProps

package/build-module/view/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","PolymorphicDiv","_styled","process","env","NODE_ENV","target","label","UnforwardedView","as","restProps","ref","createElement","View","Object","assign","selector"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\n\nconst PolymorphicDiv = styled.div``;\n\nfunction UnforwardedView< T extends React.ElementType = 'div' >(\n\t{ as, ...restProps }: WordPressComponentProps< {}, T >,\n\tref: React.ForwardedRef< any >\n) {\n\treturn <PolymorphicDiv as={ as } ref={ ref } { ...restProps } />;\n}\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View = Object.assign( forwardRef( UnforwardedView ), {\n\tselector: '.components-view',\n} );\n\nexport default View;\n"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;;AAGA,MAAMC,cAAc,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,moDAAe;AAEnC,SAASG,eAAeA,CACvB;EAAEC,EAAE;EAAE,GAAGC;AAA4C,CAAC,EACtDC,GAA8B,EAC7B;EACD,OAAOC,aAAA,CAACX,cAAc;IAACQ,EAAE,EAAGA,EAAI;IAACE,GAAG,EAAGA,GAAK;IAAA,GAAMD;EAAS,CAAI,CAAC;AACjE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,IAAI,GAAGC,MAAM,CAACC,MAAM,CAAEf,UAAU,CAAEQ,eAAgB,CAAC,EAAE;EACjEQ,QAAQ,EAAE;AACX,CAAE,CAAC;AAEH,eAAeH,IAAI","ignoreList":[]}
+{"version":3,"names":["forwardRef","jsx","_jsx","PolymorphicDiv","_styled","process","env","NODE_ENV","target","label","UnforwardedView","as","restProps","ref","View","Object","assign","selector"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\n\nconst PolymorphicDiv = styled.div``;\n\nfunction UnforwardedView< T extends React.ElementType = 'div' >(\n\t{ as, ...restProps }: WordPressComponentProps< {}, T >,\n\tref: React.ForwardedRef< any >\n) {\n\treturn <PolymorphicDiv as={ as } ref={ ref } { ...restProps } />;\n}\n\n/**\n * `View` is a core component that renders everything in the library.\n * It is the principle component in the entire library.\n *\n * ```jsx\n * import { View } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<View>\n * \t\t\t Code is Poetry\n * \t\t</View>\n * \t);\n * }\n * ```\n */\nexport const View = Object.assign( forwardRef( UnforwardedView ), {\n\tselector: '.components-view',\n} );\n\nexport default View;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAKA,MAAMC,cAAc,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,moDAAe;AAEnC,SAASG,eAAeA,CACvB;EAAEC,EAAE;EAAE,GAAGC;AAA4C,CAAC,EACtDC,GAA8B,EAC7B;EACD,oBAAOX,IAAA,CAACC,cAAc;IAACQ,EAAE,EAAGA,EAAI;IAACE,GAAG,EAAGA,GAAK;IAAA,GAAMD;EAAS,CAAI,CAAC;AACjE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,IAAI,GAAGC,MAAM,CAACC,MAAM,CAAEhB,UAAU,CAAEU,eAAgB,CAAC,EAAE;EACjEO,QAAQ,EAAE;AACX,CAAE,CAAC;AAEH,eAAeH,IAAI","ignoreList":[]}

package/build-module/visually-hidden/component.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -10,12 +9,13 @@ import { createElement } from "react";
 import { useContextSystem, contextConnect } from '../context';
 import { visuallyHidden } from './styles';
 import { View } from '../view';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedVisuallyHidden(props, forwardedRef) {
   const {
     style: styleProp,
     ...contextProps
   } = useContextSystem(props, 'VisuallyHidden');
-  return createElement(View, {
+  return /*#__PURE__*/_jsx(View, {
     ref: forwardedRef,
     ...contextProps,
     style: {

package/build-module/visually-hidden/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContextSystem","contextConnect","visuallyHidden","View","UnconnectedVisuallyHidden","props","forwardedRef","style","styleProp","contextProps","createElement","ref","VisuallyHidden"],"sources":["@wordpress/components/src/visually-hidden/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { visuallyHidden } from './styles';\nimport { View } from '../view';\nimport type { VisuallyHiddenProps } from './types';\n\nfunction UnconnectedVisuallyHidden(\n\tprops: WordPressComponentProps< VisuallyHiddenProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { style: styleProp, ...contextProps } = useContextSystem(\n\t\tprops,\n\t\t'VisuallyHidden'\n\t);\n\treturn (\n\t\t<View\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...contextProps }\n\t\t\tstyle={ { ...visuallyHidden, ...( styleProp || {} ) } }\n\t\t/>\n\t);\n}\n\n/**\n * `VisuallyHidden` is a component used to render text intended to be visually\n * hidden, but will show for alternate devices, for example a screen reader.\n *\n * ```jsx\n * import { VisuallyHidden } from `@wordpress/components`;\n *\n * function Example() {\n *   return (\n *     <VisuallyHidden>\n *       <label>Code is Poetry</label>\n *     </VisuallyHidden>\n *   );\n * }\n * ```\n */\nexport const VisuallyHidden = contextConnect(\n\tUnconnectedVisuallyHidden,\n\t'VisuallyHidden'\n);\n\nexport default VisuallyHidden;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,cAAc,QAAQ,YAAY;AAC7D,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,IAAI,QAAQ,SAAS;AAG9B,SAASC,yBAAyBA,CACjCC,KAA4D,EAC5DC,YAAiC,EAChC;EACD,MAAM;IAAEC,KAAK,EAAEC,SAAS;IAAE,GAAGC;EAAa,CAAC,GAAGT,gBAAgB,CAC7DK,KAAK,EACL,gBACD,CAAC;EACD,OACCK,aAAA,CAACP,IAAI;IACJQ,GAAG,EAAGL,YAAc;IAAA,GACfG,YAAY;IACjBF,KAAK,EAAG;MAAE,GAAGL,cAAc;MAAE,IAAKM,SAAS,IAAI,CAAC,CAAC;IAAG;EAAG,CACvD,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,cAAc,GAAGX,cAAc,CAC3CG,yBAAyB,EACzB,gBACD,CAAC;AAED,eAAeQ,cAAc","ignoreList":[]}
+{"version":3,"names":["useContextSystem","contextConnect","visuallyHidden","View","jsx","_jsx","UnconnectedVisuallyHidden","props","forwardedRef","style","styleProp","contextProps","ref","VisuallyHidden"],"sources":["@wordpress/components/src/visually-hidden/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { useContextSystem, contextConnect } from '../context';\nimport { visuallyHidden } from './styles';\nimport { View } from '../view';\nimport type { VisuallyHiddenProps } from './types';\n\nfunction UnconnectedVisuallyHidden(\n\tprops: WordPressComponentProps< VisuallyHiddenProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { style: styleProp, ...contextProps } = useContextSystem(\n\t\tprops,\n\t\t'VisuallyHidden'\n\t);\n\treturn (\n\t\t<View\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...contextProps }\n\t\t\tstyle={ { ...visuallyHidden, ...( styleProp || {} ) } }\n\t\t/>\n\t);\n}\n\n/**\n * `VisuallyHidden` is a component used to render text intended to be visually\n * hidden, but will show for alternate devices, for example a screen reader.\n *\n * ```jsx\n * import { VisuallyHidden } from `@wordpress/components`;\n *\n * function Example() {\n *   return (\n *     <VisuallyHidden>\n *       <label>Code is Poetry</label>\n *     </VisuallyHidden>\n *   );\n * }\n * ```\n */\nexport const VisuallyHidden = contextConnect(\n\tUnconnectedVisuallyHidden,\n\t'VisuallyHidden'\n);\n\nexport default VisuallyHidden;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,gBAAgB,EAAEC,cAAc,QAAQ,YAAY;AAC7D,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,IAAI,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAG/B,SAASC,yBAAyBA,CACjCC,KAA4D,EAC5DC,YAAiC,EAChC;EACD,MAAM;IAAEC,KAAK,EAAEC,SAAS;IAAE,GAAGC;EAAa,CAAC,GAAGX,gBAAgB,CAC7DO,KAAK,EACL,gBACD,CAAC;EACD,oBACCF,IAAA,CAACF,IAAI;IACJS,GAAG,EAAGJ,YAAc;IAAA,GACfG,YAAY;IACjBF,KAAK,EAAG;MAAE,GAAGP,cAAc;MAAE,IAAKQ,SAAS,IAAI,CAAC,CAAC;IAAG;EAAG,CACvD,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,cAAc,GAAGZ,cAAc,CAC3CK,yBAAyB,EACzB,gBACD,CAAC;AAED,eAAeO,cAAc","ignoreList":[]}

package/build-module/z-stack/component.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -14,6 +13,7 @@ import { isValidElement } from '@wordpress/element';
 import { getValidChildren } from '../utils/get-valid-children';
 import { contextConnect, useContextSystem } from '../context';
 import { ZStackView, ZStackChildView } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
 function UnconnectedZStack(props, forwardedRef) {
   const {
     children,
@@ -31,18 +31,19 @@ function UnconnectedZStack(props, forwardedRef) {
     // the item's index, so that items can correctly stack at the right distance
     const offsetAmount = isLayered ? offset * index : offset;
     const key = isValidElement(child) ? child.key : index;
-    return createElement(ZStackChildView, {
+    return /*#__PURE__*/_jsx(ZStackChildView, {
       offsetAmount: offsetAmount,
       zIndex: zIndex,
-      key: key
-    }, child);
+      children: child
+    }, key);
   });
-  return createElement(ZStackView, {
+  return /*#__PURE__*/_jsx(ZStackView, {
     ...otherProps,
     className: className,
     isLayered: isLayered,
-    ref: forwardedRef
-  }, clonedChildren);
+    ref: forwardedRef,
+    children: clonedChildren
+  });
 }
 
 /**

package/build-module/z-stack/component.js.map

@@ -1 +1 @@
-{"version":3,"names":["isValidElement","getValidChildren","contextConnect","useContextSystem","ZStackView","ZStackChildView","UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","validChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","createElement","ref","ZStack"],"sources":["@wordpress/components/src/z-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { isValidElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport type { ZStackProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnconnectedZStack(\n\tprops: WordPressComponentProps< ZStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tisLayered = true,\n\t\tisReversed = false,\n\t\toffset = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ZStack' );\n\n\tconst validChildren = getValidChildren( children );\n\tconst childrenLastIndex = validChildren.length - 1;\n\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst zIndex = isReversed ? childrenLastIndex - index : index;\n\t\t// Only when the component is layered, the offset needs to be multiplied by\n\t\t// the item's index, so that items can correctly stack at the right distance\n\t\tconst offsetAmount = isLayered ? offset * index : offset;\n\n\t\tconst key = isValidElement( child ) ? child.key : index;\n\n\t\treturn (\n\t\t\t<ZStackChildView\n\t\t\t\toffsetAmount={ offsetAmount }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t\tkey={ key }\n\t\t\t>\n\t\t\t\t{ child }\n\t\t\t</ZStackChildView>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<ZStackView\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ className }\n\t\t\tisLayered={ isLayered }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ clonedChildren }\n\t\t</ZStackView>\n\t);\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect( UnconnectedZStack, 'ZStack' );\n\nexport default ZStack;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,YAAY;AAC7D,SAASC,UAAU,EAAEC,eAAe,QAAQ,UAAU;AAItD,SAASC,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAM;IACLC,QAAQ;IACRC,SAAS;IACTC,SAAS,GAAG,IAAI;IAChBC,UAAU,GAAG,KAAK;IAClBC,MAAM,GAAG,CAAC;IACV,GAAGC;EACJ,CAAC,GAAGX,gBAAgB,CAAEI,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMQ,aAAa,GAAGd,gBAAgB,CAAEQ,QAAS,CAAC;EAClD,MAAMO,iBAAiB,GAAGD,aAAa,CAACE,MAAM,GAAG,CAAC;EAElD,MAAMC,cAAc,GAAGH,aAAa,CAACI,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,MAAM,GAAGV,UAAU,GAAGI,iBAAiB,GAAGK,KAAK,GAAGA,KAAK;IAC7D;IACA;IACA,MAAME,YAAY,GAAGZ,SAAS,GAAGE,MAAM,GAAGQ,KAAK,GAAGR,MAAM;IAExD,MAAMW,GAAG,GAAGxB,cAAc,CAAEoB,KAAM,CAAC,GAAGA,KAAK,CAACI,GAAG,GAAGH,KAAK;IAEvD,OACCI,aAAA,CAACpB,eAAe;MACfkB,YAAY,EAAGA,YAAc;MAC7BD,MAAM,EAAGA,MAAQ;MACjBE,GAAG,EAAGA;IAAK,GAETJ,KACc,CAAC;EAEpB,CAAE,CAAC;EAEH,OACCK,aAAA,CAACrB,UAAU;IAAA,GACLU,UAAU;IACfJ,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBe,GAAG,EAAGlB;EAAc,GAElBU,cACS,CAAC;AAEf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMS,MAAM,GAAGzB,cAAc,CAAEI,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeqB,MAAM","ignoreList":[]}
+{"version":3,"names":["isValidElement","getValidChildren","contextConnect","useContextSystem","ZStackView","ZStackChildView","jsx","_jsx","UnconnectedZStack","props","forwardedRef","children","className","isLayered","isReversed","offset","otherProps","validChildren","childrenLastIndex","length","clonedChildren","map","child","index","zIndex","offsetAmount","key","ref","ZStack"],"sources":["@wordpress/components/src/z-stack/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { isValidElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { getValidChildren } from '../utils/get-valid-children';\nimport { contextConnect, useContextSystem } from '../context';\nimport { ZStackView, ZStackChildView } from './styles';\nimport type { ZStackProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nfunction UnconnectedZStack(\n\tprops: WordPressComponentProps< ZStackProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tisLayered = true,\n\t\tisReversed = false,\n\t\toffset = 0,\n\t\t...otherProps\n\t} = useContextSystem( props, 'ZStack' );\n\n\tconst validChildren = getValidChildren( children );\n\tconst childrenLastIndex = validChildren.length - 1;\n\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst zIndex = isReversed ? childrenLastIndex - index : index;\n\t\t// Only when the component is layered, the offset needs to be multiplied by\n\t\t// the item's index, so that items can correctly stack at the right distance\n\t\tconst offsetAmount = isLayered ? offset * index : offset;\n\n\t\tconst key = isValidElement( child ) ? child.key : index;\n\n\t\treturn (\n\t\t\t<ZStackChildView\n\t\t\t\toffsetAmount={ offsetAmount }\n\t\t\t\tzIndex={ zIndex }\n\t\t\t\tkey={ key }\n\t\t\t>\n\t\t\t\t{ child }\n\t\t\t</ZStackChildView>\n\t\t);\n\t} );\n\n\treturn (\n\t\t<ZStackView\n\t\t\t{ ...otherProps }\n\t\t\tclassName={ className }\n\t\t\tisLayered={ isLayered }\n\t\t\tref={ forwardedRef }\n\t\t>\n\t\t\t{ clonedChildren }\n\t\t</ZStackView>\n\t);\n}\n\n/**\n * `ZStack` allows you to stack things along the Z-axis.\n *\n * ```jsx\n * import { __experimentalZStack as ZStack } from '@wordpress/components';\n *\n * function Example() {\n *   return (\n *     <ZStack offset={ 20 } isLayered>\n *       <ExampleImage />\n *       <ExampleImage />\n *       <ExampleImage />\n *     </ZStack>\n *   );\n * }\n * ```\n */\nexport const ZStack = contextConnect( UnconnectedZStack, 'ZStack' );\n\nexport default ZStack;\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,cAAc,EAAEC,gBAAgB,QAAQ,YAAY;AAC7D,SAASC,UAAU,EAAEC,eAAe,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIvD,SAASC,iBAAiBA,CACzBC,KAAoD,EACpDC,YAAiC,EAChC;EACD,MAAM;IACLC,QAAQ;IACRC,SAAS;IACTC,SAAS,GAAG,IAAI;IAChBC,UAAU,GAAG,KAAK;IAClBC,MAAM,GAAG,CAAC;IACV,GAAGC;EACJ,CAAC,GAAGb,gBAAgB,CAAEM,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMQ,aAAa,GAAGhB,gBAAgB,CAAEU,QAAS,CAAC;EAClD,MAAMO,iBAAiB,GAAGD,aAAa,CAACE,MAAM,GAAG,CAAC;EAElD,MAAMC,cAAc,GAAGH,aAAa,CAACI,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,MAAM,GAAGV,UAAU,GAAGI,iBAAiB,GAAGK,KAAK,GAAGA,KAAK;IAC7D;IACA;IACA,MAAME,YAAY,GAAGZ,SAAS,GAAGE,MAAM,GAAGQ,KAAK,GAAGR,MAAM;IAExD,MAAMW,GAAG,GAAG1B,cAAc,CAAEsB,KAAM,CAAC,GAAGA,KAAK,CAACI,GAAG,GAAGH,KAAK;IAEvD,oBACChB,IAAA,CAACF,eAAe;MACfoB,YAAY,EAAGA,YAAc;MAC7BD,MAAM,EAAGA,MAAQ;MAAAb,QAAA,EAGfW;IAAK,GAFDI,GAGU,CAAC;EAEpB,CAAE,CAAC;EAEH,oBACCnB,IAAA,CAACH,UAAU;IAAA,GACLY,UAAU;IACfJ,SAAS,EAAGA,SAAW;IACvBC,SAAS,EAAGA,SAAW;IACvBc,GAAG,EAAGjB,YAAc;IAAAC,QAAA,EAElBS;EAAc,CACL,CAAC;AAEf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMQ,MAAM,GAAG1B,cAAc,CAAEM,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeoB,MAAM","ignoreList":[]}

package/build-style/style-rtl.css

@@ -3084,6 +3084,17 @@ body.lockscroll {
   outline: 2px solid transparent;
 }
 
+.components-tab-panel__tab-content:focus {
+  box-shadow: none;
+  outline: none;
+}
+.components-tab-panel__tab-content:focus-visible {
+  border-radius: 2px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  outline-offset: 0;
+}
+
 .components-text-control__input,
 .components-text-control__input[type=text],
 .components-text-control__input[type=tel],

package/build-style/style.css

@@ -3096,6 +3096,17 @@ body.lockscroll {
   outline: 2px solid transparent;
 }
 
+.components-tab-panel__tab-content:focus {
+  box-shadow: none;
+  outline: none;
+}
+.components-tab-panel__tab-content:focus-visible {
+  border-radius: 2px;
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline: 2px solid transparent;
+  outline-offset: 0;
+}
+
 .components-text-control__input,
 .components-text-control__input[type=text],
 .components-text-control__input[type=tel],

package/build-types/animate/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/animate/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAO/B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,wHAAsB,CAAC;AAS3C,eAAO,MAAM,aAAa,wHAAsB,CAAC;AAUjD,eAAO,MAAM,cAAc,wHAAsB,CAAC;AAUlD,eAAO,MAAM,gBAAgB,wHAAsB,CAAC;AAUpD,eAAO,MAAM,iBAAiB,wHAAsB,CAAC;AAWrD,eAAO,MAAM,OAAO,wHAAsB,CAAC;AAU3C,eAAO,MAAM,OAAO,wHAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/animate/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAO/B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,wHAAsB,CAAC;AAc3C,eAAO,MAAM,aAAa,wHAAsB,CAAC;AAUjD,eAAO,MAAM,cAAc,wHAAsB,CAAC;AAUlD,eAAO,MAAM,gBAAgB,wHAAsB,CAAC;AAUpD,eAAO,MAAM,iBAAiB,wHAAsB,CAAC;AAWrD,eAAO,MAAM,OAAO,wHAAsB,CAAC;AAU3C,eAAO,MAAM,OAAO,wHAAsB,CAAC"}

package/build-types/autocomplete/autocompleter-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocompleter-ui.d.ts","sourceRoot":"","sources":["../../src/autocomplete/autocompleter-ui.tsx"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EAAE,oBAAoB,EAAe,WAAW,EAAE,MAAM,SAAS,CAAC;AAE9E,wBAAgB,kBAAkB,CAAE,aAAa,EAAE,WAAW,8HAgB1D,oBAAoB,wCAwIvB"}
+{"version":3,"file":"autocompleter-ui.d.ts","sourceRoot":"","sources":["../../src/autocomplete/autocompleter-ui.tsx"],"names":[],"mappings":";AA2BA,OAAO,KAAK,EAAE,oBAAoB,EAAe,WAAW,EAAE,MAAM,SAAS,CAAC;AAkD9E,wBAAgB,kBAAkB,CAAE,aAAa,EAAE,WAAW,8HAe1D,oBAAoB,wCAuHvB"}

package/build-types/base-control/hooks.d.ts

@@ -9,8 +9,8 @@ import type { BaseControlProps } from './types';
  */
 export declare function useBaseControlProps(props: Omit<BaseControlProps, 'children'>): {
     baseControlProps: {
-        className?: string | undefined;
         label?: import("react").ReactNode;
+        className?: string | undefined;
         hideLabelFromVision?: boolean | undefined;
         __nextHasNoMarginBottom?: boolean | undefined;
         id: string;

package/build-types/border-box-control/border-box-control/component.d.ts

@@ -53,7 +53,7 @@ export declare const BorderBoxControl: import("../../context").WordPressComponen
     disableCustomColors?: boolean | undefined;
 } & LabelProps & Pick<BorderControlProps, "size" | "enableStyle"> & {
     onChange: (value: import("../types").AnyBorder) => void;
-    popoverPlacement?: (import("@floating-ui/utils").Placement | "overlay") | undefined;
+    popoverPlacement?: ("overlay" | import("@floating-ui/utils").Placement) | undefined;
     popoverOffset?: number | undefined;
     value: import("../types").AnyBorder;
     __next40pxDefaultSize?: boolean | undefined;