@wordpress/components 25.12.0 → 25.14.0

package/build-module/border-control/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","COLORS","CONFIG","boxSizingReset","rtl","space","StyledLabel","ValueInput","UnitControlWrapper","UnitSelect","labelStyles","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","focusBoxShadow","controlBoxShadowFocus","borderControl","innerWrapper","wrapperWidth","wrapperHeight","size","borderControlDropdown","borderRadius","borderWidth","ui","border","borderFocus","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","swatchSize","swatchGap","borderControlPopoverControls","borderControlPopoverContent","borderColorIndicator","resetButton","borderControlStylePicker","borderStyleButton","borderSlider","marginRight"],"sources":["@wordpress/components/src/border-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';\nimport { space } from '../utils/space';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport {\n\tValueInput as UnitControlWrapper,\n\tUnitSelect,\n} from '../unit-control/styles/unit-control-styles';\n\nimport type { Border } from './types';\n\nconst labelStyles = css`\n\tfont-weight: 500;\n`;\n\nconst focusBoxShadow = css`\n\tbox-shadow: inset ${ CONFIG.controlBoxShadowFocus };\n`;\n\nexport const borderControl = css`\n\tborder: 0;\n\tpadding: 0;\n\tmargin: 0;\n\t${ boxSizingReset }\n`;\n\nexport const innerWrapper = () => css`\n\t${ UnitControlWrapper } {\n\t\tflex: 1 1 40%;\n\t}\n\t&& ${ UnitSelect } {\n\t\t/* Prevent unit select forcing min height larger than its UnitControl */\n\t\tmin-height: 0;\n\t}\n`;\n\n/*\n * This style is only applied to the UnitControl wrapper when the border width\n * field should be a set width. Omitting this allows the UnitControl &\n * RangeControl to share the available width in a 40/60 split respectively.\n */\nexport const wrapperWidth = css`\n\t${ UnitControlWrapper } {\n\t\t/* Force the UnitControl's set width. */\n\t\tflex: 0 0 auto;\n\t}\n`;\n\nexport const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {\n\treturn css`\n\t\theight: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t`;\n};\n\nexport const borderControlDropdown = (\n\tsize?: 'default' | '__unstable-large'\n) => css`\n\tbackground: #fff;\n\n\t&& > button {\n\t\t/*\n\t\t * Override button component styles to fit within BorderControl\n\t\t * regardless of size.\n\t\t */\n\t\theight: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t\twidth: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t${ rtl(\n\t\t\t{ borderRadius: `2px 0 0 2px` },\n\t\t\t{ borderRadius: `0 2px 2px 0` }\n\t\t)() }\n\t\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\n\t\t&:focus,\n\t\t&:hover:not( :disabled ) {\n\t\t\t${ focusBoxShadow }\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t}\n\t}\n`;\n\nexport const colorIndicatorBorder = ( border?: Border ) => {\n\tconst { color, style } = border || {};\n\n\tconst fallbackColor =\n\t\t!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;\n\n\treturn css`\n\t\tborder-style: ${ style === 'none' ? 'solid' : style };\n\t\tborder-color: ${ color || fallbackColor };\n\t`;\n};\n\nexport const colorIndicatorWrapper = (\n\tborder?: Border,\n\tsize?: 'default' | '__unstable-large'\n) => {\n\tconst { style } = border || {};\n\n\treturn css`\n\t\tborder-radius: 9999px;\n\t\tborder: 2px solid transparent;\n\t\t${ style ? colorIndicatorBorder( border ) : undefined }\n\t\twidth: ${ size === '__unstable-large' ? '24px' : '22px' };\n\t\theight: ${ size === '__unstable-large' ? '24px' : '22px' };\n\t\tpadding: ${ size === '__unstable-large' ? '2px' : '1px' };\n\n\t\t/*\n\t\t * ColorIndicator\n\t\t *\n\t\t * The transparent colors used here ensure visibility of the indicator\n\t\t * over the active state of the border control dropdown's toggle button.\n\t\t */\n\t\t& > span {\n\t\t\theight: ${ space( 4 ) };\n\t\t\twidth: ${ space( 4 ) };\n\t\t\tbackground: linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);\n\t\t}\n\t`;\n};\n\n// Must equal $color-palette-circle-size from:\n// @wordpress/components/src/circular-option-picker/style.scss\nconst swatchSize = 28;\nconst swatchGap = 12;\n\nexport const borderControlPopoverControls = css`\n\twidth: ${ swatchSize * 6 + swatchGap * 5 }px;\n\n\t> div:first-of-type > ${ StyledLabel } {\n\t\tmargin-bottom: 0;\n\t\t${ labelStyles }\n\t}\n\n\t&& ${ StyledLabel } + button:not( .has-text ) {\n\t\tmin-width: 24px;\n\t\tpadding: 0;\n\t}\n`;\n\nexport const borderControlPopoverContent = css``;\nexport const borderColorIndicator = css``;\n\nexport const resetButton = css`\n\tjustify-content: center;\n\twidth: 100%;\n\n\t/* Override button component styling */\n\t&& {\n\t\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };\n\t\tborder-top-left-radius: 0;\n\t\tborder-top-right-radius: 0;\n\t\theight: 40px;\n\t}\n`;\n\nexport const borderControlStylePicker = css`\n\t${ StyledLabel } {\n\t\t${ labelStyles }\n\t}\n`;\n\nexport const borderStyleButton = css`\n\t&&&&& {\n\t\tmin-width: 32px;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tpadding: 4px;\n\t}\n`;\n\nexport const borderSlider = () => css`\n\tflex: 1 1 60%;\n\t${ rtl( { marginRight: space( 3 ) } )() }\n`;\n"],"mappings":"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"}
+{"version":3,"names":["css","COLORS","CONFIG","boxSizingReset","rtl","space","StyledLabel","ValueInput","UnitControlWrapper","UnitSelect","labelStyles","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","focusBoxShadow","controlBoxShadowFocus","borderControl","innerWrapper","wrapperWidth","wrapperHeight","size","borderControlDropdown","borderRadius","borderWidth","ui","border","borderFocus","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","swatchSize","swatchGap","borderControlPopoverControls","borderControlPopoverContent","borderColorIndicator","resetButton","borderControlStylePicker","borderStyleButton","borderSlider","marginRight"],"sources":["@wordpress/components/src/border-control/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';\nimport { space } from '../utils/space';\nimport { StyledLabel } from '../base-control/styles/base-control-styles';\nimport {\n\tValueInput as UnitControlWrapper,\n\tUnitSelect,\n} from '../unit-control/styles/unit-control-styles';\n\nimport type { Border } from './types';\n\nconst labelStyles = css`\n\tfont-weight: 500;\n`;\n\nconst focusBoxShadow = css`\n\tbox-shadow: inset ${ CONFIG.controlBoxShadowFocus };\n`;\n\nexport const borderControl = css`\n\tborder: 0;\n\tpadding: 0;\n\tmargin: 0;\n\t${ boxSizingReset }\n`;\n\nexport const innerWrapper = () => css`\n\t${ UnitControlWrapper } {\n\t\tflex: 1 1 40%;\n\t}\n\t&& ${ UnitSelect } {\n\t\t/* Prevent unit select forcing min height larger than its UnitControl */\n\t\tmin-height: 0;\n\t}\n`;\n\n/*\n * This style is only applied to the UnitControl wrapper when the border width\n * field should be a set width. Omitting this allows the UnitControl &\n * RangeControl to share the available width in a 40/60 split respectively.\n */\nexport const wrapperWidth = css`\n\t${ UnitControlWrapper } {\n\t\t/* Force the UnitControl's set width. */\n\t\tflex: 0 0 auto;\n\t}\n`;\n\nexport const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {\n\treturn css`\n\t\theight: ${ size === '__unstable-large' ? '40px' : '30px' };\n\t`;\n};\n\nexport const borderControlDropdown = css`\n\tbackground: #fff;\n\n\t&& > button {\n\t\taspect-ratio: 1;\n\t\tpadding: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t${ rtl(\n\t\t\t{ borderRadius: `2px 0 0 2px` },\n\t\t\t{ borderRadius: `0 2px 2px 0` }\n\t\t)() }\n\t\tborder: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };\n\n\t\t&:focus,\n\t\t&:hover:not( :disabled ) {\n\t\t\t${ focusBoxShadow }\n\t\t\tborder-color: ${ COLORS.ui.borderFocus };\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t}\n\t}\n`;\n\nexport const colorIndicatorBorder = ( border?: Border ) => {\n\tconst { color, style } = border || {};\n\n\tconst fallbackColor =\n\t\t!! style && style !== 'none' ? COLORS.gray[ 300 ] : undefined;\n\n\treturn css`\n\t\tborder-style: ${ style === 'none' ? 'solid' : style };\n\t\tborder-color: ${ color || fallbackColor };\n\t`;\n};\n\nexport const colorIndicatorWrapper = (\n\tborder?: Border,\n\tsize?: 'default' | '__unstable-large'\n) => {\n\tconst { style } = border || {};\n\n\treturn css`\n\t\tborder-radius: 9999px;\n\t\tborder: 2px solid transparent;\n\t\t${ style ? colorIndicatorBorder( border ) : undefined }\n\t\twidth: ${ size === '__unstable-large' ? '24px' : '22px' };\n\t\theight: ${ size === '__unstable-large' ? '24px' : '22px' };\n\t\tpadding: ${ size === '__unstable-large' ? '2px' : '1px' };\n\n\t\t/*\n\t\t * ColorIndicator\n\t\t *\n\t\t * The transparent colors used here ensure visibility of the indicator\n\t\t * over the active state of the border control dropdown's toggle button.\n\t\t */\n\t\t& > span {\n\t\t\theight: ${ space( 4 ) };\n\t\t\twidth: ${ space( 4 ) };\n\t\t\tbackground: linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);\n\t\t}\n\t`;\n};\n\n// Must equal $color-palette-circle-size from:\n// @wordpress/components/src/circular-option-picker/style.scss\nconst swatchSize = 28;\nconst swatchGap = 12;\n\nexport const borderControlPopoverControls = css`\n\twidth: ${ swatchSize * 6 + swatchGap * 5 }px;\n\n\t> div:first-of-type > ${ StyledLabel } {\n\t\tmargin-bottom: 0;\n\t\t${ labelStyles }\n\t}\n\n\t&& ${ StyledLabel } + button:not( .has-text ) {\n\t\tmin-width: 24px;\n\t\tpadding: 0;\n\t}\n`;\n\nexport const borderControlPopoverContent = css``;\nexport const borderColorIndicator = css``;\n\nexport const resetButton = css`\n\tjustify-content: center;\n\twidth: 100%;\n\n\t/* Override button component styling */\n\t&& {\n\t\tborder-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };\n\t\tborder-top-left-radius: 0;\n\t\tborder-top-right-radius: 0;\n\t\theight: 40px;\n\t}\n`;\n\nexport const borderControlStylePicker = css`\n\t${ StyledLabel } {\n\t\t${ labelStyles }\n\t}\n`;\n\nexport const borderStyleButton = css`\n\t&&&&& {\n\t\tmin-width: 32px;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t\tpadding: 4px;\n\t}\n`;\n\nexport const borderSlider = () => css`\n\tflex: 1 1 60%;\n\t${ rtl( { marginRight: space( 3 ) } )() }\n`;\n"],"mappings":"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"}

