@wordpress/components 25.8.3 → 25.9.0

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_utils","_space","_baseControlStyles","_unitControlStyles","_EMOTION_STRINGIFIED_CSS_ERROR__","labelStyles","process","env","NODE_ENV","name","styles","map","toString","focusBoxShadow","css","CONFIG","controlBoxShadowFocus","borderControl","boxSizingReset","exports","innerWrapper","UnitControlWrapper","UnitSelect","wrapperWidth","wrapperHeight","size","borderControlDropdown","rtl","borderRadius","borderWidth","COLORS","ui","border","borderFocus","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","space","swatchSize","swatchGap","borderControlPopoverControls","StyledLabel","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 '../ui/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":["_react","require","_utils","_space","_baseControlStyles","_unitControlStyles","_EMOTION_STRINGIFIED_CSS_ERROR__","labelStyles","process","env","NODE_ENV","name","styles","map","toString","focusBoxShadow","css","CONFIG","controlBoxShadowFocus","borderControl","boxSizingReset","exports","innerWrapper","UnitControlWrapper","UnitSelect","wrapperWidth","wrapperHeight","size","borderControlDropdown","rtl","borderRadius","borderWidth","COLORS","ui","border","borderFocus","colorIndicatorBorder","color","style","fallbackColor","gray","undefined","colorIndicatorWrapper","space","swatchSize","swatchGap","borderControlPopoverControls","StyledLabel","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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"}

