@wordpress/components 25.0.0 → 25.1.1

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -6,15 +5,13 @@ import { createElement } from "@wordpress/element";
  */
 import { Root, Viewbox, TopStroke, RightStroke, BottomStroke, LeftStroke } from './styles/box-control-icon-styles';
 const BASE_ICON_SIZE = 24;
-export default function BoxControlIcon(_ref) {
-  let {
-    size = 24,
-    side = 'all',
-    sides,
-    ...props
-  } = _ref;
-
-  const isSideDisabled = value => (sides === null || sides === void 0 ? void 0 : sides.length) && !sides.includes(value);
+export default function BoxControlIcon({
+  size = 24,
+  side = 'all',
+  sides,
+  ...props
+}) {
+  const isSideDisabled = value => sides?.length && !sides.includes(value);
 
   const hasSide = value => {
     if (isSideDisabled(value)) {
@@ -30,11 +27,12 @@ export default function BoxControlIcon(_ref) {
   const left = hasSide('left') || hasSide('horizontal'); // Simulates SVG Icon scaling.
 
   const scale = size / BASE_ICON_SIZE;
-  return createElement(Root, _extends({
+  return createElement(Root, {
     style: {
       transform: `scale(${scale})`
-    }
-  }, props), createElement(Viewbox, null, createElement(TopStroke, {
+    },
+    ...props
+  }, createElement(Viewbox, null, createElement(TopStroke, {
     isFocused: top
   }), createElement(RightStroke, {
     isFocused: right

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/icon.tsx"],"names":["Root","Viewbox","TopStroke","RightStroke","BottomStroke","LeftStroke","BASE_ICON_SIZE","BoxControlIcon","size","side","sides","props","isSideDisabled","value","length","includes","hasSide","top","right","bottom","left","scale","transform"],"mappings":";;;AAAA;AACA;AACA;AAEA,SACCA,IADD,EAECC,OAFD,EAGCC,SAHD,EAICC,WAJD,EAKCC,YALD,EAMCC,UAND,QAOO,kCAPP;AAUA,MAAMC,cAAc,GAAG,EAAvB;AAEA,eAAe,SAASC,cAAT,OAK6C;AAAA,MALpB;AACvCC,IAAAA,IAAI,GAAG,EADgC;AAEvCC,IAAAA,IAAI,GAAG,KAFgC;AAGvCC,IAAAA,KAHuC;AAIvC,OAAGC;AAJoC,GAKoB;;AAC3D,QAAMC,cAAc,GACnBC,KADsB,IAElB,CAAAH,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEI,MAAP,KAAiB,CAAEJ,KAAK,CAACK,QAAN,CAAgBF,KAAhB,CAFxB;;AAIA,QAAMG,OAAO,GACZH,KADe,IAEX;AACJ,QAAKD,cAAc,CAAEC,KAAF,CAAnB,EAA+B;AAC9B,aAAO,KAAP;AACA;;AAED,WAAOJ,IAAI,KAAK,KAAT,IAAkBA,IAAI,KAAKI,KAAlC;AACA,GARD;;AAUA,QAAMI,GAAG,GAAGD,OAAO,CAAE,KAAF,CAAP,IAAoBA,OAAO,CAAE,UAAF,CAAvC;AACA,QAAME,KAAK,GAAGF,OAAO,CAAE,OAAF,CAAP,IAAsBA,OAAO,CAAE,YAAF,CAA3C;AACA,QAAMG,MAAM,GAAGH,OAAO,CAAE,QAAF,CAAP,IAAuBA,OAAO,CAAE,UAAF,CAA7C;AACA,QAAMI,IAAI,GAAGJ,OAAO,CAAE,MAAF,CAAP,IAAqBA,OAAO,CAAE,YAAF,CAAzC,CAlB2D,CAoB3D;;AACA,QAAMK,KAAK,GAAGb,IAAI,GAAGF,cAArB;AAEA,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAG;AAAEgB,MAAAA,SAAS,EAAG,SAASD,KAAO;AAA9B;AAAd,KAAwDV,KAAxD,GACC,cAAC,OAAD,QACC,cAAC,SAAD;AAAW,IAAA,SAAS,EAAGM;AAAvB,IADD,EAEC,cAAC,WAAD;AAAa,IAAA,SAAS,EAAGC;AAAzB,IAFD,EAGC,cAAC,YAAD;AAAc,IAAA,SAAS,EAAGC;AAA1B,IAHD,EAIC,cAAC,UAAD;AAAY,IAAA,SAAS,EAAGC;AAAxB,IAJD,CADD,CADD;AAUA","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"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/icon.tsx"],"names":["Root","Viewbox","TopStroke","RightStroke","BottomStroke","LeftStroke","BASE_ICON_SIZE","BoxControlIcon","size","side","sides","props","isSideDisabled","value","length","includes","hasSide","top","right","bottom","left","scale","transform"],"mappings":";;AAAA;AACA;AACA;AAEA,SACCA,IADD,EAECC,OAFD,EAGCC,SAHD,EAICC,WAJD,EAKCC,YALD,EAMCC,UAND,QAOO,kCAPP;AAUA,MAAMC,cAAc,GAAG,EAAvB;AAEA,eAAe,SAASC,cAAT,CAAyB;AACvCC,EAAAA,IAAI,GAAG,EADgC;AAEvCC,EAAAA,IAAI,GAAG,KAFgC;AAGvCC,EAAAA,KAHuC;AAIvC,KAAGC;AAJoC,CAAzB,EAK6C;AAC3D,QAAMC,cAAc,GACnBC,KADsB,IAElBH,KAAK,EAAEI,MAAP,IAAiB,CAAEJ,KAAK,CAACK,QAAN,CAAgBF,KAAhB,CAFxB;;AAIA,QAAMG,OAAO,GACZH,KADe,IAEX;AACJ,QAAKD,cAAc,CAAEC,KAAF,CAAnB,EAA+B;AAC9B,aAAO,KAAP;AACA;;AAED,WAAOJ,IAAI,KAAK,KAAT,IAAkBA,IAAI,KAAKI,KAAlC;AACA,GARD;;AAUA,QAAMI,GAAG,GAAGD,OAAO,CAAE,KAAF,CAAP,IAAoBA,OAAO,CAAE,UAAF,CAAvC;AACA,QAAME,KAAK,GAAGF,OAAO,CAAE,OAAF,CAAP,IAAsBA,OAAO,CAAE,YAAF,CAA3C;AACA,QAAMG,MAAM,GAAGH,OAAO,CAAE,QAAF,CAAP,IAAuBA,OAAO,CAAE,UAAF,CAA7C;AACA,QAAMI,IAAI,GAAGJ,OAAO,CAAE,MAAF,CAAP,IAAqBA,OAAO,CAAE,YAAF,CAAzC,CAlB2D,CAoB3D;;AACA,QAAMK,KAAK,GAAGb,IAAI,GAAGF,cAArB;AAEA,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAG;AAAEgB,MAAAA,SAAS,EAAG,SAASD,KAAO;AAA9B,KAAd;AAAA,OAAwDV;AAAxD,KACC,cAAC,OAAD,QACC,cAAC,SAAD;AAAW,IAAA,SAAS,EAAGM;AAAvB,IADD,EAEC,cAAC,WAAD;AAAa,IAAA,SAAS,EAAGC;AAAzB,IAFD,EAGC,cAAC,YAAD;AAAc,IAAA,SAAS,EAAGC;AAA1B,IAHD,EAIC,cAAC,UAAD;AAAY,IAAA,SAAS,EAAGC;AAAxB,IAJD,CADD,CADD;AAUA","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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -60,27 +59,26 @@ function useUniqueId(idProp) {
  */
 
 
-function BoxControl(_ref) {
-  let {
-    id: idProp,
-    inputProps = defaultInputProps,
-    onChange = noop,
-    label = __('Box Control'),
-    values: valuesProp,
-    units,
-    sides,
-    splitOnAxis = false,
-    allowReset = true,
-    resetValues = DEFAULT_VALUES,
-    onMouseOver,
-    onMouseOut
-  } = _ref;
+function BoxControl({
+  id: idProp,
+  inputProps = defaultInputProps,
+  onChange = noop,
+  label = __('Box Control'),
+  values: valuesProp,
+  units,
+  sides,
+  splitOnAxis = false,
+  allowReset = true,
+  resetValues = DEFAULT_VALUES,
+  onMouseOver,
+  onMouseOut
+}) {
   const [values, setValues] = useControlledState(valuesProp, {
     fallback: DEFAULT_VALUES
   });
   const inputValues = values || DEFAULT_VALUES;
   const hasInitialValue = isValuesDefined(valuesProp);
-  const hasOneSide = (sides === null || sides === void 0 ? void 0 : sides.length) === 1;
+  const hasOneSide = sides?.length === 1;
   const [isDirty, setIsDirty] = useState(hasInitialValue);
   const [isLinked, setIsLinked] = useState(!hasInitialValue || !isValuesMixed(inputValues) || hasOneSide);
   const [side, setSide] = useState(getInitialSide(isLinked, splitOnAxis)); // Tracking selected units via internal state allows filtering of CSS unit
@@ -88,10 +86,10 @@ function BoxControl(_ref) {
   // behaviour. Filtering CSS only values prevents invalid style values.
 
   const [selectedUnits, setSelectedUnits] = useState({
-    top: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.top)[1],
-    right: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.right)[1],
-    bottom: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.bottom)[1],
-    left: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.left)[1]
+    top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1],
+    right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1],
+    bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1],
+    left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1]
   });
   const id = useUniqueId(idProp);
   const headingId = `${id}-heading`;
@@ -101,10 +99,9 @@ function BoxControl(_ref) {
     setSide(getInitialSide(!isLinked, splitOnAxis));
   };
 
-  const handleOnFocus = (_event, _ref2) => {
-    let {
-      side: nextSide
-    } = _ref2;
+  const handleOnFocus = (_event, {
+    side: nextSide
+  }) => {
     setSide(nextSide);
   };
 
@@ -152,12 +149,15 @@ function BoxControl(_ref) {
   }, createElement(FlexItem, null, createElement(BoxControlIcon, {
     side: side,
     sides: sides
-  })), isLinked && createElement(FlexBlock, null, createElement(AllInputControl, _extends({
-    "aria-label": label
-  }, inputControlProps))), !isLinked && splitOnAxis && createElement(FlexBlock, null, createElement(AxialInputControls, inputControlProps)), !hasOneSide && createElement(FlexItem, null, createElement(LinkedButton, {
+  })), isLinked && createElement(FlexBlock, null, createElement(AllInputControl, {
+    "aria-label": label,
+    ...inputControlProps
+  })), !isLinked && splitOnAxis && createElement(FlexBlock, null, createElement(AxialInputControls, { ...inputControlProps
+  })), !hasOneSide && createElement(FlexItem, null, createElement(LinkedButton, {
     onClick: toggleLinked,
     isLinked: isLinked
-  }))), !isLinked && !splitOnAxis && createElement(InputControls, inputControlProps));
+  }))), !isLinked && !splitOnAxis && createElement(InputControls, { ...inputControlProps
+  }));
 }
 
 export { applyValueToSides } from './utils';

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/index.tsx"],"names":["useInstanceId","useState","__","BaseControl","Button","FlexItem","FlexBlock","AllInputControl","InputControls","AxialInputControls","BoxControlIcon","LinkedButton","Root","Header","HeaderControlWrapper","parseQuantityAndUnitFromRawValue","DEFAULT_VALUES","getInitialSide","isValuesMixed","isValuesDefined","useControlledState","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","onMouseOver","onMouseOut","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","applyValueToSides"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { 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"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/index.tsx"],"names":["useInstanceId","useState","__","BaseControl","Button","FlexItem","FlexBlock","AllInputControl","InputControls","AxialInputControls","BoxControlIcon","LinkedButton","Root","Header","HeaderControlWrapper","parseQuantityAndUnitFromRawValue","DEFAULT_VALUES","getInitialSide","isValuesMixed","isValuesDefined","useControlledState","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","BoxControl","id","inputProps","onChange","label","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","onMouseOver","onMouseOut","setValues","fallback","inputValues","hasInitialValue","hasOneSide","length","isDirty","setIsDirty","isLinked","setIsLinked","side","setSide","selectedUnits","setSelectedUnits","top","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","applyValueToSides"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { 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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -11,19 +10,17 @@ import { LayoutContainer, Layout } from './styles/box-control-styles';
 
 const noop = () => {};
 