package/build-module/checkbox-control/index.js

@@ -97,7 +97,7 @@ export function CheckboxControl(props) {
     icon: check,
     className: "components-checkbox-control__checked",
     role: "presentation"
-  }) : null), createElement("label", {
+  }) : null), label && createElement("label", {
     className: "components-checkbox-control__label",
     htmlFor: id
   }, label));

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","onChangeValue","event","target","createElement","type","value","undefined","icon","role","htmlFor"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t/>\n\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t<label\n\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\thtmlFor={ id }\n\t\t\t>\n\t\t\t\t{ label }\n\t\t\t</label>\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":"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"}
+{"version":3,"names":["classnames","useState","useInstanceId","useRefEffect","deprecated","Icon","check","reset","BaseControl","CheckboxControl","props","__nextHasNoMarginBottom","label","className","heading","checked","indeterminate","help","id","idProp","onChange","additionalProps","alternative","since","showCheckedIcon","setShowCheckedIcon","showIndeterminateIcon","setShowIndeterminateIcon","ref","node","matches","onChangeValue","event","target","createElement","type","value","undefined","icon","role","htmlFor"],"sources":["@wordpress/components/src/checkbox-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useInstanceId, useRefEffect } from '@wordpress/compose';\nimport deprecated from '@wordpress/deprecated';\nimport { Icon, check, reset } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport BaseControl from '../base-control';\nimport type { CheckboxControlProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\n/**\n * Checkboxes allow the user to select one or more items from a set.\n *\n * ```jsx\n * import { CheckboxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyCheckboxControl = () => {\n *   const [ isChecked, setChecked ] = useState( true );\n *   return (\n *     <CheckboxControl\n *       label=\"Is author\"\n *       help=\"Is the user a author or not?\"\n *       checked={ isChecked }\n *       onChange={ setChecked }\n *     />\n *   );\n * };\n * ```\n */\nexport function CheckboxControl(\n\tprops: WordPressComponentProps< CheckboxControlProps, 'input', false >\n) {\n\tconst {\n\t\t__nextHasNoMarginBottom,\n\t\tlabel,\n\t\tclassName,\n\t\theading,\n\t\tchecked,\n\t\tindeterminate,\n\t\thelp,\n\t\tid: idProp,\n\t\tonChange,\n\t\t...additionalProps\n\t} = props;\n\n\tif ( heading ) {\n\t\tdeprecated( '`heading` prop in `CheckboxControl`', {\n\t\t\talternative: 'a separate element to implement a heading',\n\t\t\tsince: '5.8',\n\t\t} );\n\t}\n\n\tconst [ showCheckedIcon, setShowCheckedIcon ] = useState( false );\n\tconst [ showIndeterminateIcon, setShowIndeterminateIcon ] =\n\t\tuseState( false );\n\n\t// Run the following callback every time the `ref` (and the additional\n\t// dependencies) change.\n\tconst ref = useRefEffect< HTMLInputElement >(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// It cannot be set using an HTML attribute.\n\t\t\tnode.indeterminate = !! indeterminate;\n\n\t\t\tsetShowCheckedIcon( node.matches( ':checked' ) );\n\t\t\tsetShowIndeterminateIcon( node.matches( ':indeterminate' ) );\n\t\t},\n\t\t[ checked, indeterminate ]\n\t);\n\tconst id = useInstanceId(\n\t\tCheckboxControl,\n\t\t'inspector-checkbox-control',\n\t\tidProp\n\t);\n\tconst onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>\n\t\tonChange( event.target.checked );\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom={ __nextHasNoMarginBottom }\n\t\t\tlabel={ heading }\n\t\t\tid={ id }\n\t\t\thelp={ help }\n\t\t\tclassName={ classnames( 'components-checkbox-control', className ) }\n\t\t>\n\t\t\t<span className=\"components-checkbox-control__input-container\">\n\t\t\t\t<input\n\t\t\t\t\tref={ ref }\n\t\t\t\t\tid={ id }\n\t\t\t\t\tclassName=\"components-checkbox-control__input\"\n\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\tvalue=\"1\"\n\t\t\t\t\tonChange={ onChangeValue }\n\t\t\t\t\tchecked={ checked }\n\t\t\t\t\taria-describedby={ !! help ? id + '__help' : undefined }\n\t\t\t\t\t{ ...additionalProps }\n\t\t\t\t/>\n\t\t\t\t{ showIndeterminateIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__indeterminate\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t\t{ showCheckedIcon ? (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ check }\n\t\t\t\t\t\tclassName=\"components-checkbox-control__checked\"\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</span>\n\t\t\t{ label && (\n\t\t\t\t<label\n\t\t\t\t\tclassName=\"components-checkbox-control__label\"\n\t\t\t\t\thtmlFor={ id }\n\t\t\t\t>\n\t\t\t\t\t{ label }\n\t\t\t\t</label>\n\t\t\t) }\n\t\t</BaseControl>\n\t);\n}\n\nexport default CheckboxControl;\n"],"mappings":"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"}

package/build-module/checkbox-control/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/checkbox-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\n\nexport type CheckboxControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * A function that receives the checked state (boolean) as input.\n\t */\n\tonChange: ( value: boolean ) => void;\n\t/**\n\t * A label for the input field, that appears at the side of the checkbox.\n\t * The prop will be rendered as content a label element. If no prop is\n\t * passed an empty label is rendered.\n\t */\n\tlabel?: string;\n\t/**\n\t * If checked is true the checkbox will be checked. If checked is false the\n\t * checkbox will be unchecked. If no value is passed the checkbox will be\n\t * unchecked.\n\t */\n\tchecked?: boolean;\n\t/**\n\t * If indeterminate is true the state of the checkbox will be indeterminate.\n\t */\n\tindeterminate?: boolean;\n\t/**\n\t * @deprecated\n\t */\n\theading?: ReactNode;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/checkbox-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { BaseControlProps } from '../base-control/types';\n\nexport type CheckboxControlProps = Pick<\n\tBaseControlProps,\n\t'help' | '__nextHasNoMarginBottom'\n> & {\n\t/**\n\t * A function that receives the checked state (boolean) as input.\n\t */\n\tonChange: ( value: boolean ) => void;\n\t/**\n\t * A label for the input field, that appears at the side of the checkbox.\n\t * The prop will be rendered as content a label element. If no prop is\n\t * passed an empty label is rendered. If the prop is set to false no label\n\t * is rendered.\n\t */\n\tlabel?: string | false;\n\t/**\n\t * If checked is true the checkbox will be checked. If checked is false the\n\t * checkbox will be unchecked. If no value is passed the checkbox will be\n\t * unchecked.\n\t */\n\tchecked?: boolean;\n\t/**\n\t * If indeterminate is true the state of the checkbox will be indeterminate.\n\t */\n\tindeterminate?: boolean;\n\t/**\n\t * @deprecated\n\t */\n\theading?: ReactNode;\n};\n"],"mappings":""}

package/build-module/custom-select-control-v2/index.js

@@ -0,0 +1,74 @@
+import { createElement, Fragment } from "react";
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import * as Styled from './styles';
+export const CustomSelectContext = createContext(undefined);
+function defaultRenderSelectedValue(value) {
+  const isValueEmpty = Array.isArray(value) ? value.length === 0 : value === undefined || value === null;
+  if (isValueEmpty) {
+    return __('Select an item');
+  }
+  if (Array.isArray(value)) {
+    return value.length === 1 ? value[0] :
+    // translators: %s: number of items selected (it will always be 2 or more items)
+    sprintf(__('%s items selected'), value.length);
+  }
+  return value;
+}
+export function CustomSelect(props) {
+  const {
+    children,
+    defaultValue,
+    label,
+    onChange,
+    size = 'default',
+    value,
+    renderSelectedValue = defaultRenderSelectedValue
+  } = props;
+  const store = Ariakit.useSelectStore({
+    setValue: nextValue => onChange?.(nextValue),
+    defaultValue,
+    value
+  });
+  const {
+    value: currentValue
+  } = store.useState();
+  return createElement(Fragment, null, createElement(Styled.CustomSelectLabel, {
+    store: store
+  }, label), createElement(Styled.CustomSelectButton, {
+    size: size,
+    hasCustomRenderProp: !!renderSelectedValue,
+    store: store
+  }, renderSelectedValue(currentValue), createElement(Ariakit.SelectArrow, null)), createElement(Styled.CustomSelectPopover, {
+    gutter: 12,
+    store: store,
+    sameWidth: true
+  }, createElement(CustomSelectContext.Provider, {
+    value: {
+      store
+    }
+  }, children)));
+}
+export function CustomSelectItem({
+  children,
+  ...props
+}) {
+  const customSelectContext = useContext(CustomSelectContext);
+  return createElement(Styled.CustomSelectItem, {
+    store: customSelectContext?.store,
+    ...props
+  }, children !== null && children !== void 0 ? children : props.value, createElement(Ariakit.SelectItemCheck, null));
+}
+//# sourceMappingURL=index.js.map