package/build/box-control/all-input-control.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AllInputControl;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _unitControl = _interopRequireDefault(require("./unit-control"));
 var _utils = require("./utils");
 /**
@@ -62,7 +62,7 @@ function AllInputControl({
       right: false
     });
   };
-  return (0, _element.createElement)(_unitControl.default, {
+  return (0, _react.createElement)(_unitControl.default, {
     ...props,
     disableUnits: isMixed,
     isOnly: true,

package/build/box-control/all-input-control.js.map

@@ -1 +1 @@
-{"version":3,"names":["_unitControl","_interopRequireDefault","require","_utils","noop","AllInputControl","onChange","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","getAllValue","hasValues","isValuesDefined","isMixed","isValuesMixed","allPlaceholder","LABELS","mixed","undefined","handleOnFocus","event","side","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","applyValueToSides","handleOnUnitChange","unit","newUnits","handleOnHoverOn","top","bottom","left","right","handleOnHoverOff","_element","createElement","default","disableUnits","isOnly","value","onUnitChange","placeholder"],"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { BoxControlInputControlProps } from './types';\nimport UnitControl from './unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst handleOnHoverOn = () => {\n\t\tonHoverOn( {\n\t\t\ttop: true,\n\t\t\tbottom: true,\n\t\t\tleft: true,\n\t\t\tright: true,\n\t\t} );\n\t};\n\n\tconst handleOnHoverOff = () => {\n\t\tonHoverOff( {\n\t\t\ttop: false,\n\t\t\tbottom: false,\n\t\t\tleft: false,\n\t\t\tright: false,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonHoverOn={ handleOnHoverOn }\n\t\t\tonHoverOff={ handleOnHoverOff }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAKA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AANA;AACA;AACA;;AAYA,MAAME,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,eAAeA,CAAE;EACxCC,QAAQ,GAAGF,IAAI;EACfG,OAAO,GAAGH,IAAI;EACdI,SAAS,GAAGJ,IAAI;EAChBK,UAAU,GAAGL,IAAI;EACjBM,MAAM;EACNC,KAAK;EACLC,aAAa;EACbC,gBAAgB;EAChB,GAAGC;AACyB,CAAC,EAAG;EAChC,MAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAAEN,MAAM,EAAEE,aAAa,EAAED,KAAM,CAAC;EAC5D,MAAMM,SAAS,GAAG,IAAAC,sBAAe,EAAER,MAAO,CAAC;EAC3C,MAAMS,OAAO,GAAGF,SAAS,IAAI,IAAAG,oBAAa,EAAEV,MAAM,EAAEE,aAAa,EAAED,KAAM,CAAC;EAC1E,MAAMU,cAAc,GAAGF,OAAO,GAAGG,aAAM,CAACC,KAAK,GAAGC,SAAS;EAEzD,MAAMC,aAA0D,GAC/DC,KAAK,IACD;IACJnB,OAAO,CAAEmB,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAM,CAAE,CAAC;EAClC,CAAC;EAED,MAAMC,cAA8C,GAAKC,IAAI,IAAM;IAClE,MAAMC,SAAS,GAAGD,IAAI,KAAKL,SAAS,IAAI,CAAEO,KAAK,CAAEC,UAAU,CAAEH,IAAK,CAAE,CAAC;IACrE,MAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAI,GAAGL,SAAS;IAC9C,MAAMU,UAAU,GAAG,IAAAC,wBAAiB,EAAEzB,MAAM,EAAEuB,SAAS,EAAEtB,KAAM,CAAC;IAEhEL,QAAQ,CAAE4B,UAAW,CAAC;EACvB,CAAC;;EAED;EACA;EACA,MAAME,kBAAsD,GAAKC,IAAI,IAAM;IAC1E,MAAMC,QAAQ,GAAG,IAAAH,wBAAiB,EAAEvB,aAAa,EAAEyB,IAAI,EAAE1B,KAAM,CAAC;IAChEE,gBAAgB,CAAEyB,QAAS,CAAC;EAC7B,CAAC;EAED,MAAMC,eAAe,GAAGA,CAAA,KAAM;IAC7B/B,SAAS,CAAE;MACVgC,GAAG,EAAE,IAAI;MACTC,MAAM,EAAE,IAAI;MACZC,IAAI,EAAE,IAAI;MACVC,KAAK,EAAE;IACR,CAAE,CAAC;EACJ,CAAC;EAED,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC9BnC,UAAU,CAAE;MACX+B,GAAG,EAAE,KAAK;MACVC,MAAM,EAAE,KAAK;MACbC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE;IACR,CAAE,CAAC;EACJ,CAAC;EAED,OACC,IAAAE,QAAA,CAAAC,aAAA,EAAC9C,YAAA,CAAA+C,OAAW;IAAA,GACNjC,KAAK;IACVkC,YAAY,EAAG7B,OAAS;IACxB8B,MAAM;IACNC,KAAK,EAAGnC,QAAU;IAClBT,QAAQ,EAAGsB,cAAgB;IAC3BuB,YAAY,EAAGf,kBAAoB;IACnC7B,OAAO,EAAGkB,aAAe;IACzBjB,SAAS,EAAG+B,eAAiB;IAC7B9B,UAAU,EAAGmC,gBAAkB;IAC/BQ,WAAW,EAAG/B;EAAgB,CAC9B,CAAC;AAEJ"}
+{"version":3,"names":["_unitControl","_interopRequireDefault","require","_utils","noop","AllInputControl","onChange","onFocus","onHoverOn","onHoverOff","values","sides","selectedUnits","setSelectedUnits","props","allValue","getAllValue","hasValues","isValuesDefined","isMixed","isValuesMixed","allPlaceholder","LABELS","mixed","undefined","handleOnFocus","event","side","handleOnChange","next","isNumeric","isNaN","parseFloat","nextValue","nextValues","applyValueToSides","handleOnUnitChange","unit","newUnits","handleOnHoverOn","top","bottom","left","right","handleOnHoverOff","_react","createElement","default","disableUnits","isOnly","value","onUnitChange","placeholder"],"sources":["@wordpress/components/src/box-control/all-input-control.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { BoxControlInputControlProps } from './types';\nimport UnitControl from './unit-control';\nimport {\n\tLABELS,\n\tapplyValueToSides,\n\tgetAllValue,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\n\nconst noop = () => {};\n\nexport default function AllInputControl( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tsides,\n\tselectedUnits,\n\tsetSelectedUnits,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst allValue = getAllValue( values, selectedUnits, sides );\n\tconst hasValues = isValuesDefined( values );\n\tconst isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );\n\tconst allPlaceholder = isMixed ? LABELS.mixed : undefined;\n\n\tconst handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tonFocus( event, { side: 'all' } );\n\t};\n\n\tconst handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\t\tconst nextValues = applyValueToSides( values, nextValue, sides );\n\n\t\tonChange( nextValues );\n\t};\n\n\t// Set selected unit so it can be used as fallback by unlinked controls\n\t// when individual sides do not have a value containing a unit.\n\tconst handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {\n\t\tconst newUnits = applyValueToSides( selectedUnits, unit, sides );\n\t\tsetSelectedUnits( newUnits );\n\t};\n\n\tconst handleOnHoverOn = () => {\n\t\tonHoverOn( {\n\t\t\ttop: true,\n\t\t\tbottom: true,\n\t\t\tleft: true,\n\t\t\tright: true,\n\t\t} );\n\t};\n\n\tconst handleOnHoverOff = () => {\n\t\tonHoverOff( {\n\t\t\ttop: false,\n\t\t\tbottom: false,\n\t\t\tleft: false,\n\t\t\tright: false,\n\t\t} );\n\t};\n\n\treturn (\n\t\t<UnitControl\n\t\t\t{ ...props }\n\t\t\tdisableUnits={ isMixed }\n\t\t\tisOnly\n\t\t\tvalue={ allValue }\n\t\t\tonChange={ handleOnChange }\n\t\t\tonUnitChange={ handleOnUnitChange }\n\t\t\tonFocus={ handleOnFocus }\n\t\t\tonHoverOn={ handleOnHoverOn }\n\t\t\tonHoverOff={ handleOnHoverOff }\n\t\t\tplaceholder={ allPlaceholder }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAKA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AANA;AACA;AACA;;AAYA,MAAME,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,eAAeA,CAAE;EACxCC,QAAQ,GAAGF,IAAI;EACfG,OAAO,GAAGH,IAAI;EACdI,SAAS,GAAGJ,IAAI;EAChBK,UAAU,GAAGL,IAAI;EACjBM,MAAM;EACNC,KAAK;EACLC,aAAa;EACbC,gBAAgB;EAChB,GAAGC;AACyB,CAAC,EAAG;EAChC,MAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAAEN,MAAM,EAAEE,aAAa,EAAED,KAAM,CAAC;EAC5D,MAAMM,SAAS,GAAG,IAAAC,sBAAe,EAAER,MAAO,CAAC;EAC3C,MAAMS,OAAO,GAAGF,SAAS,IAAI,IAAAG,oBAAa,EAAEV,MAAM,EAAEE,aAAa,EAAED,KAAM,CAAC;EAC1E,MAAMU,cAAc,GAAGF,OAAO,GAAGG,aAAM,CAACC,KAAK,GAAGC,SAAS;EAEzD,MAAMC,aAA0D,GAC/DC,KAAK,IACD;IACJnB,OAAO,CAAEmB,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAM,CAAE,CAAC;EAClC,CAAC;EAED,MAAMC,cAA8C,GAAKC,IAAI,IAAM;IAClE,MAAMC,SAAS,GAAGD,IAAI,KAAKL,SAAS,IAAI,CAAEO,KAAK,CAAEC,UAAU,CAAEH,IAAK,CAAE,CAAC;IACrE,MAAMI,SAAS,GAAGH,SAAS,GAAGD,IAAI,GAAGL,SAAS;IAC9C,MAAMU,UAAU,GAAG,IAAAC,wBAAiB,EAAEzB,MAAM,EAAEuB,SAAS,EAAEtB,KAAM,CAAC;IAEhEL,QAAQ,CAAE4B,UAAW,CAAC;EACvB,CAAC;;EAED;EACA;EACA,MAAME,kBAAsD,GAAKC,IAAI,IAAM;IAC1E,MAAMC,QAAQ,GAAG,IAAAH,wBAAiB,EAAEvB,aAAa,EAAEyB,IAAI,EAAE1B,KAAM,CAAC;IAChEE,gBAAgB,CAAEyB,QAAS,CAAC;EAC7B,CAAC;EAED,MAAMC,eAAe,GAAGA,CAAA,KAAM;IAC7B/B,SAAS,CAAE;MACVgC,GAAG,EAAE,IAAI;MACTC,MAAM,EAAE,IAAI;MACZC,IAAI,EAAE,IAAI;MACVC,KAAK,EAAE;IACR,CAAE,CAAC;EACJ,CAAC;EAED,MAAMC,gBAAgB,GAAGA,CAAA,KAAM;IAC9BnC,UAAU,CAAE;MACX+B,GAAG,EAAE,KAAK;MACVC,MAAM,EAAE,KAAK;MACbC,IAAI,EAAE,KAAK;MACXC,KAAK,EAAE;IACR,CAAE,CAAC;EACJ,CAAC;EAED,OACC,IAAAE,MAAA,CAAAC,aAAA,EAAC9C,YAAA,CAAA+C,OAAW;IAAA,GACNjC,KAAK;IACVkC,YAAY,EAAG7B,OAAS;IACxB8B,MAAM;IACNC,KAAK,EAAGnC,QAAU;IAClBT,QAAQ,EAAGsB,cAAgB;IAC3BuB,YAAY,EAAGf,kBAAoB;IACnC7B,OAAO,EAAGkB,aAAe;IACzBjB,SAAS,EAAG+B,eAAiB;IAC7B9B,UAAU,EAAGmC,gBAAkB;IAC/BQ,WAAW,EAAG/B;EAAgB,CAC9B,CAAC;AAEJ"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AxialInputControls;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _utils = require("../unit-control/utils");
 var _unitControl = _interopRequireDefault(require("./unit-control"));
 var _utils2 = require("./utils");
@@ -107,14 +107,14 @@ function AxialInputControls({
   const first = filteredSides[0];
   const last = filteredSides[filteredSides.length - 1];
   const only = first === last && first;
-  return (0, _element.createElement)(_boxControlStyles.Layout, {
+  return (0, _react.createElement)(_boxControlStyles.Layout, {
     gap: 0,
     align: "top",
     className: "component-box-control__vertical-horizontal-input-controls"
   }, filteredSides.map(side => {
     const [parsedQuantity, parsedUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(side === 'vertical' ? values.top : values.left);
     const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left;
-    return (0, _element.createElement)(_unitControl.default, {
+    return (0, _react.createElement)(_unitControl.default, {
       ...props,
       isFirst: first === side,
       isLast: last === side,

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

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","_unitControl","_interopRequireDefault","_utils2","_boxControlStyles","groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","_element","createElement","Layout","gap","align","className","map","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","selectedUnit","default","isFirst","isLast","isOnly","value","join","onUnitChange","label","LABELS","key"],"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"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';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\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}: BoxControlInputControlProps ) {\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst createHandleOnHoverOn = ( side: GroupedSide ) => () => {\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: GroupedSide ) => () => {\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: GroupedSide ) => ( next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! 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 =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\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"],"mappings":"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"}
+{"version":3,"names":["_utils","require","_unitControl","_interopRequireDefault","_utils2","_boxControlStyles","groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","_react","createElement","Layout","gap","align","className","map","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","selectedUnit","default","isFirst","isLast","isOnly","value","join","onUnitChange","label","LABELS","key"],"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"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';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\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}: BoxControlInputControlProps ) {\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst createHandleOnHoverOn = ( side: GroupedSide ) => () => {\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: GroupedSide ) => () => {\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: GroupedSide ) => ( next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! 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 =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\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"],"mappings":"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"}

package/build/box-control/icon.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BoxControlIcon;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _boxControlIconStyles = require("./styles/box-control-icon-styles");
 /**
  * Internal dependencies
@@ -31,18 +31,18 @@ function BoxControlIcon({
 
   // Simulates SVG Icon scaling.
   const scale = size / BASE_ICON_SIZE;
-  return (0, _element.createElement)(_boxControlIconStyles.Root, {
+  return (0, _react.createElement)(_boxControlIconStyles.Root, {
     style: {
       transform: `scale(${scale})`
     },
     ...props
-  }, (0, _element.createElement)(_boxControlIconStyles.Viewbox, null, (0, _element.createElement)(_boxControlIconStyles.TopStroke, {
+  }, (0, _react.createElement)(_boxControlIconStyles.Viewbox, null, (0, _react.createElement)(_boxControlIconStyles.TopStroke, {
     isFocused: top
-  }), (0, _element.createElement)(_boxControlIconStyles.RightStroke, {
+  }), (0, _react.createElement)(_boxControlIconStyles.RightStroke, {
     isFocused: right
-  }), (0, _element.createElement)(_boxControlIconStyles.BottomStroke, {
+  }), (0, _react.createElement)(_boxControlIconStyles.BottomStroke, {
     isFocused: bottom
-  }), (0, _element.createElement)(_boxControlIconStyles.LeftStroke, {
+  }), (0, _react.createElement)(_boxControlIconStyles.LeftStroke, {
     isFocused: left
   })));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_boxControlIconStyles","require","BASE_ICON_SIZE","BoxControlIcon","size","side","sides","props","isSideDisabled","value","length","includes","hasSide","top","right","bottom","left","scale","_element","createElement","Root","style","transform","Viewbox","TopStroke","isFocused","RightStroke","BottomStroke","LeftStroke"],"sources":["@wordpress/components/src/box-control/icon.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport {\n\tRoot,\n\tViewbox,\n\tTopStroke,\n\tRightStroke,\n\tBottomStroke,\n\tLeftStroke,\n} from './styles/box-control-icon-styles';\nimport type { BoxControlIconProps, BoxControlProps } from './types';\n\nconst BASE_ICON_SIZE = 24;\n\nexport default function BoxControlIcon( {\n\tsize = 24,\n\tside = 'all',\n\tsides,\n\t...props\n}: WordPressComponentProps< BoxControlIconProps, 'span' > ) {\n\tconst isSideDisabled = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => sides?.length && ! sides.includes( value );\n\n\tconst hasSide = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => {\n\t\tif ( isSideDisabled( value ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn side === 'all' || side === value;\n\t};\n\n\tconst top = hasSide( 'top' ) || hasSide( 'vertical' );\n\tconst right = hasSide( 'right' ) || hasSide( 'horizontal' );\n\tconst bottom = hasSide( 'bottom' ) || hasSide( 'vertical' );\n\tconst left = hasSide( 'left' ) || hasSide( 'horizontal' );\n\n\t// Simulates SVG Icon scaling.\n\tconst scale = size / BASE_ICON_SIZE;\n\n\treturn (\n\t\t<Root style={ { transform: `scale(${ scale })` } } { ...props }>\n\t\t\t<Viewbox>\n\t\t\t\t<TopStroke isFocused={ top } />\n\t\t\t\t<RightStroke isFocused={ right } />\n\t\t\t\t<BottomStroke isFocused={ bottom } />\n\t\t\t\t<LeftStroke isFocused={ left } />\n\t\t\t</Viewbox>\n\t\t</Root>\n\t);\n}\n"],"mappings":";;;;;;;AAIA,IAAAA,qBAAA,GAAAC,OAAA;AAJA;AACA;AACA;;AAYA,MAAMC,cAAc,GAAG,EAAE;AAEV,SAASC,cAAcA,CAAE;EACvCC,IAAI,GAAG,EAAE;EACTC,IAAI,GAAG,KAAK;EACZC,KAAK;EACL,GAAGC;AACoD,CAAC,EAAG;EAC3D,MAAMC,cAAc,GACnBC,KAA0D,IACtDH,KAAK,EAAEI,MAAM,IAAI,CAAEJ,KAAK,CAACK,QAAQ,CAAEF,KAAM,CAAC;EAE/C,MAAMG,OAAO,GACZH,KAA0D,IACtD;IACJ,IAAKD,cAAc,CAAEC,KAAM,CAAC,EAAG;MAC9B,OAAO,KAAK;IACb;IAEA,OAAOJ,IAAI,KAAK,KAAK,IAAIA,IAAI,KAAKI,KAAK;EACxC,CAAC;EAED,MAAMI,GAAG,GAAGD,OAAO,CAAE,KAAM,CAAC,IAAIA,OAAO,CAAE,UAAW,CAAC;EACrD,MAAME,KAAK,GAAGF,OAAO,CAAE,OAAQ,CAAC,IAAIA,OAAO,CAAE,YAAa,CAAC;EAC3D,MAAMG,MAAM,GAAGH,OAAO,CAAE,QAAS,CAAC,IAAIA,OAAO,CAAE,UAAW,CAAC;EAC3D,MAAMI,IAAI,GAAGJ,OAAO,CAAE,MAAO,CAAC,IAAIA,OAAO,CAAE,YAAa,CAAC;;EAEzD;EACA,MAAMK,KAAK,GAAGb,IAAI,GAAGF,cAAc;EAEnC,OACC,IAAAgB,QAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAAoB,IAAI;IAACC,KAAK,EAAG;MAAEC,SAAS,EAAG,SAASL,KAAO;IAAG,CAAG;IAAA,GAAMV;EAAK,GAC5D,IAAAW,QAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAAuB,OAAO,QACP,IAAAL,QAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAAwB,SAAS;IAACC,SAAS,EAAGZ;EAAK,CAAE,CAAC,EAC/B,IAAAK,QAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAA0B,WAAW;IAACD,SAAS,EAAGX;EAAO,CAAE,CAAC,EACnC,IAAAI,QAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAA2B,YAAY;IAACF,SAAS,EAAGV;EAAQ,CAAE,CAAC,EACrC,IAAAG,QAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAA4B,UAAU;IAACH,SAAS,EAAGT;EAAM,CAAE,CACxB,CACJ,CAAC;AAET"}
+{"version":3,"names":["_boxControlIconStyles","require","BASE_ICON_SIZE","BoxControlIcon","size","side","sides","props","isSideDisabled","value","length","includes","hasSide","top","right","bottom","left","scale","_react","createElement","Root","style","transform","Viewbox","TopStroke","isFocused","RightStroke","BottomStroke","LeftStroke"],"sources":["@wordpress/components/src/box-control/icon.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport {\n\tRoot,\n\tViewbox,\n\tTopStroke,\n\tRightStroke,\n\tBottomStroke,\n\tLeftStroke,\n} from './styles/box-control-icon-styles';\nimport type { BoxControlIconProps, BoxControlProps } from './types';\n\nconst BASE_ICON_SIZE = 24;\n\nexport default function BoxControlIcon( {\n\tsize = 24,\n\tside = 'all',\n\tsides,\n\t...props\n}: WordPressComponentProps< BoxControlIconProps, 'span' > ) {\n\tconst isSideDisabled = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => sides?.length && ! sides.includes( value );\n\n\tconst hasSide = (\n\t\tvalue: NonNullable< BoxControlProps[ 'sides' ] >[ number ]\n\t) => {\n\t\tif ( isSideDisabled( value ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn side === 'all' || side === value;\n\t};\n\n\tconst top = hasSide( 'top' ) || hasSide( 'vertical' );\n\tconst right = hasSide( 'right' ) || hasSide( 'horizontal' );\n\tconst bottom = hasSide( 'bottom' ) || hasSide( 'vertical' );\n\tconst left = hasSide( 'left' ) || hasSide( 'horizontal' );\n\n\t// Simulates SVG Icon scaling.\n\tconst scale = size / BASE_ICON_SIZE;\n\n\treturn (\n\t\t<Root style={ { transform: `scale(${ scale })` } } { ...props }>\n\t\t\t<Viewbox>\n\t\t\t\t<TopStroke isFocused={ top } />\n\t\t\t\t<RightStroke isFocused={ right } />\n\t\t\t\t<BottomStroke isFocused={ bottom } />\n\t\t\t\t<LeftStroke isFocused={ left } />\n\t\t\t</Viewbox>\n\t\t</Root>\n\t);\n}\n"],"mappings":";;;;;;;AAIA,IAAAA,qBAAA,GAAAC,OAAA;AAJA;AACA;AACA;;AAYA,MAAMC,cAAc,GAAG,EAAE;AAEV,SAASC,cAAcA,CAAE;EACvCC,IAAI,GAAG,EAAE;EACTC,IAAI,GAAG,KAAK;EACZC,KAAK;EACL,GAAGC;AACoD,CAAC,EAAG;EAC3D,MAAMC,cAAc,GACnBC,KAA0D,IACtDH,KAAK,EAAEI,MAAM,IAAI,CAAEJ,KAAK,CAACK,QAAQ,CAAEF,KAAM,CAAC;EAE/C,MAAMG,OAAO,GACZH,KAA0D,IACtD;IACJ,IAAKD,cAAc,CAAEC,KAAM,CAAC,EAAG;MAC9B,OAAO,KAAK;IACb;IAEA,OAAOJ,IAAI,KAAK,KAAK,IAAIA,IAAI,KAAKI,KAAK;EACxC,CAAC;EAED,MAAMI,GAAG,GAAGD,OAAO,CAAE,KAAM,CAAC,IAAIA,OAAO,CAAE,UAAW,CAAC;EACrD,MAAME,KAAK,GAAGF,OAAO,CAAE,OAAQ,CAAC,IAAIA,OAAO,CAAE,YAAa,CAAC;EAC3D,MAAMG,MAAM,GAAGH,OAAO,CAAE,QAAS,CAAC,IAAIA,OAAO,CAAE,UAAW,CAAC;EAC3D,MAAMI,IAAI,GAAGJ,OAAO,CAAE,MAAO,CAAC,IAAIA,OAAO,CAAE,YAAa,CAAC;;EAEzD;EACA,MAAMK,KAAK,GAAGb,IAAI,GAAGF,cAAc;EAEnC,OACC,IAAAgB,MAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAAoB,IAAI;IAACC,KAAK,EAAG;MAAEC,SAAS,EAAG,SAASL,KAAO;IAAG,CAAG;IAAA,GAAMV;EAAK,GAC5D,IAAAW,MAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAAuB,OAAO,QACP,IAAAL,MAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAAwB,SAAS;IAACC,SAAS,EAAGZ;EAAK,CAAE,CAAC,EAC/B,IAAAK,MAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAA0B,WAAW;IAACD,SAAS,EAAGX;EAAO,CAAE,CAAC,EACnC,IAAAI,MAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAA2B,YAAY;IAACF,SAAS,EAAGV;EAAQ,CAAE,CAAC,EACrC,IAAAG,MAAA,CAAAC,aAAA,EAACnB,qBAAA,CAAA4B,UAAU;IAACH,SAAS,EAAGT;EAAM,CAAE,CACxB,CACJ,CAAC;AAET"}

package/build/box-control/index.js

@@ -11,8 +11,9 @@ Object.defineProperty(exports, "applyValueToSides", {
   }
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _baseControl = require("../base-control");
 var _button = _interopRequireDefault(require("../button"));
@@ -136,34 +137,34 @@ function BoxControl({
     onMouseOver,
     onMouseOut
   };
-  return (0, _element.createElement)(_boxControlStyles.Root, {
+  return (0, _react.createElement)(_boxControlStyles.Root, {
     id: id,
     role: "group",
     "aria-labelledby": headingId
-  }, (0, _element.createElement)(_boxControlStyles.Header, {
+  }, (0, _react.createElement)(_boxControlStyles.Header, {
     className: "component-box-control__header"
-  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_baseControl.BaseControl.VisualLabel, {
+  }, (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_baseControl.BaseControl.VisualLabel, {
     id: headingId
-  }, label)), allowReset && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_button.default, {
+  }, label)), allowReset && (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_button.default, {
     className: "component-box-control__reset-button",
     variant: "secondary",
     isSmall: true,
     onClick: handleOnReset,
     disabled: !isDirty
-  }, (0, _i18n.__)('Reset')))), (0, _element.createElement)(_boxControlStyles.HeaderControlWrapper, {
+  }, (0, _i18n.__)('Reset')))), (0, _react.createElement)(_boxControlStyles.HeaderControlWrapper, {
     className: "component-box-control__header-control-wrapper"
-  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_icon.default, {
+  }, (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_icon.default, {
     side: side,
     sides: sides
-  })), isLinked && (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_allInputControl.default, {
+  })), isLinked && (0, _react.createElement)(_flex.FlexBlock, null, (0, _react.createElement)(_allInputControl.default, {
     "aria-label": label,
     ...inputControlProps
-  })), !isLinked && splitOnAxis && (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_axialInputControls.default, {
+  })), !isLinked && splitOnAxis && (0, _react.createElement)(_flex.FlexBlock, null, (0, _react.createElement)(_axialInputControls.default, {
     ...inputControlProps
-  })), !hasOneSide && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_linkedButton.default, {
+  })), !hasOneSide && (0, _react.createElement)(_flex.FlexItem, null, (0, _react.createElement)(_linkedButton.default, {
     onClick: toggleLinked,
     isLinked: isLinked
-  }))), !isLinked && !splitOnAxis && (0, _element.createElement)(_inputControls.default, {
+  }))), !isLinked && !splitOnAxis && (0, _react.createElement)(_inputControls.default, {
     ...inputControlProps
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_i18n","_baseControl","_button","_interopRequireDefault","_flex","_allInputControl","_inputControls","_axialInputControls","_icon","_linkedButton","_boxControlStyles","_utils","_utils2","_hooks","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValuesMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","createElement","Root","role","Header","className","FlexItem","BaseControl","VisualLabel","default","variant","isSmall","onClick","disabled","HeaderControlWrapper","FlexBlock","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"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 { BaseControl } from '../base-control';\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 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';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * BoxControl components let users set values for Top, Right, Bottom, and Left.\n * This can be used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n *\n * \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nfunction 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\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\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< BoxControlIconProps[ 'side' ] >(\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< BoxControlValue >( {\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 = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\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\tonMouseOver,\n\t\tonMouseOut,\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<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BaseControl.VisualLabel>\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\tvariant=\"secondary\"\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\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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"}
+{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_button","_interopRequireDefault","_flex","_allInputControl","_inputControls","_axialInputControls","_icon","_linkedButton","_boxControlStyles","_utils","_utils2","_hooks","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValuesMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","_react","createElement","Root","role","Header","className","FlexItem","BaseControl","VisualLabel","default","variant","isSmall","onClick","disabled","HeaderControlWrapper","FlexBlock","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"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 { BaseControl } from '../base-control';\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 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';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * BoxControl components let users set values for Top, Right, Bottom, and Left.\n * This can be used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n *\n * \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nfunction 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\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\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< BoxControlIconProps[ 'side' ] >(\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< BoxControlValue >( {\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 = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\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\tonMouseOver,\n\t\tonMouseOut,\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<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BaseControl.VisualLabel>\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\tvariant=\"secondary\"\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\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BoxInputControls;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _unitControl = _interopRequireDefault(require("./unit-control"));
 var _utils = require("../unit-control/utils");
 var _utils2 = require("./utils");
@@ -92,16 +92,16 @@ function BoxInputControls({
   const first = filteredSides[0];
   const last = filteredSides[filteredSides.length - 1];
   const only = first === last && first;
-  return (0, _element.createElement)(_boxControlStyles.LayoutContainer, {
+  return (0, _react.createElement)(_boxControlStyles.LayoutContainer, {
     className: "component-box-control__input-controls-wrapper"
-  }, (0, _element.createElement)(_boxControlStyles.Layout, {
+  }, (0, _react.createElement)(_boxControlStyles.Layout, {
     gap: 0,
     align: "top",
     className: "component-box-control__input-controls"
   }, filteredSides.map(side => {
     const [parsedQuantity, parsedUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(values[side]);
     const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
-    return (0, _element.createElement)(_unitControl.default, {
+    return (0, _react.createElement)(_unitControl.default, {
       ...props,
       isFirst: first === side,
       isLast: last === side,

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

@@ -1 +1 @@
-{"version":3,"names":["_unitControl","_interopRequireDefault","require","_utils","_utils2","_boxControlStyles","noop","BoxInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","createHandleOnHoverOff","handleOnChange","nextValues","createHandleOnChange","next","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","ALL_SIDES","filter","includes","first","last","only","_element","createElement","LayoutContainer","className","Layout","gap","align","map","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","default","isFirst","isLast","isOnly","value","join","onUnitChange","label","LABELS","key"],"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport UnitControl from './unit-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, LABELS } from './utils';\nimport { LayoutContainer, Layout } from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\nimport type { UnitControlProps } from '../unit-control/types';\n\nconst noop = () => {};\n\nexport default function BoxInputControls( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst createHandleOnFocus =\n\t\t( side: keyof BoxControlValue ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst createHandleOnHoverOn = ( side: keyof BoxControlValue ) => () => {\n\t\tonHoverOn( { [ side ]: true } );\n\t};\n\n\tconst createHandleOnHoverOff = ( side: keyof BoxControlValue ) => () => {\n\t\tonHoverOff( { [ side ]: false } );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnChange: (\n\t\tside: keyof BoxControlValue\n\t) => UnitControlProps[ 'onChange' ] =\n\t\t( side ) =>\n\t\t( next, { event } ) => {\n\t\t\tconst nextValues = { ...values };\n\t\t\tconst isNumeric =\n\t\t\t\tnext !== undefined && ! isNaN( parseFloat( next ) );\n\t\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\t\tnextValues[ side ] = nextValue;\n\n\t\t\t/**\n\t\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t\t * when changing the TOP will also update BOTTOM.\n\t\t\t */\n\t\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t\t// it also works with drag events?\n\t\t\tif ( event.altKey ) {\n\t\t\t\tswitch ( side ) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\thandleOnChange( nextValues );\n\t\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: keyof BoxControlValue ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\t\t\tnewUnits[ side ] = next;\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\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<LayoutContainer className=\"component-box-control__input-controls-wrapper\">\n\t\t\t<Layout\n\t\t\t\tgap={ 0 }\n\t\t\t\talign=\"top\"\n\t\t\t\tclassName=\"component-box-control__input-controls\"\n\t\t\t>\n\t\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t\t? parsedUnit\n\t\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\tkey={ `box-control-${ side }` }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Layout>\n\t\t</LayoutContainer>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AANA;AACA;AACA;;AAQA,MAAMI,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,gBAAgBA,CAAE;EACzCC,QAAQ,GAAGF,IAAI;EACfG,OAAO,GAAGH,IAAI;EACdI,SAAS,GAAGJ,IAAI;EAChBK,UAAU,GAAGL,IAAI;EACjBM,MAAM;EACNC,aAAa;EACbC,gBAAgB;EAChBC,KAAK;EACL,GAAGC;AACyB,CAAC,EAAG;EAChC,MAAMC,mBAAmB,GACtBC,IAA2B,IAC3BC,KAA2C,IAAM;IAClDV,OAAO,CAAEU,KAAK,EAAE;MAAED;IAAK,CAAE,CAAC;EAC3B,CAAC;EAEF,MAAME,qBAAqB,GAAKF,IAA2B,IAAM,MAAM;IACtER,SAAS,CAAE;MAAE,CAAEQ,IAAI,GAAI;IAAK,CAAE,CAAC;EAChC,CAAC;EAED,MAAMG,sBAAsB,GAAKH,IAA2B,IAAM,MAAM;IACvEP,UAAU,CAAE;MAAE,CAAEO,IAAI,GAAI;IAAM,CAAE,CAAC;EAClC,CAAC;EAED,MAAMI,cAAc,GAAKC,UAA2B,IAAM;IACzDf,QAAQ,CAAEe,UAAW,CAAC;EACvB,CAAC;EAED,MAAMC,oBAE6B,GAChCN,IAAI,IACN,CAAEO,IAAI,EAAE;IAAEN;EAAM,CAAC,KAAM;IACtB,MAAMI,UAAU,GAAG;MAAE,GAAGX;IAAO,CAAC;IAChC,MAAMc,SAAS,GACdD,IAAI,KAAKE,SAAS,IAAI,CAAEC,KAAK,CAAEC,UAAU,CAAEJ,IAAK,CAAE,CAAC;IACpD,MAAMK,SAAS,GAAGJ,SAAS,GAAGD,IAAI,GAAGE,SAAS;IAE9CJ,UAAU,CAAEL,IAAI,CAAE,GAAGY,SAAS;;IAE9B;AACH;AACA;AACA;IACG;IACA;IACA;IACA,IAAKX,KAAK,CAACY,MAAM,EAAG;MACnB,QAASb,IAAI;QACZ,KAAK,KAAK;UACTK,UAAU,CAACS,MAAM,GAAGF,SAAS;UAC7B;QACD,KAAK,QAAQ;UACZP,UAAU,CAACU,GAAG,GAAGH,SAAS;UAC1B;QACD,KAAK,MAAM;UACVP,UAAU,CAACW,KAAK,GAAGJ,SAAS;UAC5B;QACD,KAAK,OAAO;UACXP,UAAU,CAACY,IAAI,GAAGL,SAAS;UAC3B;MACF;IACD;IAEAR,cAAc,CAAEC,UAAW,CAAC;EAC7B,CAAC;EAEF,MAAMa,wBAAwB,GAC3BlB,IAA2B,IAAQO,IAAa,IAAM;IACvD,MAAMY,QAAQ,GAAG;MAAE,GAAGxB;IAAc,CAAC;IACrCwB,QAAQ,CAAEnB,IAAI,CAAE,GAAGO,IAAI;IACvBX,gBAAgB,CAAEuB,QAAS,CAAC;EAC7B,CAAC;;EAEF;EACA,MAAMC,aAAa,GAAGvB,KAAK,EAAEwB,MAAM,GAChCC,iBAAS,CAACC,MAAM,CAAIvB,IAAI,IAAMH,KAAK,CAAC2B,QAAQ,CAAExB,IAAK,CAAE,CAAC,GACtDsB,iBAAS;EAEZ,MAAMG,KAAK,GAAGL,aAAa,CAAE,CAAC,CAAE;EAChC,MAAMM,IAAI,GAAGN,aAAa,CAAEA,aAAa,CAACC,MAAM,GAAG,CAAC,CAAE;EACtD,MAAMM,IAAI,GAAGF,KAAK,KAAKC,IAAI,IAAID,KAAK;EAEpC,OACC,IAAAG,QAAA,CAAAC,aAAA,EAAC1C,iBAAA,CAAA2C,eAAe;IAACC,SAAS,EAAC;EAA+C,GACzE,IAAAH,QAAA,CAAAC,aAAA,EAAC1C,iBAAA,CAAA6C,MAAM;IACNC,GAAG,EAAG,CAAG;IACTC,KAAK,EAAC,KAAK;IACXH,SAAS,EAAC;EAAuC,GAE/CX,aAAa,CAACe,GAAG,CAAInC,IAAI,IAAM;IAChC,MAAM,CAAEoC,cAAc,EAAEC,UAAU,CAAE,GACnC,IAAAC,uCAAgC,EAAE5C,MAAM,CAAEM,IAAI,CAAG,CAAC;IAEnD,MAAMuC,YAAY,GAAG7C,MAAM,CAAEM,IAAI,CAAE,GAChCqC,UAAU,GACV1C,aAAa,CAAEK,IAAI,CAAE;IAExB,OACC,IAAA4B,QAAA,CAAAC,aAAA,EAAC/C,YAAA,CAAA0D,OAAW;MAAA,GACN1C,KAAK;MACV2C,OAAO,EAAGhB,KAAK,KAAKzB,IAAM;MAC1B0C,MAAM,EAAGhB,IAAI,KAAK1B,IAAM;MACxB2C,MAAM,EAAGhB,IAAI,KAAK3B,IAAM;MACxB4C,KAAK,EAAG,CAAER,cAAc,EAAEG,YAAY,CAAE,CAACM,IAAI,CAC5C,EACD,CAAG;MACHvD,QAAQ,EAAGgB,oBAAoB,CAAEN,IAAK,CAAG;MACzC8C,YAAY,EAAG5B,wBAAwB,CAAElB,IAAK,CAAG;MACjDT,OAAO,EAAGQ,mBAAmB,CAAEC,IAAK,CAAG;MACvCR,SAAS,EAAGU,qBAAqB,CAAEF,IAAK,CAAG;MAC3CP,UAAU,EAAGU,sBAAsB,CAAEH,IAAK,CAAG;MAC7C+C,KAAK,EAAGC,cAAM,CAAEhD,IAAI,CAAI;MACxBiD,GAAG,EAAI,eAAejD,IAAM;IAAG,CAC/B,CAAC;EAEJ,CAAE,CACK,CACQ,CAAC;AAEpB"}
+{"version":3,"names":["_unitControl","_interopRequireDefault","require","_utils","_utils2","_boxControlStyles","noop","BoxInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","createHandleOnHoverOff","handleOnChange","nextValues","createHandleOnChange","next","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","ALL_SIDES","filter","includes","first","last","only","_react","createElement","LayoutContainer","className","Layout","gap","align","map","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","default","isFirst","isLast","isOnly","value","join","onUnitChange","label","LABELS","key"],"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport UnitControl from './unit-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, LABELS } from './utils';\nimport { LayoutContainer, Layout } from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\nimport type { UnitControlProps } from '../unit-control/types';\n\nconst noop = () => {};\n\nexport default function BoxInputControls( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst createHandleOnFocus =\n\t\t( side: keyof BoxControlValue ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst createHandleOnHoverOn = ( side: keyof BoxControlValue ) => () => {\n\t\tonHoverOn( { [ side ]: true } );\n\t};\n\n\tconst createHandleOnHoverOff = ( side: keyof BoxControlValue ) => () => {\n\t\tonHoverOff( { [ side ]: false } );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnChange: (\n\t\tside: keyof BoxControlValue\n\t) => UnitControlProps[ 'onChange' ] =\n\t\t( side ) =>\n\t\t( next, { event } ) => {\n\t\t\tconst nextValues = { ...values };\n\t\t\tconst isNumeric =\n\t\t\t\tnext !== undefined && ! isNaN( parseFloat( next ) );\n\t\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\t\tnextValues[ side ] = nextValue;\n\n\t\t\t/**\n\t\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t\t * when changing the TOP will also update BOTTOM.\n\t\t\t */\n\t\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t\t// it also works with drag events?\n\t\t\tif ( event.altKey ) {\n\t\t\t\tswitch ( side ) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\thandleOnChange( nextValues );\n\t\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: keyof BoxControlValue ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\t\t\tnewUnits[ side ] = next;\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\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<LayoutContainer className=\"component-box-control__input-controls-wrapper\">\n\t\t\t<Layout\n\t\t\t\tgap={ 0 }\n\t\t\t\talign=\"top\"\n\t\t\t\tclassName=\"component-box-control__input-controls\"\n\t\t\t>\n\t\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t\t? parsedUnit\n\t\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\tkey={ `box-control-${ side }` }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Layout>\n\t\t</LayoutContainer>\n\t);\n}\n"],"mappings":"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"}

