@wordpress/components 19.13.0 → 19.16.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/border-control/styles.ts"],"names":["labelStyles","focusBoxShadow","css","CONFIG","borderWidth","COLORS","ui","borderFocus","borderControl","innerWrapper","UnitControlWrapper","marginLeft","UnitSelect","borderRadius","marginRight","wrapperWidth","width","wrapperHeight","__next36pxDefaultSize","borderControlDropdown","border","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","borderControlPopover","borderControlPopoverControls","StyledLabel","borderControlPopoverContent","borderColorIndicator","resetButton","borderWidthControl","BackdropUI","borderTopLeftRadius","borderBottomLeftRadius","paddingRight","borderControlStylePicker","borderStyleButton","borderSlider","StyledField"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\nimport {\n\tStyledField,\n\tStyledLabel,\n} from '../base-control/styles/base-control-styles';\nimport { BackdropUI } from '../input-control/styles/input-control-styles';\nimport {\n\tRoot 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 0 0 0 ${ CONFIG.borderWidth } ${ COLORS.ui.borderFocus };\n`;\n\nexport const borderControl = css`\n\tposition: relative;\n`;\n\nexport const innerWrapper = () => css`\n\tflex: 1 0 40%;\n\n\t/*\n\t * Needs more thought. Aim is to prevent the border for BorderBoxControl\n\t * showing through the control. Likely needs to take into account\n\t * light/dark themes etc.\n\t */\n\tbackground: #fff;\n\n\t/*\n\t * Forces the width control to fill available space given UnitControl\n\t * passes its className directly through to the input.\n\t */\n\t${ UnitControlWrapper } {\n\t\tflex: 1;\n\t\t${ rtl( { marginLeft: -1 } )() }\n\t}\n\n\t&& ${ UnitSelect } {\n\t\t/* Prevent default styles forcing heights larger than BorderControl */\n\t\tmin-height: 0;\n\t\t${ rtl(\n\t\t\t{\n\t\t\t\tborderRadius: '0 1px 1px 0',\n\t\t\t\tmarginRight: 0,\n\t\t\t},\n\t\t\t{\n\t\t\t\tborderRadius: '1px 0 0 1px',\n\t\t\t\tmarginLeft: 0,\n\t\t\t}\n\t\t)() }\n\t\ttransition: box-shadow 0.1s linear, border 0.1s linear;\n\n\t\t&:focus {\n\t\t\tz-index: 1;\n\t\t\t${ focusBoxShadow }\n\t\t\tborder: 1px solid ${ COLORS.ui.borderFocus };\n\t\t}\n\t}\n`;\n\nexport const wrapperWidth = ( width: CSSProperties[ 'width' ] ) => {\n\treturn css`\n\t\twidth: ${ width };\n\t\tflex: 0 0 auto;\n\t`;\n};\n\n/*\n * When default control height is 36px the following should be removed.\n * See: InputControl and __next36pxDefaultSize.\n */\nexport const wrapperHeight = ( __next36pxDefaultSize?: boolean ) => {\n\treturn css`\n\t\theight: ${ __next36pxDefaultSize ? '36px' : '30px' };\n\t`;\n};\n\nexport const borderControlDropdown = () => css`\n\tbackground: #fff;\n\n\t&& > button {\n\t\t/*\n\t\t * Override button component height and padding to fit within\n\t\t * BorderControl\n\t\t */\n\t\theight: 100%;\n\t\tpadding: ${ space( 0.75 ) };\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\t\tposition: relative;\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\t__next36pxDefaultSize?: boolean\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: ${ __next36pxDefaultSize ? '28px' : '22px' };\n\t\theight: ${ __next36pxDefaultSize ? '28px' : '22px' };\n\t\tpadding: ${ __next36pxDefaultSize ? '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\t${ ! __next36pxDefaultSize\n\t\t\t\t? css`\n\t\t\t\t\t\t/* Dimensions fit in 30px overall control height. */\n\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\twidth: 16px;\n\t\t\t\t  `\n\t\t\t\t: '' }\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\nexport const borderControlPopover = css`\n\t/* Remove padding from content, this will be re-added via inner elements*/\n\t&& .components-popover__content {\n\t\tpadding: 0;\n\t\twidth: 264px;\n\t}\n`;\n\nexport const borderControlPopoverControls = css`\n\tpadding: ${ space( 2 ) };\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[ 200 ] };\n\t\theight: 46px;\n\t}\n`;\n\nexport const borderWidthControl = () => css`\n\t/* Target the InputControl's backdrop */\n\t&&& ${ BackdropUI } {\n\t\t${ rtl( {\n\t\t\tborderTopLeftRadius: 0,\n\t\t\tborderBottomLeftRadius: 0,\n\t\t} )() }\n\t\ttransition: box-shadow 0.1s linear;\n\t}\n\n\t/* Specificity required to overcome UnitControl padding */\n\t/* See packages/components/src/unit-control/styles/unit-control-styles.ts */\n\t&&& input {\n\t\t${ rtl( { paddingRight: 0 } )() }\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: 30px;\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\tpadding: 3px;\n\t}\n`;\n\nexport const borderSlider = () => css`\n\tflex: 1 1 60%;\n\t${ rtl( { marginRight: space( 3 ) } )() }\n\n\t${ StyledField } {\n\t\tmargin-bottom: 0;\n\t\tfont-size: 0;\n\t\tdisplay: flex;\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/border-control/styles.ts"],"names":["labelStyles","focusBoxShadow","css","CONFIG","borderWidth","COLORS","ui","borderFocus","borderControl","innerWrapper","UnitControlWrapper","UnitSelect","wrapperWidth","wrapperHeight","__next36pxDefaultSize","borderControlDropdown","borderRadius","border","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","swatchSize","swatchGap","borderControlPopoverControls","StyledLabel","borderControlPopoverContent","borderColorIndicator","resetButton","borderControlStylePicker","borderStyleButton","borderSlider","marginRight","StyledField"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../utils';\nimport { space } from '../ui/utils/space';\nimport {\n\tStyledField,\n\tStyledLabel,\n} from '../base-control/styles/base-control-styles';\nimport {\n\tRoot 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 0 0 0 ${ CONFIG.borderWidth } ${ COLORS.ui.borderFocus };\n`;\n\nexport const borderControl = css`\n\tborder: 0;\n\tpadding: 0;\n\tmargin: 0;\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\n/*\n * When default control height is 36px the following should be removed.\n * See: InputControl and __next36pxDefaultSize.\n */\nexport const wrapperHeight = ( __next36pxDefaultSize?: boolean ) => {\n\treturn css`\n\t\theight: ${ __next36pxDefaultSize ? '36px' : '30px' };\n\t`;\n};\n\nexport const borderControlDropdown = () => css`\n\tbackground: #fff;\n\n\t&& > button {\n\t\t/*\n\t\t * Override button component height and padding to fit within\n\t\t * BorderControl regardless of size.\n\t\t */\n\t\theight: 100%;\n\t\tpadding: ${ space( 0.75 ) };\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\t__next36pxDefaultSize?: boolean\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: ${ __next36pxDefaultSize ? '28px' : '22px' };\n\t\theight: ${ __next36pxDefaultSize ? '28px' : '22px' };\n\t\tpadding: ${ __next36pxDefaultSize ? '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\t${ ! __next36pxDefaultSize\n\t\t\t\t? css`\n\t\t\t\t\t\t/* Dimensions fit in 30px overall control height. */\n\t\t\t\t\t\theight: 16px;\n\t\t\t\t\t\twidth: 16px;\n\t\t\t\t  `\n\t\t\t\t: '' }\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[ 200 ] };\n\t\tborder-top-left-radius: 0;\n\t\tborder-top-right-radius: 0;\n\t\theight: 46px;\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: 30px;\n\t\twidth: 30px;\n\t\theight: 30px;\n\t\tpadding: 3px;\n\t}\n`;\n\nexport const borderSlider = () => css`\n\tflex: 1 1 60%;\n\t${ rtl( { marginRight: space( 3 ) } )() }\n\n\t${ StyledField } {\n\t\tmargin-bottom: 0;\n\t\tfont-size: 0;\n\t\tdisplay: flex;\n\t}\n`;\n"]}

package/build/box-control/axial-input-controls.js

@@ -131,7 +131,7 @@ function AxialInputControls(_ref) {
   const filteredSides = sides !== null && sides !== void 0 && sides.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
   const first = filteredSides[0];
   const last = filteredSides[filteredSides.length - 1];
-  const only = first === last;
+  const only = first === last && first;
   return (0, _element.createElement)(_boxControlStyles.Layout, {
     gap: 0,
     align: "top",

package/build/box-control/axial-input-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/axial-input-controls.js"],"names":["groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","isNaN","parseFloat","nextValue","undefined","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","selectedUnit","join","LABELS"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport UnitControl from './unit-control';\nimport { LABELS } from './utils';\nimport { Layout } from './styles/box-control-styles';\n\nconst groupedSides = [ 'vertical', 'horizontal' ];\n\nexport default function AxialInputControls( {\n\tonChange,\n\tonFocus,\n\tonHoverOn,\n\tonHoverOff,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n} ) {\n\tconst createHandleOnFocus = ( side ) => ( event ) => {\n\t\tif ( ! onFocus ) {\n\t\t\treturn;\n\t\t}\n\t\tonFocus( event, { side } );\n\t};\n\n\tconst createHandleOnHoverOn = ( side ) => () => {\n\t\tif ( ! onHoverOn ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOn( {\n\t\t\t\ttop: true,\n\t\t\t\tbottom: true,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOn( {\n\t\t\t\tleft: true,\n\t\t\t\tright: true,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnHoverOff = ( side ) => () => {\n\t\tif ( ! onHoverOff ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOff( {\n\t\t\t\ttop: false,\n\t\t\t\tbottom: false,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOff( {\n\t\t\t\tleft: false,\n\t\t\t\tright: false,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange = ( side ) => ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnewUnits.top = next;\n\t\t\tnewUnits.bottom = next;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnewUnits.left = next;\n\t\t\tnewUnits.right = next;\n\t\t}\n\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last;\n\n\treturn (\n\t\t<Layout\n\t\t\tgap={ 0 }\n\t\t\talign=\"top\"\n\t\t\tclassName=\"component-box-control__vertical-horizontal-input-controls\"\n\t\t>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\t\t\t\treturn (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Layout>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/axial-input-controls.js"],"names":["groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","isNaN","parseFloat","nextValue","undefined","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","selectedUnit","join","LABELS"],"mappings":"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","sourcesContent":["/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport UnitControl from './unit-control';\nimport { LABELS } from './utils';\nimport { Layout } from './styles/box-control-styles';\n\nconst groupedSides = [ 'vertical', 'horizontal' ];\n\nexport default function AxialInputControls( {\n\tonChange,\n\tonFocus,\n\tonHoverOn,\n\tonHoverOff,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n} ) {\n\tconst createHandleOnFocus = ( side ) => ( event ) => {\n\t\tif ( ! onFocus ) {\n\t\t\treturn;\n\t\t}\n\t\tonFocus( event, { side } );\n\t};\n\n\tconst createHandleOnHoverOn = ( side ) => () => {\n\t\tif ( ! onHoverOn ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOn( {\n\t\t\t\ttop: true,\n\t\t\t\tbottom: true,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOn( {\n\t\t\t\tleft: true,\n\t\t\t\tright: true,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnHoverOff = ( side ) => () => {\n\t\tif ( ! onHoverOff ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOff( {\n\t\t\t\ttop: false,\n\t\t\t\tbottom: false,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOff( {\n\t\t\t\tleft: false,\n\t\t\t\tright: false,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnChange = ( side ) => ( next ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange = ( side ) => ( next ) => {\n\t\tconst newUnits = { ...selectedUnits };\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnewUnits.top = next;\n\t\t\tnewUnits.bottom = next;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnewUnits.left = next;\n\t\t\tnewUnits.right = next;\n\t\t}\n\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last && first;\n\n\treturn (\n\t\t<Layout\n\t\t\tgap={ 0 }\n\t\t\talign=\"top\"\n\t\t\tclassName=\"component-box-control__vertical-horizontal-input-controls\"\n\t\t>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\t\t\t\treturn (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Layout>\n\t);\n}\n"]}

package/build/box-control/index.js

@@ -128,7 +128,7 @@ function BoxControl(_ref) {
   };
   return (0, _element.createElement)(_boxControlStyles.Root, {
     id: id,
-    role: "region",
+    role: "group",
     "aria-labelledby": headingId
   }, (0, _element.createElement)(_boxControlStyles.Header, {
     className: "component-box-control__header"

package/build/box-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/index.js"],"names":["defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport { Text } from '../text';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\nexport default function BoxControl( {\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n} ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = ( event, { side: nextSide } ) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t};\n\n\treturn (\n\t\t<Root id={ id } role=\"region\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Text\n\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\tclassName=\"component-box-control__label\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Text>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tisSecondary\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/index.js"],"names":["defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport { Text } from '../text';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\nexport default function BoxControl( {\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n} ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = ( event, { side: nextSide } ) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t};\n\n\treturn (\n\t\t<Root id={ id } role=\"group\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Text\n\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\tclassName=\"component-box-control__label\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Text>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tisSecondary\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n"]}

package/build/box-control/utils.js

@@ -11,16 +11,10 @@ exports.isValuesDefined = isValuesDefined;
 exports.isValuesMixed = isValuesMixed;
 exports.normalizeSides = normalizeSides;
 
-var _lodash = require("lodash");
-
 var _i18n = require("@wordpress/i18n");
 
 var _utils = require("../unit-control/utils");
 
-/**
- * External dependencies
- */
-
 /**
  * WordPress dependencies
  */
@@ -85,18 +79,18 @@ function getAllValue() {
   const allParsedUnits = parsedQuantitiesAndUnits.map(value => value[1]);
   const commonQuantity = allParsedQuantities.every(v => v === allParsedQuantities[0]) ? allParsedQuantities[0] : '';
   /**
-   * The isNumber check is important. On reset actions, the incoming value
+   * The typeof === 'number' check is important. On reset actions, the incoming value
    * may be null or an empty string.
    *
    * Also, the value may also be zero (0), which is considered a valid unit value.
    *
-   * isNumber() is more specific for these cases, rather than relying on a
+   * typeof === 'number' is more specific for these cases, rather than relying on a
    * simple truthy check.
    */
 
   let commonUnit;
 
-  if ((0, _lodash.isNumber)(commonQuantity)) {
+  if (typeof commonQuantity === 'number') {
     commonUnit = mode(allParsedUnits);
   } else {
     var _getAllUnitFallback;
@@ -153,10 +147,10 @@ function isValuesMixed() {
 
 
 function isValuesDefined(values) {
-  return values !== undefined && !(0, _lodash.isEmpty)(Object.values(values).filter( // Switching units when input is empty causes values only
+  return values !== undefined && Object.values(values).filter( // Switching units when input is empty causes values only
   // containing units. This gives false positive on mixed values
   // unless filtered.
-  value => !!value && /\d/.test(value)));
+  value => !!value && /\d/.test(value)).length > 0;
 }
 /**
  * Get initial selected side, factoring in whether the sides are linked,

package/build/box-control/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/utils.js"],"names":["LABELS","all","top","bottom","left","right","mixed","vertical","horizontal","DEFAULT_VALUES","undefined","ALL_SIDES","mode","arr","sort","a","b","filter","v","length","pop","getAllValue","values","selectedUnits","availableSides","sides","normalizeSides","parsedQuantitiesAndUnits","map","side","allParsedQuantities","value","allParsedUnits","commonQuantity","every","commonUnit","getAllUnitFallback","join","filteredUnits","Object","Boolean","isValuesMixed","allValue","isMixed","isNaN","parseFloat","isValuesDefined","test","getInitialSide","isLinked","splitOnAxis","initialSide","filteredSides","includes","push","newSides"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGO,MAAMA,MAAM,GAAG;AACrBC,EAAAA,GAAG,EAAE,cAAI,KAAJ,CADgB;AAErBC,EAAAA,GAAG,EAAE,cAAI,KAAJ,CAFgB;AAGrBC,EAAAA,MAAM,EAAE,cAAI,QAAJ,CAHa;AAIrBC,EAAAA,IAAI,EAAE,cAAI,MAAJ,CAJe;AAKrBC,EAAAA,KAAK,EAAE,cAAI,OAAJ,CALc;AAMrBC,EAAAA,KAAK,EAAE,cAAI,OAAJ,CANc;AAOrBC,EAAAA,QAAQ,EAAE,cAAI,UAAJ,CAPW;AAQrBC,EAAAA,UAAU,EAAE,cAAI,YAAJ;AARS,CAAf;;AAWA,MAAMC,cAAc,GAAG;AAC7BP,EAAAA,GAAG,EAAEQ,SADwB;AAE7BL,EAAAA,KAAK,EAAEK,SAFsB;AAG7BP,EAAAA,MAAM,EAAEO,SAHqB;AAI7BN,EAAAA,IAAI,EAAEM;AAJuB,CAAvB;;AAOA,MAAMC,SAAS,GAAG,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,CAAlB;AAEP;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACA,SAASC,IAAT,CAAeC,GAAf,EAAqB;AACpB,SAAOA,GAAG,CACRC,IADK,CAEL,CAAEC,CAAF,EAAKC,CAAL,KACCH,GAAG,CAACI,MAAJ,CAAcC,CAAF,IAASA,CAAC,KAAKH,CAA3B,EAA+BI,MAA/B,GACAN,GAAG,CAACI,MAAJ,CAAcC,CAAF,IAASA,CAAC,KAAKF,CAA3B,EAA+BG,MAJ3B,EAMLC,GANK,EAAP;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,WAAT,GAIL;AAAA,MAHDC,MAGC,uEAHQ,EAGR;AAAA,MAFDC,aAEC;AAAA,MADDC,cACC,uEADgBb,SAChB;AACD,QAAMc,KAAK,GAAGC,cAAc,CAAEF,cAAF,CAA5B;AACA,QAAMG,wBAAwB,GAAGF,KAAK,CAACG,GAAN,CAAaC,IAAF,IAC3C,6CAAkCP,MAAM,CAAEO,IAAF,CAAxC,CADgC,CAAjC;AAGA,QAAMC,mBAAmB,GAAGH,wBAAwB,CAACC,GAAzB,CACzBG,KAAF;AAAA;;AAAA,sBAAaA,KAAK,CAAE,CAAF,CAAlB,6CAA2B,EAA3B;AAAA,GAD2B,CAA5B;AAGA,QAAMC,cAAc,GAAGL,wBAAwB,CAACC,GAAzB,CACpBG,KAAF,IAAaA,KAAK,CAAE,CAAF,CADI,CAAvB;AAIA,QAAME,cAAc,GAAGH,mBAAmB,CAACI,KAApB,CACpBhB,CAAF,IAASA,CAAC,KAAKY,mBAAmB,CAAE,CAAF,CADZ,IAGpBA,mBAAmB,CAAE,CAAF,CAHC,GAIpB,EAJH;AAMA;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACC,MAAIK,UAAJ;;AACA,MAAK,sBAAUF,cAAV,CAAL,EAAkC;AACjCE,IAAAA,UAAU,GAAGvB,IAAI,CAAEoB,cAAF,CAAjB;AACA,GAFD,MAEO;AAAA;;AACN;AACA;AACAG,IAAAA,UAAU,0BACTC,kBAAkB,CAAEb,aAAF,CADT,qEAC8BX,IAAI,CAAEoB,cAAF,CAD5C;AAEA;;AAED,SAAO,CAAEC,cAAF,EAAkBE,UAAlB,EAA+BE,IAA/B,CAAqC,EAArC,CAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASD,kBAAT,CAA6Bb,aAA7B,EAA6C;AACnD,MAAK,CAAEA,aAAF,IAAmB,OAAOA,aAAP,KAAyB,QAAjD,EAA4D;AAC3D,WAAOb,SAAP;AACA;;AAED,QAAM4B,aAAa,GAAGC,MAAM,CAACjB,MAAP,CAAeC,aAAf,EAA+BN,MAA/B,CAAuCuB,OAAvC,CAAtB;AAEA,SAAO5B,IAAI,CAAE0B,aAAF,CAAX;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,aAAT,GAAwE;AAAA,MAAhDnB,MAAgD,uEAAvC,EAAuC;AAAA,MAAnCC,aAAmC;AAAA,MAApBE,KAAoB,uEAAZd,SAAY;AAC9E,QAAM+B,QAAQ,GAAGrB,WAAW,CAAEC,MAAF,EAAUC,aAAV,EAAyBE,KAAzB,CAA5B;AACA,QAAMkB,OAAO,GAAGC,KAAK,CAAEC,UAAU,CAAEH,QAAF,CAAZ,CAArB;AAEA,SAAOC,OAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,eAAT,CAA0BxB,MAA1B,EAAmC;AACzC,SACCA,MAAM,KAAKZ,SAAX,IACA,CAAE,qBACD6B,MAAM,CAACjB,MAAP,CAAeA,MAAf,EAAwBL,MAAxB,EACC;AACA;AACA;AACEc,EAAAA,KAAF,IAAa,CAAC,CAAEA,KAAH,IAAY,KAAKgB,IAAL,CAAWhB,KAAX,CAJ1B,CADC,CAFH;AAWA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASiB,cAAT,CAAyBC,QAAzB,EAAmCC,WAAnC,EAAiD;AACvD,MAAIC,WAAW,GAAG,KAAlB;;AAEA,MAAK,CAAEF,QAAP,EAAkB;AACjBE,IAAAA,WAAW,GAAGD,WAAW,GAAG,UAAH,GAAgB,KAAzC;AACA;;AAED,SAAOC,WAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASzB,cAAT,CAAyBD,KAAzB,EAAiC;AACvC,QAAM2B,aAAa,GAAG,EAAtB;;AAEA,MAAK,EAAE3B,KAAF,aAAEA,KAAF,eAAEA,KAAK,CAAEN,MAAT,CAAL,EAAuB;AACtB,WAAOR,SAAP;AACA;;AAED,MAAKc,KAAK,CAAC4B,QAAN,CAAgB,UAAhB,CAAL,EAAoC;AACnCD,IAAAA,aAAa,CAACE,IAAd,CAAoB,GAAG,CAAE,KAAF,EAAS,QAAT,CAAvB;AACA,GAFD,MAEO,IAAK7B,KAAK,CAAC4B,QAAN,CAAgB,YAAhB,CAAL,EAAsC;AAC5CD,IAAAA,aAAa,CAACE,IAAd,CAAoB,GAAG,CAAE,MAAF,EAAU,OAAV,CAAvB;AACA,GAFM,MAEA;AACN,UAAMC,QAAQ,GAAG5C,SAAS,CAACM,MAAV,CAAoBY,IAAF,IAAYJ,KAAK,CAAC4B,QAAN,CAAgBxB,IAAhB,CAA9B,CAAjB;AACAuB,IAAAA,aAAa,CAACE,IAAd,CAAoB,GAAGC,QAAvB;AACA;;AAED,SAAOH,aAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty, isNumber } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\n\nexport const LABELS = {\n\tall: __( 'All' ),\n\ttop: __( 'Top' ),\n\tbottom: __( 'Bottom' ),\n\tleft: __( 'Left' ),\n\tright: __( 'Right' ),\n\tmixed: __( 'Mixed' ),\n\tvertical: __( 'Vertical' ),\n\thorizontal: __( 'Horizontal' ),\n};\n\nexport const DEFAULT_VALUES = {\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param {Array<any>} arr Array of items to check.\n * @return {any} The item with the most occurrences.\n */\nfunction mode( arr ) {\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tarr.filter( ( v ) => v === a ).length -\n\t\t\t\tarr.filter( ( v ) => v === b ).length\n\t\t)\n\t\t.pop();\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object} values         Box values.\n * @param {Object} selectedUnits  Box units.\n * @param {Array}  availableSides Available box sides to evaluate.\n *\n * @return {string} A value + unit for the 'all' input.\n */\nexport function getAllValue(\n\tvalues = {},\n\tselectedUnits,\n\tavailableSides = ALL_SIDES\n) {\n\tconst sides = normalizeSides( availableSides );\n\tconst parsedQuantitiesAndUnits = sides.map( ( side ) =>\n\t\tparseQuantityAndUnitFromRawValue( values[ side ] )\n\t);\n\tconst allParsedQuantities = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allParsedUnits = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 1 ]\n\t);\n\n\tconst commonQuantity = allParsedQuantities.every(\n\t\t( v ) => v === allParsedQuantities[ 0 ]\n\t)\n\t\t? allParsedQuantities[ 0 ]\n\t\t: '';\n\n\t/**\n\t * The isNumber check is important. On reset actions, the incoming value\n\t * may be null or an empty string.\n\t *\n\t * Also, the value may also be zero (0), which is considered a valid unit value.\n\t *\n\t * isNumber() is more specific for these cases, rather than relying on a\n\t * simple truthy check.\n\t */\n\tlet commonUnit;\n\tif ( isNumber( commonQuantity ) ) {\n\t\tcommonUnit = mode( allParsedUnits );\n\t} else {\n\t\t// Set meaningful unit selection if no commonQuantity and user has previously\n\t\t// selected units without assigning values while controls were unlinked.\n\t\tcommonUnit =\n\t\t\tgetAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );\n\t}\n\n\treturn [ commonQuantity, commonUnit ].join( '' );\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param {Object} selectedUnits Current unit selections for individual sides.\n * @return {string} Most common unit selection.\n */\nexport function getAllUnitFallback( selectedUnits ) {\n\tif ( ! selectedUnits || typeof selectedUnits !== 'object' ) {\n\t\treturn undefined;\n\t}\n\n\tconst filteredUnits = Object.values( selectedUnits ).filter( Boolean );\n\n\treturn mode( filteredUnits );\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values        Box values.\n * @param {Object} selectedUnits Box units.\n * @param {Array}  sides         Available box sides to evaluate.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst isMixed = isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Box values.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesDefined( values ) {\n\treturn (\n\t\tvalues !== undefined &&\n\t\t! isEmpty(\n\t\t\tObject.values( values ).filter(\n\t\t\t\t// Switching units when input is empty causes values only\n\t\t\t\t// containing units. This gives false positive on mixed values\n\t\t\t\t// unless filtered.\n\t\t\t\t( value ) => !! value && /\\d/.test( value )\n\t\t\t)\n\t\t)\n\t);\n}\n\n/**\n * Get initial selected side, factoring in whether the sides are linked,\n * and whether the vertical / horizontal directions are grouped via splitOnAxis.\n *\n * @param {boolean} isLinked    Whether the box control's fields are linked.\n * @param {boolean} splitOnAxis Whether splitting by horizontal or vertical axis.\n * @return {string} The initial side.\n */\nexport function getInitialSide( isLinked, splitOnAxis ) {\n\tlet initialSide = 'all';\n\n\tif ( ! isLinked ) {\n\t\tinitialSide = splitOnAxis ? 'vertical' : 'top';\n\t}\n\n\treturn initialSide;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param {Array} sides Available sides for box control.\n * @return {Array} Normalized sides configuration.\n */\nexport function normalizeSides( sides ) {\n\tconst filteredSides = [];\n\n\tif ( ! sides?.length ) {\n\t\treturn ALL_SIDES;\n\t}\n\n\tif ( sides.includes( 'vertical' ) ) {\n\t\tfilteredSides.push( ...[ 'top', 'bottom' ] );\n\t} else if ( sides.includes( 'horizontal' ) ) {\n\t\tfilteredSides.push( ...[ 'left', 'right' ] );\n\t} else {\n\t\tconst newSides = ALL_SIDES.filter( ( side ) => sides.includes( side ) );\n\t\tfilteredSides.push( ...newSides );\n\t}\n\n\treturn filteredSides;\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/utils.js"],"names":["LABELS","all","top","bottom","left","right","mixed","vertical","horizontal","DEFAULT_VALUES","undefined","ALL_SIDES","mode","arr","sort","a","b","filter","v","length","pop","getAllValue","values","selectedUnits","availableSides","sides","normalizeSides","parsedQuantitiesAndUnits","map","side","allParsedQuantities","value","allParsedUnits","commonQuantity","every","commonUnit","getAllUnitFallback","join","filteredUnits","Object","Boolean","isValuesMixed","allValue","isMixed","isNaN","parseFloat","isValuesDefined","test","getInitialSide","isLinked","splitOnAxis","initialSide","filteredSides","includes","push","newSides"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\n\nexport const LABELS = {\n\tall: __( 'All' ),\n\ttop: __( 'Top' ),\n\tbottom: __( 'Bottom' ),\n\tleft: __( 'Left' ),\n\tright: __( 'Right' ),\n\tmixed: __( 'Mixed' ),\n\tvertical: __( 'Vertical' ),\n\thorizontal: __( 'Horizontal' ),\n};\n\nexport const DEFAULT_VALUES = {\n\ttop: undefined,\n\tright: undefined,\n\tbottom: undefined,\n\tleft: undefined,\n};\n\nexport const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];\n\n/**\n * Gets an items with the most occurrence within an array\n * https://stackoverflow.com/a/20762713\n *\n * @param {Array<any>} arr Array of items to check.\n * @return {any} The item with the most occurrences.\n */\nfunction mode( arr ) {\n\treturn arr\n\t\t.sort(\n\t\t\t( a, b ) =>\n\t\t\t\tarr.filter( ( v ) => v === a ).length -\n\t\t\t\tarr.filter( ( v ) => v === b ).length\n\t\t)\n\t\t.pop();\n}\n\n/**\n * Gets the 'all' input value and unit from values data.\n *\n * @param {Object} values         Box values.\n * @param {Object} selectedUnits  Box units.\n * @param {Array}  availableSides Available box sides to evaluate.\n *\n * @return {string} A value + unit for the 'all' input.\n */\nexport function getAllValue(\n\tvalues = {},\n\tselectedUnits,\n\tavailableSides = ALL_SIDES\n) {\n\tconst sides = normalizeSides( availableSides );\n\tconst parsedQuantitiesAndUnits = sides.map( ( side ) =>\n\t\tparseQuantityAndUnitFromRawValue( values[ side ] )\n\t);\n\tconst allParsedQuantities = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 0 ] ?? ''\n\t);\n\tconst allParsedUnits = parsedQuantitiesAndUnits.map(\n\t\t( value ) => value[ 1 ]\n\t);\n\n\tconst commonQuantity = allParsedQuantities.every(\n\t\t( v ) => v === allParsedQuantities[ 0 ]\n\t)\n\t\t? allParsedQuantities[ 0 ]\n\t\t: '';\n\n\t/**\n\t * The typeof === 'number' check is important. On reset actions, the incoming value\n\t * may be null or an empty string.\n\t *\n\t * Also, the value may also be zero (0), which is considered a valid unit value.\n\t *\n\t * typeof === 'number' is more specific for these cases, rather than relying on a\n\t * simple truthy check.\n\t */\n\tlet commonUnit;\n\tif ( typeof commonQuantity === 'number' ) {\n\t\tcommonUnit = mode( allParsedUnits );\n\t} else {\n\t\t// Set meaningful unit selection if no commonQuantity and user has previously\n\t\t// selected units without assigning values while controls were unlinked.\n\t\tcommonUnit =\n\t\t\tgetAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );\n\t}\n\n\treturn [ commonQuantity, commonUnit ].join( '' );\n}\n\n/**\n * Determine the most common unit selection to use as a fallback option.\n *\n * @param {Object} selectedUnits Current unit selections for individual sides.\n * @return {string} Most common unit selection.\n */\nexport function getAllUnitFallback( selectedUnits ) {\n\tif ( ! selectedUnits || typeof selectedUnits !== 'object' ) {\n\t\treturn undefined;\n\t}\n\n\tconst filteredUnits = Object.values( selectedUnits ).filter( Boolean );\n\n\treturn mode( filteredUnits );\n}\n\n/**\n * Checks to determine if values are mixed.\n *\n * @param {Object} values        Box values.\n * @param {Object} selectedUnits Box units.\n * @param {Array}  sides         Available box sides to evaluate.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst isMixed = isNaN( parseFloat( allValue ) );\n\n\treturn isMixed;\n}\n\n/**\n * Checks to determine if values are defined.\n *\n * @param {Object} values Box values.\n *\n * @return {boolean} Whether values are mixed.\n */\nexport function isValuesDefined( values ) {\n\treturn (\n\t\tvalues !== undefined &&\n\t\tObject.values( values ).filter(\n\t\t\t// Switching units when input is empty causes values only\n\t\t\t// containing units. This gives false positive on mixed values\n\t\t\t// unless filtered.\n\t\t\t( value ) => !! value && /\\d/.test( value )\n\t\t).length > 0\n\t);\n}\n\n/**\n * Get initial selected side, factoring in whether the sides are linked,\n * and whether the vertical / horizontal directions are grouped via splitOnAxis.\n *\n * @param {boolean} isLinked    Whether the box control's fields are linked.\n * @param {boolean} splitOnAxis Whether splitting by horizontal or vertical axis.\n * @return {string} The initial side.\n */\nexport function getInitialSide( isLinked, splitOnAxis ) {\n\tlet initialSide = 'all';\n\n\tif ( ! isLinked ) {\n\t\tinitialSide = splitOnAxis ? 'vertical' : 'top';\n\t}\n\n\treturn initialSide;\n}\n\n/**\n * Normalizes provided sides configuration to an array containing only top,\n * right, bottom and left. This essentially just maps `horizontal` or `vertical`\n * to their appropriate sides to facilitate correctly determining value for\n * all input control.\n *\n * @param {Array} sides Available sides for box control.\n * @return {Array} Normalized sides configuration.\n */\nexport function normalizeSides( sides ) {\n\tconst filteredSides = [];\n\n\tif ( ! sides?.length ) {\n\t\treturn ALL_SIDES;\n\t}\n\n\tif ( sides.includes( 'vertical' ) ) {\n\t\tfilteredSides.push( ...[ 'top', 'bottom' ] );\n\t} else if ( sides.includes( 'horizontal' ) ) {\n\t\tfilteredSides.push( ...[ 'left', 'right' ] );\n\t} else {\n\t\tconst newSides = ALL_SIDES.filter( ( side ) => sides.includes( side ) );\n\t\tfilteredSides.push( ...newSides );\n\t}\n\n\treturn filteredSides;\n}\n"]}

package/build/color-indicator/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ColorIndicator = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -13,25 +13,42 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-// @ts-nocheck
-
 /**
  * External dependencies
  */
-const ColorIndicator = _ref => {
-  let {
+
+/**
+ * WordPress dependencies
+ */
+function UnforwardedColorIndicator(props, forwardedRef) {
+  const {
     className,
     colorValue,
-    ...props
-  } = _ref;
+    ...additionalProps
+  } = props;
   return (0, _element.createElement)("span", (0, _extends2.default)({
     className: (0, _classnames.default)('component-color-indicator', className),
     style: {
       background: colorValue
-    }
-  }, props));
-};
+    },
+    ref: forwardedRef
+  }, additionalProps));
+}
+/**
+ * ColorIndicator is a React component that renders a specific color in a
+ * circle. It's often used to summarize a collection of used colors in a child
+ * component.
+ *
+ * ```jsx
+ * import { ColorIndicator } from '@wordpress/components';
+ *
+ * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />;
+ * ```
+ */
+
 
+const ColorIndicator = (0, _element.forwardRef)(UnforwardedColorIndicator);
+exports.ColorIndicator = ColorIndicator;
 var _default = ColorIndicator;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/build/color-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-indicator/index.js"],"names":["ColorIndicator","className","colorValue","props","background"],"mappings":";;;;;;;;;;;;;AAKA;;AALA;;AAEA;AACA;AACA;AAGA,MAAMA,cAAc,GAAG;AAAA,MAAE;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,GAAF;AAAA,SACtB;AACC,IAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyCF,SAAzC,CADb;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd;AAFT,KAGMC,KAHN,EADsB;AAAA,CAAvB;;eAQeH,c","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nconst ColorIndicator = ( { className, colorValue, ...props } ) => (\n\t<span\n\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\tstyle={ { background: colorValue } }\n\t\t{ ...props }\n\t/>\n);\n\nexport default ColorIndicator;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-indicator/index.tsx"],"names":["UnforwardedColorIndicator","props","forwardedRef","className","colorValue","additionalProps","background","ColorIndicator"],"mappings":";;;;;;;;;AASA;;;;AANA;;AAHA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,yBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,UAAb;AAAyB,OAAGC;AAA5B,MAAgDJ,KAAtD;AAEA,SACC;AACC,IAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyCE,SAAzC,CADb;AAEC,IAAA,KAAK,EAAG;AAAEG,MAAAA,UAAU,EAAEF;AAAd,KAFT;AAGC,IAAA,GAAG,EAAGF;AAHP,KAIMG,eAJN,EADD;AAQA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAME,cAAc,GAAG,yBAAYP,yBAAZ,CAAvB;;eAEQO,c","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { ColorIndicatorProps } from './types';\n\nfunction UnforwardedColorIndicator(\n\tprops: WordPressComponentProps< ColorIndicatorProps, 'span', false >,\n\tforwardedRef: ForwardedRef< HTMLSpanElement >\n) {\n\tconst { className, colorValue, ...additionalProps } = props;\n\n\treturn (\n\t\t<span\n\t\t\tclassName={ classnames( 'component-color-indicator', className ) }\n\t\t\tstyle={ { background: colorValue } }\n\t\t\tref={ forwardedRef }\n\t\t\t{ ...additionalProps }\n\t\t/>\n\t);\n}\n\n/**\n * ColorIndicator is a React component that renders a specific color in a\n * circle. It's often used to summarize a collection of used colors in a child\n * component.\n *\n * ```jsx\n * import { ColorIndicator } from '@wordpress/components';\n *\n * const MyColorIndicator = () => <ColorIndicator colorValue=\"#0073aa\" />;\n * ```\n */\nexport const ColorIndicator = forwardRef( UnforwardedColorIndicator );\n\nexport default ColorIndicator;\n"]}