package/build-module/custom-select-control-v2/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Ariakit","createContext","useContext","__","sprintf","Styled","CustomSelectContext","undefined","defaultRenderSelectedValue","value","isValueEmpty","Array","isArray","length","CustomSelect","props","children","defaultValue","label","onChange","size","renderSelectedValue","store","useSelectStore","setValue","nextValue","currentValue","useState","createElement","Fragment","CustomSelectLabel","CustomSelectButton","hasCustomRenderProp","SelectArrow","CustomSelectPopover","gutter","sameWidth","Provider","CustomSelectItem","customSelectContext","SelectItemCheck"],"sources":["@wordpress/components/src/custom-select-control-v2/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport * as Styled from './styles';\nimport type {\n\tCustomSelectProps,\n\tCustomSelectItemProps,\n\tCustomSelectContext as CustomSelectContextType,\n} from './types';\n\nexport const CustomSelectContext =\n\tcreateContext< CustomSelectContextType >( undefined );\n\nfunction defaultRenderSelectedValue( value: CustomSelectProps[ 'value' ] ) {\n\tconst isValueEmpty = Array.isArray( value )\n\t\t? value.length === 0\n\t\t: value === undefined || value === null;\n\n\tif ( isValueEmpty ) {\n\t\treturn __( 'Select an item' );\n\t}\n\n\tif ( Array.isArray( value ) ) {\n\t\treturn value.length === 1\n\t\t\t? value[ 0 ]\n\t\t\t: // translators: %s: number of items selected (it will always be 2 or more items)\n\t\t\t  sprintf( __( '%s items selected' ), value.length );\n\t}\n\n\treturn value;\n}\n\nexport function CustomSelect( props: CustomSelectProps ) {\n\tconst {\n\t\tchildren,\n\t\tdefaultValue,\n\t\tlabel,\n\t\tonChange,\n\t\tsize = 'default',\n\t\tvalue,\n\t\trenderSelectedValue = defaultRenderSelectedValue,\n\t} = props;\n\n\tconst store = Ariakit.useSelectStore( {\n\t\tsetValue: ( nextValue ) => onChange?.( nextValue ),\n\t\tdefaultValue,\n\t\tvalue,\n\t} );\n\n\tconst { value: currentValue } = store.useState();\n\n\treturn (\n\t\t<>\n\t\t\t<Styled.CustomSelectLabel store={ store }>\n\t\t\t\t{ label }\n\t\t\t</Styled.CustomSelectLabel>\n\t\t\t<Styled.CustomSelectButton\n\t\t\t\tsize={ size }\n\t\t\t\thasCustomRenderProp={ !! renderSelectedValue }\n\t\t\t\tstore={ store }\n\t\t\t>\n\t\t\t\t{ renderSelectedValue( currentValue ) }\n\t\t\t\t<Ariakit.SelectArrow />\n\t\t\t</Styled.CustomSelectButton>\n\t\t\t<Styled.CustomSelectPopover gutter={ 12 } store={ store } sameWidth>\n\t\t\t\t<CustomSelectContext.Provider value={ { store } }>\n\t\t\t\t\t{ children }\n\t\t\t\t</CustomSelectContext.Provider>\n\t\t\t</Styled.CustomSelectPopover>\n\t\t</>\n\t);\n}\n\nexport function CustomSelectItem( {\n\tchildren,\n\t...props\n}: CustomSelectItemProps ) {\n\tconst customSelectContext = useContext( CustomSelectContext );\n\treturn (\n\t\t<Styled.CustomSelectItem\n\t\t\tstore={ customSelectContext?.store }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children ?? props.value }\n\t\t\t<Ariakit.SelectItemCheck />\n\t\t</Styled.CustomSelectItem>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;AACzC;AACA;AACA;AACA,SAASC,aAAa,EAAEC,UAAU,QAAQ,oBAAoB;AAC9D,SAASC,EAAE,EAAEC,OAAO,QAAQ,iBAAiB;;AAE7C;AACA;AACA;AACA,OAAO,KAAKC,MAAM,MAAM,UAAU;AAOlC,OAAO,MAAMC,mBAAmB,GAC/BL,aAAa,CAA6BM,SAAU,CAAC;AAEtD,SAASC,0BAA0BA,CAAEC,KAAmC,EAAG;EAC1E,MAAMC,YAAY,GAAGC,KAAK,CAACC,OAAO,CAAEH,KAAM,CAAC,GACxCA,KAAK,CAACI,MAAM,KAAK,CAAC,GAClBJ,KAAK,KAAKF,SAAS,IAAIE,KAAK,KAAK,IAAI;EAExC,IAAKC,YAAY,EAAG;IACnB,OAAOP,EAAE,CAAE,gBAAiB,CAAC;EAC9B;EAEA,IAAKQ,KAAK,CAACC,OAAO,CAAEH,KAAM,CAAC,EAAG;IAC7B,OAAOA,KAAK,CAACI,MAAM,KAAK,CAAC,GACtBJ,KAAK,CAAE,CAAC,CAAE;IACV;IACAL,OAAO,CAAED,EAAE,CAAE,mBAAoB,CAAC,EAAEM,KAAK,CAACI,MAAO,CAAC;EACtD;EAEA,OAAOJ,KAAK;AACb;AAEA,OAAO,SAASK,YAAYA,CAAEC,KAAwB,EAAG;EACxD,MAAM;IACLC,QAAQ;IACRC,YAAY;IACZC,KAAK;IACLC,QAAQ;IACRC,IAAI,GAAG,SAAS;IAChBX,KAAK;IACLY,mBAAmB,GAAGb;EACvB,CAAC,GAAGO,KAAK;EAET,MAAMO,KAAK,GAAGtB,OAAO,CAACuB,cAAc,CAAE;IACrCC,QAAQ,EAAIC,SAAS,IAAMN,QAAQ,GAAIM,SAAU,CAAC;IAClDR,YAAY;IACZR;EACD,CAAE,CAAC;EAEH,MAAM;IAAEA,KAAK,EAAEiB;EAAa,CAAC,GAAGJ,KAAK,CAACK,QAAQ,CAAC,CAAC;EAEhD,OACCC,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACvB,MAAM,CAACyB,iBAAiB;IAACR,KAAK,EAAGA;EAAO,GACtCJ,KACuB,CAAC,EAC3BU,aAAA,CAACvB,MAAM,CAAC0B,kBAAkB;IACzBX,IAAI,EAAGA,IAAM;IACbY,mBAAmB,EAAG,CAAC,CAAEX,mBAAqB;IAC9CC,KAAK,EAAGA;EAAO,GAEbD,mBAAmB,CAAEK,YAAa,CAAC,EACrCE,aAAA,CAAC5B,OAAO,CAACiC,WAAW,MAAE,CACI,CAAC,EAC5BL,aAAA,CAACvB,MAAM,CAAC6B,mBAAmB;IAACC,MAAM,EAAG,EAAI;IAACb,KAAK,EAAGA,KAAO;IAACc,SAAS;EAAA,GAClER,aAAA,CAACtB,mBAAmB,CAAC+B,QAAQ;IAAC5B,KAAK,EAAG;MAAEa;IAAM;EAAG,GAC9CN,QAC2B,CACH,CAC3B,CAAC;AAEL;AAEA,OAAO,SAASsB,gBAAgBA,CAAE;EACjCtB,QAAQ;EACR,GAAGD;AACmB,CAAC,EAAG;EAC1B,MAAMwB,mBAAmB,GAAGrC,UAAU,CAAEI,mBAAoB,CAAC;EAC7D,OACCsB,aAAA,CAACvB,MAAM,CAACiC,gBAAgB;IACvBhB,KAAK,EAAGiB,mBAAmB,EAAEjB,KAAO;IAAA,GAC/BP;EAAK,GAERC,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAID,KAAK,CAACN,KAAK,EACzBmB,aAAA,CAAC5B,OAAO,CAACwC,eAAe,MAAE,CACF,CAAC;AAE5B"}

package/build-module/custom-select-control-v2/styles.js

@@ -0,0 +1,71 @@
+import _styled from "@emotion/styled/base";
+/**
+ * External dependencies
+ */
+
+// eslint-disable-next-line no-restricted-imports
+import * as Ariakit from '@ariakit/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS } from '../utils';
+import { space } from '../utils/space';
+export const CustomSelectLabel = /*#__PURE__*/_styled(Ariakit.SelectLabel, process.env.NODE_ENV === "production" ? {
+  target: "e1p3eej73"
+} : {
+  target: "e1p3eej73",
+  label: "CustomSelectLabel"
+})("font-size:11px;font-weight:500;line-height:1.4;text-transform:uppercase;margin-bottom:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sLXYyL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjOEQiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9jdXN0b20tc2VsZWN0LWNvbnRyb2wtdjIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLXJlc3RyaWN0ZWQtaW1wb3J0c1xuaW1wb3J0ICogYXMgQXJpYWtpdCBmcm9tICdAYXJpYWtpdC9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUyB9IGZyb20gJy4uL3V0aWxzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHR5cGUgeyBDdXN0b21TZWxlY3RQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgQ3VzdG9tU2VsZWN0TGFiZWwgPSBzdHlsZWQoIEFyaWFraXQuU2VsZWN0TGFiZWwgKWBcblx0Zm9udC1zaXplOiAxMXB4O1xuXHRmb250LXdlaWdodDogNTAwO1xuXHRsaW5lLWhlaWdodDogMS40O1xuXHR0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuXHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggMiApIH07XG5gO1xuXG5jb25zdCBpbnB1dEhlaWdodHMgPSB7XG5cdGRlZmF1bHQ6IDQwLFxuXHRzbWFsbDogMjQsXG59O1xuXG5leHBvcnQgY29uc3QgQ3VzdG9tU2VsZWN0QnV0dG9uID0gc3R5bGVkKCBBcmlha2l0LlNlbGVjdCwge1xuXHQvLyBEbyBub3QgZm9yd2FyZCBgaGFzQ3VzdG9tUmVuZGVyUHJvcGAgdG8gdGhlIHVuZGVybHlpbmcgQXJpYWtpdC5TZWxlY3QgY29tcG9uZW50XG5cdHNob3VsZEZvcndhcmRQcm9wOiAoIHByb3AgKSA9PiBwcm9wICE9PSAnaGFzQ3VzdG9tUmVuZGVyUHJvcCcsXG59ICkoICgge1xuXHRzaXplLFxuXHRoYXNDdXN0b21SZW5kZXJQcm9wLFxufToge1xuXHRzaXplOiBOb25OdWxsYWJsZTwgQ3VzdG9tU2VsZWN0UHJvcHNbICdzaXplJyBdID47XG5cdGhhc0N1c3RvbVJlbmRlclByb3A6IGJvb2xlYW47XG59ICkgPT4ge1xuXHRjb25zdCBpc1NtYWxsU2l6ZSA9IHNpemUgPT09ICdzbWFsbCcgJiYgISBoYXNDdXN0b21SZW5kZXJQcm9wO1xuXHRjb25zdCBoZWlnaHRQcm9wZXJ0eSA9IGhhc0N1c3RvbVJlbmRlclByb3AgPyAnbWluSGVpZ2h0JyA6ICdoZWlnaHQnO1xuXG5cdHJldHVybiB7XG5cdFx0ZGlzcGxheTogJ2ZsZXgnLFxuXHRcdGp1c3RpZnlDb250ZW50OiAnc3BhY2UtYmV0d2VlbicsXG5cdFx0YWxpZ25JdGVtczogJ2NlbnRlcicsXG5cdFx0YmFja2dyb3VuZENvbG9yOiBDT0xPUlMud2hpdGUsXG5cdFx0Ym9yZGVyOiBgMXB4IHNvbGlkICR7IENPTE9SUy5ncmF5WyA2MDAgXSB9YCxcblx0XHRib3JkZXJSYWRpdXM6IHNwYWNlKCAwLjUgKSxcblx0XHRjdXJzb3I6ICdwb2ludGVyJyxcblx0XHR3aWR0aDogJzEwMCUnLFxuXHRcdFsgaGVpZ2h0UHJvcGVydHkgXTogYCR7IGlucHV0SGVpZ2h0c1sgc2l6ZSBdIH1weGAsXG5cdFx0cGFkZGluZzogaXNTbWFsbFNpemUgPyBzcGFjZSggMiApIDogc3BhY2UoIDQgKSxcblx0XHRmb250U2l6ZTogaXNTbWFsbFNpemUgPyAnMTFweCcgOiAnMTNweCcsXG5cdFx0JyZbZGF0YS1mb2N1cy12aXNpYmxlXSc6IHtcblx0XHRcdG91dGxpbmVTdHlsZTogJ3NvbGlkJyxcblx0XHR9LFxuXHRcdCcmW2FyaWEtZXhwYW5kZWQ9XCJ0cnVlXCJdJzoge1xuXHRcdFx0b3V0bGluZVN0eWxlOiBgMS41cHggc29saWQgJHsgQ09MT1JTLnRoZW1lLmFjY2VudCB9YCxcblx0XHR9LFxuXHR9O1xufSApO1xuXG5leHBvcnQgY29uc3QgQ3VzdG9tU2VsZWN0UG9wb3ZlciA9IHN0eWxlZCggQXJpYWtpdC5TZWxlY3RQb3BvdmVyIClgXG5cdGJvcmRlci1yYWRpdXM6ICR7IHNwYWNlKCAwLjUgKSB9O1xuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMud2hpdGUgfTtcblx0Ym9yZGVyOiAxcHggc29saWQgJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgQ3VzdG9tU2VsZWN0SXRlbSA9IHN0eWxlZCggQXJpYWtpdC5TZWxlY3RJdGVtIClgXG5cdGRpc3BsYXk6IGZsZXg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2Vlbjtcblx0cGFkZGluZzogJHsgc3BhY2UoIDIgKSB9O1xuXHQmW2RhdGEtYWN0aXZlLWl0ZW1dIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgMzAwIF0gfTtcblx0fVxuYDtcbiJdfQ== */"));
+const inputHeights = {
+  default: 40,
+  small: 24
+};
+export const CustomSelectButton = /*#__PURE__*/_styled(Ariakit.Select, process.env.NODE_ENV === "production" ? {
+  // Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component
+  shouldForwardProp: prop => prop !== 'hasCustomRenderProp',
+  target: "e1p3eej72"
+} : {
+  // Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component
+  shouldForwardProp: prop => prop !== 'hasCustomRenderProp',
+  target: "e1p3eej72",
+  label: "CustomSelectButton"
+})(({
+  size,
+  hasCustomRenderProp
+}) => {
+  const isSmallSize = size === 'small' && !hasCustomRenderProp;
+  const heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';
+  return {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: COLORS.white,
+    border: `1px solid ${COLORS.gray[600]}`,
+    borderRadius: space(0.5),
+    cursor: 'pointer',
+    width: '100%',
+    [heightProperty]: `${inputHeights[size]}px`,
+    padding: isSmallSize ? space(2) : space(4),
+    fontSize: isSmallSize ? '11px' : '13px',
+    '&[data-focus-visible]': {
+      outlineStyle: 'solid'
+    },
+    '&[aria-expanded="true"]': {
+      outlineStyle: `1.5px solid ${COLORS.theme.accent}`
+    }
+  };
+}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sLXYyL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQmtDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sLXYyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1yZXN0cmljdGVkLWltcG9ydHNcbmltcG9ydCAqIGFzIEFyaWFraXQgZnJvbSAnQGFyaWFraXQvcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB0eXBlIHsgQ3VzdG9tU2VsZWN0UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdExhYmVsID0gc3R5bGVkKCBBcmlha2l0LlNlbGVjdExhYmVsIClgXG5cdGZvbnQtc2l6ZTogMTFweDtcblx0Zm9udC13ZWlnaHQ6IDUwMDtcblx0bGluZS1oZWlnaHQ6IDEuNDtcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuYDtcblxuY29uc3QgaW5wdXRIZWlnaHRzID0ge1xuXHRkZWZhdWx0OiA0MCxcblx0c21hbGw6IDI0LFxufTtcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdEJ1dHRvbiA9IHN0eWxlZCggQXJpYWtpdC5TZWxlY3QsIHtcblx0Ly8gRG8gbm90IGZvcndhcmQgYGhhc0N1c3RvbVJlbmRlclByb3BgIHRvIHRoZSB1bmRlcmx5aW5nIEFyaWFraXQuU2VsZWN0IGNvbXBvbmVudFxuXHRzaG91bGRGb3J3YXJkUHJvcDogKCBwcm9wICkgPT4gcHJvcCAhPT0gJ2hhc0N1c3RvbVJlbmRlclByb3AnLFxufSApKCAoIHtcblx0c2l6ZSxcblx0aGFzQ3VzdG9tUmVuZGVyUHJvcCxcbn06IHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IEN1c3RvbVNlbGVjdFByb3BzWyAnc2l6ZScgXSA+O1xuXHRoYXNDdXN0b21SZW5kZXJQcm9wOiBib29sZWFuO1xufSApID0+IHtcblx0Y29uc3QgaXNTbWFsbFNpemUgPSBzaXplID09PSAnc21hbGwnICYmICEgaGFzQ3VzdG9tUmVuZGVyUHJvcDtcblx0Y29uc3QgaGVpZ2h0UHJvcGVydHkgPSBoYXNDdXN0b21SZW5kZXJQcm9wID8gJ21pbkhlaWdodCcgOiAnaGVpZ2h0JztcblxuXHRyZXR1cm4ge1xuXHRcdGRpc3BsYXk6ICdmbGV4Jyxcblx0XHRqdXN0aWZ5Q29udGVudDogJ3NwYWNlLWJldHdlZW4nLFxuXHRcdGFsaWduSXRlbXM6ICdjZW50ZXInLFxuXHRcdGJhY2tncm91bmRDb2xvcjogQ09MT1JTLndoaXRlLFxuXHRcdGJvcmRlcjogYDFweCBzb2xpZCAkeyBDT0xPUlMuZ3JheVsgNjAwIF0gfWAsXG5cdFx0Ym9yZGVyUmFkaXVzOiBzcGFjZSggMC41ICksXG5cdFx0Y3Vyc29yOiAncG9pbnRlcicsXG5cdFx0d2lkdGg6ICcxMDAlJyxcblx0XHRbIGhlaWdodFByb3BlcnR5IF06IGAkeyBpbnB1dEhlaWdodHNbIHNpemUgXSB9cHhgLFxuXHRcdHBhZGRpbmc6IGlzU21hbGxTaXplID8gc3BhY2UoIDIgKSA6IHNwYWNlKCA0ICksXG5cdFx0Zm9udFNpemU6IGlzU21hbGxTaXplID8gJzExcHgnIDogJzEzcHgnLFxuXHRcdCcmW2RhdGEtZm9jdXMtdmlzaWJsZV0nOiB7XG5cdFx0XHRvdXRsaW5lU3R5bGU6ICdzb2xpZCcsXG5cdFx0fSxcblx0XHQnJlthcmlhLWV4cGFuZGVkPVwidHJ1ZVwiXSc6IHtcblx0XHRcdG91dGxpbmVTdHlsZTogYDEuNXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfWAsXG5cdFx0fSxcblx0fTtcbn0gKTtcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdFBvcG92ZXIgPSBzdHlsZWQoIEFyaWFraXQuU2VsZWN0UG9wb3ZlciApYFxuXHRib3JkZXItcmFkaXVzOiAkeyBzcGFjZSggMC41ICkgfTtcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLndoaXRlIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdEl0ZW0gPSBzdHlsZWQoIEFyaWFraXQuU2VsZWN0SXRlbSApYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cdHBhZGRpbmc6ICR7IHNwYWNlKCAyICkgfTtcblx0JltkYXRhLWFjdGl2ZS1pdGVtXSB7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5cdH1cbmA7XG4iXX0= */");
+export const CustomSelectPopover = /*#__PURE__*/_styled(Ariakit.SelectPopover, process.env.NODE_ENV === "production" ? {
+  target: "e1p3eej71"
+} : {
+  target: "e1p3eej71",
+  label: "CustomSelectPopover"
+})("border-radius:", space(0.5), ";background:", COLORS.white, ";border:1px solid ", COLORS.gray[900], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sLXYyL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RGtFIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sLXYyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1yZXN0cmljdGVkLWltcG9ydHNcbmltcG9ydCAqIGFzIEFyaWFraXQgZnJvbSAnQGFyaWFraXQvcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB0eXBlIHsgQ3VzdG9tU2VsZWN0UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdExhYmVsID0gc3R5bGVkKCBBcmlha2l0LlNlbGVjdExhYmVsIClgXG5cdGZvbnQtc2l6ZTogMTFweDtcblx0Zm9udC13ZWlnaHQ6IDUwMDtcblx0bGluZS1oZWlnaHQ6IDEuNDtcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuYDtcblxuY29uc3QgaW5wdXRIZWlnaHRzID0ge1xuXHRkZWZhdWx0OiA0MCxcblx0c21hbGw6IDI0LFxufTtcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdEJ1dHRvbiA9IHN0eWxlZCggQXJpYWtpdC5TZWxlY3QsIHtcblx0Ly8gRG8gbm90IGZvcndhcmQgYGhhc0N1c3RvbVJlbmRlclByb3BgIHRvIHRoZSB1bmRlcmx5aW5nIEFyaWFraXQuU2VsZWN0IGNvbXBvbmVudFxuXHRzaG91bGRGb3J3YXJkUHJvcDogKCBwcm9wICkgPT4gcHJvcCAhPT0gJ2hhc0N1c3RvbVJlbmRlclByb3AnLFxufSApKCAoIHtcblx0c2l6ZSxcblx0aGFzQ3VzdG9tUmVuZGVyUHJvcCxcbn06IHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IEN1c3RvbVNlbGVjdFByb3BzWyAnc2l6ZScgXSA+O1xuXHRoYXNDdXN0b21SZW5kZXJQcm9wOiBib29sZWFuO1xufSApID0+IHtcblx0Y29uc3QgaXNTbWFsbFNpemUgPSBzaXplID09PSAnc21hbGwnICYmICEgaGFzQ3VzdG9tUmVuZGVyUHJvcDtcblx0Y29uc3QgaGVpZ2h0UHJvcGVydHkgPSBoYXNDdXN0b21SZW5kZXJQcm9wID8gJ21pbkhlaWdodCcgOiAnaGVpZ2h0JztcblxuXHRyZXR1cm4ge1xuXHRcdGRpc3BsYXk6ICdmbGV4Jyxcblx0XHRqdXN0aWZ5Q29udGVudDogJ3NwYWNlLWJldHdlZW4nLFxuXHRcdGFsaWduSXRlbXM6ICdjZW50ZXInLFxuXHRcdGJhY2tncm91bmRDb2xvcjogQ09MT1JTLndoaXRlLFxuXHRcdGJvcmRlcjogYDFweCBzb2xpZCAkeyBDT0xPUlMuZ3JheVsgNjAwIF0gfWAsXG5cdFx0Ym9yZGVyUmFkaXVzOiBzcGFjZSggMC41ICksXG5cdFx0Y3Vyc29yOiAncG9pbnRlcicsXG5cdFx0d2lkdGg6ICcxMDAlJyxcblx0XHRbIGhlaWdodFByb3BlcnR5IF06IGAkeyBpbnB1dEhlaWdodHNbIHNpemUgXSB9cHhgLFxuXHRcdHBhZGRpbmc6IGlzU21hbGxTaXplID8gc3BhY2UoIDIgKSA6IHNwYWNlKCA0ICksXG5cdFx0Zm9udFNpemU6IGlzU21hbGxTaXplID8gJzExcHgnIDogJzEzcHgnLFxuXHRcdCcmW2RhdGEtZm9jdXMtdmlzaWJsZV0nOiB7XG5cdFx0XHRvdXRsaW5lU3R5bGU6ICdzb2xpZCcsXG5cdFx0fSxcblx0XHQnJlthcmlhLWV4cGFuZGVkPVwidHJ1ZVwiXSc6IHtcblx0XHRcdG91dGxpbmVTdHlsZTogYDEuNXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfWAsXG5cdFx0fSxcblx0fTtcbn0gKTtcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdFBvcG92ZXIgPSBzdHlsZWQoIEFyaWFraXQuU2VsZWN0UG9wb3ZlciApYFxuXHRib3JkZXItcmFkaXVzOiAkeyBzcGFjZSggMC41ICkgfTtcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLndoaXRlIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdEl0ZW0gPSBzdHlsZWQoIEFyaWFraXQuU2VsZWN0SXRlbSApYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cdHBhZGRpbmc6ICR7IHNwYWNlKCAyICkgfTtcblx0JltkYXRhLWFjdGl2ZS1pdGVtXSB7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5cdH1cbmA7XG4iXX0= */"));
+export const CustomSelectItem = /*#__PURE__*/_styled(Ariakit.SelectItem, process.env.NODE_ENV === "production" ? {
+  target: "e1p3eej70"
+} : {
+  target: "e1p3eej70",
+  label: "CustomSelectItem"
+})("display:flex;align-items:center;justify-content:space-between;padding:", space(2), ";&[data-active-item]{background-color:", COLORS.gray[300], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sLXYyL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRTREIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvY3VzdG9tLXNlbGVjdC1jb250cm9sLXYyL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1yZXN0cmljdGVkLWltcG9ydHNcbmltcG9ydCAqIGFzIEFyaWFraXQgZnJvbSAnQGFyaWFraXQvcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMgfSBmcm9tICcuLi91dGlscyc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uL3V0aWxzL3NwYWNlJztcbmltcG9ydCB0eXBlIHsgQ3VzdG9tU2VsZWN0UHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdExhYmVsID0gc3R5bGVkKCBBcmlha2l0LlNlbGVjdExhYmVsIClgXG5cdGZvbnQtc2l6ZTogMTFweDtcblx0Zm9udC13ZWlnaHQ6IDUwMDtcblx0bGluZS1oZWlnaHQ6IDEuNDtcblx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0bWFyZ2luLWJvdHRvbTogJHsgc3BhY2UoIDIgKSB9O1xuYDtcblxuY29uc3QgaW5wdXRIZWlnaHRzID0ge1xuXHRkZWZhdWx0OiA0MCxcblx0c21hbGw6IDI0LFxufTtcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdEJ1dHRvbiA9IHN0eWxlZCggQXJpYWtpdC5TZWxlY3QsIHtcblx0Ly8gRG8gbm90IGZvcndhcmQgYGhhc0N1c3RvbVJlbmRlclByb3BgIHRvIHRoZSB1bmRlcmx5aW5nIEFyaWFraXQuU2VsZWN0IGNvbXBvbmVudFxuXHRzaG91bGRGb3J3YXJkUHJvcDogKCBwcm9wICkgPT4gcHJvcCAhPT0gJ2hhc0N1c3RvbVJlbmRlclByb3AnLFxufSApKCAoIHtcblx0c2l6ZSxcblx0aGFzQ3VzdG9tUmVuZGVyUHJvcCxcbn06IHtcblx0c2l6ZTogTm9uTnVsbGFibGU8IEN1c3RvbVNlbGVjdFByb3BzWyAnc2l6ZScgXSA+O1xuXHRoYXNDdXN0b21SZW5kZXJQcm9wOiBib29sZWFuO1xufSApID0+IHtcblx0Y29uc3QgaXNTbWFsbFNpemUgPSBzaXplID09PSAnc21hbGwnICYmICEgaGFzQ3VzdG9tUmVuZGVyUHJvcDtcblx0Y29uc3QgaGVpZ2h0UHJvcGVydHkgPSBoYXNDdXN0b21SZW5kZXJQcm9wID8gJ21pbkhlaWdodCcgOiAnaGVpZ2h0JztcblxuXHRyZXR1cm4ge1xuXHRcdGRpc3BsYXk6ICdmbGV4Jyxcblx0XHRqdXN0aWZ5Q29udGVudDogJ3NwYWNlLWJldHdlZW4nLFxuXHRcdGFsaWduSXRlbXM6ICdjZW50ZXInLFxuXHRcdGJhY2tncm91bmRDb2xvcjogQ09MT1JTLndoaXRlLFxuXHRcdGJvcmRlcjogYDFweCBzb2xpZCAkeyBDT0xPUlMuZ3JheVsgNjAwIF0gfWAsXG5cdFx0Ym9yZGVyUmFkaXVzOiBzcGFjZSggMC41ICksXG5cdFx0Y3Vyc29yOiAncG9pbnRlcicsXG5cdFx0d2lkdGg6ICcxMDAlJyxcblx0XHRbIGhlaWdodFByb3BlcnR5IF06IGAkeyBpbnB1dEhlaWdodHNbIHNpemUgXSB9cHhgLFxuXHRcdHBhZGRpbmc6IGlzU21hbGxTaXplID8gc3BhY2UoIDIgKSA6IHNwYWNlKCA0ICksXG5cdFx0Zm9udFNpemU6IGlzU21hbGxTaXplID8gJzExcHgnIDogJzEzcHgnLFxuXHRcdCcmW2RhdGEtZm9jdXMtdmlzaWJsZV0nOiB7XG5cdFx0XHRvdXRsaW5lU3R5bGU6ICdzb2xpZCcsXG5cdFx0fSxcblx0XHQnJlthcmlhLWV4cGFuZGVkPVwidHJ1ZVwiXSc6IHtcblx0XHRcdG91dGxpbmVTdHlsZTogYDEuNXB4IHNvbGlkICR7IENPTE9SUy50aGVtZS5hY2NlbnQgfWAsXG5cdFx0fSxcblx0fTtcbn0gKTtcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdFBvcG92ZXIgPSBzdHlsZWQoIEFyaWFraXQuU2VsZWN0UG9wb3ZlciApYFxuXHRib3JkZXItcmFkaXVzOiAkeyBzcGFjZSggMC41ICkgfTtcblx0YmFja2dyb3VuZDogJHsgQ09MT1JTLndoaXRlIH07XG5cdGJvcmRlcjogMXB4IHNvbGlkICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEN1c3RvbVNlbGVjdEl0ZW0gPSBzdHlsZWQoIEFyaWFraXQuU2VsZWN0SXRlbSApYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG5cdHBhZGRpbmc6ICR7IHNwYWNlKCAyICkgfTtcblx0JltkYXRhLWFjdGl2ZS1pdGVtXSB7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5cdH1cbmA7XG4iXX0= */"));
+//# sourceMappingURL=styles.js.map

package/build-module/custom-select-control-v2/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Ariakit","COLORS","space","CustomSelectLabel","_styled","SelectLabel","process","env","NODE_ENV","target","label","inputHeights","default","small","CustomSelectButton","Select","shouldForwardProp","prop","size","hasCustomRenderProp","isSmallSize","heightProperty","display","justifyContent","alignItems","backgroundColor","white","border","gray","borderRadius","cursor","width","padding","fontSize","outlineStyle","theme","accent","CustomSelectPopover","SelectPopover","CustomSelectItem","SelectItem"],"sources":["@wordpress/components/src/custom-select-control-v2/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n// eslint-disable-next-line no-restricted-imports\nimport * as Ariakit from '@ariakit/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS } from '../utils';\nimport { space } from '../utils/space';\nimport type { CustomSelectProps } from './types';\n\nexport const CustomSelectLabel = styled( Ariakit.SelectLabel )`\n\tfont-size: 11px;\n\tfont-weight: 500;\n\tline-height: 1.4;\n\ttext-transform: uppercase;\n\tmargin-bottom: ${ space( 2 ) };\n`;\n\nconst inputHeights = {\n\tdefault: 40,\n\tsmall: 24,\n};\n\nexport const CustomSelectButton = styled( Ariakit.Select, {\n\t// Do not forward `hasCustomRenderProp` to the underlying Ariakit.Select component\n\tshouldForwardProp: ( prop ) => prop !== 'hasCustomRenderProp',\n} )( ( {\n\tsize,\n\thasCustomRenderProp,\n}: {\n\tsize: NonNullable< CustomSelectProps[ 'size' ] >;\n\thasCustomRenderProp: boolean;\n} ) => {\n\tconst isSmallSize = size === 'small' && ! hasCustomRenderProp;\n\tconst heightProperty = hasCustomRenderProp ? 'minHeight' : 'height';\n\n\treturn {\n\t\tdisplay: 'flex',\n\t\tjustifyContent: 'space-between',\n\t\talignItems: 'center',\n\t\tbackgroundColor: COLORS.white,\n\t\tborder: `1px solid ${ COLORS.gray[ 600 ] }`,\n\t\tborderRadius: space( 0.5 ),\n\t\tcursor: 'pointer',\n\t\twidth: '100%',\n\t\t[ heightProperty ]: `${ inputHeights[ size ] }px`,\n\t\tpadding: isSmallSize ? space( 2 ) : space( 4 ),\n\t\tfontSize: isSmallSize ? '11px' : '13px',\n\t\t'&[data-focus-visible]': {\n\t\t\toutlineStyle: 'solid',\n\t\t},\n\t\t'&[aria-expanded=\"true\"]': {\n\t\t\toutlineStyle: `1.5px solid ${ COLORS.theme.accent }`,\n\t\t},\n\t};\n} );\n\nexport const CustomSelectPopover = styled( Ariakit.SelectPopover )`\n\tborder-radius: ${ space( 0.5 ) };\n\tbackground: ${ COLORS.white };\n\tborder: 1px solid ${ COLORS.gray[ 900 ] };\n`;\n\nexport const CustomSelectItem = styled( Ariakit.SelectItem )`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: ${ space( 2 ) };\n\t&[data-active-item] {\n\t\tbackground-color: ${ COLORS.gray[ 300 ] };\n\t}\n`;\n"],"mappings":";AAAA;AACA;AACA;;AAEA;AACA,OAAO,KAAKA,OAAO,MAAM,gBAAgB;;AAEzC;AACA;AACA;AACA,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,KAAK,QAAQ,gBAAgB;AAGtC,OAAO,MAAMC,iBAAiB,GAAG,aAAAC,OAAA,CAAQJ,OAAO,CAACK,WAAW,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,2FAK3CR,KAAK,CAAE,CAAE,CAAC,SAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA,oqGAC5B;AAED,MAAMG,YAAY,GAAG;EACpBC,OAAO,EAAE,EAAE;EACXC,KAAK,EAAE;AACR,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAG,aAAAV,OAAA,CAAQJ,OAAO,CAACe,MAAM,EAAAT,OAAA,CAAAC,GAAA,CAAAC,QAAA;EACvD;EACAQ,iBAAiB,EAAIC,IAAI,IAAMA,IAAI,KAAK,qBAAqB;EAAAR,MAAA;AAAA;EAD7D;EACAO,iBAAiB,EAAIC,IAAI,IAAMA,IAAI,KAAK,qBAAqB;EAAAR,MAAA;EAAAC,KAAA;AAAA,CAC5D,CAAC,CAAE,CAAE;EACNQ,IAAI;EACJC;AAID,CAAC,KAAM;EACN,MAAMC,WAAW,GAAGF,IAAI,KAAK,OAAO,IAAI,CAAEC,mBAAmB;EAC7D,MAAME,cAAc,GAAGF,mBAAmB,GAAG,WAAW,GAAG,QAAQ;EAEnE,OAAO;IACNG,OAAO,EAAE,MAAM;IACfC,cAAc,EAAE,eAAe;IAC/BC,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAExB,MAAM,CAACyB,KAAK;IAC7BC,MAAM,EAAG,aAAa1B,MAAM,CAAC2B,IAAI,CAAE,GAAG,CAAI,EAAC;IAC3CC,YAAY,EAAE3B,KAAK,CAAE,GAAI,CAAC;IAC1B4B,MAAM,EAAE,SAAS;IACjBC,KAAK,EAAE,MAAM;IACb,CAAEV,cAAc,GAAK,GAAGV,YAAY,CAAEO,IAAI,CAAI,IAAG;IACjDc,OAAO,EAAEZ,WAAW,GAAGlB,KAAK,CAAE,CAAE,CAAC,GAAGA,KAAK,CAAE,CAAE,CAAC;IAC9C+B,QAAQ,EAAEb,WAAW,GAAG,MAAM,GAAG,MAAM;IACvC,uBAAuB,EAAE;MACxBc,YAAY,EAAE;IACf,CAAC;IACD,yBAAyB,EAAE;MAC1BA,YAAY,EAAG,eAAejC,MAAM,CAACkC,KAAK,CAACC,MAAQ;IACpD;EACD,CAAC;AACF,CAAC,EAAA9B,OAAA,CAAAC,GAAA,CAAAC,QAAA,kqGAAC,CAAC;AAEH,OAAO,MAAM6B,mBAAmB,GAAG,aAAAjC,OAAA,CAAQJ,OAAO,CAACsC,aAAa,EAAAhC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,mBAC/CR,KAAK,CAAE,GAAI,CAAC,kBACfD,MAAM,CAACyB,KAAK,wBACNzB,MAAM,CAAC2B,IAAI,CAAE,GAAG,CAAE,SAAAtB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oqGACvC;AAED,OAAO,MAAM+B,gBAAgB,GAAG,aAAAnC,OAAA,CAAQJ,OAAO,CAACwC,UAAU,EAAAlC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,2EAI/CR,KAAK,CAAE,CAAE,CAAC,4CAEAD,MAAM,CAAC2B,IAAI,CAAE,GAAG,CAAE,UAAAtB,OAAA,CAAAC,GAAA,CAAAC,QAAA,oqGAExC"}

package/build-module/custom-select-control-v2/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build-module/custom-select-control-v2/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["@wordpress/components/src/custom-select-control-v2/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type * as Ariakit from '@ariakit/react';\n\nexport type CustomSelectContext =\n\t| {\n\t\t\t/**\n\t\t\t * The store object returned by Ariakit's `useSelectStore` hook.\n\t\t\t */\n\t\t\tstore: Ariakit.SelectStore;\n\t  }\n\t| undefined;\n\nexport type CustomSelectProps = {\n\t/**\n\t * The child elements. This should be composed of CustomSelectItem components.\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * An optional default value for the control. If left `undefined`, the first\n\t * non-disabled item will be used.\n\t */\n\tdefaultValue?: string | string[];\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * A function that receives the new value of the input.\n\t */\n\tonChange?: ( newValue: string | string[] ) => void;\n\t/**\n\t * Can be used to render select UI with custom styled values.\n\t */\n\trenderSelectedValue?: (\n\t\tselectedValue: string | string[]\n\t) => React.ReactNode;\n\t/**\n\t * The size of the control.\n\t *\n\t * @default 'default'\n\t */\n\tsize?: 'default' | 'small';\n\t/**\n\t * Can be used to externally control the value of the control.\n\t */\n\tvalue?: string | string[];\n};\n\nexport type CustomSelectItemProps = {\n\t/**\n\t * The value of the select item. This will be used as the children if\n\t * children are left `undefined`.\n\t */\n\tvalue: string;\n\t/**\n\t * The children to display for each select item. The `value` will be\n\t * used if left `undefined`.\n\t */\n\tchildren?: React.ReactNode;\n};\n"],"mappings":""}

package/build-module/date-time/time/timezone.js

@@ -30,8 +30,17 @@ const TimeZone = () => {
   }
   const offsetSymbol = Number(timezone.offset) >= 0 ? '+' : '';
   const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`;
-  const timezoneDetail = 'UTC' === timezone.string ? __('Coordinated Universal Time') : `(${zoneAbbr}) ${timezone.string.replace('_', ' ')}`;
-  return createElement(Tooltip, {
+
+  // Replace underscore with space in strings like `America/Costa_Rica`.
+  const prettyTimezoneString = timezone.string.replace('_', ' ');
+  const timezoneDetail = 'UTC' === timezone.string ? __('Coordinated Universal Time') : `(${zoneAbbr}) ${prettyTimezoneString}`;
+
+  // When the prettyTimezoneString is empty, there is no additional timezone
+  // detail information to show in a Tooltip.
+  const hasNoAdditionalTimezoneDetail = prettyTimezoneString.trim().length === 0;
+  return hasNoAdditionalTimezoneDetail ? createElement(StyledComponent, {
+    className: "components-datetime__timezone"
+  }, zoneAbbr) : createElement(Tooltip, {
     placement: "top",
     text: timezoneDetail
   }, createElement(StyledComponent, {

package/build-module/date-time/time/timezone.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","getSettings","getDateSettings","Tooltip","TimeZone","StyledComponent","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","timezoneDetail","string","replace","createElement","placement","text","className"],"sources":["@wordpress/components/src/date-time/time/timezone.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../../tooltip';\nimport { TimeZone as StyledComponent } from './styles';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;\n\n\treturn (\n\t\t<Tooltip placement=\"top\" text={ timezoneDetail }>\n\t\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t\t{ zoneAbbr }\n\t\t\t</StyledComponent>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,eAAe,QAAQ,iBAAiB;;AAEhE;AACA;AACA;AACA,OAAOC,OAAO,MAAM,eAAe;AACnC,SAASC,QAAQ,IAAIC,eAAe,QAAQ,UAAU;;AAEtD;AACA;AACA;AACA;AACA,MAAMD,QAAQ,GAAGA,CAAA,KAAM;EACtB,MAAM;IAAEE;EAAS,CAAC,GAAGJ,eAAe,CAAC,CAAC;;EAEtC;EACA,MAAMK,kBAAkB,GAAG,CAAC,CAAC,IAAK,IAAIC,IAAI,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC,GAAG,EAAE,CAAE;;EAEvE;EACA;EACA,IAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,KAAKJ,kBAAkB,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,MAAMK,YAAY,GAAGF,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE;EAC9D,MAAME,QAAQ,GACb,EAAE,KAAKP,QAAQ,CAACQ,IAAI,IAAIC,KAAK,CAAEL,MAAM,CAAEJ,QAAQ,CAACQ,IAAK,CAAE,CAAC,GACrDR,QAAQ,CAACQ,IAAI,GACZ,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAAC;EAE9C,MAAMK,cAAc,GACnB,KAAK,KAAKV,QAAQ,CAACW,MAAM,GACtBjB,EAAE,CAAE,4BAA6B,CAAC,GACjC,IAAIa,QAAU,KAAKP,QAAQ,CAACW,MAAM,CAACC,OAAO,CAAE,GAAG,EAAE,GAAI,CAAG,EAAC;EAE9D,OACCC,aAAA,CAAChB,OAAO;IAACiB,SAAS,EAAC,KAAK;IAACC,IAAI,EAAGL;EAAgB,GAC/CG,aAAA,CAACd,eAAe;IAACiB,SAAS,EAAC;EAA+B,GACvDT,QACc,CACT,CAAC;AAEZ,CAAC;AAED,eAAeT,QAAQ"}
+{"version":3,"names":["__","getSettings","getDateSettings","Tooltip","TimeZone","StyledComponent","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","prettyTimezoneString","string","replace","timezoneDetail","hasNoAdditionalTimezoneDetail","trim","length","createElement","className","placement","text"],"sources":["@wordpress/components/src/date-time/time/timezone.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { getSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../../tooltip';\nimport { TimeZone as StyledComponent } from './styles';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\t// Replace underscore with space in strings like `America/Costa_Rica`.\n\tconst prettyTimezoneString = timezone.string.replace( '_', ' ' );\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ prettyTimezoneString }`;\n\n\t// When the prettyTimezoneString is empty, there is no additional timezone\n\t// detail information to show in a Tooltip.\n\tconst hasNoAdditionalTimezoneDetail =\n\t\tprettyTimezoneString.trim().length === 0;\n\n\treturn hasNoAdditionalTimezoneDetail ? (\n\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t{ zoneAbbr }\n\t\t</StyledComponent>\n\t) : (\n\t\t<Tooltip placement=\"top\" text={ timezoneDetail }>\n\t\t\t<StyledComponent className=\"components-datetime__timezone\">\n\t\t\t\t{ zoneAbbr }\n\t\t\t</StyledComponent>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,eAAe,QAAQ,iBAAiB;;AAEhE;AACA;AACA;AACA,OAAOC,OAAO,MAAM,eAAe;AACnC,SAASC,QAAQ,IAAIC,eAAe,QAAQ,UAAU;;AAEtD;AACA;AACA;AACA;AACA,MAAMD,QAAQ,GAAGA,CAAA,KAAM;EACtB,MAAM;IAAEE;EAAS,CAAC,GAAGJ,eAAe,CAAC,CAAC;;EAEtC;EACA,MAAMK,kBAAkB,GAAG,CAAC,CAAC,IAAK,IAAIC,IAAI,CAAC,CAAC,CAACC,iBAAiB,CAAC,CAAC,GAAG,EAAE,CAAE;;EAEvE;EACA;EACA,IAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,KAAKJ,kBAAkB,EAAG;IACvD,OAAO,IAAI;EACZ;EAEA,MAAMK,YAAY,GAAGF,MAAM,CAAEJ,QAAQ,CAACK,MAAO,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,EAAE;EAC9D,MAAME,QAAQ,GACb,EAAE,KAAKP,QAAQ,CAACQ,IAAI,IAAIC,KAAK,CAAEL,MAAM,CAAEJ,QAAQ,CAACQ,IAAK,CAAE,CAAC,GACrDR,QAAQ,CAACQ,IAAI,GACZ,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAAC;;EAE9C;EACA,MAAMK,oBAAoB,GAAGV,QAAQ,CAACW,MAAM,CAACC,OAAO,CAAE,GAAG,EAAE,GAAI,CAAC;EAEhE,MAAMC,cAAc,GACnB,KAAK,KAAKb,QAAQ,CAACW,MAAM,GACtBjB,EAAE,CAAE,4BAA6B,CAAC,GACjC,IAAIa,QAAU,KAAKG,oBAAsB,EAAC;;EAE/C;EACA;EACA,MAAMI,6BAA6B,GAClCJ,oBAAoB,CAACK,IAAI,CAAC,CAAC,CAACC,MAAM,KAAK,CAAC;EAEzC,OAAOF,6BAA6B,GACnCG,aAAA,CAAClB,eAAe;IAACmB,SAAS,EAAC;EAA+B,GACvDX,QACc,CAAC,GAElBU,aAAA,CAACpB,OAAO;IAACsB,SAAS,EAAC,KAAK;IAACC,IAAI,EAAGP;EAAgB,GAC/CI,aAAA,CAAClB,eAAe;IAACmB,SAAS,EAAC;EAA+B,GACvDX,QACc,CACT,CACT;AACF,CAAC;AAED,eAAeT,QAAQ"}

package/build-module/dimension-control/index.js

@@ -40,6 +40,7 @@ import sizesTable, { findSizeBySlug } from './sizes';
  */
 export function DimensionControl(props) {
   const {
+    __next40pxDefaultSize = false,
     label,
     value,
     sizes = sizesTable,
@@ -72,6 +73,7 @@ export function DimensionControl(props) {
     icon: icon
   }), label);
   return createElement(SelectControl, {
+    __next40pxDefaultSize: __next40pxDefaultSize,
     className: classnames(className, 'block-editor-dimension-control'),
     label: selectLabel,
     hideLabelFromVision: false,

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","__","Icon","SelectControl","sizesTable","findSizeBySlug","DimensionControl","props","label","value","sizes","icon","onChange","className","onChangeSpacingSize","val","theSize","slug","undefined","formatSizesAsOptions","theSizes","options","map","name","selectLabel","createElement","Fragment","hideLabelFromVision"],"sources":["@wordpress/components/src/dimension-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\n\n/**\n * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n *\n * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.\n *\n * ```jsx\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n *\n * \treturn (\n * \t\t<DimensionControl\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize || value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'block-editor-dimension-control'\n\t\t\t) }\n\t\t\tlabel={ selectLabel }\n\t\t\thideLabelFromVision={ false }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeSpacingSize }\n\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t/>\n\t);\n}\n\nexport default DimensionControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,UAAU,IAAIC,cAAc,QAAQ,SAAS;AAIpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAEC,KAA4B,EAAG;EAChE,MAAM;IACLC,KAAK;IACLC,KAAK;IACLC,KAAK,GAAGN,UAAU;IAClBO,IAAI;IACJC,QAAQ;IACRC,SAAS,GAAG;EACb,CAAC,GAAGN,KAAK;EAET,MAAMO,mBAAoE,GACvEC,GAAG,IAAM;IACV,MAAMC,OAAO,GAAGX,cAAc,CAAEK,KAAK,EAAEK,GAAI,CAAC;IAE5C,IAAK,CAAEC,OAAO,IAAIP,KAAK,KAAKO,OAAO,CAACC,IAAI,EAAG;MAC1CL,QAAQ,GAAIM,SAAU,CAAC;IACxB,CAAC,MAAM,IAAK,OAAON,QAAQ,KAAK,UAAU,EAAG;MAC5CA,QAAQ,CAAEI,OAAO,CAACC,IAAK,CAAC;IACzB;EACD,CAAC;EAEF,MAAME,oBAAoB,GAAKC,QAAgB,IAAM;IACpD,MAAMC,OAAO,GAAGD,QAAQ,CAACE,GAAG,CAAE,CAAE;MAAEC,IAAI;MAAEN;IAAK,CAAC,MAAQ;MACrDT,KAAK,EAAEe,IAAI;MACXd,KAAK,EAAEQ;IACR,CAAC,CAAG,CAAC;IAEL,OAAO,CACN;MACCT,KAAK,EAAEP,EAAE,CAAE,SAAU,CAAC;MACtBQ,KAAK,EAAE;IACR,CAAC,EACD,GAAGY,OAAO,CACV;EACF,CAAC;EAED,MAAMG,WAAW,GAChBC,aAAA,CAAAC,QAAA,QACGf,IAAI,IAAIc,aAAA,CAACvB,IAAI;IAACS,IAAI,EAAGA;EAAM,CAAE,CAAC,EAC9BH,KACD,CACF;EAED,OACCiB,aAAA,CAACtB,aAAa;IACbU,SAAS,EAAGb,UAAU,CACrBa,SAAS,EACT,gCACD,CAAG;IACHL,KAAK,EAAGgB,WAAa;IACrBG,mBAAmB,EAAG,KAAO;IAC7BlB,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGE,mBAAqB;IAChCO,OAAO,EAAGF,oBAAoB,CAAET,KAAM;EAAG,CACzC,CAAC;AAEJ;AAEA,eAAeJ,gBAAgB"}
+{"version":3,"names":["classnames","__","Icon","SelectControl","sizesTable","findSizeBySlug","DimensionControl","props","__next40pxDefaultSize","label","value","sizes","icon","onChange","className","onChangeSpacingSize","val","theSize","slug","undefined","formatSizesAsOptions","theSizes","options","map","name","selectLabel","createElement","Fragment","hideLabelFromVision"],"sources":["@wordpress/components/src/dimension-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\n\n/**\n * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n *\n * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.\n *\n * ```jsx\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n *\n * \treturn (\n * \t\t<DimensionControl\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\t__next40pxDefaultSize = false,\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize || value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'block-editor-dimension-control'\n\t\t\t) }\n\t\t\tlabel={ selectLabel }\n\t\t\thideLabelFromVision={ false }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeSpacingSize }\n\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t/>\n\t);\n}\n\nexport default DimensionControl;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,EAAE,QAAQ,iBAAiB;;AAEpC;AACA;AACA;AACA,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,UAAU,IAAIC,cAAc,QAAQ,SAAS;AAIpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAEC,KAA4B,EAAG;EAChE,MAAM;IACLC,qBAAqB,GAAG,KAAK;IAC7BC,KAAK;IACLC,KAAK;IACLC,KAAK,GAAGP,UAAU;IAClBQ,IAAI;IACJC,QAAQ;IACRC,SAAS,GAAG;EACb,CAAC,GAAGP,KAAK;EAET,MAAMQ,mBAAoE,GACvEC,GAAG,IAAM;IACV,MAAMC,OAAO,GAAGZ,cAAc,CAAEM,KAAK,EAAEK,GAAI,CAAC;IAE5C,IAAK,CAAEC,OAAO,IAAIP,KAAK,KAAKO,OAAO,CAACC,IAAI,EAAG;MAC1CL,QAAQ,GAAIM,SAAU,CAAC;IACxB,CAAC,MAAM,IAAK,OAAON,QAAQ,KAAK,UAAU,EAAG;MAC5CA,QAAQ,CAAEI,OAAO,CAACC,IAAK,CAAC;IACzB;EACD,CAAC;EAEF,MAAME,oBAAoB,GAAKC,QAAgB,IAAM;IACpD,MAAMC,OAAO,GAAGD,QAAQ,CAACE,GAAG,CAAE,CAAE;MAAEC,IAAI;MAAEN;IAAK,CAAC,MAAQ;MACrDT,KAAK,EAAEe,IAAI;MACXd,KAAK,EAAEQ;IACR,CAAC,CAAG,CAAC;IAEL,OAAO,CACN;MACCT,KAAK,EAAER,EAAE,CAAE,SAAU,CAAC;MACtBS,KAAK,EAAE;IACR,CAAC,EACD,GAAGY,OAAO,CACV;EACF,CAAC;EAED,MAAMG,WAAW,GAChBC,aAAA,CAAAC,QAAA,QACGf,IAAI,IAAIc,aAAA,CAACxB,IAAI;IAACU,IAAI,EAAGA;EAAM,CAAE,CAAC,EAC9BH,KACD,CACF;EAED,OACCiB,aAAA,CAACvB,aAAa;IACbK,qBAAqB,EAAGA,qBAAuB;IAC/CM,SAAS,EAAGd,UAAU,CACrBc,SAAS,EACT,gCACD,CAAG;IACHL,KAAK,EAAGgB,WAAa;IACrBG,mBAAmB,EAAG,KAAO;IAC7BlB,KAAK,EAAGA,KAAO;IACfG,QAAQ,EAAGE,mBAAqB;IAChCO,OAAO,EAAGF,oBAAoB,CAAET,KAAM;EAAG,CACzC,CAAC;AAEJ;AAEA,eAAeL,gBAAgB"}

package/build-module/dimension-control/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/dimension-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { IconType } from '../icon';\n\nexport type Size = {\n\t/**\n\t * Human-readable name of the size.\n\t */\n\tname: string;\n\t/**\n\t * Short unique identifying name of the size.\n\t */\n\tslug: string;\n};\n\nexport type DimensionControlProps = {\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * An array of sizes to choose from.\n\t *\n\t * @default DEFAULT_SIZES\n\t *\n\t * @see packages/components/src/dimension-control/sizes.ts\n\t */\n\tsizes?: Size[];\n\t/**\n\t * Optional icon rendered in front on the label.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Used to externally control the current value of the control.\n\t */\n\tvalue?: string;\n\t/**\n\t * Function called with the control's internal state changes. The `value` property is equal to a given size slug.\n\t */\n\tonChange?: ( value?: string ) => void;\n\t/**\n\t * CSS class applied to `SelectControl`.\n\t *\n\t * @default ''\n\t */\n\tclassName?: string;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/dimension-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { IconType } from '../icon';\n\nexport type Size = {\n\t/**\n\t * Human-readable name of the size.\n\t */\n\tname: string;\n\t/**\n\t * Short unique identifying name of the size.\n\t */\n\tslug: string;\n};\n\nexport type DimensionControlProps = {\n\t/**\n\t * Label for the control.\n\t */\n\tlabel: string;\n\t/**\n\t * An array of sizes to choose from.\n\t *\n\t * @default DEFAULT_SIZES\n\t *\n\t * @see packages/components/src/dimension-control/sizes.ts\n\t */\n\tsizes?: Size[];\n\t/**\n\t * Optional icon rendered in front on the label.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Used to externally control the current value of the control.\n\t */\n\tvalue?: string;\n\t/**\n\t * Function called with the control's internal state changes. The `value` property is equal to a given size slug.\n\t */\n\tonChange?: ( value?: string ) => void;\n\t/**\n\t * CSS class applied to `SelectControl`.\n\t *\n\t * @default ''\n\t */\n\tclassName?: string;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n"],"mappings":""}

package/build-module/dropdown-menu-v2-ariakit/index.js

@@ -31,9 +31,10 @@ export const DropdownMenuItem = forwardRef(function DropdownMenuItem({
   return createElement(Styled.DropdownMenuItem, {
     ref: ref,
     ...props,
+    accessibleWhenDisabled: true,
     hideOnClick: hideOnClick,
     store: dropdownMenuContext?.store
-  }, prefix && createElement(Styled.ItemPrefixWrapper, null, prefix), children, suffix && createElement(Styled.ItemSuffixWrapper, null, suffix));
+  }, createElement(Styled.ItemPrefixWrapper, null, prefix), createElement(Styled.DropdownMenuItemContentWrapper, null, createElement(Styled.DropdownMenuItemChildrenWrapper, null, children), suffix && createElement(Styled.ItemSuffixWrapper, null, suffix)));
 });
 export const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem({
   suffix,
@@ -45,15 +46,22 @@ export const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckbox
   return createElement(Styled.DropdownMenuCheckboxItem, {
     ref: ref,
     ...props,
+    accessibleWhenDisabled: true,
     hideOnClick: hideOnClick,
     store: dropdownMenuContext?.store
   }, createElement(Ariakit.MenuItemCheck, {
     store: dropdownMenuContext?.store,
     render: createElement(Styled.ItemPrefixWrapper, null)
+    // Override some ariakit inline styles
+    ,
+    style: {
+      width: 'auto',
+      height: 'auto'
+    }
   }, createElement(Icon, {
     icon: check,
     size: 24
-  })), children, suffix && createElement(Styled.ItemSuffixWrapper, null, suffix));
+  })), createElement(Styled.DropdownMenuItemContentWrapper, null, createElement(Styled.DropdownMenuItemChildrenWrapper, null, children), suffix && createElement(Styled.ItemSuffixWrapper, null, suffix)));
 });
 const radioCheck = createElement(SVG, {
   xmlns: "http://www.w3.org/2000/svg",
@@ -73,15 +81,22 @@ export const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem({
   return createElement(Styled.DropdownMenuRadioItem, {
     ref: ref,
     ...props,
+    accessibleWhenDisabled: true,
     hideOnClick: hideOnClick,
     store: dropdownMenuContext?.store
   }, createElement(Ariakit.MenuItemCheck, {
     store: dropdownMenuContext?.store,
     render: createElement(Styled.ItemPrefixWrapper, null)
+    // Override some ariakit inline styles
+    ,
+    style: {
+      width: 'auto',
+      height: 'auto'
+    }
   }, createElement(Icon, {
     icon: radioCheck,
     size: 24
-  })), children, suffix);
+  })), createElement(Styled.DropdownMenuItemContentWrapper, null, createElement(Styled.DropdownMenuItemChildrenWrapper, null, children), suffix && createElement(Styled.ItemSuffixWrapper, null, suffix)));
 });
 export const DropdownMenuGroup = forwardRef(function DropdownMenuGroup(props, ref) {
   const dropdownMenuContext = useContext(DropdownMenuContext);
@@ -91,16 +106,8 @@ export const DropdownMenuGroup = forwardRef(function DropdownMenuGroup(props, re
     store: dropdownMenuContext?.store
   });
 });