package/build/box-control/linked-button.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = LinkedButton;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
 var _button = _interopRequireDefault(require("../button"));
@@ -23,9 +23,9 @@ function LinkedButton({
   ...props
 }) {
   const label = isLinked ? (0, _i18n.__)('Unlink sides') : (0, _i18n.__)('Link sides');
-  return (0, _element.createElement)(_tooltip.default, {
+  return (0, _react.createElement)(_tooltip.default, {
     text: label
-  }, (0, _element.createElement)(_button.default, {
+  }, (0, _react.createElement)(_button.default, {
     ...props,
     className: "component-box-control__linked-button",
     isSmall: true,

package/build/box-control/linked-button.js.map

@@ -1 +1 @@
-{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","LinkedButton","isLinked","props","label","__","_element","createElement","default","text","className","isSmall","icon","link","linkOff","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Tooltip from '../tooltip';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<Button\n\t\t\t\t{ ...props }\n\t\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\t\tisSmall\n\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\ticonSize={ 24 }\n\t\t\t\taria-label={ label }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIe,SAASK,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAG,IAAAG,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACP,QAAA,CAAAQ,OAAO;IAACC,IAAI,EAAGL;EAAO,GACtB,IAAAE,QAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,OAAM;IAAA,GACDL,KAAK;IACVO,SAAS,EAAC,sCAAsC;IAChDC,OAAO;IACPC,IAAI,EAAGV,QAAQ,GAAGW,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACf,cAAaX;EAAO,CACpB,CACO,CAAC;AAEZ"}
+{"version":3,"names":["_icons","require","_i18n","_button","_interopRequireDefault","_tooltip","LinkedButton","isLinked","props","label","__","_react","createElement","default","text","className","isSmall","icon","link","linkOff","iconSize"],"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { link, linkOff } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Tooltip from '../tooltip';\n\nexport default function LinkedButton( {\n\tisLinked,\n\t...props\n}: { isLinked?: boolean } & React.ComponentProps< typeof Button > ) {\n\tconst label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );\n\n\treturn (\n\t\t<Tooltip text={ label }>\n\t\t\t<Button\n\t\t\t\t{ ...props }\n\t\t\t\tclassName=\"component-box-control__linked-button\"\n\t\t\t\tisSmall\n\t\t\t\ticon={ isLinked ? link : linkOff }\n\t\t\t\ticonSize={ 24 }\n\t\t\t\taria-label={ label }\n\t\t\t/>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,QAAA,GAAAD,sBAAA,CAAAH,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIe,SAASK,YAAYA,CAAE;EACrCC,QAAQ;EACR,GAAGC;AAC4D,CAAC,EAAG;EACnE,MAAMC,KAAK,GAAGF,QAAQ,GAAG,IAAAG,QAAE,EAAE,cAAe,CAAC,GAAG,IAAAA,QAAE,EAAE,YAAa,CAAC;EAElE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACP,QAAA,CAAAQ,OAAO;IAACC,IAAI,EAAGL;EAAO,GACtB,IAAAE,MAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,OAAM;IAAA,GACDL,KAAK;IACVO,SAAS,EAAC,sCAAsC;IAChDC,OAAO;IACPC,IAAI,EAAGV,QAAQ,GAAGW,WAAI,GAAGC,cAAS;IAClCC,QAAQ,EAAG,EAAI;IACf,cAAaX;EAAO,CACpB,CACO,CAAC;AAEZ"}

package/build/box-control/unit-control.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BoxUnitControl;
-var _element = require("@wordpress/element");
-var _react = require("@use-gesture/react");
+var _react = require("react");
+var _react2 = require("@use-gesture/react");
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _boxControlStyles = require("./styles/box-control-styles");
 /**
@@ -28,7 +28,7 @@ function BoxUnitControl({
   value,
   ...props
 }) {
-  const bindHoverGesture = (0, _react.useHover)(({
+  const bindHoverGesture = (0, _react2.useHover)(({
     event,
     ...state
   }) => {
@@ -38,11 +38,11 @@ function BoxUnitControl({
       onHoverOff(event, state);
     }
   });
-  return (0, _element.createElement)(_boxControlStyles.UnitControlWrapper, {
+  return (0, _react.createElement)(_boxControlStyles.UnitControlWrapper, {
     ...bindHoverGesture()
-  }, (0, _element.createElement)(Tooltip, {
+  }, (0, _react.createElement)(Tooltip, {
     text: label
-  }, (0, _element.createElement)(_boxControlStyles.UnitControl, {
+  }, (0, _react.createElement)(_boxControlStyles.UnitControl, {
     "aria-label": label,
     className: "component-box-control__unit-control",
     isFirst: isFirst,
@@ -68,9 +68,9 @@ function Tooltip({
    * Originally discovered and referenced here:
    * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
    */
-  return (0, _element.createElement)(_tooltip.default, {
+  return (0, _react.createElement)(_tooltip.default, {
     text: text,
     placement: "top"
-  }, (0, _element.createElement)("div", null, children));
+  }, (0, _react.createElement)("div", null, children));
 }
 //# sourceMappingURL=unit-control.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_tooltip","_interopRequireDefault","_boxControlStyles","noop","BoxUnitControl","isFirst","isLast","isOnly","onHoverOn","onHoverOff","label","value","props","bindHoverGesture","useHover","event","state","hovering","_element","createElement","UnitControlWrapper","Tooltip","text","UnitControl","className","isPressEnterToChange","isResetValueOnUnitChange","children","default","placement"],"sources":["@wordpress/components/src/box-control/unit-control.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useHover } from '@use-gesture/react';\n\n/**\n * Internal dependencies\n */\nimport BaseTooltip from '../tooltip';\nimport { UnitControlWrapper, UnitControl } from './styles/box-control-styles';\nimport type { BoxUnitControlProps } from './types';\n\nconst noop = () => {};\n\nexport default function BoxUnitControl( {\n\tisFirst,\n\tisLast,\n\tisOnly,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tlabel,\n\tvalue,\n\t...props\n}: BoxUnitControlProps ) {\n\tconst bindHoverGesture = useHover( ( { event, ...state } ) => {\n\t\tif ( state.hovering ) {\n\t\t\tonHoverOn( event, state );\n\t\t} else {\n\t\t\tonHoverOff( event, state );\n\t\t}\n\t} );\n\n\treturn (\n\t\t<UnitControlWrapper { ...bindHoverGesture() }>\n\t\t\t<Tooltip text={ label }>\n\t\t\t\t<UnitControl\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\tisFirst={ isFirst }\n\t\t\t\t\tisLast={ isLast }\n\t\t\t\t\tisOnly={ isOnly }\n\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\tisResetValueOnUnitChange={ false }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</UnitControlWrapper>\n\t);\n}\n\nfunction Tooltip( {\n\tchildren,\n\ttext,\n}: {\n\tchildren: JSX.Element;\n\ttext?: string;\n} ) {\n\tif ( ! text ) return children;\n\n\t/**\n\t * Wrapping the children in a `<div />` as Tooltip as it attempts\n\t * to render the <UnitControl />. Using a plain `<div />` appears to\n\t * resolve this issue.\n\t *\n\t * Originally discovered and referenced here:\n\t * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\t */\n\treturn (\n\t\t<BaseTooltip text={ text } placement=\"top\">\n\t\t\t<div>{ children }</div>\n\t\t</BaseTooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,MAAMI,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,cAAcA,CAAE;EACvCC,OAAO;EACPC,MAAM;EACNC,MAAM;EACNC,SAAS,GAAGL,IAAI;EAChBM,UAAU,GAAGN,IAAI;EACjBO,KAAK;EACLC,KAAK;EACL,GAAGC;AACiB,CAAC,EAAG;EACxB,MAAMC,gBAAgB,GAAG,IAAAC,eAAQ,EAAE,CAAE;IAAEC,KAAK;IAAE,GAAGC;EAAM,CAAC,KAAM;IAC7D,IAAKA,KAAK,CAACC,QAAQ,EAAG;MACrBT,SAAS,CAAEO,KAAK,EAAEC,KAAM,CAAC;IAC1B,CAAC,MAAM;MACNP,UAAU,CAAEM,KAAK,EAAEC,KAAM,CAAC;IAC3B;EACD,CAAE,CAAC;EAEH,OACC,IAAAE,QAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAkB,kBAAkB;IAAA,GAAMP,gBAAgB,CAAC;EAAC,GAC1C,IAAAK,QAAA,CAAAC,aAAA,EAACE,OAAO;IAACC,IAAI,EAAGZ;EAAO,GACtB,IAAAQ,QAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAqB,WAAW;IACX,cAAab,KAAO;IACpBc,SAAS,EAAC,qCAAqC;IAC/CnB,OAAO,EAAGA,OAAS;IACnBC,MAAM,EAAGA,MAAQ;IACjBC,MAAM,EAAGA,MAAQ;IACjBkB,oBAAoB;IACpBC,wBAAwB,EAAG,KAAO;IAClCf,KAAK,EAAGA,KAAO;IAAA,GACVC;EAAK,CACV,CACO,CACU,CAAC;AAEvB;AAEA,SAASS,OAAOA,CAAE;EACjBM,QAAQ;EACRL;AAID,CAAC,EAAG;EACH,IAAK,CAAEA,IAAI,EAAG,OAAOK,QAAQ;;EAE7B;AACD;AACA;AACA;AACA;AACA;AACA;AACA;EACC,OACC,IAAAT,QAAA,CAAAC,aAAA,EAACnB,QAAA,CAAA4B,OAAW;IAACN,IAAI,EAAGA,IAAM;IAACO,SAAS,EAAC;EAAK,GACzC,IAAAX,QAAA,CAAAC,aAAA,eAAOQ,QAAe,CACV,CAAC;AAEhB"}
+{"version":3,"names":["_react2","require","_tooltip","_interopRequireDefault","_boxControlStyles","noop","BoxUnitControl","isFirst","isLast","isOnly","onHoverOn","onHoverOff","label","value","props","bindHoverGesture","useHover","event","state","hovering","_react","createElement","UnitControlWrapper","Tooltip","text","UnitControl","className","isPressEnterToChange","isResetValueOnUnitChange","children","default","placement"],"sources":["@wordpress/components/src/box-control/unit-control.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useHover } from '@use-gesture/react';\n\n/**\n * Internal dependencies\n */\nimport BaseTooltip from '../tooltip';\nimport { UnitControlWrapper, UnitControl } from './styles/box-control-styles';\nimport type { BoxUnitControlProps } from './types';\n\nconst noop = () => {};\n\nexport default function BoxUnitControl( {\n\tisFirst,\n\tisLast,\n\tisOnly,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tlabel,\n\tvalue,\n\t...props\n}: BoxUnitControlProps ) {\n\tconst bindHoverGesture = useHover( ( { event, ...state } ) => {\n\t\tif ( state.hovering ) {\n\t\t\tonHoverOn( event, state );\n\t\t} else {\n\t\t\tonHoverOff( event, state );\n\t\t}\n\t} );\n\n\treturn (\n\t\t<UnitControlWrapper { ...bindHoverGesture() }>\n\t\t\t<Tooltip text={ label }>\n\t\t\t\t<UnitControl\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\tisFirst={ isFirst }\n\t\t\t\t\tisLast={ isLast }\n\t\t\t\t\tisOnly={ isOnly }\n\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\tisResetValueOnUnitChange={ false }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\t{ ...props }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</UnitControlWrapper>\n\t);\n}\n\nfunction Tooltip( {\n\tchildren,\n\ttext,\n}: {\n\tchildren: JSX.Element;\n\ttext?: string;\n} ) {\n\tif ( ! text ) return children;\n\n\t/**\n\t * Wrapping the children in a `<div />` as Tooltip as it attempts\n\t * to render the <UnitControl />. Using a plain `<div />` appears to\n\t * resolve this issue.\n\t *\n\t * Originally discovered and referenced here:\n\t * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026\n\t */\n\treturn (\n\t\t<BaseTooltip text={ text } placement=\"top\">\n\t\t\t<div>{ children }</div>\n\t\t</BaseTooltip>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,MAAMI,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;AAEN,SAASC,cAAcA,CAAE;EACvCC,OAAO;EACPC,MAAM;EACNC,MAAM;EACNC,SAAS,GAAGL,IAAI;EAChBM,UAAU,GAAGN,IAAI;EACjBO,KAAK;EACLC,KAAK;EACL,GAAGC;AACiB,CAAC,EAAG;EACxB,MAAMC,gBAAgB,GAAG,IAAAC,gBAAQ,EAAE,CAAE;IAAEC,KAAK;IAAE,GAAGC;EAAM,CAAC,KAAM;IAC7D,IAAKA,KAAK,CAACC,QAAQ,EAAG;MACrBT,SAAS,CAAEO,KAAK,EAAEC,KAAM,CAAC;IAC1B,CAAC,MAAM;MACNP,UAAU,CAAEM,KAAK,EAAEC,KAAM,CAAC;IAC3B;EACD,CAAE,CAAC;EAEH,OACC,IAAAE,MAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAkB,kBAAkB;IAAA,GAAMP,gBAAgB,CAAC;EAAC,GAC1C,IAAAK,MAAA,CAAAC,aAAA,EAACE,OAAO;IAACC,IAAI,EAAGZ;EAAO,GACtB,IAAAQ,MAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAqB,WAAW;IACX,cAAab,KAAO;IACpBc,SAAS,EAAC,qCAAqC;IAC/CnB,OAAO,EAAGA,OAAS;IACnBC,MAAM,EAAGA,MAAQ;IACjBC,MAAM,EAAGA,MAAQ;IACjBkB,oBAAoB;IACpBC,wBAAwB,EAAG,KAAO;IAClCf,KAAK,EAAGA,KAAO;IAAA,GACVC;EAAK,CACV,CACO,CACU,CAAC;AAEvB;AAEA,SAASS,OAAOA,CAAE;EACjBM,QAAQ;EACRL;AAID,CAAC,EAAG;EACH,IAAK,CAAEA,IAAI,EAAG,OAAOK,QAAQ;;EAE7B;AACD;AACA;AACA;AACA;AACA;AACA;AACA;EACC,OACC,IAAAT,MAAA,CAAAC,aAAA,EAACnB,QAAA,CAAA4B,OAAW;IAACN,IAAI,EAAGA,IAAM;IAACO,SAAS,EAAC;EAAK,GACzC,IAAAX,MAAA,CAAAC,aAAA,eAAOQ,QAAe,CACV,CAAC;AAEhB"}

package/build/button/deprecated.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
+var _element = require("@wordpress/element");
 var _ = _interopRequireDefault(require("."));
 /**
  * External dependencies
@@ -32,7 +33,7 @@ function UnforwardedIconButton({
     alternative: 'wp.components.Button',
     version: '6.2'
   });
-  return (0, _element.createElement)(_.default, {
+  return (0, _react.createElement)(_.default, {
     ...props,
     ref: ref,
     tooltipPosition: labelPosition,

package/build/button/deprecated.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_deprecated","_interopRequireDefault","_","UnforwardedIconButton","label","labelPosition","size","tooltip","props","ref","deprecated","since","alternative","version","createElement","default","tooltipPosition","iconSize","showTooltip","undefined","_default","forwardRef","exports"],"sources":["@wordpress/components/src/button/deprecated.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '.';\nimport type { DeprecatedIconButtonProps } from './types';\n\nfunction UnforwardedIconButton(\n\t{\n\t\tlabel,\n\t\tlabelPosition,\n\t\tsize,\n\t\ttooltip,\n\t\t...props\n\t}: React.ComponentPropsWithoutRef< typeof Button > &\n\t\tDeprecatedIconButtonProps,\n\tref: ForwardedRef< any >\n) {\n\tdeprecated( 'wp.components.IconButton', {\n\t\tsince: '5.4',\n\t\talternative: 'wp.components.Button',\n\t\tversion: '6.2',\n\t} );\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\ttooltipPosition={ labelPosition }\n\t\t\ticonSize={ size }\n\t\t\tshowTooltip={ tooltip !== undefined ? !! tooltip : undefined }\n\t\t\tlabel={ tooltip || label }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( UnforwardedIconButton );\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AADA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAMA,IAAAG,CAAA,GAAAD,sBAAA,CAAAF,OAAA;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASI,qBAAqBA,CAC7B;EACCC,KAAK;EACLC,aAAa;EACbC,IAAI;EACJC,OAAO;EACP,GAAGC;AAEqB,CAAC,EAC1BC,GAAwB,EACvB;EACD,IAAAC,mBAAU,EAAE,0BAA0B,EAAE;IACvCC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE,sBAAsB;IACnCC,OAAO,EAAE;EACV,CAAE,CAAC;EAEH,OACC,IAAAf,QAAA,CAAAgB,aAAA,EAACZ,CAAA,CAAAa,OAAM;IAAA,GACDP,KAAK;IACVC,GAAG,EAAGA,GAAK;IACXO,eAAe,EAAGX,aAAe;IACjCY,QAAQ,EAAGX,IAAM;IACjBY,WAAW,EAAGX,OAAO,KAAKY,SAAS,GAAG,CAAC,CAAEZ,OAAO,GAAGY,SAAW;IAC9Df,KAAK,EAAGG,OAAO,IAAIH;EAAO,CAC1B,CAAC;AAEJ;AAAC,IAAAgB,QAAA,GAEc,IAAAC,mBAAU,EAAElB,qBAAsB,CAAC;AAAAmB,OAAA,CAAAP,OAAA,GAAAK,QAAA"}
+{"version":3,"names":["_deprecated","_interopRequireDefault","require","_element","_","UnforwardedIconButton","label","labelPosition","size","tooltip","props","ref","deprecated","since","alternative","version","_react","createElement","default","tooltipPosition","iconSize","showTooltip","undefined","_default","forwardRef","exports"],"sources":["@wordpress/components/src/button/deprecated.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Button from '.';\nimport type { DeprecatedIconButtonProps } from './types';\n\nfunction UnforwardedIconButton(\n\t{\n\t\tlabel,\n\t\tlabelPosition,\n\t\tsize,\n\t\ttooltip,\n\t\t...props\n\t}: React.ComponentPropsWithoutRef< typeof Button > &\n\t\tDeprecatedIconButtonProps,\n\tref: ForwardedRef< any >\n) {\n\tdeprecated( 'wp.components.IconButton', {\n\t\tsince: '5.4',\n\t\talternative: 'wp.components.Button',\n\t\tversion: '6.2',\n\t} );\n\n\treturn (\n\t\t<Button\n\t\t\t{ ...props }\n\t\t\tref={ ref }\n\t\t\ttooltipPosition={ labelPosition }\n\t\t\ticonSize={ size }\n\t\t\tshowTooltip={ tooltip !== undefined ? !! tooltip : undefined }\n\t\t\tlabel={ tooltip || label }\n\t\t/>\n\t);\n}\n\nexport default forwardRef( UnforwardedIconButton );\n"],"mappings":";;;;;;;;AAQA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,CAAA,GAAAH,sBAAA,CAAAC,OAAA;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,SAASG,qBAAqBA,CAC7B;EACCC,KAAK;EACLC,aAAa;EACbC,IAAI;EACJC,OAAO;EACP,GAAGC;AAEqB,CAAC,EAC1BC,GAAwB,EACvB;EACD,IAAAC,mBAAU,EAAE,0BAA0B,EAAE;IACvCC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE,sBAAsB;IACnCC,OAAO,EAAE;EACV,CAAE,CAAC;EAEH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACb,CAAA,CAAAc,OAAM;IAAA,GACDR,KAAK;IACVC,GAAG,EAAGA,GAAK;IACXQ,eAAe,EAAGZ,aAAe;IACjCa,QAAQ,EAAGZ,IAAM;IACjBa,WAAW,EAAGZ,OAAO,KAAKa,SAAS,GAAG,CAAC,CAAEb,OAAO,GAAGa,SAAW;IAC9DhB,KAAK,EAAGG,OAAO,IAAIH;EAAO,CAC1B,CAAC;AAEJ;AAAC,IAAAiB,QAAA,GAEc,IAAAC,mBAAU,EAAEnB,qBAAsB,CAAC;AAAAoB,OAAA,CAAAP,OAAA,GAAAK,QAAA"}