package/build/color-indicator/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/color-indicator/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/build/color-palette/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CustomColorPickerDropdown = CustomColorPickerDropdown;
 exports.default = ColorPalette;
-exports.extractColorNameFromCurrentValue = void 0;
+exports.showTransparentBackground = exports.extractColorNameFromCurrentValue = void 0;
 
 var _element = require("@wordpress/element");
 
@@ -133,7 +133,8 @@ function CustomColorPickerDropdown(_ref5) {
     contentClassName: "components-color-palette__custom-color-dropdown-content",
     popoverProps: isRenderedInSidebar ? {
       placement: 'left-start',
-      offset: 20
+      offset: 20,
+      __unstableShift: true
     } : undefined
   }, props));
 }
@@ -174,6 +175,16 @@ const extractColorNameFromCurrentValue = function (currentValue) {
 
 exports.extractColorNameFromCurrentValue = extractColorNameFromCurrentValue;
 
+const showTransparentBackground = currentValue => {
+  if (typeof currentValue === 'undefined') {
+    return true;
+  }
+
+  return (0, _colord.colord)(currentValue).alpha() === 0;
+};
+
+exports.showTransparentBackground = showTransparentBackground;
+
 function ColorPalette(_ref6) {
   let {
     clearable = true,
@@ -221,7 +232,9 @@ function ColorPalette(_ref6) {
         "aria-haspopup": "true",
         onClick: onToggle,
         "aria-label": customColorAccessibleLabel,
-        style: {
+        style: showTransparentBackground(value) ? {
+          color: '#000'
+        } : {
           background: value,
           color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000'
         }

package/build/color-palette/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","placement","offset","undefined","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background","Truncate"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvalue === color ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={\n\t\t\t\tisRenderedInSidebar\n\t\t\t\t\t? { placement: 'left-start', offset: 20 }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-palette/index.js"],"names":["namesPlugin","a11yPlugin","SinglePalette","className","clearColor","colors","onChange","value","actions","colorOptions","color","name","colordColor","fill","contrast","backgroundColor","MultiplePalettes","map","index","colorPalette","length","CustomColorPickerDropdown","isRenderedInSidebar","props","placement","offset","__unstableShift","undefined","extractColorNameFromCurrentValue","currentValue","showMultiplePalettes","currentValueIsCssVariable","test","normalizedCurrentValue","toHex","colorPalettes","paletteColors","colorName","colorValue","normalizedColorValue","showTransparentBackground","alpha","ColorPalette","clearable","disableCustomColors","enableAlpha","__experimentalHasMultipleOrigins","__experimentalIsRenderedInSidebar","Component","renderCustomColorPicker","valueWithoutLeadingHash","startsWith","substring","buttonLabelName","customColorAccessibleLabel","isOpen","onToggle","background","Truncate"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { map } from 'lodash';\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Dropdown from '../dropdown';\nimport { ColorPicker } from '../color-picker';\nimport CircularOptionPicker from '../circular-option-picker';\nimport { VStack } from '../v-stack';\nimport { Flex, FlexItem } from '../flex';\nimport { Truncate } from '../truncate';\nimport { ColorHeading } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction SinglePalette( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\tconst colorOptions = useMemo( () => {\n\t\treturn map( colors, ( { color, name } ) => {\n\t\t\tconst colordColor = colord( color );\n\n\t\t\treturn (\n\t\t\t\t<CircularOptionPicker.Option\n\t\t\t\t\tkey={ color }\n\t\t\t\t\tisSelected={ value === color }\n\t\t\t\t\tselectedIconProps={\n\t\t\t\t\t\tvalue === color\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tfill:\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {}\n\t\t\t\t\t}\n\t\t\t\t\ttooltipText={\n\t\t\t\t\t\tname ||\n\t\t\t\t\t\t// translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\tsprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t\tstyle={ { backgroundColor: color, color } }\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvalue === color ? clearColor : () => onChange( color )\n\t\t\t\t\t}\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tname\n\t\t\t\t\t\t\t? // translators: %s: The name of the color e.g: \"vivid red\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color: %s' ), name )\n\t\t\t\t\t\t\t: // translators: %s: color hex code e.g: \"#f00\".\n\t\t\t\t\t\t\t  sprintf( __( 'Color code: %s' ), color )\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ colors, value, onChange, clearColor ] );\n\treturn (\n\t\t<CircularOptionPicker\n\t\t\tclassName={ className }\n\t\t\toptions={ colorOptions }\n\t\t\tactions={ actions }\n\t\t/>\n\t);\n}\n\nfunction MultiplePalettes( {\n\tclassName,\n\tclearColor,\n\tcolors,\n\tonChange,\n\tvalue,\n\tactions,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ colors.map( ( { name, colors: colorPalette }, index ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<VStack spacing={ 2 } key={ index }>\n\t\t\t\t\t\t<ColorHeading>{ name }</ColorHeading>\n\t\t\t\t\t\t<SinglePalette\n\t\t\t\t\t\t\tclearColor={ clearColor }\n\t\t\t\t\t\t\tcolors={ colorPalette }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tactions={\n\t\t\t\t\t\t\t\tcolors.length === index + 1 ? actions : null\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</VStack>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</VStack>\n\t);\n}\n\nexport function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {\n\treturn (\n\t\t<Dropdown\n\t\t\tcontentClassName=\"components-color-palette__custom-color-dropdown-content\"\n\t\t\tpopoverProps={\n\t\t\t\tisRenderedInSidebar\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tplacement: 'left-start',\n\t\t\t\t\t\t\toffset: 20,\n\t\t\t\t\t\t\t__unstableShift: true,\n\t\t\t\t\t  }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport const extractColorNameFromCurrentValue = (\n\tcurrentValue,\n\tcolors = [],\n\tshowMultiplePalettes = false\n) => {\n\tif ( ! currentValue ) {\n\t\treturn '';\n\t}\n\n\tconst currentValueIsCssVariable = /^var\\(/.test( currentValue );\n\tconst normalizedCurrentValue = currentValueIsCssVariable\n\t\t? currentValue\n\t\t: colord( currentValue ).toHex();\n\n\t// Normalize format of `colors` to simplify the following loop\n\tconst colorPalettes = showMultiplePalettes ? colors : [ { colors } ];\n\tfor ( const { colors: paletteColors } of colorPalettes ) {\n\t\tfor ( const { name: colorName, color: colorValue } of paletteColors ) {\n\t\t\tconst normalizedColorValue = currentValueIsCssVariable\n\t\t\t\t? colorValue\n\t\t\t\t: colord( colorValue ).toHex();\n\n\t\t\tif ( normalizedCurrentValue === normalizedColorValue ) {\n\t\t\t\treturn colorName;\n\t\t\t}\n\t\t}\n\t}\n\n\t// translators: shown when the user has picked a custom color (i.e not in the palette of colors).\n\treturn __( 'Custom' );\n};\n\nexport const showTransparentBackground = ( currentValue ) => {\n\tif ( typeof currentValue === 'undefined' ) {\n\t\treturn true;\n\t}\n\treturn colord( currentValue ).alpha() === 0;\n};\n\nexport default function ColorPalette( {\n\tclearable = true,\n\tclassName,\n\tcolors,\n\tdisableCustomColors = false,\n\tenableAlpha,\n\tonChange,\n\tvalue,\n\t__experimentalHasMultipleOrigins = false,\n\t__experimentalIsRenderedInSidebar = false,\n} ) {\n\tconst clearColor = useCallback( () => onChange( undefined ), [ onChange ] );\n\tconst showMultiplePalettes =\n\t\t__experimentalHasMultipleOrigins && colors?.length;\n\tconst Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;\n\n\tconst renderCustomColorPicker = () => (\n\t\t<ColorPicker\n\t\t\tcolor={ value }\n\t\t\tonChange={ ( color ) => onChange( color ) }\n\t\t\tenableAlpha={ enableAlpha }\n\t\t/>\n\t);\n\n\tconst colordColor = colord( value );\n\n\tconst valueWithoutLeadingHash = value?.startsWith( '#' )\n\t\t? value.substring( 1 )\n\t\t: value ?? '';\n\tconst buttonLabelName = useMemo(\n\t\t() =>\n\t\t\textractColorNameFromCurrentValue(\n\t\t\t\tvalue,\n\t\t\t\tcolors,\n\t\t\t\tshowMultiplePalettes\n\t\t\t),\n\t\t[ value, colors, showMultiplePalettes ]\n\t);\n\n\tconst customColorAccessibleLabel = !! valueWithoutLeadingHash\n\t\t? sprintf(\n\t\t\t\t// translators: %1$s: The name of the color e.g: \"vivid red\". %2$s: The color's hex code e.g: \"#f00\".\n\t\t\t\t__(\n\t\t\t\t\t'Custom color picker. The currently selected color is called \"%1$s\" and has a value of \"%2$s\".'\n\t\t\t\t),\n\t\t\t\tbuttonLabelName,\n\t\t\t\tvalueWithoutLeadingHash\n\t\t  )\n\t\t: __( 'Custom color picker.' );\n\n\treturn (\n\t\t<VStack spacing={ 3 } className={ className }>\n\t\t\t{ ! disableCustomColors && (\n\t\t\t\t<CustomColorPickerDropdown\n\t\t\t\t\tisRenderedInSidebar={ __experimentalIsRenderedInSidebar }\n\t\t\t\t\trenderContent={ renderCustomColorPicker }\n\t\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tas={ 'button' }\n\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color\"\n\t\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\t\taria-label={ customColorAccessibleLabel }\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\tshowTransparentBackground( value )\n\t\t\t\t\t\t\t\t\t? { color: '#000' }\n\t\t\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\t\t\tbackground: value,\n\t\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast() >\n\t\t\t\t\t\t\t\t\t\t\t\tcolordColor.contrast( '#000' )\n\t\t\t\t\t\t\t\t\t\t\t\t\t? '#fff'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '#000',\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tisBlock\n\t\t\t\t\t\t\t\tas={ Truncate }\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-name\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonLabelName }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"components-color-palette__custom-color-value\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ valueWithoutLeadingHash }\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<Component\n\t\t\t\tclearable={ clearable }\n\t\t\t\tclearColor={ clearColor }\n\t\t\t\tcolors={ colors }\n\t\t\t\tonChange={ onChange }\n\t\t\t\tvalue={ value }\n\t\t\t\tactions={\n\t\t\t\t\t!! clearable && (\n\t\t\t\t\t\t<CircularOptionPicker.ButtonAction\n\t\t\t\t\t\t\tonClick={ clearColor }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t\t\t</CircularOptionPicker.ButtonAction>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t/>\n\t\t</VStack>\n\t);\n}\n"]}

package/build/color-picker/component.js

@@ -21,10 +21,6 @@ var _i18n = require("@wordpress/i18n");
 
 var _context = require("../ui/context");
 
-var _hStack = require("../h-stack");
-
-var _spacer = require("../spacer");
-
 var _styles = require("./styles");
 
 var _colorCopyButton = require("./color-copy-button");
@@ -87,7 +83,7 @@ const ColorPicker = (props, forwardedRef) => {
     onChange: handleChange,
     color: safeColordColor,
     enableAlpha: enableAlpha
-  }), (0, _element.createElement)(_styles.AuxiliaryColorArtefactWrapper, null, (0, _element.createElement)(_hStack.HStack, {
+  }), (0, _element.createElement)(_styles.AuxiliaryColorArtefactWrapper, null, (0, _element.createElement)(_styles.AuxiliaryColorArtefactHStackHeader, {
     justify: "space-between"
   }, (0, _element.createElement)(_styles.SelectControl, {
     options: options,
@@ -98,14 +94,15 @@ const ColorPicker = (props, forwardedRef) => {
   }), (0, _element.createElement)(_colorCopyButton.ColorCopyButton, {
     color: safeColordColor,
     colorType: copyFormat || colorType
-  })), (0, _element.createElement)(_spacer.Spacer, {
-    margin: 4
-  }), (0, _element.createElement)(_colorInput.ColorInput, {
+  })), (0, _element.createElement)(_styles.ColorInputWrapper, {
+    direction: "column",
+    gap: 2
+  }, (0, _element.createElement)(_colorInput.ColorInput, {
     colorType: colorType,
     color: safeColordColor,
     onChange: handleChange,
     enableAlpha: enableAlpha
-  })));
+  }))));
 };
 
 const ConnectedColorPicker = (0, _context.contextConnect)(ColorPicker, 'ColorPicker');

package/build/color-picker/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["namesPlugin","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","nextColorType","ConnectedColorPicker"],"mappings":";;;;;;;;;AAUA;;;;AANA;;AACA;;AAMA;;AACA;;AAKA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAhCA;AACA;AACA;;AAKA;AACA;AACA;;AAKA;AACA;AACA;AAoBA,oBAAQ,CAAEA,cAAF,CAAR;AAUA,MAAMC,OAAO,GAAG,CACf;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CADe,EAEf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAFe,EAGf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAHe,CAAhB;;AAMA,MAAMC,WAAW,GAAG,CACnBC,KADmB,EAEnBC,YAFmB,KAGf;AACJ,QAAM;AACLC,IAAAA,WAAW,GAAG,KADT;AAELC,IAAAA,KAAK,EAAEC,SAFF;AAGLC,IAAAA,QAHK;AAILC,IAAAA,YAAY,GAAG,MAJV;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOF,+BAAkBR,KAAlB,EAAyB,aAAzB,CAPJ,CADI,CAUJ;;AACA,QAAM,CAAEG,KAAF,EAASM,QAAT,IAAsB,+BAAoB;AAC/CJ,IAAAA,QAD+C;AAE/CP,IAAAA,KAAK,EAAEM,SAFwC;AAG/CE,IAAAA;AAH+C,GAApB,CAA5B;AAMA,QAAMI,eAAe,GAAG,sBAAS,MAAM;AACtC,WAAO,oBAAQP,KAAK,IAAI,EAAjB,CAAP;AACA,GAFuB,EAErB,CAAEA,KAAF,CAFqB,CAAxB;AAIA,QAAMQ,iBAAiB,GAAG,0BAAaF,QAAb,CAA1B;AAEA,QAAMG,YAAY,GAAG,0BAClBC,SAAF,IAAyB;AACxBF,IAAAA,iBAAiB,CAAEE,SAAS,CAACC,KAAV,EAAF,CAAjB;AACA,GAHmB,EAIpB,CAAEH,iBAAF,CAJoB,CAArB;AAOA,QAAM,CAAEI,SAAF,EAAaC,YAAb,IAA8B,uBACnCT,UAAU,IAAI,KADqB,CAApC;AAIA,SACC,4BAAC,uBAAD;AAAiB,IAAA,GAAG,EAAGN;AAAvB,KAA2CO,QAA3C,GACC,4BAAC,cAAD;AACC,IAAA,QAAQ,EAAGI,YADZ;AAEC,IAAA,KAAK,EAAGF,eAFT;AAGC,IAAA,WAAW,EAAGR;AAHf,IADD,EAMC,4BAAC,qCAAD,QACC,4BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,qBAAD;AACC,IAAA,OAAO,EAAGN,OADX;AAEC,IAAA,KAAK,EAAGmB,SAFT;AAGC,IAAA,QAAQ,EAAKE,aAAF,IACVD,YAAY,CAAEC,aAAF,CAJd;AAMC,IAAA,KAAK,EAAG,cAAI,cAAJ,CANT;AAOC,IAAA,mBAAmB;AAPpB,IADD,EAUC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAGP,eADT;AAEC,IAAA,SAAS,EAAGH,UAAU,IAAIQ;AAF3B,IAVD,CADD,EAgBC,4BAAC,cAAD;AAAQ,IAAA,MAAM,EAAG;AAAjB,IAhBD,EAiBC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAGA,SADb;AAEC,IAAA,KAAK,EAAGL,eAFT;AAGC,IAAA,QAAQ,EAAGE,YAHZ;AAIC,IAAA,WAAW,EAAGV;AAJf,IAjBD,CAND,CADD;AAiCA,CAtED;;AAwEA,MAAMgB,oBAAoB,GAAG,6BAAgBnB,WAAhB,EAA6B,aAA7B,CAA7B;eAEemB,oB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport { HStack } from '../h-stack';\nimport { Spacer } from '../spacer';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t<ColorInput\n\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t/>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/color-picker/component.tsx"],"names":["namesPlugin","options","label","value","ColorPicker","props","forwardedRef","enableAlpha","color","colorProp","onChange","defaultValue","copyFormat","divProps","setColor","safeColordColor","debouncedSetColor","handleChange","nextValue","toHex","colorType","setColorType","nextColorType","ConnectedColorPicker"],"mappings":";;;;;;;;;AAUA;;;;AANA;;AACA;;AAMA;;AACA;;AAKA;;AAKA;;AAOA;;AACA;;AACA;;AACA;;AAhCA;AACA;AACA;;AAKA;AACA;AACA;;AAKA;AACA;AACA;AAoBA,oBAAQ,CAAEA,cAAF,CAAR;AAUA,MAAMC,OAAO,GAAG,CACf;AAAEC,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CADe,EAEf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAFe,EAGf;AAAED,EAAAA,KAAK,EAAE,KAAT;AAAgBC,EAAAA,KAAK,EAAE;AAAvB,CAHe,CAAhB;;AAMA,MAAMC,WAAW,GAAG,CACnBC,KADmB,EAEnBC,YAFmB,KAGf;AACJ,QAAM;AACLC,IAAAA,WAAW,GAAG,KADT;AAELC,IAAAA,KAAK,EAAEC,SAFF;AAGLC,IAAAA,QAHK;AAILC,IAAAA,YAAY,GAAG,MAJV;AAKLC,IAAAA,UALK;AAML,OAAGC;AANE,MAOF,+BAAkBR,KAAlB,EAAyB,aAAzB,CAPJ,CADI,CAUJ;;AACA,QAAM,CAAEG,KAAF,EAASM,QAAT,IAAsB,+BAAoB;AAC/CJ,IAAAA,QAD+C;AAE/CP,IAAAA,KAAK,EAAEM,SAFwC;AAG/CE,IAAAA;AAH+C,GAApB,CAA5B;AAMA,QAAMI,eAAe,GAAG,sBAAS,MAAM;AACtC,WAAO,oBAAQP,KAAK,IAAI,EAAjB,CAAP;AACA,GAFuB,EAErB,CAAEA,KAAF,CAFqB,CAAxB;AAIA,QAAMQ,iBAAiB,GAAG,0BAAaF,QAAb,CAA1B;AAEA,QAAMG,YAAY,GAAG,0BAClBC,SAAF,IAAyB;AACxBF,IAAAA,iBAAiB,CAAEE,SAAS,CAACC,KAAV,EAAF,CAAjB;AACA,GAHmB,EAIpB,CAAEH,iBAAF,CAJoB,CAArB;AAOA,QAAM,CAAEI,SAAF,EAAaC,YAAb,IAA8B,uBACnCT,UAAU,IAAI,KADqB,CAApC;AAIA,SACC,4BAAC,uBAAD;AAAiB,IAAA,GAAG,EAAGN;AAAvB,KAA2CO,QAA3C,GACC,4BAAC,cAAD;AACC,IAAA,QAAQ,EAAGI,YADZ;AAEC,IAAA,KAAK,EAAGF,eAFT;AAGC,IAAA,WAAW,EAAGR;AAHf,IADD,EAMC,4BAAC,qCAAD,QACC,4BAAC,0CAAD;AAAoC,IAAA,OAAO,EAAC;AAA5C,KACC,4BAAC,qBAAD;AACC,IAAA,OAAO,EAAGN,OADX;AAEC,IAAA,KAAK,EAAGmB,SAFT;AAGC,IAAA,QAAQ,EAAKE,aAAF,IACVD,YAAY,CAAEC,aAAF,CAJd;AAMC,IAAA,KAAK,EAAG,cAAI,cAAJ,CANT;AAOC,IAAA,mBAAmB;AAPpB,IADD,EAUC,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAGP,eADT;AAEC,IAAA,SAAS,EAAGH,UAAU,IAAIQ;AAF3B,IAVD,CADD,EAgBC,4BAAC,yBAAD;AAAmB,IAAA,SAAS,EAAC,QAA7B;AAAsC,IAAA,GAAG,EAAG;AAA5C,KACC,4BAAC,sBAAD;AACC,IAAA,SAAS,EAAGA,SADb;AAEC,IAAA,KAAK,EAAGL,eAFT;AAGC,IAAA,QAAQ,EAAGE,YAHZ;AAIC,IAAA,WAAW,EAAGV;AAJf,IADD,CAhBD,CAND,CADD;AAkCA,CAvED;;AAyEA,MAAMgB,oBAAoB,GAAG,6BAAgBnB,WAAhB,EAA6B,aAA7B,CAA7B;eAEemB,oB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { colord, extend, Colord } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useState, useMemo } from '@wordpress/element';\nimport { useDebounce } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tuseContextSystem,\n\tcontextConnect,\n\tWordPressComponentProps,\n} from '../ui/context';\nimport {\n\tColorfulWrapper,\n\tSelectControl,\n\tAuxiliaryColorArtefactWrapper,\n\tAuxiliaryColorArtefactHStackHeader,\n\tColorInputWrapper,\n} from './styles';\nimport { ColorCopyButton } from './color-copy-button';\nimport { ColorInput } from './color-input';\nimport { Picker } from './picker';\nimport { useControlledValue } from '../utils/hooks';\n\nimport type { ColorType } from './types';\n\nextend( [ namesPlugin ] );\n\nexport interface ColorPickerProps {\n\tenableAlpha?: boolean;\n\tcolor?: string;\n\tonChange?: ( color: string ) => void;\n\tdefaultValue?: string;\n\tcopyFormat?: ColorType;\n}\n\nconst options = [\n\t{ label: 'RGB', value: 'rgb' as const },\n\t{ label: 'HSL', value: 'hsl' as const },\n\t{ label: 'Hex', value: 'hex' as const },\n];\n\nconst ColorPicker = (\n\tprops: WordPressComponentProps< ColorPickerProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) => {\n\tconst {\n\t\tenableAlpha = false,\n\t\tcolor: colorProp,\n\t\tonChange,\n\t\tdefaultValue = '#fff',\n\t\tcopyFormat,\n\t\t...divProps\n\t} = useContextSystem( props, 'ColorPicker' );\n\n\t// Use a safe default value for the color and remove the possibility of `undefined`.\n\tconst [ color, setColor ] = useControlledValue( {\n\t\tonChange,\n\t\tvalue: colorProp,\n\t\tdefaultValue,\n\t} );\n\n\tconst safeColordColor = useMemo( () => {\n\t\treturn colord( color || '' );\n\t}, [ color ] );\n\n\tconst debouncedSetColor = useDebounce( setColor );\n\n\tconst handleChange = useCallback(\n\t\t( nextValue: Colord ) => {\n\t\t\tdebouncedSetColor( nextValue.toHex() );\n\t\t},\n\t\t[ debouncedSetColor ]\n\t);\n\n\tconst [ colorType, setColorType ] = useState< ColorType >(\n\t\tcopyFormat || 'hex'\n\t);\n\n\treturn (\n\t\t<ColorfulWrapper ref={ forwardedRef } { ...divProps }>\n\t\t\t<Picker\n\t\t\t\tonChange={ handleChange }\n\t\t\t\tcolor={ safeColordColor }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t/>\n\t\t\t<AuxiliaryColorArtefactWrapper>\n\t\t\t\t<AuxiliaryColorArtefactHStackHeader justify=\"space-between\">\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tvalue={ colorType }\n\t\t\t\t\t\tonChange={ ( nextColorType ) =>\n\t\t\t\t\t\t\tsetColorType( nextColorType as ColorType )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tlabel={ __( 'Color format' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t/>\n\t\t\t\t\t<ColorCopyButton\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tcolorType={ copyFormat || colorType }\n\t\t\t\t\t/>\n\t\t\t\t</AuxiliaryColorArtefactHStackHeader>\n\t\t\t\t<ColorInputWrapper direction=\"column\" gap={ 2 }>\n\t\t\t\t\t<ColorInput\n\t\t\t\t\t\tcolorType={ colorType }\n\t\t\t\t\t\tcolor={ safeColordColor }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t/>\n\t\t\t\t</ColorInputWrapper>\n\t\t\t</AuxiliaryColorArtefactWrapper>\n\t\t</ColorfulWrapper>\n\t);\n};\n\nconst ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );\n\nexport default ConnectedColorPicker;\n"]}

package/build/color-picker/hex-input.js

@@ -11,14 +11,14 @@ var _colord = require("colord");
 
 var _i18n = require("@wordpress/i18n");
 
+var _inputControl = require("../input-control");
+
 var _text = require("../text");
 
 var _spacer = require("../spacer");
 
 var _space = require("../ui/utils/space");
 
-var _styles = require("./styles");
-
 var _colorsValues = require("../utils/colors-values");
 
 /**
@@ -61,10 +61,10 @@ const HexInput = _ref => {
     };
   };
 
-  return (0, _element.createElement)(_styles.ColorHexInputControl, {
+  return (0, _element.createElement)(_inputControl.InputControl, {
     prefix: (0, _element.createElement)(_spacer.Spacer, {
       as: _text.Text,
-      marginLeft: (0, _space.space)(3.5),
+      marginLeft: (0, _space.space)(4),
       color: _colorsValues.COLORS.ui.theme,
       lineHeight: 1
     }, "#"),
@@ -73,7 +73,9 @@ const HexInput = _ref => {
     maxLength: enableAlpha ? 9 : 7,
     label: (0, _i18n.__)('Hex color'),
     hideLabelFromVision: true,
-    __unstableStateReducer: stateReducer
+    size: "__unstable-large",
+    __unstableStateReducer: stateReducer,
+    __unstableInputWidth: "9em"
   });
 };