@wordpress/components 27.4.0 → 27.6.0

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","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 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 '../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 = classnames(\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 ( ! event.metaKey && reFirstCharacterOfUnits.test( event.key ) )\n\t\t\t\trefInputSuffix.current?.focus();\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","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":[]}

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

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -39,7 +39,7 @@ function UnitSelectControl({
       data
     });
   };
-  const classes = classnames('components-unit-control__select', className);
+  const classes = clsx('components-unit-control__select', className);
   return createElement(UnitSelect, {
     ref: ref,
     className: classes,

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","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 classnames from 'classnames';\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 = classnames( '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,UAAU,MAAM,YAAY;AAGnC;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,UAAU,CAAE,iCAAiC,EAAEO,SAAU,CAAC;EAE1E,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","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":[]}

package/build-module/utils/colors.js

@@ -28,7 +28,9 @@ export function rgba(hexValue = '', alpha = 1) {
  * @return {HTMLDivElement | undefined} The HTML element for color computation.
  */
 function getColorComputationNode() {
-  if (typeof document === 'undefined') return;
+  if (typeof document === 'undefined') {
+    return;
+  }
   if (!colorComputationNode) {
     // Create a temporary element for style computation.
     const el = document.createElement('div');
@@ -46,7 +48,9 @@ function getColorComputationNode() {
  * @return {boolean} Whether the value is a valid color.
  */
 function isColor(value) {
-  if (typeof value !== 'string') return false;
+  if (typeof value !== 'string') {
+    return false;
+  }
   const test = colord(value);
   return test.isValid();
 }
@@ -60,14 +64,24 @@ function isColor(value) {
  * @return {string} The computed background color.
  */
 function _getComputedBackgroundColor(backgroundColor) {
-  if (typeof backgroundColor !== 'string') return '';
-  if (isColor(backgroundColor)) return backgroundColor;
-  if (!backgroundColor.includes('var(')) return '';
-  if (typeof document === 'undefined') return '';
+  if (typeof backgroundColor !== 'string') {
+    return '';
+  }
+  if (isColor(backgroundColor)) {
+    return backgroundColor;
+  }
+  if (!backgroundColor.includes('var(')) {
+    return '';
+  }
+  if (typeof document === 'undefined') {
+    return '';
+  }
 
   // Attempts to gracefully handle CSS variables color values.
   const el = getColorComputationNode();
-  if (!el) return '';
+  if (!el) {
+    return '';
+  }
   el.style.background = backgroundColor;
   // Grab the style.
   const computedColor = window?.getComputedStyle(el).background;

package/build-module/utils/colors.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoize","colord","extend","namesPlugin","colorComputationNode","rgba","hexValue","alpha","toRgbString","getColorComputationNode","document","el","createElement","setAttribute","body","appendChild","isColor","value","test","isValid","_getComputedBackgroundColor","backgroundColor","includes","style","background","computedColor","window","getComputedStyle","getComputedBackgroundColor","getOptimalTextColor","isLight","getOptimalTextShade","result"],"sources":["@wordpress/components/src/utils/colors.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/** @type {HTMLDivElement} */\nlet colorComputationNode;\n\nextend( [ namesPlugin ] );\n\n/**\n * Generating a CSS compliant rgba() color value.\n *\n * @param {string} hexValue The hex value to convert to rgba().\n * @param {number} alpha    The alpha value for opacity.\n * @return {string} The converted rgba() color value.\n *\n * @example\n * rgba( '#000000', 0.5 )\n * // rgba(0, 0, 0, 0.5)\n */\nexport function rgba( hexValue = '', alpha = 1 ) {\n\treturn colord( hexValue ).alpha( alpha ).toRgbString();\n}\n\n/**\n * @return {HTMLDivElement | undefined} The HTML element for color computation.\n */\nfunction getColorComputationNode() {\n\tif ( typeof document === 'undefined' ) return;\n\n\tif ( ! colorComputationNode ) {\n\t\t// Create a temporary element for style computation.\n\t\tconst el = document.createElement( 'div' );\n\t\tel.setAttribute( 'data-g2-color-computation-node', '' );\n\t\t// Inject for window computed style.\n\t\tdocument.body.appendChild( el );\n\t\tcolorComputationNode = el;\n\t}\n\n\treturn colorComputationNode;\n}\n\n/**\n * @param {string | unknown} value\n *\n * @return {boolean} Whether the value is a valid color.\n */\nfunction isColor( value ) {\n\tif ( typeof value !== 'string' ) return false;\n\tconst test = colord( value );\n\n\treturn test.isValid();\n}\n\n/**\n * Retrieves the computed background color. This is useful for getting the\n * value of a CSS variable color.\n *\n * @param {string | unknown} backgroundColor The background color to compute.\n *\n * @return {string} The computed background color.\n */\nfunction _getComputedBackgroundColor( backgroundColor ) {\n\tif ( typeof backgroundColor !== 'string' ) return '';\n\n\tif ( isColor( backgroundColor ) ) return backgroundColor;\n\n\tif ( ! backgroundColor.includes( 'var(' ) ) return '';\n\tif ( typeof document === 'undefined' ) return '';\n\n\t// Attempts to gracefully handle CSS variables color values.\n\tconst el = getColorComputationNode();\n\tif ( ! el ) return '';\n\n\tel.style.background = backgroundColor;\n\t// Grab the style.\n\tconst computedColor = window?.getComputedStyle( el ).background;\n\t// Reset.\n\tel.style.background = '';\n\n\treturn computedColor || '';\n}\n\nconst getComputedBackgroundColor = memoize( _getComputedBackgroundColor );\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text color (black or white).\n */\nexport function getOptimalTextColor( backgroundColor ) {\n\tconst background = getComputedBackgroundColor( backgroundColor );\n\n\treturn colord( background ).isLight() ? '#000000' : '#ffffff';\n}\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text shade (dark or light).\n */\nexport function getOptimalTextShade( backgroundColor ) {\n\tconst result = getOptimalTextColor( backgroundColor );\n\n\treturn result === '#000000' ? 'dark' : 'light';\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAO,MAAM,QAAQ;AAC5B,SAASC,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;;AAE9C;AACA,IAAIC,oBAAoB;AAExBF,MAAM,CAAE,CAAEC,WAAW,CAAG,CAAC;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,IAAIA,CAAEC,QAAQ,GAAG,EAAE,EAAEC,KAAK,GAAG,CAAC,EAAG;EAChD,OAAON,MAAM,CAAEK,QAAS,CAAC,CAACC,KAAK,CAAEA,KAAM,CAAC,CAACC,WAAW,CAAC,CAAC;AACvD;;AAEA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAA,EAAG;EAClC,IAAK,OAAOC,QAAQ,KAAK,WAAW,EAAG;EAEvC,IAAK,CAAEN,oBAAoB,EAAG;IAC7B;IACA,MAAMO,EAAE,GAAGD,QAAQ,CAACE,aAAa,CAAE,KAAM,CAAC;IAC1CD,EAAE,CAACE,YAAY,CAAE,gCAAgC,EAAE,EAAG,CAAC;IACvD;IACAH,QAAQ,CAACI,IAAI,CAACC,WAAW,CAAEJ,EAAG,CAAC;IAC/BP,oBAAoB,GAAGO,EAAE;EAC1B;EAEA,OAAOP,oBAAoB;AAC5B;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASY,OAAOA,CAAEC,KAAK,EAAG;EACzB,IAAK,OAAOA,KAAK,KAAK,QAAQ,EAAG,OAAO,KAAK;EAC7C,MAAMC,IAAI,GAAGjB,MAAM,CAAEgB,KAAM,CAAC;EAE5B,OAAOC,IAAI,CAACC,OAAO,CAAC,CAAC;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,2BAA2BA,CAAEC,eAAe,EAAG;EACvD,IAAK,OAAOA,eAAe,KAAK,QAAQ,EAAG,OAAO,EAAE;EAEpD,IAAKL,OAAO,CAAEK,eAAgB,CAAC,EAAG,OAAOA,eAAe;EAExD,IAAK,CAAEA,eAAe,CAACC,QAAQ,CAAE,MAAO,CAAC,EAAG,OAAO,EAAE;EACrD,IAAK,OAAOZ,QAAQ,KAAK,WAAW,EAAG,OAAO,EAAE;;EAEhD;EACA,MAAMC,EAAE,GAAGF,uBAAuB,CAAC,CAAC;EACpC,IAAK,CAAEE,EAAE,EAAG,OAAO,EAAE;EAErBA,EAAE,CAACY,KAAK,CAACC,UAAU,GAAGH,eAAe;EACrC;EACA,MAAMI,aAAa,GAAGC,MAAM,EAAEC,gBAAgB,CAAEhB,EAAG,CAAC,CAACa,UAAU;EAC/D;EACAb,EAAE,CAACY,KAAK,CAACC,UAAU,GAAG,EAAE;EAExB,OAAOC,aAAa,IAAI,EAAE;AAC3B;AAEA,MAAMG,0BAA0B,GAAG5B,OAAO,CAAEoB,2BAA4B,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASS,mBAAmBA,CAAER,eAAe,EAAG;EACtD,MAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAgB,CAAC;EAEhE,OAAOpB,MAAM,CAAEuB,UAAW,CAAC,CAACM,OAAO,CAAC,CAAC,GAAG,SAAS,GAAG,SAAS;AAC9D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAAEV,eAAe,EAAG;EACtD,MAAMW,MAAM,GAAGH,mBAAmB,CAAER,eAAgB,CAAC;EAErD,OAAOW,MAAM,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO;AAC/C","ignoreList":[]}
+{"version":3,"names":["memoize","colord","extend","namesPlugin","colorComputationNode","rgba","hexValue","alpha","toRgbString","getColorComputationNode","document","el","createElement","setAttribute","body","appendChild","isColor","value","test","isValid","_getComputedBackgroundColor","backgroundColor","includes","style","background","computedColor","window","getComputedStyle","getComputedBackgroundColor","getOptimalTextColor","isLight","getOptimalTextShade","result"],"sources":["@wordpress/components/src/utils/colors.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport memoize from 'memize';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/** @type {HTMLDivElement} */\nlet colorComputationNode;\n\nextend( [ namesPlugin ] );\n\n/**\n * Generating a CSS compliant rgba() color value.\n *\n * @param {string} hexValue The hex value to convert to rgba().\n * @param {number} alpha    The alpha value for opacity.\n * @return {string} The converted rgba() color value.\n *\n * @example\n * rgba( '#000000', 0.5 )\n * // rgba(0, 0, 0, 0.5)\n */\nexport function rgba( hexValue = '', alpha = 1 ) {\n\treturn colord( hexValue ).alpha( alpha ).toRgbString();\n}\n\n/**\n * @return {HTMLDivElement | undefined} The HTML element for color computation.\n */\nfunction getColorComputationNode() {\n\tif ( typeof document === 'undefined' ) {\n\t\treturn;\n\t}\n\n\tif ( ! colorComputationNode ) {\n\t\t// Create a temporary element for style computation.\n\t\tconst el = document.createElement( 'div' );\n\t\tel.setAttribute( 'data-g2-color-computation-node', '' );\n\t\t// Inject for window computed style.\n\t\tdocument.body.appendChild( el );\n\t\tcolorComputationNode = el;\n\t}\n\n\treturn colorComputationNode;\n}\n\n/**\n * @param {string | unknown} value\n *\n * @return {boolean} Whether the value is a valid color.\n */\nfunction isColor( value ) {\n\tif ( typeof value !== 'string' ) {\n\t\treturn false;\n\t}\n\tconst test = colord( value );\n\n\treturn test.isValid();\n}\n\n/**\n * Retrieves the computed background color. This is useful for getting the\n * value of a CSS variable color.\n *\n * @param {string | unknown} backgroundColor The background color to compute.\n *\n * @return {string} The computed background color.\n */\nfunction _getComputedBackgroundColor( backgroundColor ) {\n\tif ( typeof backgroundColor !== 'string' ) {\n\t\treturn '';\n\t}\n\n\tif ( isColor( backgroundColor ) ) {\n\t\treturn backgroundColor;\n\t}\n\n\tif ( ! backgroundColor.includes( 'var(' ) ) {\n\t\treturn '';\n\t}\n\tif ( typeof document === 'undefined' ) {\n\t\treturn '';\n\t}\n\n\t// Attempts to gracefully handle CSS variables color values.\n\tconst el = getColorComputationNode();\n\tif ( ! el ) {\n\t\treturn '';\n\t}\n\n\tel.style.background = backgroundColor;\n\t// Grab the style.\n\tconst computedColor = window?.getComputedStyle( el ).background;\n\t// Reset.\n\tel.style.background = '';\n\n\treturn computedColor || '';\n}\n\nconst getComputedBackgroundColor = memoize( _getComputedBackgroundColor );\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text color (black or white).\n */\nexport function getOptimalTextColor( backgroundColor ) {\n\tconst background = getComputedBackgroundColor( backgroundColor );\n\n\treturn colord( background ).isLight() ? '#000000' : '#ffffff';\n}\n\n/**\n * Get the text shade optimized for readability, based on a background color.\n *\n * @param {string | unknown} backgroundColor The background color.\n *\n * @return {string} The optimized text shade (dark or light).\n */\nexport function getOptimalTextShade( backgroundColor ) {\n\tconst result = getOptimalTextColor( backgroundColor );\n\n\treturn result === '#000000' ? 'dark' : 'light';\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,OAAO,MAAM,QAAQ;AAC5B,SAASC,MAAM,EAAEC,MAAM,QAAQ,QAAQ;AACvC,OAAOC,WAAW,MAAM,sBAAsB;;AAE9C;AACA,IAAIC,oBAAoB;AAExBF,MAAM,CAAE,CAAEC,WAAW,CAAG,CAAC;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASE,IAAIA,CAAEC,QAAQ,GAAG,EAAE,EAAEC,KAAK,GAAG,CAAC,EAAG;EAChD,OAAON,MAAM,CAAEK,QAAS,CAAC,CAACC,KAAK,CAAEA,KAAM,CAAC,CAACC,WAAW,CAAC,CAAC;AACvD;;AAEA;AACA;AACA;AACA,SAASC,uBAAuBA,CAAA,EAAG;EAClC,IAAK,OAAOC,QAAQ,KAAK,WAAW,EAAG;IACtC;EACD;EAEA,IAAK,CAAEN,oBAAoB,EAAG;IAC7B;IACA,MAAMO,EAAE,GAAGD,QAAQ,CAACE,aAAa,CAAE,KAAM,CAAC;IAC1CD,EAAE,CAACE,YAAY,CAAE,gCAAgC,EAAE,EAAG,CAAC;IACvD;IACAH,QAAQ,CAACI,IAAI,CAACC,WAAW,CAAEJ,EAAG,CAAC;IAC/BP,oBAAoB,GAAGO,EAAE;EAC1B;EAEA,OAAOP,oBAAoB;AAC5B;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASY,OAAOA,CAAEC,KAAK,EAAG;EACzB,IAAK,OAAOA,KAAK,KAAK,QAAQ,EAAG;IAChC,OAAO,KAAK;EACb;EACA,MAAMC,IAAI,GAAGjB,MAAM,CAAEgB,KAAM,CAAC;EAE5B,OAAOC,IAAI,CAACC,OAAO,CAAC,CAAC;AACtB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,2BAA2BA,CAAEC,eAAe,EAAG;EACvD,IAAK,OAAOA,eAAe,KAAK,QAAQ,EAAG;IAC1C,OAAO,EAAE;EACV;EAEA,IAAKL,OAAO,CAAEK,eAAgB,CAAC,EAAG;IACjC,OAAOA,eAAe;EACvB;EAEA,IAAK,CAAEA,eAAe,CAACC,QAAQ,CAAE,MAAO,CAAC,EAAG;IAC3C,OAAO,EAAE;EACV;EACA,IAAK,OAAOZ,QAAQ,KAAK,WAAW,EAAG;IACtC,OAAO,EAAE;EACV;;EAEA;EACA,MAAMC,EAAE,GAAGF,uBAAuB,CAAC,CAAC;EACpC,IAAK,CAAEE,EAAE,EAAG;IACX,OAAO,EAAE;EACV;EAEAA,EAAE,CAACY,KAAK,CAACC,UAAU,GAAGH,eAAe;EACrC;EACA,MAAMI,aAAa,GAAGC,MAAM,EAAEC,gBAAgB,CAAEhB,EAAG,CAAC,CAACa,UAAU;EAC/D;EACAb,EAAE,CAACY,KAAK,CAACC,UAAU,GAAG,EAAE;EAExB,OAAOC,aAAa,IAAI,EAAE;AAC3B;AAEA,MAAMG,0BAA0B,GAAG5B,OAAO,CAAEoB,2BAA4B,CAAC;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASS,mBAAmBA,CAAER,eAAe,EAAG;EACtD,MAAMG,UAAU,GAAGI,0BAA0B,CAAEP,eAAgB,CAAC;EAEhE,OAAOpB,MAAM,CAAEuB,UAAW,CAAC,CAACM,OAAO,CAAC,CAAC,GAAG,SAAS,GAAG,SAAS;AAC9D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,mBAAmBA,CAAEV,eAAe,EAAG;EACtD,MAAMW,MAAM,GAAGH,mBAAmB,CAAER,eAAgB,CAAC;EAErD,OAAOW,MAAM,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO;AAC/C","ignoreList":[]}

package/build-module/utils/font-size.js

@@ -22,7 +22,9 @@ export function getFontSize(size = BASE_FONT_SIZE) {
   }
   if (typeof size !== 'number') {
     const parsed = parseFloat(size);
-    if (Number.isNaN(parsed)) return size;
+    if (Number.isNaN(parsed)) {
+      return size;
+    }
     size = parsed;
   }
   const ratio = `(${size} / ${BASE_FONT_SIZE})`;

package/build-module/utils/font-size.js.map

@@ -1 +1 @@
-{"version":3,"names":["CONFIG","BASE_FONT_SIZE","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","fontSize","getHeadingFontSize","includes","headingSize"],"sources":["@wordpress/components/src/utils/font-size.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactText } from 'react';\n\n/**\n * Internal dependencies\n */\nimport CONFIG from './config-values';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport const BASE_FONT_SIZE = 13;\n\nexport const PRESET_FONT_SIZES = {\n\tbody: BASE_FONT_SIZE,\n\tcaption: 10,\n\tfootnote: 11,\n\tlargeTitle: 28,\n\tsubheadline: 12,\n\ttitle: 20,\n};\n\nexport const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [\n\tn as HeadingSize,\n\tn.toString() as HeadingSize,\n] );\n\nexport function getFontSize(\n\tsize:\n\t\t| CSSProperties[ 'fontSize' ]\n\t\t| keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE\n): string {\n\tif ( size in PRESET_FONT_SIZES ) {\n\t\treturn getFontSize(\n\t\t\tPRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ]\n\t\t);\n\t}\n\n\tif ( typeof size !== 'number' ) {\n\t\tconst parsed = parseFloat( size );\n\t\tif ( Number.isNaN( parsed ) ) return size;\n\t\tsize = parsed;\n\t}\n\n\tconst ratio = `(${ size } / ${ BASE_FONT_SIZE })`;\n\treturn `calc(${ ratio } * ${ CONFIG.fontSize })`;\n}\n\nexport function getHeadingFontSize( size: ReactText = 3 ): string {\n\tif ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {\n\t\treturn getFontSize( size );\n\t}\n\n\tconst headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`;\n\treturn CONFIG[ headingSize ];\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,iBAAiB;AAgBpC,OAAO,MAAMC,cAAc,GAAG,EAAE;AAEhC,OAAO,MAAMC,iBAAiB,GAAG;EAChCC,IAAI,EAAEF,cAAc;EACpBG,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAG,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,CAACC,OAAO,CAAIC,CAAC,IAAM,CACxEA,CAAC,EACDA,CAAC,CAACC,QAAQ,CAAC,CAAC,CACX,CAAC;AAEH,OAAO,SAASC,WAAWA,CAC1BC,IAEiC,GAAGb,cAAc,EACzC;EACT,IAAKa,IAAI,IAAIZ,iBAAiB,EAAG;IAChC,OAAOW,WAAW,CACjBX,iBAAiB,CAAEY,IAAI,CACxB,CAAC;EACF;EAEA,IAAK,OAAOA,IAAI,KAAK,QAAQ,EAAG;IAC/B,MAAMC,MAAM,GAAGC,UAAU,CAAEF,IAAK,CAAC;IACjC,IAAKG,MAAM,CAACC,KAAK,CAAEH,MAAO,CAAC,EAAG,OAAOD,IAAI;IACzCA,IAAI,GAAGC,MAAM;EACd;EAEA,MAAMI,KAAK,GAAI,IAAIL,IAAM,MAAMb,cAAgB,GAAE;EACjD,OAAQ,QAAQkB,KAAO,MAAMnB,MAAM,CAACoB,QAAU,GAAE;AACjD;AAEA,OAAO,SAASC,kBAAkBA,CAAEP,IAAe,GAAG,CAAC,EAAW;EACjE,IAAK,CAAEL,kBAAkB,CAACa,QAAQ,CAAER,IAAoB,CAAC,EAAG;IAC3D,OAAOD,WAAW,CAAEC,IAAK,CAAC;EAC3B;EAEA,MAAMS,WAAW,GAAI,YAAYT,IAAM,EAAgC;EACvE,OAAOd,MAAM,CAAEuB,WAAW,CAAE;AAC7B","ignoreList":[]}
+{"version":3,"names":["CONFIG","BASE_FONT_SIZE","PRESET_FONT_SIZES","body","caption","footnote","largeTitle","subheadline","title","HEADING_FONT_SIZES","flatMap","n","toString","getFontSize","size","parsed","parseFloat","Number","isNaN","ratio","fontSize","getHeadingFontSize","includes","headingSize"],"sources":["@wordpress/components/src/utils/font-size.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties, ReactText } from 'react';\n\n/**\n * Internal dependencies\n */\nimport CONFIG from './config-values';\n\nexport type HeadingSize =\n\t| 1\n\t| 2\n\t| 3\n\t| 4\n\t| 5\n\t| 6\n\t| '1'\n\t| '2'\n\t| '3'\n\t| '4'\n\t| '5'\n\t| '6';\n\nexport const BASE_FONT_SIZE = 13;\n\nexport const PRESET_FONT_SIZES = {\n\tbody: BASE_FONT_SIZE,\n\tcaption: 10,\n\tfootnote: 11,\n\tlargeTitle: 28,\n\tsubheadline: 12,\n\ttitle: 20,\n};\n\nexport const HEADING_FONT_SIZES = [ 1, 2, 3, 4, 5, 6 ].flatMap( ( n ) => [\n\tn as HeadingSize,\n\tn.toString() as HeadingSize,\n] );\n\nexport function getFontSize(\n\tsize:\n\t\t| CSSProperties[ 'fontSize' ]\n\t\t| keyof typeof PRESET_FONT_SIZES = BASE_FONT_SIZE\n): string {\n\tif ( size in PRESET_FONT_SIZES ) {\n\t\treturn getFontSize(\n\t\t\tPRESET_FONT_SIZES[ size as keyof typeof PRESET_FONT_SIZES ]\n\t\t);\n\t}\n\n\tif ( typeof size !== 'number' ) {\n\t\tconst parsed = parseFloat( size );\n\t\tif ( Number.isNaN( parsed ) ) {\n\t\t\treturn size;\n\t\t}\n\t\tsize = parsed;\n\t}\n\n\tconst ratio = `(${ size } / ${ BASE_FONT_SIZE })`;\n\treturn `calc(${ ratio } * ${ CONFIG.fontSize })`;\n}\n\nexport function getHeadingFontSize( size: ReactText = 3 ): string {\n\tif ( ! HEADING_FONT_SIZES.includes( size as HeadingSize ) ) {\n\t\treturn getFontSize( size );\n\t}\n\n\tconst headingSize = `fontSizeH${ size }` as `fontSizeH${ HeadingSize }`;\n\treturn CONFIG[ headingSize ];\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,iBAAiB;AAgBpC,OAAO,MAAMC,cAAc,GAAG,EAAE;AAEhC,OAAO,MAAMC,iBAAiB,GAAG;EAChCC,IAAI,EAAEF,cAAc;EACpBG,OAAO,EAAE,EAAE;EACXC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,WAAW,EAAE,EAAE;EACfC,KAAK,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAG,CAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAE,CAACC,OAAO,CAAIC,CAAC,IAAM,CACxEA,CAAC,EACDA,CAAC,CAACC,QAAQ,CAAC,CAAC,CACX,CAAC;AAEH,OAAO,SAASC,WAAWA,CAC1BC,IAEiC,GAAGb,cAAc,EACzC;EACT,IAAKa,IAAI,IAAIZ,iBAAiB,EAAG;IAChC,OAAOW,WAAW,CACjBX,iBAAiB,CAAEY,IAAI,CACxB,CAAC;EACF;EAEA,IAAK,OAAOA,IAAI,KAAK,QAAQ,EAAG;IAC/B,MAAMC,MAAM,GAAGC,UAAU,CAAEF,IAAK,CAAC;IACjC,IAAKG,MAAM,CAACC,KAAK,CAAEH,MAAO,CAAC,EAAG;MAC7B,OAAOD,IAAI;IACZ;IACAA,IAAI,GAAGC,MAAM;EACd;EAEA,MAAMI,KAAK,GAAI,IAAIL,IAAM,MAAMb,cAAgB,GAAE;EACjD,OAAQ,QAAQkB,KAAO,MAAMnB,MAAM,CAACoB,QAAU,GAAE;AACjD;AAEA,OAAO,SAASC,kBAAkBA,CAAEP,IAAe,GAAG,CAAC,EAAW;EACjE,IAAK,CAAEL,kBAAkB,CAACa,QAAQ,CAAER,IAAoB,CAAC,EAAG;IAC3D,OAAOD,WAAW,CAAEC,IAAK,CAAC;EAC3B;EAEA,MAAMS,WAAW,GAAI,YAAYT,IAAM,EAAgC;EACvE,OAAOd,MAAM,CAAEuB,WAAW,CAAE;AAC7B","ignoreList":[]}

package/build-module/utils/get-valid-children.js

@@ -15,7 +15,9 @@ import { Children, isValidElement } from '@wordpress/element';
  * @return An array of available children.
  */
 export function getValidChildren(children) {
-  if (typeof children === 'string') return [children];
+  if (typeof children === 'string') {
+    return [children];
+  }
   return Children.toArray(children).filter(child => isValidElement(child));
 }
 //# sourceMappingURL=get-valid-children.js.map

package/build-module/utils/get-valid-children.js.map

@@ -1 +1 @@
-{"version":3,"names":["Children","isValidElement","getValidChildren","children","toArray","filter","child"],"sources":["@wordpress/components/src/utils/get-valid-children.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Children, isValidElement } from '@wordpress/element';\n\n/**\n * Gets a collection of available children elements from a React component's children prop.\n *\n * @param children\n *\n * @return An array of available children.\n */\nexport function getValidChildren(\n\tchildren: ReactNode\n): Array< ReactChild | ReactFragment | ReactPortal > {\n\tif ( typeof children === 'string' ) return [ children ];\n\n\treturn Children.toArray( children ).filter( ( child ) =>\n\t\tisValidElement( child )\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,cAAc,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC/BC,QAAmB,EACiC;EACpD,IAAK,OAAOA,QAAQ,KAAK,QAAQ,EAAG,OAAO,CAAEA,QAAQ,CAAE;EAEvD,OAAOH,QAAQ,CAACI,OAAO,CAAED,QAAS,CAAC,CAACE,MAAM,CAAIC,KAAK,IAClDL,cAAc,CAAEK,KAAM,CACvB,CAAC;AACF","ignoreList":[]}
+{"version":3,"names":["Children","isValidElement","getValidChildren","children","toArray","filter","child"],"sources":["@wordpress/components/src/utils/get-valid-children.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode, ReactChild, ReactFragment, ReactPortal } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Children, isValidElement } from '@wordpress/element';\n\n/**\n * Gets a collection of available children elements from a React component's children prop.\n *\n * @param children\n *\n * @return An array of available children.\n */\nexport function getValidChildren(\n\tchildren: ReactNode\n): Array< ReactChild | ReactFragment | ReactPortal > {\n\tif ( typeof children === 'string' ) {\n\t\treturn [ children ];\n\t}\n\n\treturn Children.toArray( children ).filter( ( child ) =>\n\t\tisValidElement( child )\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAQ,EAAEC,cAAc,QAAQ,oBAAoB;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC/BC,QAAmB,EACiC;EACpD,IAAK,OAAOA,QAAQ,KAAK,QAAQ,EAAG;IACnC,OAAO,CAAEA,QAAQ,CAAE;EACpB;EAEA,OAAOH,QAAQ,CAACI,OAAO,CAAED,QAAS,CAAC,CAACE,MAAM,CAAIC,KAAK,IAClDL,cAAc,CAAEK,KAAM,CACvB,CAAC;AACF","ignoreList":[]}

package/build-module/utils/input/base.js

@@ -6,9 +6,8 @@ import { css } from '@emotion/react';
 /**
  * Internal dependencies
  */
-import { reduceMotion } from '../reduce-motion';
 import { COLORS } from '../colors-values';
 import { CONFIG } from '../';
-export const inputStyleNeutral = /*#__PURE__*/css("box-shadow:0 0 0 transparent;transition:box-shadow 0.1s linear;border-radius:", CONFIG.radiusBlockUi, ";border:", CONFIG.borderWidth, " solid ", COLORS.ui.border, ";", reduceMotion('transition'), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:inputStyleNeutral;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFZb0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9pbnB1dC9iYXNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyByZWR1Y2VNb3Rpb24gfSBmcm9tICcuLi9yZWR1Y2UtbW90aW9uJztcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL2NvbG9ycy12YWx1ZXMnO1xuaW1wb3J0IHsgQ09ORklHIH0gZnJvbSAnLi4vJztcblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGVOZXV0cmFsID0gY3NzYFxuXHRib3gtc2hhZG93OiAwIDAgMCB0cmFuc3BhcmVudDtcblx0dHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjFzIGxpbmVhcjtcblx0Ym9yZGVyLXJhZGl1czogJHsgQ09ORklHLnJhZGl1c0Jsb2NrVWkgfTtcblx0Ym9yZGVyOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyIH07XG5cdCR7IHJlZHVjZU1vdGlvbiggJ3RyYW5zaXRpb24nICkgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGlucHV0U3R5bGVGb2N1cyA9IGNzc2Bcblx0Ym9yZGVyLWNvbG9yOiAkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cdGJveC1zaGFkb3c6IDAgMCAwXG5cdFx0Y2FsYyggJHsgQ09ORklHLmJvcmRlcldpZHRoRm9jdXMgfSAtICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9IClcblx0XHQkeyBDT0xPUlMudGhlbWUuYWNjZW50IH07XG5cblx0Ly8gV2luZG93cyBIaWdoIENvbnRyYXN0IG1vZGUgd2lsbCBzaG93IHRoaXMgb3V0bGluZSwgYnV0IG5vdCB0aGUgYm94LXNoYWRvdy5cblx0b3V0bGluZTogMnB4IHNvbGlkIHRyYW5zcGFyZW50O1xuYDtcbiJdfQ== */");
-export const inputStyleFocus = /*#__PURE__*/css("border-color:", COLORS.theme.accent, ";box-shadow:0 0 0 calc( ", CONFIG.borderWidthFocus, " - ", CONFIG.borderWidth, " ) ", COLORS.theme.accent, ";outline:2px solid transparent;" + (process.env.NODE_ENV === "production" ? "" : ";label:inputStyleFocus;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQmtDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgcmVkdWNlTW90aW9uIH0gZnJvbSAnLi4vcmVkdWNlLW1vdGlvbic7XG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi9jb2xvcnMtdmFsdWVzJztcbmltcG9ydCB7IENPTkZJRyB9IGZyb20gJy4uLyc7XG5cbmV4cG9ydCBjb25zdCBpbnB1dFN0eWxlTmV1dHJhbCA9IGNzc2Bcblx0Ym94LXNoYWRvdzogMCAwIDAgdHJhbnNwYXJlbnQ7XG5cdHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4xcyBsaW5lYXI7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNCbG9ja1VpIH07XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXHQkeyByZWR1Y2VNb3Rpb24oICd0cmFuc2l0aW9uJyApIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBpbnB1dFN0eWxlRm9jdXMgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRib3gtc2hhZG93OiAwIDAgMFxuXHRcdGNhbGMoICR7IENPTkZJRy5ib3JkZXJXaWR0aEZvY3VzIH0gLSAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSApXG5cdFx0JHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXG5cdC8vIFdpbmRvd3MgSGlnaCBDb250cmFzdCBtb2RlIHdpbGwgc2hvdyB0aGlzIG91dGxpbmUsIGJ1dCBub3QgdGhlIGJveC1zaGFkb3cuXG5cdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcbmA7XG4iXX0= */");
+export const inputStyleNeutral = /*#__PURE__*/css("box-shadow:0 0 0 transparent;border-radius:", CONFIG.radiusBlockUi, ";border:", CONFIG.borderWidth, " solid ", COLORS.ui.border, ";@media not ( prefers-reduced-motion ){transition:box-shadow 0.1s linear;}" + (process.env.NODE_ENV === "production" ? "" : ";label:inputStyleNeutral;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFXb0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91dGlscy9pbnB1dC9iYXNlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi9jb2xvcnMtdmFsdWVzJztcbmltcG9ydCB7IENPTkZJRyB9IGZyb20gJy4uLyc7XG5cbmV4cG9ydCBjb25zdCBpbnB1dFN0eWxlTmV1dHJhbCA9IGNzc2Bcblx0Ym94LXNoYWRvdzogMCAwIDAgdHJhbnNwYXJlbnQ7XG5cdGJvcmRlci1yYWRpdXM6ICR7IENPTkZJRy5yYWRpdXNCbG9ja1VpIH07XG5cdGJvcmRlcjogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlciB9O1xuXG5cdEBtZWRpYSBub3QgKCBwcmVmZXJzLXJlZHVjZWQtbW90aW9uICkge1xuXHRcdHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4xcyBsaW5lYXI7XG5cdH1cbmA7XG5cbmV4cG9ydCBjb25zdCBpbnB1dFN0eWxlRm9jdXMgPSBjc3NgXG5cdGJvcmRlci1jb2xvcjogJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXHRib3gtc2hhZG93OiAwIDAgMFxuXHRcdGNhbGMoICR7IENPTkZJRy5ib3JkZXJXaWR0aEZvY3VzIH0gLSAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSApXG5cdFx0JHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9O1xuXG5cdC8vIFdpbmRvd3MgSGlnaCBDb250cmFzdCBtb2RlIHdpbGwgc2hvdyB0aGlzIG91dGxpbmUsIGJ1dCBub3QgdGhlIGJveC1zaGFkb3cuXG5cdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcbmA7XG4iXX0= */");
+export const inputStyleFocus = /*#__PURE__*/css("border-color:", COLORS.theme.accent, ";box-shadow:0 0 0 calc( ", CONFIG.borderWidthFocus, " - ", CONFIG.borderWidth, " ) ", COLORS.theme.accent, ";outline:2px solid transparent;" + (process.env.NODE_ENV === "production" ? "" : ";label:inputStyleFocus;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFxQmtDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdXRpbHMvaW5wdXQvYmFzZS5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSAnLi4vY29sb3JzLXZhbHVlcyc7XG5pbXBvcnQgeyBDT05GSUcgfSBmcm9tICcuLi8nO1xuXG5leHBvcnQgY29uc3QgaW5wdXRTdHlsZU5ldXRyYWwgPSBjc3NgXG5cdGJveC1zaGFkb3c6IDAgMCAwIHRyYW5zcGFyZW50O1xuXHRib3JkZXItcmFkaXVzOiAkeyBDT05GSUcucmFkaXVzQmxvY2tVaSB9O1xuXHRib3JkZXI6ICR7IENPTkZJRy5ib3JkZXJXaWR0aCB9IHNvbGlkICR7IENPTE9SUy51aS5ib3JkZXIgfTtcblxuXHRAbWVkaWEgbm90ICggcHJlZmVycy1yZWR1Y2VkLW1vdGlvbiApIHtcblx0XHR0cmFuc2l0aW9uOiBib3gtc2hhZG93IDAuMXMgbGluZWFyO1xuXHR9XG5gO1xuXG5leHBvcnQgY29uc3QgaW5wdXRTdHlsZUZvY3VzID0gY3NzYFxuXHRib3JkZXItY29sb3I6ICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblx0Ym94LXNoYWRvdzogMCAwIDBcblx0XHRjYWxjKCAkeyBDT05GSUcuYm9yZGVyV2lkdGhGb2N1cyB9IC0gJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gKVxuXHRcdCR7IENPTE9SUy50aGVtZS5hY2NlbnQgfTtcblxuXHQvLyBXaW5kb3dzIEhpZ2ggQ29udHJhc3QgbW9kZSB3aWxsIHNob3cgdGhpcyBvdXRsaW5lLCBidXQgbm90IHRoZSBib3gtc2hhZG93LlxuXHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5gO1xuIl19 */");
 //# sourceMappingURL=base.js.map

package/build-module/utils/input/base.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","reduceMotion","COLORS","CONFIG","inputStyleNeutral","radiusBlockUi","borderWidth","ui","border","process","env","NODE_ENV","inputStyleFocus","theme","accent","borderWidthFocus"],"sources":["@wordpress/components/src/utils/input/base.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { reduceMotion } from '../reduce-motion';\nimport { COLORS } from '../colors-values';\nimport { CONFIG } from '../';\n\nexport const inputStyleNeutral = css`\n\tbox-shadow: 0 0 0 transparent;\n\ttransition: box-shadow 0.1s linear;\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\t${ reduceMotion( 'transition' ) }\n`;\n\nexport const inputStyleFocus = css`\n\tborder-color: ${ COLORS.theme.accent };\n\tbox-shadow: 0 0 0\n\t\tcalc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )\n\t\t${ COLORS.theme.accent };\n\n\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\toutline: 2px solid transparent;\n`;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;;AAEpC;AACA;AACA;AACA,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,MAAM,QAAQ,KAAK;AAE5B,OAAO,MAAMC,iBAAiB,gBAAGJ,GAAG,kFAGjBG,MAAM,CAACE,aAAa,cAC3BF,MAAM,CAACG,WAAW,aAAYJ,MAAM,CAACK,EAAE,CAACC,MAAM,OACtDP,YAAY,CAAE,YAAa,CAAC,SAAAQ,OAAA,CAAAC,GAAA,CAAAC,QAAA,uDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,+5CAC/B;AAED,OAAO,MAAMC,eAAe,gBAAGZ,GAAG,kBAChBE,MAAM,CAACW,KAAK,CAACC,MAAM,8BAE1BX,MAAM,CAACY,gBAAgB,SAAQZ,MAAM,CAACG,WAAW,SACvDJ,MAAM,CAACW,KAAK,CAACC,MAAM,uCAAAL,OAAA,CAAAC,GAAA,CAAAC,QAAA,qDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,+5CAIvB","ignoreList":[]}
+{"version":3,"names":["css","COLORS","CONFIG","inputStyleNeutral","radiusBlockUi","borderWidth","ui","border","process","env","NODE_ENV","inputStyleFocus","theme","accent","borderWidthFocus"],"sources":["@wordpress/components/src/utils/input/base.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS } from '../colors-values';\nimport { CONFIG } from '../';\n\nexport const inputStyleNeutral = css`\n\tbox-shadow: 0 0 0 transparent;\n\tborder-radius: ${ CONFIG.radiusBlockUi };\n\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\n\t@media not ( prefers-reduced-motion ) {\n\t\ttransition: box-shadow 0.1s linear;\n\t}\n`;\n\nexport const inputStyleFocus = css`\n\tborder-color: ${ COLORS.theme.accent };\n\tbox-shadow: 0 0 0\n\t\tcalc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )\n\t\t${ COLORS.theme.accent };\n\n\t// Windows High Contrast mode will show this outline, but not the box-shadow.\n\toutline: 2px solid transparent;\n`;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;;AAEpC;AACA;AACA;AACA,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,MAAM,QAAQ,KAAK;AAE5B,OAAO,MAAMC,iBAAiB,gBAAGH,GAAG,gDAEjBE,MAAM,CAACE,aAAa,cAC3BF,MAAM,CAACG,WAAW,aAAYJ,MAAM,CAACK,EAAE,CAACC,MAAM,kFAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,uDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,+2CAKzD;AAED,OAAO,MAAMC,eAAe,gBAAGX,GAAG,kBAChBC,MAAM,CAACW,KAAK,CAACC,MAAM,8BAE1BX,MAAM,CAACY,gBAAgB,SAAQZ,MAAM,CAACG,WAAW,SACvDJ,MAAM,CAACW,KAAK,CAACC,MAAM,uCAAAL,OAAA,CAAAC,GAAA,CAAAC,QAAA,qDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,+2CAIvB","ignoreList":[]}

package/build-module/utils/strings.js

@@ -3,63 +3,18 @@
  */
 import removeAccents from 'remove-accents';
 import { paramCase } from 'change-case';
-const ALL_UNICODE_DASH_CHARACTERS = new RegExp(`[${[
-// - (hyphen-minus)
-'\u002d',
-// ~ (tilde)
-'\u007e',
-// ­ (soft hyphen)
-'\u00ad',
-// ֊ (armenian hyphen)
-'\u058a',
-// ־ (hebrew punctuation maqaf)
-'\u05be',
-// ᐀ (canadian syllabics hyphen)
-'\u1400',
-// ᠆ (mongolian todo soft hyphen)
-'\u1806',
-// ‐ (hyphen)
-'\u2010',
-// non-breaking hyphen)
-'\u2011',
-// ‒ (figure dash)
-'\u2012',
-// – (en dash)
-'\u2013',
-// — (em dash)
-'\u2014',
-// ― (horizontal bar)
-'\u2015',
-// ⁓ (swung dash)
-'\u2053',
-// superscript minus)
-'\u207b',
-// subscript minus)
-'\u208b',
-// − (minus sign)
-'\u2212',
-// ⸗ (double oblique hyphen)
-'\u2e17',
-// ⸺ (two-em dash)
-'\u2e3a',
-// ⸻ (three-em dash)
-'\u2e3b',
-// 〜 (wave dash)
-'\u301c',
-// 〰 (wavy dash)
-'\u3030',
-// ゠ (katakana-hiragana double hyphen)
-'\u30a0',
-// ︱ (presentation form for vertical em dash)
-'\ufe31',
-// ︲ (presentation form for vertical en dash)
-'\ufe32',
-// ﹘ (small em dash)
-'\ufe58',
-// ﹣ (small hyphen-minus)
-'\ufe63',
-// － (fullwidth hyphen-minus)
-'\uff0d'].join('')}]`, 'g');
+
+/**
+ * All unicode characters that we consider "dash-like":
+ * - `\u007e`: ~ (tilde)
+ * - `\u00ad`: ­ (soft hyphen)
+ * - `\u2053`: ⁓ (swung dash)
+ * - `\u207b`: ⁻ (superscript minus)
+ * - `\u208b`: ₋ (subscript minus)
+ * - `\u2212`: − (minus sign)
+ * - `\\p{Pd}`: any other Unicode dash character
+ */
+const ALL_UNICODE_DASH_CHARACTERS = new RegExp(/[\u007e\u00ad\u2053\u207b\u208b\u2212\p{Pd}]/gu);
 export const normalizeTextString = value => {
   return removeAccents(value).toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-');
 };

package/build-module/utils/strings.js.map

@@ -1 +1 @@
-{"version":3,"names":["removeAccents","paramCase","ALL_UNICODE_DASH_CHARACTERS","RegExp","join","normalizeTextString","value","toLocaleLowerCase","replace","kebabCase","str","_str$toString","input","toString","splitRegexp","escapeRegExp","string"],"sources":["@wordpress/components/src/utils/strings.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\nimport { paramCase } from 'change-case';\n\nconst ALL_UNICODE_DASH_CHARACTERS = new RegExp(\n\t`[${ [\n\t\t// - (hyphen-minus)\n\t\t'\\u002d',\n\t\t// ~ (tilde)\n\t\t'\\u007e',\n\t\t// ­ (soft hyphen)\n\t\t'\\u00ad',\n\t\t// ֊ (armenian hyphen)\n\t\t'\\u058a',\n\t\t// ־ (hebrew punctuation maqaf)\n\t\t'\\u05be',\n\t\t// ᐀ (canadian syllabics hyphen)\n\t\t'\\u1400',\n\t\t// ᠆ (mongolian todo soft hyphen)\n\t\t'\\u1806',\n\t\t// ‐ (hyphen)\n\t\t'\\u2010',\n\t\t// non-breaking hyphen)\n\t\t'\\u2011',\n\t\t// ‒ (figure dash)\n\t\t'\\u2012',\n\t\t// – (en dash)\n\t\t'\\u2013',\n\t\t// — (em dash)\n\t\t'\\u2014',\n\t\t// ― (horizontal bar)\n\t\t'\\u2015',\n\t\t// ⁓ (swung dash)\n\t\t'\\u2053',\n\t\t// superscript minus)\n\t\t'\\u207b',\n\t\t// subscript minus)\n\t\t'\\u208b',\n\t\t// − (minus sign)\n\t\t'\\u2212',\n\t\t// ⸗ (double oblique hyphen)\n\t\t'\\u2e17',\n\t\t// ⸺ (two-em dash)\n\t\t'\\u2e3a',\n\t\t// ⸻ (three-em dash)\n\t\t'\\u2e3b',\n\t\t// 〜 (wave dash)\n\t\t'\\u301c',\n\t\t// 〰 (wavy dash)\n\t\t'\\u3030',\n\t\t// ゠ (katakana-hiragana double hyphen)\n\t\t'\\u30a0',\n\t\t// ︱ (presentation form for vertical em dash)\n\t\t'\\ufe31',\n\t\t// ︲ (presentation form for vertical en dash)\n\t\t'\\ufe32',\n\t\t// ﹘ (small em dash)\n\t\t'\\ufe58',\n\t\t// ﹣ (small hyphen-minus)\n\t\t'\\ufe63',\n\t\t// － (fullwidth hyphen-minus)\n\t\t'\\uff0d',\n\t].join( '' ) }]`,\n\t'g'\n);\n\nexport const normalizeTextString = ( value: string ): string => {\n\treturn removeAccents( value )\n\t\t.toLocaleLowerCase()\n\t\t.replace( ALL_UNICODE_DASH_CHARACTERS, '-' );\n};\n\n/**\n * Converts any string to kebab case.\n * Backwards compatible with Lodash's `_.kebabCase()`.\n * Backwards compatible with `_wp_to_kebab_case()`.\n *\n * @see https://lodash.com/docs/4.17.15#kebabCase\n * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/\n *\n * @param str String to convert.\n * @return Kebab-cased string\n */\nexport function kebabCase( str: unknown ) {\n\tlet input = str?.toString?.() ?? '';\n\n\t// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970\n\tinput = input.replace( /['\\u2019]/, '' );\n\n\treturn paramCase( input, {\n\t\tsplitRegexp: [\n\t\t\t/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t],\n\t} );\n}\n\n/**\n * Escapes the RegExp special characters.\n *\n * @param string Input string.\n *\n * @return Regex-escaped string.\n */\nexport function escapeRegExp( string: string ): string {\n\treturn string.replace( /[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&' );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,aAAa,MAAM,gBAAgB;AAC1C,SAASC,SAAS,QAAQ,aAAa;AAEvC,MAAMC,2BAA2B,GAAG,IAAIC,MAAM,CAC5C,IAAI;AACJ;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ;AACR;AACA,QAAQ,CACR,CAACC,IAAI,CAAE,EAAG,CAAG,GAAE,EAChB,GACD,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAKC,KAAa,IAAc;EAC/D,OAAON,aAAa,CAAEM,KAAM,CAAC,CAC3BC,iBAAiB,CAAC,CAAC,CACnBC,OAAO,CAAEN,2BAA2B,EAAE,GAAI,CAAC;AAC9C,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASO,SAASA,CAAEC,GAAY,EAAG;EAAA,IAAAC,aAAA;EACzC,IAAIC,KAAK,IAAAD,aAAA,GAAGD,GAAG,EAAEG,QAAQ,GAAG,CAAC,cAAAF,aAAA,cAAAA,aAAA,GAAI,EAAE;;EAEnC;EACAC,KAAK,GAAGA,KAAK,CAACJ,OAAO,CAAE,WAAW,EAAE,EAAG,CAAC;EAExC,OAAOP,SAAS,CAAEW,KAAK,EAAE;IACxBE,WAAW,EAAE,CACZ,wDAAwD;IAAE;IAC1D,qDAAqD;IAAE;IACvD,oBAAoB;IAAE;IACtB,sBAAsB,CAAE;IAAA;EAE1B,CAAE,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAAEC,MAAc,EAAW;EACtD,OAAOA,MAAM,CAACR,OAAO,CAAE,qBAAqB,EAAE,MAAO,CAAC;AACvD","ignoreList":[]}
+{"version":3,"names":["removeAccents","paramCase","ALL_UNICODE_DASH_CHARACTERS","RegExp","normalizeTextString","value","toLocaleLowerCase","replace","kebabCase","str","_str$toString","input","toString","splitRegexp","escapeRegExp","string"],"sources":["@wordpress/components/src/utils/strings.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\nimport { paramCase } from 'change-case';\n\n/**\n * All unicode characters that we consider \"dash-like\":\n * - `\\u007e`: ~ (tilde)\n * - `\\u00ad`: ­ (soft hyphen)\n * - `\\u2053`: ⁓ (swung dash)\n * - `\\u207b`: ⁻ (superscript minus)\n * - `\\u208b`: ₋ (subscript minus)\n * - `\\u2212`: − (minus sign)\n * - `\\\\p{Pd}`: any other Unicode dash character\n */\nconst ALL_UNICODE_DASH_CHARACTERS = new RegExp(\n\t/[\\u007e\\u00ad\\u2053\\u207b\\u208b\\u2212\\p{Pd}]/gu\n);\n\nexport const normalizeTextString = ( value: string ): string => {\n\treturn removeAccents( value )\n\t\t.toLocaleLowerCase()\n\t\t.replace( ALL_UNICODE_DASH_CHARACTERS, '-' );\n};\n\n/**\n * Converts any string to kebab case.\n * Backwards compatible with Lodash's `_.kebabCase()`.\n * Backwards compatible with `_wp_to_kebab_case()`.\n *\n * @see https://lodash.com/docs/4.17.15#kebabCase\n * @see https://developer.wordpress.org/reference/functions/_wp_to_kebab_case/\n *\n * @param str String to convert.\n * @return Kebab-cased string\n */\nexport function kebabCase( str: unknown ) {\n\tlet input = str?.toString?.() ?? '';\n\n\t// See https://github.com/lodash/lodash/blob/b185fcee26b2133bd071f4aaca14b455c2ed1008/lodash.js#L4970\n\tinput = input.replace( /['\\u2019]/, '' );\n\n\treturn paramCase( input, {\n\t\tsplitRegexp: [\n\t\t\t/(?!(?:1ST|2ND|3RD|[4-9]TH)(?![a-z]))([a-z0-9])([A-Z])/g, // fooBar => foo-bar, 3Bar => 3-bar\n\t\t\t/(?!(?:1st|2nd|3rd|[4-9]th)(?![a-z]))([0-9])([a-z])/g, // 3bar => 3-bar\n\t\t\t/([A-Za-z])([0-9])/g, // Foo3 => foo-3, foo3 => foo-3\n\t\t\t/([A-Z])([A-Z][a-z])/g, // FOOBar => foo-bar\n\t\t],\n\t} );\n}\n\n/**\n * Escapes the RegExp special characters.\n *\n * @param string Input string.\n *\n * @return Regex-escaped string.\n */\nexport function escapeRegExp( string: string ): string {\n\treturn string.replace( /[\\\\^$.*+?()[\\]{}|]/g, '\\\\$&' );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,aAAa,MAAM,gBAAgB;AAC1C,SAASC,SAAS,QAAQ,aAAa;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,2BAA2B,GAAG,IAAIC,MAAM,CAC7C,gDACD,CAAC;AAED,OAAO,MAAMC,mBAAmB,GAAKC,KAAa,IAAc;EAC/D,OAAOL,aAAa,CAAEK,KAAM,CAAC,CAC3BC,iBAAiB,CAAC,CAAC,CACnBC,OAAO,CAAEL,2BAA2B,EAAE,GAAI,CAAC;AAC9C,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASM,SAASA,CAAEC,GAAY,EAAG;EAAA,IAAAC,aAAA;EACzC,IAAIC,KAAK,IAAAD,aAAA,GAAGD,GAAG,EAAEG,QAAQ,GAAG,CAAC,cAAAF,aAAA,cAAAA,aAAA,GAAI,EAAE;;EAEnC;EACAC,KAAK,GAAGA,KAAK,CAACJ,OAAO,CAAE,WAAW,EAAE,EAAG,CAAC;EAExC,OAAON,SAAS,CAAEU,KAAK,EAAE;IACxBE,WAAW,EAAE,CACZ,wDAAwD;IAAE;IAC1D,qDAAqD;IAAE;IACvD,oBAAoB;IAAE;IACtB,sBAAsB,CAAE;IAAA;EAE1B,CAAE,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAAEC,MAAc,EAAW;EACtD,OAAOA,MAAM,CAACR,OAAO,CAAE,qBAAqB,EAAE,MAAO,CAAC;AACvD","ignoreList":[]}

package/build-module/utils/use-responsive-value.js

@@ -39,7 +39,9 @@ export function useResponsiveValue(values, options = {}) {
   const index = useBreakpointIndex(options);
 
   // Allow calling the function with a "normal" value without having to check on the outside.
-  if (!Array.isArray(values) && typeof values !== 'function') return values;
+  if (!Array.isArray(values) && typeof values !== 'function') {
+    return values;
+  }
   const array = values || [];
 
   /* eslint-disable jsdoc/no-undefined-types */

package/build-module/utils/use-responsive-value.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useState","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","useResponsiveValue","values","index","Array","isArray","array"],"sources":["@wordpress/components/src/utils/use-responsive-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nconst breakpoints = [ '40em', '52em', '64em' ];\n\nexport const useBreakpointIndex = (\n\toptions: { defaultIndex?: number } = {}\n) => {\n\tconst { defaultIndex = 0 } = options;\n\n\tif ( typeof defaultIndex !== 'number' ) {\n\t\tthrow new TypeError(\n\t\t\t`Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }`\n\t\t);\n\t} else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) {\n\t\tthrow new RangeError(\n\t\t\t`Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }`\n\t\t);\n\t}\n\n\tconst [ value, setValue ] = useState( defaultIndex );\n\n\tuseEffect( () => {\n\t\tconst getIndex = () =>\n\t\t\tbreakpoints.filter( ( bp ) => {\n\t\t\t\treturn typeof window !== 'undefined'\n\t\t\t\t\t? window.matchMedia( `screen and (min-width: ${ bp })` )\n\t\t\t\t\t\t\t.matches\n\t\t\t\t\t: false;\n\t\t\t} ).length;\n\n\t\tconst onResize = () => {\n\t\t\tconst newValue = getIndex();\n\t\t\tif ( value !== newValue ) {\n\t\t\t\tsetValue( newValue );\n\t\t\t}\n\t\t};\n\n\t\tonResize();\n\n\t\tif ( typeof window !== 'undefined' ) {\n\t\t\twindow.addEventListener( 'resize', onResize );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( typeof window !== 'undefined' ) {\n\t\t\t\twindow.removeEventListener( 'resize', onResize );\n\t\t\t}\n\t\t};\n\t}, [ value ] );\n\n\treturn value;\n};\n\nexport function useResponsiveValue< T >(\n\tvalues: ( T | undefined )[],\n\toptions: Parameters< typeof useBreakpointIndex >[ 0 ] = {}\n): T | undefined {\n\tconst index = useBreakpointIndex( options );\n\n\t// Allow calling the function with a \"normal\" value without having to check on the outside.\n\tif ( ! Array.isArray( values ) && typeof values !== 'function' )\n\t\treturn values;\n\n\tconst array = values || [];\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\treturn /** @type {T[]} */ array[\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\tindex >= array.length ? array.length - 1 : index\n\t];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AAExD,MAAMC,WAAW,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAE;AAE9C,OAAO,MAAMC,kBAAkB,GAAGA,CACjCC,OAAkC,GAAG,CAAC,CAAC,KACnC;EACJ,MAAM;IAAEC,YAAY,GAAG;EAAE,CAAC,GAAGD,OAAO;EAEpC,IAAK,OAAOC,YAAY,KAAK,QAAQ,EAAG;IACvC,MAAM,IAAIC,SAAS,CACjB,qDAAqDD,YAAc,KAAK,OAAOA,YAAc,EAC/F,CAAC;EACF,CAAC,MAAM,IAAKA,YAAY,GAAG,CAAC,IAAIA,YAAY,GAAGH,WAAW,CAACK,MAAM,GAAG,CAAC,EAAG;IACvE,MAAM,IAAIC,UAAU,CAClB,oDAAoDN,WAAW,CAACK,MAAQ,2BAA2BF,YAAc,EACnH,CAAC;EACF;EAEA,MAAM,CAAEI,KAAK,EAAEC,QAAQ,CAAE,GAAGT,QAAQ,CAAEI,YAAa,CAAC;EAEpDL,SAAS,CAAE,MAAM;IAChB,MAAMW,QAAQ,GAAGA,CAAA,KAChBT,WAAW,CAACU,MAAM,CAAIC,EAAE,IAAM;MAC7B,OAAO,OAAOC,MAAM,KAAK,WAAW,GACjCA,MAAM,CAACC,UAAU,CAAG,0BAA0BF,EAAI,GAAG,CAAC,CACrDG,OAAO,GACR,KAAK;IACT,CAAE,CAAC,CAACT,MAAM;IAEX,MAAMU,QAAQ,GAAGA,CAAA,KAAM;MACtB,MAAMC,QAAQ,GAAGP,QAAQ,CAAC,CAAC;MAC3B,IAAKF,KAAK,KAAKS,QAAQ,EAAG;QACzBR,QAAQ,CAAEQ,QAAS,CAAC;MACrB;IACD,CAAC;IAEDD,QAAQ,CAAC,CAAC;IAEV,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;MACpCA,MAAM,CAACK,gBAAgB,CAAE,QAAQ,EAAEF,QAAS,CAAC;IAC9C;IACA,OAAO,MAAM;MACZ,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;QACpCA,MAAM,CAACM,mBAAmB,CAAE,QAAQ,EAAEH,QAAS,CAAC;MACjD;IACD,CAAC;EACF,CAAC,EAAE,CAAER,KAAK,CAAG,CAAC;EAEd,OAAOA,KAAK;AACb,CAAC;AAED,OAAO,SAASY,kBAAkBA,CACjCC,MAA2B,EAC3BlB,OAAqD,GAAG,CAAC,CAAC,EAC1C;EAChB,MAAMmB,KAAK,GAAGpB,kBAAkB,CAAEC,OAAQ,CAAC;;EAE3C;EACA,IAAK,CAAEoB,KAAK,CAACC,OAAO,CAAEH,MAAO,CAAC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAC7D,OAAOA,MAAM;EAEd,MAAMI,KAAK,GAAGJ,MAAM,IAAI,EAAE;;EAE1B;EACA,OAAO,kBAAmBI,KAAK,CAC9B;EACAH,KAAK,IAAIG,KAAK,CAACnB,MAAM,GAAGmB,KAAK,CAACnB,MAAM,GAAG,CAAC,GAAGgB,KAAK,CAChD;AACF","ignoreList":[]}
+{"version":3,"names":["useEffect","useState","breakpoints","useBreakpointIndex","options","defaultIndex","TypeError","length","RangeError","value","setValue","getIndex","filter","bp","window","matchMedia","matches","onResize","newValue","addEventListener","removeEventListener","useResponsiveValue","values","index","Array","isArray","array"],"sources":["@wordpress/components/src/utils/use-responsive-value.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\nconst breakpoints = [ '40em', '52em', '64em' ];\n\nexport const useBreakpointIndex = (\n\toptions: { defaultIndex?: number } = {}\n) => {\n\tconst { defaultIndex = 0 } = options;\n\n\tif ( typeof defaultIndex !== 'number' ) {\n\t\tthrow new TypeError(\n\t\t\t`Default breakpoint index should be a number. Got: ${ defaultIndex }, ${ typeof defaultIndex }`\n\t\t);\n\t} else if ( defaultIndex < 0 || defaultIndex > breakpoints.length - 1 ) {\n\t\tthrow new RangeError(\n\t\t\t`Default breakpoint index out of range. Theme has ${ breakpoints.length } breakpoints, got index ${ defaultIndex }`\n\t\t);\n\t}\n\n\tconst [ value, setValue ] = useState( defaultIndex );\n\n\tuseEffect( () => {\n\t\tconst getIndex = () =>\n\t\t\tbreakpoints.filter( ( bp ) => {\n\t\t\t\treturn typeof window !== 'undefined'\n\t\t\t\t\t? window.matchMedia( `screen and (min-width: ${ bp })` )\n\t\t\t\t\t\t\t.matches\n\t\t\t\t\t: false;\n\t\t\t} ).length;\n\n\t\tconst onResize = () => {\n\t\t\tconst newValue = getIndex();\n\t\t\tif ( value !== newValue ) {\n\t\t\t\tsetValue( newValue );\n\t\t\t}\n\t\t};\n\n\t\tonResize();\n\n\t\tif ( typeof window !== 'undefined' ) {\n\t\t\twindow.addEventListener( 'resize', onResize );\n\t\t}\n\t\treturn () => {\n\t\t\tif ( typeof window !== 'undefined' ) {\n\t\t\t\twindow.removeEventListener( 'resize', onResize );\n\t\t\t}\n\t\t};\n\t}, [ value ] );\n\n\treturn value;\n};\n\nexport function useResponsiveValue< T >(\n\tvalues: ( T | undefined )[],\n\toptions: Parameters< typeof useBreakpointIndex >[ 0 ] = {}\n): T | undefined {\n\tconst index = useBreakpointIndex( options );\n\n\t// Allow calling the function with a \"normal\" value without having to check on the outside.\n\tif ( ! Array.isArray( values ) && typeof values !== 'function' ) {\n\t\treturn values;\n\t}\n\n\tconst array = values || [];\n\n\t/* eslint-disable jsdoc/no-undefined-types */\n\treturn /** @type {T[]} */ array[\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\tindex >= array.length ? array.length - 1 : index\n\t];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AAExD,MAAMC,WAAW,GAAG,CAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAE;AAE9C,OAAO,MAAMC,kBAAkB,GAAGA,CACjCC,OAAkC,GAAG,CAAC,CAAC,KACnC;EACJ,MAAM;IAAEC,YAAY,GAAG;EAAE,CAAC,GAAGD,OAAO;EAEpC,IAAK,OAAOC,YAAY,KAAK,QAAQ,EAAG;IACvC,MAAM,IAAIC,SAAS,CACjB,qDAAqDD,YAAc,KAAK,OAAOA,YAAc,EAC/F,CAAC;EACF,CAAC,MAAM,IAAKA,YAAY,GAAG,CAAC,IAAIA,YAAY,GAAGH,WAAW,CAACK,MAAM,GAAG,CAAC,EAAG;IACvE,MAAM,IAAIC,UAAU,CAClB,oDAAoDN,WAAW,CAACK,MAAQ,2BAA2BF,YAAc,EACnH,CAAC;EACF;EAEA,MAAM,CAAEI,KAAK,EAAEC,QAAQ,CAAE,GAAGT,QAAQ,CAAEI,YAAa,CAAC;EAEpDL,SAAS,CAAE,MAAM;IAChB,MAAMW,QAAQ,GAAGA,CAAA,KAChBT,WAAW,CAACU,MAAM,CAAIC,EAAE,IAAM;MAC7B,OAAO,OAAOC,MAAM,KAAK,WAAW,GACjCA,MAAM,CAACC,UAAU,CAAG,0BAA0BF,EAAI,GAAG,CAAC,CACrDG,OAAO,GACR,KAAK;IACT,CAAE,CAAC,CAACT,MAAM;IAEX,MAAMU,QAAQ,GAAGA,CAAA,KAAM;MACtB,MAAMC,QAAQ,GAAGP,QAAQ,CAAC,CAAC;MAC3B,IAAKF,KAAK,KAAKS,QAAQ,EAAG;QACzBR,QAAQ,CAAEQ,QAAS,CAAC;MACrB;IACD,CAAC;IAEDD,QAAQ,CAAC,CAAC;IAEV,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;MACpCA,MAAM,CAACK,gBAAgB,CAAE,QAAQ,EAAEF,QAAS,CAAC;IAC9C;IACA,OAAO,MAAM;MACZ,IAAK,OAAOH,MAAM,KAAK,WAAW,EAAG;QACpCA,MAAM,CAACM,mBAAmB,CAAE,QAAQ,EAAEH,QAAS,CAAC;MACjD;IACD,CAAC;EACF,CAAC,EAAE,CAAER,KAAK,CAAG,CAAC;EAEd,OAAOA,KAAK;AACb,CAAC;AAED,OAAO,SAASY,kBAAkBA,CACjCC,MAA2B,EAC3BlB,OAAqD,GAAG,CAAC,CAAC,EAC1C;EAChB,MAAMmB,KAAK,GAAGpB,kBAAkB,CAAEC,OAAQ,CAAC;;EAE3C;EACA,IAAK,CAAEoB,KAAK,CAACC,OAAO,CAAEH,MAAO,CAAC,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAG;IAChE,OAAOA,MAAM;EACd;EAEA,MAAMI,KAAK,GAAGJ,MAAM,IAAI,EAAE;;EAE1B;EACA,OAAO,kBAAmBI,KAAK,CAC9B;EACAH,KAAK,IAAIG,KAAK,CAACnB,MAAM,GAAGmB,KAAK,CAACnB,MAAM,GAAG,CAAC,GAAGgB,KAAK,CAChD;AACF","ignoreList":[]}

package/build-module/view/component.js

@@ -1,12 +1,35 @@
 import _styled from "@emotion/styled/base";
+import { createElement } from "react";
 /**
  * External dependencies
  */
 
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 
+const PolymorphicDiv = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e19lxcc00"
+} : {
+  target: "e19lxcc00",
+  label: "PolymorphicDiv"
+})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdmlldy9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVpQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3ZpZXcvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBXb3JkUHJlc3MgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGZvcndhcmRSZWYgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzIH0gZnJvbSAnLi4vY29udGV4dCc7XG5cbmNvbnN0IFBvbHltb3JwaGljRGl2ID0gc3R5bGVkLmRpdmBgO1xuXG5mdW5jdGlvbiBVbmZvcndhcmRlZFZpZXc8IFQgZXh0ZW5kcyBSZWFjdC5FbGVtZW50VHlwZSA9ICdkaXYnID4oXG5cdHsgYXMsIC4uLnJlc3RQcm9wcyB9OiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwge30sIFQgPixcblx0cmVmOiBSZWFjdC5Gb3J3YXJkZWRSZWY8IGFueSA+XG4pIHtcblx0cmV0dXJuIDxQb2x5bW9ycGhpY0RpdiBhcz17IGFzIH0gcmVmPXsgcmVmIH0geyAuLi5yZXN0UHJvcHMgfSAvPjtcbn1cblxuLyoqXG4gKiBgVmlld2AgaXMgYSBjb3JlIGNvbXBvbmVudCB0aGF0IHJlbmRlcnMgZXZlcnl0aGluZyBpbiB0aGUgbGlicmFyeS5cbiAqIEl0IGlzIHRoZSBwcmluY2lwbGUgY29tcG9uZW50IGluIHRoZSBlbnRpcmUgbGlicmFyeS5cbiAqXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7IFZpZXcgfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiBcdHJldHVybiAoXG4gKiBcdFx0PFZpZXc+XG4gKiBcdFx0XHQgQ29kZSBpcyBQb2V0cnlcbiAqIFx0XHQ8L1ZpZXc+XG4gKiBcdCk7XG4gKiB9XG4gKiBgYGBcbiAqL1xuZXhwb3J0IGNvbnN0IFZpZXcgPSBPYmplY3QuYXNzaWduKCBmb3J3YXJkUmVmKCBVbmZvcndhcmRlZFZpZXcgKSwge1xuXHRzZWxlY3RvcjogJy5jb21wb25lbnRzLXZpZXcnLFxufSApO1xuXG5leHBvcnQgZGVmYXVsdCBWaWV3O1xuIl19 */");
+function UnforwardedView({
+  as,
+  ...restProps
+}, ref) {
+  return createElement(PolymorphicDiv, {
+    as: as,
+    ref: ref,
+    ...restProps
+  });
+}
+
 /**
  * `View` is a core component that renders everything in the library.
  * It is the principle component in the entire library.
@@ -23,13 +46,8 @@ import _styled from "@emotion/styled/base";
  * }
  * ```
  */
-export const View = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e19lxcc00"
-} : {
-  target: "e19lxcc00",
-  label: "View"
-})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdmlldy9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWdDYyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3ZpZXcvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB0eXBlIHsgUmVmQXR0cmlidXRlcyB9IGZyb20gJ3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBXb3JkUHJlc3NDb21wb25lbnQgfSBmcm9tICcuLi9jb250ZXh0L3dvcmRwcmVzcy1jb21wb25lbnQnO1xuaW1wb3J0IHR5cGUgeyBWaWV3UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuLyoqXG4gKiBgVmlld2AgaXMgYSBjb3JlIGNvbXBvbmVudCB0aGF0IHJlbmRlcnMgZXZlcnl0aGluZyBpbiB0aGUgbGlicmFyeS5cbiAqIEl0IGlzIHRoZSBwcmluY2lwbGUgY29tcG9uZW50IGluIHRoZSBlbnRpcmUgbGlicmFyeS5cbiAqXG4gKiBgYGBqc3hcbiAqIGltcG9ydCB7IFZpZXcgfSBmcm9tIGBAd29yZHByZXNzL2NvbXBvbmVudHNgO1xuICpcbiAqIGZ1bmN0aW9uIEV4YW1wbGUoKSB7XG4gKiBcdHJldHVybiAoXG4gKiBcdFx0PFZpZXc+XG4gKiBcdFx0XHQgQ29kZSBpcyBQb2V0cnlcbiAqIFx0XHQ8L1ZpZXc+XG4gKiBcdCk7XG4gKiB9XG4gKiBgYGBcbiAqL1xuZXhwb3J0IGNvbnN0IFZpZXc6IFdvcmRQcmVzc0NvbXBvbmVudDxcblx0J2RpdicsXG5cdFZpZXdQcm9wcyAmIFJlZkF0dHJpYnV0ZXM8IGFueSA+LFxuXHR0cnVlXG4+ID0gc3R5bGVkLmRpdmBgO1xuXG5WaWV3LnNlbGVjdG9yID0gJy5jb21wb25lbnRzLXZpZXcnO1xuVmlldy5kaXNwbGF5TmFtZSA9ICdWaWV3JztcblxuZXhwb3J0IGRlZmF1bHQgVmlldztcbiJdfQ== */");
-View.selector = '.components-view';
-View.displayName = 'View';
+export const View = Object.assign(forwardRef(UnforwardedView), {
+  selector: '.components-view'
+});
 export default View;
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["View","_styled","process","env","NODE_ENV","target","label","selector","displayName"],"sources":["@wordpress/components/src/view/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport type { RefAttributes } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponent } from '../context/wordpress-component';\nimport type { ViewProps } from './types';\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: WordPressComponent<\n\t'div',\n\tViewProps & RefAttributes< any >,\n\ttrue\n> = styled.div``;\n\nView.selector = '.components-view';\nView.displayName = 'View';\n\nexport default View;\n"],"mappings":";AAAA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,IAIZ,gBAAAC,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA,u4CAAe;AAEhBJ,IAAI,CAACO,QAAQ,GAAG,kBAAkB;AAClCP,IAAI,CAACQ,WAAW,GAAG,MAAM;AAEzB,eAAeR,IAAI","ignoreList":[]}
+{"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":[]}