-export const DropdownMenuGroupLabel = forwardRef(function DropdownMenuGroupLabel(props, ref) {
-  const dropdownMenuContext = useContext(DropdownMenuContext);
-  return createElement(Styled.DropdownMenuGroupLabel, {
-    ref: ref,
-    ...props,
-    store: dropdownMenuContext?.store
-  });
-});
 const UnconnectedDropdownMenu = (props, ref) => {
-  var _props$placement, _trigger$props$suffix;
+  var _props$placement;
   const {
     // Store props
     open,
@@ -174,18 +181,25 @@ const UnconnectedDropdownMenu = (props, ref) => {
     store: dropdownMenuStore,
     render: dropdownMenuStore.parent ? cloneElement(trigger, {
       // Add submenu arrow, unless a `suffix` is explicitly specified
-      suffix: (_trigger$props$suffix = trigger.props.suffix) !== null && _trigger$props$suffix !== void 0 ? _trigger$props$suffix : createElement(Styled.SubmenuChevronIcon, {
+      suffix: createElement(Fragment, null, trigger.props.suffix, createElement(Styled.SubmenuChevronIcon, {
         "aria-hidden": "true",
         icon: chevronRightSmall,
-        size: 24
-      })
+        size: 24,
+        preserveAspectRatio: "xMidYMid slice"
+      }))
     }) : trigger
   }), createElement(Styled.DropdownMenu, {
     ...otherProps,
     modal: modal,
-    store: dropdownMenuStore,
-    gutter: gutter !== null && gutter !== void 0 ? gutter : dropdownMenuStore.parent ? 16 : 8,
-    shift: shift !== null && shift !== void 0 ? shift : dropdownMenuStore.parent ? -8 : 0,
+    store: dropdownMenuStore
+    // Root menu has an 8px distance from its trigger,
+    // otherwise 0 (which causes the submenu to slightly overlap)
+    ,
+    gutter: gutter !== null && gutter !== void 0 ? gutter : dropdownMenuStore.parent ? 0 : 8
+    // Align nested menu by the same (but opposite) amount
+    // as the menu container's padding.
+    ,
+    shift: shift !== null && shift !== void 0 ? shift : dropdownMenuStore.parent ? -4 : 0,
     hideOnHoverOutside: false,
     "data-side": appliedPlacementSide,
     variant: variant,
@@ -206,4 +220,18 @@ export const DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator(p
     variant: dropdownMenuContext?.variant
   });
 });
+export const DropdownMenuItemLabel = forwardRef(function DropdownMenuItemLabel(props, ref) {
+  return createElement(Styled.DropdownMenuItemLabel, {
+    numberOfLines: 1,
+    ref: ref,
+    ...props
+  });
+});
+export const DropdownMenuItemHelpText = forwardRef(function DropdownMenuItemHelpText(props, ref) {
+  return createElement(Styled.DropdownMenuItemHelpText, {
+    numberOfLines: 2,
+    ref: ref,
+    ...props
+  });
+});
 //# sourceMappingURL=index.js.map