-export default function BoxInputControls(_ref) {
-  let {
-    onChange = noop,
-    onFocus = noop,
-    onHoverOn = noop,
-    onHoverOff = noop,
-    values,
-    selectedUnits,
-    setSelectedUnits,
-    sides,
-    ...props
-  } = _ref;
-
+export default function BoxInputControls({
+  onChange = noop,
+  onFocus = noop,
+  onHoverOn = noop,
+  onHoverOff = noop,
+  values,
+  selectedUnits,
+  setSelectedUnits,
+  sides,
+  ...props
+}) {
   const createHandleOnFocus = side => event => {
     onFocus(event, {
       side
@@ -46,10 +43,9 @@ export default function BoxInputControls(_ref) {
     onChange(nextValues);
   };
 
-  const createHandleOnChange = side => (next, _ref2) => {
-    let {
-      event
-    } = _ref2;
+  const createHandleOnChange = side => (next, {
+    event
+  }) => {
     const nextValues = { ...values
     };
     const isNumeric = next !== undefined && !isNaN(parseFloat(next));
@@ -94,7 +90,7 @@ export default function BoxInputControls(_ref) {
   }; // Filter sides if custom configuration provided, maintaining default order.
 
 
-  const filteredSides = sides !== null && sides !== void 0 && sides.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
+  const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
   const first = filteredSides[0];
   const last = filteredSides[filteredSides.length - 1];
   const only = first === last && first;
@@ -107,7 +103,7 @@ export default function BoxInputControls(_ref) {
   }, filteredSides.map(side => {
     const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]);
     const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
-    return createElement(UnitControl, _extends({}, props, {
+    return createElement(UnitControl, { ...props,
       isFirst: first === side,
       isLast: last === side,
       isOnly: only === side,
@@ -119,7 +115,7 @@ export default function BoxInputControls(_ref) {
       onHoverOff: createHandleOnHoverOff(side),
       label: LABELS[side],
       key: `box-control-${side}`
-    }));
+    });
   })));
 }
 //# sourceMappingURL=input-controls.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"names":["UnitControl","parseQuantityAndUnitFromRawValue","ALL_SIDES","LABELS","LayoutContainer","Layout","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","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","computedUnit","join"],"mappings":"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","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"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"names":["UnitControl","parseQuantityAndUnitFromRawValue","ALL_SIDES","LABELS","LayoutContainer","Layout","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","filter","includes","first","last","only","map","parsedQuantity","parsedUnit","computedUnit","join"],"mappings":"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","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"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -12,20 +11,19 @@ import { __ } from '@wordpress/i18n';
 
 import Button from '../button';
 import Tooltip from '../tooltip';
-export default function LinkedButton(_ref) {
-  let {
-    isLinked,
-    ...props
-  } = _ref;
+export default function LinkedButton({
+  isLinked,
+  ...props
+}) {
   const label = isLinked ? __('Unlink sides') : __('Link sides');
   return createElement(Tooltip, {
     text: label
-  }, createElement(Button, _extends({}, props, {
+  }, createElement(Button, { ...props,
     className: "component-box-control__linked-button",
     isSmall: true,
     icon: isLinked ? link : linkOff,
     iconSize: 24,
     "aria-label": label
-  })));
+  }));
 }
 //# sourceMappingURL=linked-button.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"names":["link","linkOff","__","Button","Tooltip","LinkedButton","isLinked","props","label"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,OAAf,QAA8B,kBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA,eAAe,SAASC,YAAT,OAGqD;AAAA,MAH9B;AACrCC,IAAAA,QADqC;AAErC,OAAGC;AAFkC,GAG8B;AACnE,QAAMC,KAAK,GAAGF,QAAQ,GAAGJ,EAAE,CAAE,cAAF,CAAL,GAA0BA,EAAE,CAAE,YAAF,CAAlD;AAEA,SACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGM;AAAhB,KACC,cAAC,MAAD,eACMD,KADN;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,IAAA,OAAO,MAHR;AAIC,IAAA,IAAI,EAAGD,QAAQ,GAAGN,IAAH,GAAUC,OAJ1B;AAKC,IAAA,QAAQ,EAAG,EALZ;AAMC,kBAAaO;AANd,KADD,CADD;AAYA","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"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/linked-button.tsx"],"names":["link","linkOff","__","Button","Tooltip","LinkedButton","isLinked","props","label"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,OAAf,QAA8B,kBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAEA,eAAe,SAASC,YAAT,CAAuB;AACrCC,EAAAA,QADqC;AAErC,KAAGC;AAFkC,CAAvB,EAGqD;AACnE,QAAMC,KAAK,GAAGF,QAAQ,GAAGJ,EAAE,CAAE,cAAF,CAAL,GAA0BA,EAAE,CAAE,YAAF,CAAlD;AAEA,SACC,cAAC,OAAD;AAAS,IAAA,IAAI,EAAGM;AAAhB,KACC,cAAC,MAAD,OACMD,KADN;AAEC,IAAA,SAAS,EAAC,sCAFX;AAGC,IAAA,OAAO,MAHR;AAIC,IAAA,IAAI,EAAGD,QAAQ,GAAGN,IAAH,GAAUC,OAJ1B;AAKC,IAAA,QAAQ,EAAG,EALZ;AAMC,kBAAaO;AANd,IADD,CADD;AAYA","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"]}

package/build-module/box-control/styles/box-control-icon-styles.js

@@ -35,10 +35,9 @@ export const Viewbox = _styled("span", process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 
-const strokeFocus = _ref => {
-  let {
-    isFocused
-  } = _ref;
+const strokeFocus = ({
+  isFocused
+}) => {
   return /*#__PURE__*/css({
     backgroundColor: 'currentColor',
     opacity: isFocused ? 1 : 0.3

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/styles/box-control-icon-styles.ts"],"names":["css","Root","Viewbox","strokeFocus","isFocused","backgroundColor","opacity","Stroke","VerticalStroke","HorizontalStroke","TopStroke","RightStroke","BottomStroke","LeftStroke"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAGA,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;AASP,OAAO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb;;AAQP,MAAMC,WAAW,GAAG,QAA6C;AAAA,MAA3C;AAAEC,IAAAA;AAAF,GAA2C;AAChE,sBAAOJ,GAAG,CAAE;AACXK,IAAAA,eAAe,EAAE,cADN;AAEXC,IAAAA,OAAO,EAAEF,SAAS,GAAG,CAAH,GAAO;AAFd,GAAF,ykEAAV;AAIA,CALD;;AAOA,MAAMG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,iFAKRJ,WALQ,6gEAAZ;;AAQA,MAAMK,cAAc,GAAG,qBAAQD,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAMA,MAAME,gBAAgB,GAAG,qBAAQF,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAMA,OAAO,MAAMG,SAAS,GAAG,qBAAQD,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;AAIP,OAAO,MAAME,WAAW,GAAG,qBAAQH,cAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjB;AAIP,OAAO,MAAMI,YAAY,GAAG,qBAAQH,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIP,OAAO,MAAMI,UAAU,GAAG,qBAAQL,cAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nexport const Root = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\twidth: 24px;\n\theight: 24px;\n\tposition: relative;\n\tpadding: 4px;\n`;\n\nexport const Viewbox = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n`;\n\nconst strokeFocus = ( { isFocused }: { isFocused: boolean } ) => {\n\treturn css( {\n\t\tbackgroundColor: 'currentColor',\n\t\topacity: isFocused ? 1 : 0.3,\n\t} );\n};\n\nconst Stroke = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: absolute;\n\t${ strokeFocus };\n`;\n\nconst VerticalStroke = styled( Stroke )`\n\tbottom: 3px;\n\ttop: 3px;\n\twidth: 2px;\n`;\n\nconst HorizontalStroke = styled( Stroke )`\n\theight: 2px;\n\tleft: 3px;\n\tright: 3px;\n`;\n\nexport const TopStroke = styled( HorizontalStroke )`\n\ttop: 0;\n`;\n\nexport const RightStroke = styled( VerticalStroke )`\n\tright: 0;\n`;\n\nexport const BottomStroke = styled( HorizontalStroke )`\n\tbottom: 0;\n`;\n\nexport const LeftStroke = styled( VerticalStroke )`\n\tleft: 0;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/styles/box-control-icon-styles.ts"],"names":["css","Root","Viewbox","strokeFocus","isFocused","backgroundColor","opacity","Stroke","VerticalStroke","HorizontalStroke","TopStroke","RightStroke","BottomStroke","LeftStroke"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;AAGA,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;AASP,OAAO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb;;AAQP,MAAMC,WAAW,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAA6C;AAChE,sBAAOJ,GAAG,CAAE;AACXK,IAAAA,eAAe,EAAE,cADN;AAEXC,IAAAA,OAAO,EAAEF,SAAS,GAAG,CAAH,GAAO;AAFd,GAAF,ykEAAV;AAIA,CALD;;AAOA,MAAMG,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,iFAKRJ,WALQ,6gEAAZ;;AAQA,MAAMK,cAAc,GAAG,qBAAQD,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAApB;;AAMA,MAAME,gBAAgB,GAAG,qBAAQF,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAMA,OAAO,MAAMG,SAAS,GAAG,qBAAQD,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAf;AAIP,OAAO,MAAME,WAAW,GAAG,qBAAQH,cAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAjB;AAIP,OAAO,MAAMI,YAAY,GAAG,qBAAQH,gBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIP,OAAO,MAAMI,UAAU,GAAG,qBAAQL,cAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nexport const Root = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\twidth: 24px;\n\theight: 24px;\n\tposition: relative;\n\tpadding: 4px;\n`;\n\nexport const Viewbox = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n`;\n\nconst strokeFocus = ( { isFocused }: { isFocused: boolean } ) => {\n\treturn css( {\n\t\tbackgroundColor: 'currentColor',\n\t\topacity: isFocused ? 1 : 0.3,\n\t} );\n};\n\nconst Stroke = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: absolute;\n\t${ strokeFocus };\n`;\n\nconst VerticalStroke = styled( Stroke )`\n\tbottom: 3px;\n\ttop: 3px;\n\twidth: 2px;\n`;\n\nconst HorizontalStroke = styled( Stroke )`\n\theight: 2px;\n\tleft: 3px;\n\tright: 3px;\n`;\n\nexport const TopStroke = styled( HorizontalStroke )`\n\ttop: 0;\n`;\n\nexport const RightStroke = styled( VerticalStroke )`\n\tright: 0;\n`;\n\nexport const BottomStroke = styled( HorizontalStroke )`\n\tbottom: 0;\n`;\n\nexport const LeftStroke = styled( VerticalStroke )`\n\tleft: 0;\n`;\n"]}

package/build-module/box-control/styles/box-control-styles.js

@@ -118,13 +118,11 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-const unitControlBorderRadiusStyles = _ref3 => {
-  let {
-    isFirst,
-    isLast,
-    isOnly
-  } = _ref3;
-
+const unitControlBorderRadiusStyles = ({
+  isFirst,
+  isLast,
+  isOnly
+}) => {
   if (isFirst) {
     return rtl({
       borderTopRightRadius: 0,
@@ -146,11 +144,10 @@ const unitControlBorderRadiusStyles = _ref3 => {
   return _ref;
 };
 
-const unitControlMarginStyles = _ref4 => {
-  let {
-    isFirst,
-    isOnly
-  } = _ref4;
+const unitControlMarginStyles = ({
+  isFirst,
+  isOnly
+}) => {
   const marginLeft = isFirst || isOnly ? 0 : -1;
   return rtl({
     marginLeft

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/styles/box-control-styles.ts"],"names":["css","Flex","BaseUnitControl","rtl","Root","Header","HeaderControlWrapper","UnitControlWrapper","LayoutContainer","Layout","unitControlBorderRadiusStyles","isFirst","isLast","isOnly","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","unitControlMarginStyles","marginLeft","UnitControl"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAEA;AACA;AACA;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,GAAT,QAAoB,aAApB;AAGA,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;AAOP,OAAO,MAAMC,MAAM,GAAG,qBAAQJ,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAZ;AAIP,OAAO,MAAMK,oBAAoB,GAAG,qBAAQL,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;AAKP,OAAO,MAAMM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAxB;AAKP,OAAO,MAAMC,eAAe,GAAG,qBAAQP,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAArB;AAKP,OAAO,MAAMQ,MAAM,GAAG,qBAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAZ;;;;;;;;;;;;;;;;;;;;;;AAOP,MAAMS,6BAA6B,GAAG,SAI+B;AAAA,MAJ7B;AACvCC,IAAAA,OADuC;AAEvCC,IAAAA,MAFuC;AAGvCC,IAAAA;AAHuC,GAI6B;;AACpE,MAAKF,OAAL,EAAe;AACd,WAAOR,GAAG,CAAE;AAAEW,MAAAA,oBAAoB,EAAE,CAAxB;AAA2BC,MAAAA,uBAAuB,EAAE;AAApD,KAAF,CAAH,EAAP;AACA;;AACD,MAAKH,MAAL,EAAc;AACb,WAAOT,GAAG,CAAE;AAAEa,MAAAA,mBAAmB,EAAE,CAAvB;AAA0BC,MAAAA,sBAAsB,EAAE;AAAlD,KAAF,CAAH,EAAP;AACA;;AACD,MAAKJ,MAAL,EAAc;AACb;AACA;;AAED;AAGA,CAlBD;;AAoBA,MAAMK,uBAAuB,GAAG,SAG0B;AAAA,MAHxB;AACjCP,IAAAA,OADiC;AAEjCE,IAAAA;AAFiC,GAGwB;AACzD,QAAMM,UAAU,GAAGR,OAAO,IAAIE,MAAX,GAAoB,CAApB,GAAwB,CAAC,CAA5C;AAEA,SAAOV,GAAG,CAAE;AAAEgB,IAAAA;AAAF,GAAF,CAAH,EAAP;AACA,CAPD;;AASA,OAAO,MAAMC,WAAW,GAAG,qBAAQlB,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,oBAEpBQ,6BAFoB,OAGpBQ,uBAHoB,yvFAAjB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport BaseUnitControl from '../../unit-control';\nimport { rtl } from '../../utils';\nimport type { BoxUnitControlProps } from '../types';\n\nexport const Root = styled.div`\n\tbox-sizing: border-box;\n\tmax-width: 235px;\n\tpadding-bottom: 12px;\n\twidth: 100%;\n`;\n\nexport const Header = styled( Flex )`\n\tmargin-bottom: 8px;\n`;\n\nexport const HeaderControlWrapper = styled( Flex )`\n\tmin-height: 30px;\n\tgap: 0;\n`;\n\nexport const UnitControlWrapper = styled.div`\n\tbox-sizing: border-box;\n\tmax-width: 80px;\n`;\n\nexport const LayoutContainer = styled( Flex )`\n\tjustify-content: center;\n\tpadding-top: 8px;\n`;\n\nexport const Layout = styled( Flex )`\n\tposition: relative;\n\theight: 100%;\n\twidth: 100%;\n\tjustify-content: flex-start;\n`;\n\nconst unitControlBorderRadiusStyles = ( {\n\tisFirst,\n\tisLast,\n\tisOnly,\n}: Pick< BoxUnitControlProps, 'isFirst' | 'isLast' | 'isOnly' > ) => {\n\tif ( isFirst ) {\n\t\treturn rtl( { borderTopRightRadius: 0, borderBottomRightRadius: 0 } )();\n\t}\n\tif ( isLast ) {\n\t\treturn rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )();\n\t}\n\tif ( isOnly ) {\n\t\treturn css( { borderRadius: 2 } );\n\t}\n\n\treturn css( {\n\t\tborderRadius: 0,\n\t} );\n};\n\nconst unitControlMarginStyles = ( {\n\tisFirst,\n\tisOnly,\n}: Pick< BoxUnitControlProps, 'isFirst' | 'isOnly' > ) => {\n\tconst marginLeft = isFirst || isOnly ? 0 : -1;\n\n\treturn rtl( { marginLeft } )();\n};\n\nexport const UnitControl = styled( BaseUnitControl )`\n\tmax-width: 60px;\n\t${ unitControlBorderRadiusStyles };\n\t${ unitControlMarginStyles };\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/styles/box-control-styles.ts"],"names":["css","Flex","BaseUnitControl","rtl","Root","Header","HeaderControlWrapper","UnitControlWrapper","LayoutContainer","Layout","unitControlBorderRadiusStyles","isFirst","isLast","isOnly","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","unitControlMarginStyles","marginLeft","UnitControl"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAEA;AACA;AACA;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,SAASC,GAAT,QAAoB,aAApB;AAGA,OAAO,MAAMC,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAV;AAOP,OAAO,MAAMC,MAAM,GAAG,qBAAQJ,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAZ;AAIP,OAAO,MAAMK,oBAAoB,GAAG,qBAAQL,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;AAKP,OAAO,MAAMM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAxB;AAKP,OAAO,MAAMC,eAAe,GAAG,qBAAQP,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAArB;AAKP,OAAO,MAAMQ,MAAM,GAAG,qBAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAZ;;;;;;;;;;;;;;;;;;;;;;AAOP,MAAMS,6BAA6B,GAAG,CAAE;AACvCC,EAAAA,OADuC;AAEvCC,EAAAA,MAFuC;AAGvCC,EAAAA;AAHuC,CAAF,KAI+B;AACpE,MAAKF,OAAL,EAAe;AACd,WAAOR,GAAG,CAAE;AAAEW,MAAAA,oBAAoB,EAAE,CAAxB;AAA2BC,MAAAA,uBAAuB,EAAE;AAApD,KAAF,CAAH,EAAP;AACA;;AACD,MAAKH,MAAL,EAAc;AACb,WAAOT,GAAG,CAAE;AAAEa,MAAAA,mBAAmB,EAAE,CAAvB;AAA0BC,MAAAA,sBAAsB,EAAE;AAAlD,KAAF,CAAH,EAAP;AACA;;AACD,MAAKJ,MAAL,EAAc;AACb;AACA;;AAED;AAGA,CAlBD;;AAoBA,MAAMK,uBAAuB,GAAG,CAAE;AACjCP,EAAAA,OADiC;AAEjCE,EAAAA;AAFiC,CAAF,KAG0B;AACzD,QAAMM,UAAU,GAAGR,OAAO,IAAIE,MAAX,GAAoB,CAApB,GAAwB,CAAC,CAA5C;AAEA,SAAOV,GAAG,CAAE;AAAEgB,IAAAA;AAAF,GAAF,CAAH,EAAP;AACA,CAPD;;AASA,OAAO,MAAMC,WAAW,GAAG,qBAAQlB,eAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,oBAEpBQ,6BAFoB,OAGpBQ,uBAHoB,yvFAAjB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport BaseUnitControl from '../../unit-control';\nimport { rtl } from '../../utils';\nimport type { BoxUnitControlProps } from '../types';\n\nexport const Root = styled.div`\n\tbox-sizing: border-box;\n\tmax-width: 235px;\n\tpadding-bottom: 12px;\n\twidth: 100%;\n`;\n\nexport const Header = styled( Flex )`\n\tmargin-bottom: 8px;\n`;\n\nexport const HeaderControlWrapper = styled( Flex )`\n\tmin-height: 30px;\n\tgap: 0;\n`;\n\nexport const UnitControlWrapper = styled.div`\n\tbox-sizing: border-box;\n\tmax-width: 80px;\n`;\n\nexport const LayoutContainer = styled( Flex )`\n\tjustify-content: center;\n\tpadding-top: 8px;\n`;\n\nexport const Layout = styled( Flex )`\n\tposition: relative;\n\theight: 100%;\n\twidth: 100%;\n\tjustify-content: flex-start;\n`;\n\nconst unitControlBorderRadiusStyles = ( {\n\tisFirst,\n\tisLast,\n\tisOnly,\n}: Pick< BoxUnitControlProps, 'isFirst' | 'isLast' | 'isOnly' > ) => {\n\tif ( isFirst ) {\n\t\treturn rtl( { borderTopRightRadius: 0, borderBottomRightRadius: 0 } )();\n\t}\n\tif ( isLast ) {\n\t\treturn rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )();\n\t}\n\tif ( isOnly ) {\n\t\treturn css( { borderRadius: 2 } );\n\t}\n\n\treturn css( {\n\t\tborderRadius: 0,\n\t} );\n};\n\nconst unitControlMarginStyles = ( {\n\tisFirst,\n\tisOnly,\n}: Pick< BoxUnitControlProps, 'isFirst' | 'isOnly' > ) => {\n\tconst marginLeft = isFirst || isOnly ? 0 : -1;\n\n\treturn rtl( { marginLeft } )();\n};\n\nexport const UnitControl = styled( BaseUnitControl )`\n\tmax-width: 60px;\n\t${ unitControlBorderRadiusStyles };\n\t${ unitControlMarginStyles };\n`;\n"]}

package/build-module/box-control/styles/box-control-visualizer-styles.js

@@ -22,10 +22,9 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-const containerPositionStyles = _ref2 => {
-  let {
-    isPositionAbsolute
-  } = _ref2;
+const containerPositionStyles = ({
+  isPositionAbsolute
+}) => {
   if (!isPositionAbsolute) return '';
   return _ref;
 };
@@ -41,14 +40,11 @@ export const Side = _styled("div", process.env.NODE_ENV === "production" ? {
 } : {
   target: "exa0ndl4",
   label: "Side"
-})("box-sizing:border-box;background:", COLORS.ui.theme, ";filter:brightness( 1 );opacity:0;position:absolute;pointer-events:none;transition:opacity 120ms linear;z-index:1;", _ref3 => {
-  let {
-    isActive
-  } = _ref3;
-  return isActive && `
+})("box-sizing:border-box;background:", COLORS.ui.theme, ";filter:brightness( 1 );opacity:0;position:absolute;pointer-events:none;transition:opacity 120ms linear;z-index:1;", ({
+  isActive
+}) => isActive && `
 		opacity: 0.3;
-	`;
-}, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DOEIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICgge1xuXHRpc1Bvc2l0aW9uQWJzb2x1dGUsXG59OiB7XG5cdGlzUG9zaXRpb25BYnNvbHV0ZTogYm9vbGVhbjtcbn0gKSA9PiB7XG5cdGlmICggISBpc1Bvc2l0aW9uQWJzb2x1dGUgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRib3R0b206IDA7XG5cdFx0bGVmdDogMDtcblx0XHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0cmlnaHQ6IDA7XG5cdFx0dG9wOiAwO1xuXHRcdHotaW5kZXg6IDE7XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHQkeyBjb250YWluZXJQb3NpdGlvblN0eWxlcyB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFNpZGUgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0ZmlsdGVyOiBicmlnaHRuZXNzKCAxICk7XG5cdG9wYWNpdHk6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHRyYW5zaXRpb246IG9wYWNpdHkgMTIwbXMgbGluZWFyO1xuXHR6LWluZGV4OiAxO1xuXG5cdCR7ICggeyBpc0FjdGl2ZSB9OiB7IGlzQWN0aXZlOiBib29sZWFuIH0gKSA9PlxuXHRcdGlzQWN0aXZlICYmXG5cdFx0YFxuXHRcdG9wYWNpdHk6IDAuMztcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgVG9wVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0Ym90dG9tOiAwO1xuXHRsZWZ0OiAwO1xuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IGxlZnQ6IDAgfSApIH07XG5gO1xuIl19 */"));
+	`, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXZpc3VhbGl6ZXItc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1DOEIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtdmlzdWFsaXplci1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuXG5jb25zdCBjb250YWluZXJQb3NpdGlvblN0eWxlcyA9ICgge1xuXHRpc1Bvc2l0aW9uQWJzb2x1dGUsXG59OiB7XG5cdGlzUG9zaXRpb25BYnNvbHV0ZTogYm9vbGVhbjtcbn0gKSA9PiB7XG5cdGlmICggISBpc1Bvc2l0aW9uQWJzb2x1dGUgKSByZXR1cm4gJyc7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRib3R0b206IDA7XG5cdFx0bGVmdDogMDtcblx0XHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0XHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdFx0cmlnaHQ6IDA7XG5cdFx0dG9wOiAwO1xuXHRcdHotaW5kZXg6IDE7XG5cdGA7XG59O1xuXG5leHBvcnQgY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHQkeyBjb250YWluZXJQb3NpdGlvblN0eWxlcyB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IFNpZGUgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRiYWNrZ3JvdW5kOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0ZmlsdGVyOiBicmlnaHRuZXNzKCAxICk7XG5cdG9wYWNpdHk6IDA7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cdHRyYW5zaXRpb246IG9wYWNpdHkgMTIwbXMgbGluZWFyO1xuXHR6LWluZGV4OiAxO1xuXG5cdCR7ICggeyBpc0FjdGl2ZSB9OiB7IGlzQWN0aXZlOiBib29sZWFuIH0gKSA9PlxuXHRcdGlzQWN0aXZlICYmXG5cdFx0YFxuXHRcdG9wYWNpdHk6IDAuMztcblx0YCB9XG5gO1xuXG5leHBvcnQgY29uc3QgVG9wVmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGxlZnQ6IDA7XG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IHJpZ2h0OiAwIH0gKSB9O1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVZpZXcgPSBzdHlsZWQoIFNpZGUgKWBcblx0Ym90dG9tOiAwO1xuXHRsZWZ0OiAwO1xuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMZWZ0VmlldyA9IHN0eWxlZCggU2lkZSApYFxuXHR0b3A6IDA7XG5cdGJvdHRvbTogMDtcblx0JHsgcnRsKCB7IGxlZnQ6IDAgfSApIH07XG5gO1xuIl19 */"));
 export const TopView = /*#__PURE__*/_styled(Side, process.env.NODE_ENV === "production" ? {
   target: "exa0ndl3"
 } : {

package/build-module/box-control/styles/box-control-visualizer-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/box-control/styles/box-control-visualizer-styles.ts"],"names":["css","COLORS","rtl","containerPositionStyles","isPositionAbsolute","Container","Side","ui","theme","isActive","TopView","RightView","right","BottomView","LeftView","left"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,SAASC,MAAT,EAAiBC,GAAjB,QAA4B,aAA5B;;;;;;;;;;;;AAEA,MAAMC,uBAAuB,GAAG,SAIzB;AAAA,MAJ2B;AACjCC,IAAAA;AADiC,GAI3B;AACN,MAAK,CAAEA,kBAAP,EAA4B,OAAO,EAAP;AAE5B;AASA,CAhBD;;AAkBA,OAAO,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,+CAGlBF,uBAHkB,ysEAAf;AAMP,OAAO,MAAMG,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wCAEDL,MAAM,CAACM,EAAP,CAAUC,KAFT,wHAUb;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACFA,QAAQ,IACP;AACH;AACA,EAJI;AAAA,CAVa,ysEAAV;AAiBP,OAAO,MAAMC,OAAO,GAAG,qBAAQJ,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb;AAMP,OAAO,MAAMK,SAAS,GAAG,qBAAQL,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,oBAGlBJ,GAAG,CAAE;AAAEU,EAAAA,KAAK,EAAE;AAAT,CAAF,CAHe,ysEAAf;AAMP,OAAO,MAAMC,UAAU,GAAG,qBAAQP,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhB;AAMP,OAAO,MAAMQ,QAAQ,GAAG,qBAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,oBAGjBJ,GAAG,CAAE;AAAEa,EAAAA,IAAI,EAAE;AAAR,CAAF,CAHc,ysEAAd","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, rtl } from '../../utils';\n\nconst containerPositionStyles = ( {\n\tisPositionAbsolute,\n}: {\n\tisPositionAbsolute: boolean;\n} ) => {\n\tif ( ! isPositionAbsolute ) return '';\n\n\treturn css`\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tz-index: 1;\n\t`;\n};\n\nexport const Container = styled.div`\n\tbox-sizing: border-box;\n\tposition: relative;\n\t${ containerPositionStyles };\n`;\n\nexport const Side = styled.div`\n\tbox-sizing: border-box;\n\tbackground: ${ COLORS.ui.theme };\n\tfilter: brightness( 1 );\n\topacity: 0;\n\tposition: absolute;\n\tpointer-events: none;\n\ttransition: opacity 120ms linear;\n\tz-index: 1;\n\n\t${ ( { isActive }: { isActive: boolean } ) =>\n\t\tisActive &&\n\t\t`\n\t\topacity: 0.3;\n\t` }\n`;\n\nexport const TopView = styled( Side )`\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const RightView = styled( Side )`\n\ttop: 0;\n\tbottom: 0;\n\t${ rtl( { right: 0 } ) };\n`;\n\nexport const BottomView = styled( Side )`\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const LeftView = styled( Side )`\n\ttop: 0;\n\tbottom: 0;\n\t${ rtl( { left: 0 } ) };\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/box-control/styles/box-control-visualizer-styles.ts"],"names":["css","COLORS","rtl","containerPositionStyles","isPositionAbsolute","Container","Side","ui","theme","isActive","TopView","RightView","right","BottomView","LeftView","left"],"mappings":";;;;AAAA;AACA;AACA;AACA,SAASA,GAAT,QAAoB,gBAApB;;AAGA;AACA;AACA;AACA,SAASC,MAAT,EAAiBC,GAAjB,QAA4B,aAA5B;;;;;;;;;;;;AAEA,MAAMC,uBAAuB,GAAG,CAAE;AACjCC,EAAAA;AADiC,CAAF,KAIzB;AACN,MAAK,CAAEA,kBAAP,EAA4B,OAAO,EAAP;AAE5B;AASA,CAhBD;;AAkBA,OAAO,MAAMC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,+CAGlBF,uBAHkB,ysEAAf;AAMP,OAAO,MAAMG,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,wCAEDL,MAAM,CAACM,EAAP,CAAUC,KAFT,wHAUb,CAAE;AAAEC,EAAAA;AAAF,CAAF,KACFA,QAAQ,IACP;AACH;AACA,EAdiB,ysEAAV;AAiBP,OAAO,MAAMC,OAAO,GAAG,qBAAQJ,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb;AAMP,OAAO,MAAMK,SAAS,GAAG,qBAAQL,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,oBAGlBJ,GAAG,CAAE;AAAEU,EAAAA,KAAK,EAAE;AAAT,CAAF,CAHe,ysEAAf;AAMP,OAAO,MAAMC,UAAU,GAAG,qBAAQP,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAhB;AAMP,OAAO,MAAMQ,QAAQ,GAAG,qBAAQR,IAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,oBAGjBJ,GAAG,CAAE;AAAEa,EAAAA,IAAI,EAAE;AAAR,CAAF,CAHc,ysEAAd","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, rtl } from '../../utils';\n\nconst containerPositionStyles = ( {\n\tisPositionAbsolute,\n}: {\n\tisPositionAbsolute: boolean;\n} ) => {\n\tif ( ! isPositionAbsolute ) return '';\n\n\treturn css`\n\t\tbottom: 0;\n\t\tleft: 0;\n\t\tpointer-events: none;\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tz-index: 1;\n\t`;\n};\n\nexport const Container = styled.div`\n\tbox-sizing: border-box;\n\tposition: relative;\n\t${ containerPositionStyles };\n`;\n\nexport const Side = styled.div`\n\tbox-sizing: border-box;\n\tbackground: ${ COLORS.ui.theme };\n\tfilter: brightness( 1 );\n\topacity: 0;\n\tposition: absolute;\n\tpointer-events: none;\n\ttransition: opacity 120ms linear;\n\tz-index: 1;\n\n\t${ ( { isActive }: { isActive: boolean } ) =>\n\t\tisActive &&\n\t\t`\n\t\topacity: 0.3;\n\t` }\n`;\n\nexport const TopView = styled( Side )`\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const RightView = styled( Side )`\n\ttop: 0;\n\tbottom: 0;\n\t${ rtl( { right: 0 } ) };\n`;\n\nexport const BottomView = styled( Side )`\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n`;\n\nexport const LeftView = styled( Side )`\n\ttop: 0;\n\tbottom: 0;\n\t${ rtl( { left: 0 } ) };\n`;\n"]}

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -14,32 +13,30 @@ import { UnitControlWrapper, UnitControl } from './styles/box-control-styles';
 
 const noop = () => {};
 
-export default function BoxUnitControl(_ref) {
-  let {
-    isFirst,
-    isLast,
-    isOnly,
-    onHoverOn = noop,
-    onHoverOff = noop,
-    label,
-    value,
-    ...props
-  } = _ref;
-  const bindHoverGesture = useHover(_ref2 => {
-    let {
-      event,
-      ...state
-    } = _ref2;
-
+export default function BoxUnitControl({
+  isFirst,
+  isLast,
+  isOnly,
+  onHoverOn = noop,
+  onHoverOff = noop,
+  label,
+  value,
+  ...props
+}) {
+  const bindHoverGesture = useHover(({
+    event,
+    ...state
+  }) => {
     if (state.hovering) {
       onHoverOn(event, state);
     } else {
       onHoverOff(event, state);
     }
   });
-  return createElement(UnitControlWrapper, bindHoverGesture(), createElement(Tooltip, {
+  return createElement(UnitControlWrapper, { ...bindHoverGesture()
+  }, createElement(Tooltip, {
     text: label
-  }, createElement(UnitControl, _extends({
+  }, createElement(UnitControl, {
     "aria-label": label,
     className: "component-box-control__unit-control",
     isFirst: isFirst,
@@ -47,15 +44,15 @@ export default function BoxUnitControl(_ref) {
     isOnly: isOnly,
     isPressEnterToChange: true,
     isResetValueOnUnitChange: false,
-    value: value
-  }, props))));
+    value: value,
+    ...props
+  })));
 }
 
-function Tooltip(_ref3) {
-  let {
-    children,
-    text
-  } = _ref3;
+function Tooltip({
+  children,
+  text
+}) {
   if (!text) return children;
   /**
    * Wrapping the children in a `<div />` as Tooltip as it attempts