@wordpress/components 19.6.1-next.a55ed9455a.0 → 19.7.0

package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,6BAA6B,EAAoB,MAAM,UAAU,CAAC;AA+EhF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,iCAAiC,8FAGtC,CAAC;AAEF,eAAe,iCAAiC,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,6BAA6B,EAAoB,MAAM,UAAU,CAAC;AA4EhF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,QAAA,MAAM,iCAAiC,8FAGtC,CAAC;AAEF,eAAe,iCAAiC,CAAC"}

package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts

@@ -11,9 +11,5 @@ export declare const ButtonContentView: import("@emotion/styled").StyledComponen
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const separatorActive: import("@emotion/utils").SerializedStyles;
-export declare const LabelPlaceholderView: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const medium: import("@emotion/utils").SerializedStyles;
 //# sourceMappingURL=styles.d.ts.map

package/build-types/toggle-group-control/toggle-group-control-option/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option/styles.ts"],"names":[],"mappings":";AAWA,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,2CA+BtB,CAAC;AAEF,eAAO,MAAM,YAAY,2CAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAO7B,CAAC;AAEF,eAAO,MAAM,eAAe,2CAE3B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;yGAMhC,CAAC;AAEF,eAAO,MAAM,MAAM,2CAElB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option/styles.ts"],"names":[],"mappings":";AAWA,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,2CA+BtB,CAAC;AAEF,eAAO,MAAM,YAAY,2CAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;yGAG7B,CAAC;AAEF,eAAO,MAAM,eAAe,2CAE3B,CAAC;AAEF,eAAO,MAAM,MAAM,2CAElB,CAAC"}

package/build-types/unit-control/index.d.ts

@@ -2,7 +2,7 @@
 import type { UnitControlOnChangeCallback } from './types';
 import type { StateReducer } from '../input-control/reducer/state';
 /**
- * `UnitControl` allows the user to set a value as well as a unit (e.g. `px`).
+ * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).
  *
  *
  * @example
@@ -17,7 +17,7 @@ import type { StateReducer } from '../input-control/reducer/state';
  * };
  * ```
  */
-declare const ForwardedUnitControl: import("react").ForwardRefExoticComponent<Pick<import("./types").UnitSelectControlProps & {
+export declare const UnitControl: import("react").ForwardRefExoticComponent<Pick<Omit<import("./types").UnitSelectControlProps, "unit"> & Pick<import("../input-control/types").InputControlProps, "hideLabelFromVision"> & {
     __unstableStateReducer?: StateReducer | undefined;
     __unstableInputWidth?: import("csstype").Property.Width<string | number> | undefined;
     disableUnits?: boolean | undefined;
@@ -25,10 +25,13 @@ declare const ForwardedUnitControl: import("react").ForwardRefExoticComponent<Pi
     isResetValueOnUnitChange?: boolean | undefined;
     label?: string | undefined;
     onUnitChange?: UnitControlOnChangeCallback | undefined;
+    unit?: string | undefined;
     value?: string | number | undefined;
+    isShiftStepEnabled?: boolean | undefined;
+    shiftStep?: number | undefined;
 } & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
     ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "children" | "value" | "label" | "as" | "__unstableInputWidth" | "isPressEnterToChange" | "__unstableStateReducer" | "disableUnits" | keyof import("./types").UnitSelectControlProps | "isResetValueOnUnitChange" | "onUnitChange">, "type" | "value" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "alt" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "step" | "__unstableInputWidth" | "isPressEnterToChange" | "__unstableStateReducer" | "disableUnits" | keyof import("./types").UnitSelectControlProps | "isResetValueOnUnitChange" | "onUnitChange"> & import("react").RefAttributes<any>>;
+}, "children" | "value" | "label" | "as" | "onChange" | "size" | "hideLabelFromVision" | "__unstableInputWidth" | "isPressEnterToChange" | "__unstableStateReducer" | "isShiftStepEnabled" | "shiftStep" | "unit" | "isUnitSelectTabbable" | "units" | "disableUnits" | "isResetValueOnUnitChange" | "onUnitChange">, "type" | "value" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "className" | "color" | "height" | "id" | "lang" | "max" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "alt" | "src" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "autoComplete" | "accept" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | "size" | "step" | "hideLabelFromVision" | "__unstableInputWidth" | "isPressEnterToChange" | "__unstableStateReducer" | "isShiftStepEnabled" | "shiftStep" | "unit" | "isUnitSelectTabbable" | "units" | "disableUnits" | "isResetValueOnUnitChange" | "onUnitChange"> & import("react").RefAttributes<any>>;
 export { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';
-export default ForwardedUnitControl;
+export default UnitControl;
 //# sourceMappingURL=index.d.ts.map

package/build-types/unit-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":";AAmCA,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AA2NnE;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,oBAAoB;;;;;;;;;;;mzKAA4B,CAAC;AAEvD,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3E,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/unit-control/index.tsx"],"names":[],"mappings":";AAmCA,OAAO,KAAK,EAAoB,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAC7E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAwPnE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;+8KAAuC,CAAC;AAEhE,OAAO,EAAE,gCAAgC,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC3E,eAAe,WAAW,CAAC"}

package/build-types/unit-control/stories/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import { UnitControl } from '../';
+declare const meta: ComponentMeta<typeof UnitControl>;
+export default meta;
+export declare const Default: ComponentStory<typeof UnitControl>;
+/**
+ * If the `isPressEnterToChange` prop is set to `true`, the `onChange` callback
+ * will not fire while a new value is typed in the input field (you can verify this
+ * behavior by inspecting the console's output).
+ */
+export declare const PressEnterToChange: ComponentStory<typeof UnitControl>;
+/**
+ * Most of `NumberControl`'s props can be passed to `UnitControl`, and they will
+ * affect its numeric input field.
+ */
+export declare const TweakingTheNumberInput: ComponentStory<typeof UnitControl>;
+/**
+ * When only one unit is available, the unit selection dropdown becomes static text.
+ */
+export declare const WithSingleUnit: ComponentStory<typeof UnitControl>;
+/**
+ * It is possible to pass a custom list of units. Every time the unit changes,
+ * if the `isResetValueOnUnitChange` is set to `true`, the input's quantity is
+ * reset to the new unit's default value.
+ */
+export declare const WithCustomUnits: ComponentStory<typeof UnitControl>;
+//# sourceMappingURL=index.d.ts.map

package/build-types/unit-control/stories/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/unit-control/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE;;GAEG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAGlC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,WAAW,CA8B5C,CAAC;AACF,eAAe,IAAI,CAAC;AAsBpB,eAAO,MAAM,OAAO,EAAE,cAAc,CACnC,OAAO,WAAW,CACW,CAAC;AAK/B;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAC9C,OAAO,WAAW,CACW,CAAC;AAU/B;;;GAGG;AACH,eAAO,MAAM,sBAAsB,EAAE,cAAc,CAClD,OAAO,WAAW,CACW,CAAC;AAS/B;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,cAAc,CAC1C,OAAO,WAAW,CACW,CAAC;AAM/B;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAE,OAAO,WAAW,CAkB/D,CAAC"}

package/build-types/unit-control/styles/unit-control-styles.d.ts

@@ -13,7 +13,7 @@ export declare const Root: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ValueInput: import("@emotion/styled").StyledComponent<Pick<{
     [x: string]: any;
-    __unstableStateReducer?: ((state: any) => any) | undefined;
+    __unstableStateReducer: any;
     className: any;
     dragDirection?: string | undefined;
     hideHTMLArrows?: boolean | undefined;

package/build-types/unit-control/types.d.ts

@@ -6,7 +6,7 @@ import type { CSSProperties, SyntheticEvent } from 'react';
  * Internal dependencies
  */
 import type { StateReducer } from '../input-control/reducer/state';
-import type { InputChangeCallback, Size as InputSize } from '../input-control/types';
+import type { InputChangeCallback, InputControlProps, Size as InputSize } from '../input-control/types';
 export declare type SelectSize = InputSize;
 export declare type WPUnitControlUnit = {
     /**
@@ -42,8 +42,6 @@ export declare type UnitSelectControlProps = {
     isUnitSelectTabbable?: boolean;
     /**
      * A callback function invoked when the value is changed.
-     *
-     * @default noop
      */
     onChange?: UnitControlOnChangeCallback;
     /**
@@ -63,7 +61,7 @@ export declare type UnitSelectControlProps = {
      */
     units?: WPUnitControlUnit[];
 };
-export declare type UnitControlProps = UnitSelectControlProps & {
+export declare type UnitControlProps = Omit<UnitSelectControlProps, 'unit'> & Pick<InputControlProps, 'hideLabelFromVision'> & {
     __unstableStateReducer?: StateReducer;
     __unstableInputWidth?: CSSProperties['width'];
     /**
@@ -92,14 +90,33 @@ export declare type UnitControlProps = UnitSelectControlProps & {
     label?: string;
     /**
      * Callback when the `unit` changes.
-     *
-     * @default noop
      */
     onUnitChange?: UnitControlOnChangeCallback;
+    /**
+     * Current unit. _Note: this prop is deprecated. Instead, provide a unit with a value through the `value` prop._
+     *
+     * @deprecated
+     */
+    unit?: string;
     /**
      * Current value. If passed as a string, the current unit will be inferred from this value.
      * For example, a `value` of "50%" will set the current unit to `%`.
      */
     value?: string | number;
+    /**
+     * If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment
+     * the value by the `shiftStep` value.
+     *
+     * @default true
+     */
+    isShiftStepEnabled?: boolean;
+    /**
+     * Amount to increment by when the `SHIFT` key is held down. This shift value
+     * is a multiplier to the `step` value. For example, if the `step` value is `5`,
+     * and `shiftStep` is `10`, each jump would increment/decrement by `50`.
+     *
+     * @default 10
+     */
+    shiftStep?: number;
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/unit-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EACX,mBAAmB,EACnB,IAAI,IAAI,SAAS,EACjB,MAAM,wBAAwB,CAAC;AAEhC,oBAAY,UAAU,GAAG,SAAS,CAAC;AAEnC,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACpC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAGF,oBAAY,gBAAgB,GAAG,sBAAsB,GAAG;IACvD,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EACX,mBAAmB,EACnB,iBAAiB,EACjB,IAAI,IAAI,SAAS,EACjB,MAAM,wBAAwB,CAAC;AAEhC,oBAAY,UAAU,GAAG,SAAS,CAAC;AAEnC,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACpC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAGF,oBAAY,gBAAgB,GAAG,IAAI,CAAE,sBAAsB,EAAE,MAAM,CAAE,GACpE,IAAI,CAAE,iBAAiB,EAAE,qBAAqB,CAAE,GAAG;IAClD,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC"}

package/build-types/unit-control/unit-select-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unit-select-control.d.ts","sourceRoot":"","sources":["../../src/unit-control/unit-select-control.tsx"],"names":[],"mappings":";AAOA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,SAAS,EACT,oBAAoB,EAAE,UAAiB,EACvC,QAAe,EACf,IAAgB,EAChB,IAAW,EACX,KAAiB,EACjB,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,sBAAsB,EAAE,QAAQ,EAAE,KAAK,CAAE,eAqCpE"}
+{"version":3,"file":"unit-select-control.d.ts","sourceRoot":"","sources":["../../src/unit-control/unit-select-control.tsx"],"names":[],"mappings":";AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,EAC1C,SAAS,EACT,oBAAoB,EAAE,UAAiB,EACvC,QAAQ,EACR,IAAgB,EAChB,IAAW,EACX,KAAiB,EACjB,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,sBAAsB,EAAE,QAAQ,EAAE,KAAK,CAAE,eAqCpE"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.6.1-next.a55ed9455a.0",
+	"version": "19.7.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,21 +37,21 @@
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.3.2-next.a55ed9455a.0",
-		"@wordpress/compose": "^5.1.3-next.a55ed9455a.0",
-		"@wordpress/date": "^4.3.2-next.a55ed9455a.0",
-		"@wordpress/deprecated": "^3.3.2-next.a55ed9455a.0",
-		"@wordpress/dom": "^3.3.3-next.a55ed9455a.0",
-		"@wordpress/element": "^4.1.3-next.a55ed9455a.0",
-		"@wordpress/escape-html": "^2.3.2-next.a55ed9455a.0",
-		"@wordpress/hooks": "^3.3.2-next.a55ed9455a.0",
-		"@wordpress/i18n": "^4.3.2-next.a55ed9455a.0",
-		"@wordpress/icons": "^7.0.2-next.a55ed9455a.0",
-		"@wordpress/is-shallow-equal": "^4.3.2-next.a55ed9455a.0",
-		"@wordpress/keycodes": "^3.3.2-next.a55ed9455a.0",
-		"@wordpress/primitives": "^3.1.2-next.a55ed9455a.0",
-		"@wordpress/rich-text": "^5.1.3-next.a55ed9455a.0",
-		"@wordpress/warning": "^2.3.2-next.a55ed9455a.0",
+		"@wordpress/a11y": "^3.5.0",
+		"@wordpress/compose": "^5.3.0",
+		"@wordpress/date": "^4.5.0",
+		"@wordpress/deprecated": "^3.5.0",
+		"@wordpress/dom": "^3.5.0",
+		"@wordpress/element": "^4.3.0",
+		"@wordpress/escape-html": "^2.5.0",
+		"@wordpress/hooks": "^3.5.0",
+		"@wordpress/i18n": "^4.5.0",
+		"@wordpress/icons": "^8.1.0",
+		"@wordpress/is-shallow-equal": "^4.5.0",
+		"@wordpress/keycodes": "^3.5.0",
+		"@wordpress/primitives": "^3.3.0",
+		"@wordpress/rich-text": "^5.3.0",
+		"@wordpress/warning": "^2.5.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",
@@ -76,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c5108185851b824d531bce55991a3589947e8551"
+	"gitHead": "aa003c3634016cc4ab6348b2106907e371c648e1"
 }

package/src/base-control/README.md

@@ -10,7 +10,7 @@ Render a BaseControl for a textarea input:
 import { BaseControl } from '@wordpress/components';
 
 const MyBaseControl = () => (
-	<BaseControl id="textarea-1" label="Text" help="Enter some text">
+	<BaseControl id="textarea-1" label="Text" help="Enter some text" __nextHasNoMarginBottom={ true }>
 		<textarea id="textarea-1" />
 	</BaseControl>
 );
@@ -63,6 +63,14 @@ The content to be displayed within the BaseControl.
 -   Type: `Element`
 -   Required: Yes
 
+### __nextHasNoMarginBottom
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `false`
+
 ## BaseControl.VisualLabel
 
 `BaseControl.VisualLabel` component is used to render a purely visual label inside a `BaseControl` component.

package/src/base-control/index.js

@@ -17,18 +17,19 @@ import {
 
 /**
  * @typedef Props
- * @property {string}                    [id]                  The id of the element to which labels and help text are being generated.
- *                                                             That element should be passed as a child.
- * @property {import('react').ReactNode} help                  If this property is added, a help text will be
- *                                                             generated using help property as the content.
- * @property {import('react').ReactNode} [label]               If this property is added, a label will be generated
- *                                                             using label property as the content.
- * @property {boolean}                   [hideLabelFromVision] If true, the label will only be visible to screen readers.
- * @property {string}                    [className]           The class that will be added with "components-base-control" to the
- *                                                             classes of the wrapper div. If no className is passed only
- *                                                             components-base-control is used.
- * @property {import('react').ReactNode} [children]            The content to be displayed within
- *                                                             the BaseControl.
+ * @property {boolean}                   [__nextHasNoMarginBottom] Start opting into the new margin-free styles that will become the default in a future version.
+ * @property {string}                    [id]                      The id of the element to which labels and help text are being generated.
+ *                                                                 That element should be passed as a child.
+ * @property {import('react').ReactNode} help                      If this property is added, a help text will be
+ *                                                                 generated using help property as the content.
+ * @property {import('react').ReactNode} [label]                   If this property is added, a label will be generated
+ *                                                                 using label property as the content.
+ * @property {boolean}                   [hideLabelFromVision]     If true, the label will only be visible to screen readers.
+ * @property {string}                    [className]               The class that will be added with "components-base-control" to the
+ *                                                                 classes of the wrapper div. If no className is passed only
+ *                                                                 components-base-control is used.
+ * @property {import('react').ReactNode} [children]                The content to be displayed within
+ *                                                                 the BaseControl.
  */
 
 /**
@@ -36,6 +37,7 @@ import {
  * @return {JSX.Element} Element
  */
 function BaseControl( {
+	__nextHasNoMarginBottom = false,
 	id,
 	label,
 	hideLabelFromVision,
@@ -47,7 +49,11 @@ function BaseControl( {
 		<Wrapper
 			className={ classnames( 'components-base-control', className ) }
 		>
-			<StyledField className="components-base-control__field">
+			<StyledField
+				className="components-base-control__field"
+				// TODO: Official deprecation for this should start after all internal usages have been migrated
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			>
 				{ label &&
 					id &&
 					( hideLabelFromVision ? (
@@ -77,6 +83,7 @@ function BaseControl( {
 				<StyledHelp
 					id={ id ? id + '__help' : undefined }
 					className="components-base-control__help"
+					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 				>
 					{ help }
 				</StyledHelp>

package/src/base-control/stories/index.js

@@ -4,7 +4,6 @@
 import BaseControl from '../';
 import Button from '../../button';
 import { Spacer } from '../../spacer';
-import TextareaControl from '../../textarea-control';
 
 export default {
 	title: 'Components/BaseControl',
@@ -15,13 +14,14 @@ export default {
 const BaseControlWithTextarea = ( { id, ...props } ) => {
 	return (
 		<BaseControl id={ id } { ...props }>
-			<TextareaControl id={ id } />
+			<textarea style={ { display: 'block' } } id={ id } />
 		</BaseControl>
 	);
 };
 
 export const Default = BaseControlWithTextarea.bind( {} );
 Default.args = {
+	__nextHasNoMarginBottom: true,
 	id: 'textarea-1',
 	label: '',
 	hideLabelFromVision: false,

package/src/base-control/styles/base-control-styles.js

@@ -15,8 +15,17 @@ export const Wrapper = styled.div`
 	font-size: ${ font( 'default.fontSize' ) };
 `;
 
+const deprecatedMarginField = ( { __nextHasNoMarginBottom = false } ) => {
+	return (
+		! __nextHasNoMarginBottom &&
+		css`
+			margin-bottom: ${ space( 2 ) };
+		`
+	);
+};
+
 export const StyledField = styled.div`
-	margin-bottom: ${ space( 2 ) };
+	${ deprecatedMarginField }
 
 	.components-panel__row & {
 		margin-bottom: inherit;
@@ -32,10 +41,23 @@ export const StyledLabel = styled.label`
 	${ labelStyles }
 `;
 
+const deprecatedMarginHelp = ( { __nextHasNoMarginBottom = false } ) => {
+	return (
+		! __nextHasNoMarginBottom &&
+		css`
+			margin-bottom: revert;
+		`
+	);
+};
+
 export const StyledHelp = styled.p`
+	margin-top: ${ space( 2 ) };
+	margin-bottom: 0;
 	font-size: ${ font( 'helpText.fontSize' ) };
 	font-style: normal;
 	color: ${ COLORS.mediumGray.text };
+
+	${ deprecatedMarginHelp }
 `;
 
 export const StyledVisualLabel = styled.span`

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

@@ -10,7 +10,6 @@ import {
 	ALL_SIDES,
 	LABELS,
 	getAllValue,
-	getAllUnitFallback,
 	isValuesMixed,
 	isValuesDefined,
 } from './utils';
@@ -26,17 +25,11 @@ export default function AllInputControl( {
 	setSelectedUnits,
 	...props
 } ) {
-	const allValue = getAllValue( values, sides );
+	const allValue = getAllValue( values, selectedUnits, sides );
 	const hasValues = isValuesDefined( values );
-	const isMixed = hasValues && isValuesMixed( values, sides );
+	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
 	const allPlaceholder = isMixed ? LABELS.mixed : null;
 
-	// Set meaningful unit selection if no allValue and user has previously
-	// selected units without assigning values while controls were unlinked.
-	const allUnitFallback = ! allValue
-		? getAllUnitFallback( selectedUnits )
-		: undefined;
-
 	const handleOnFocus = ( event ) => {
 		onFocus( event, { side: 'all' } );
 	};
@@ -104,7 +97,6 @@ export default function AllInputControl( {
 			disableUnits={ isMixed }
 			isOnly
 			value={ allValue }
-			unit={ allUnitFallback }
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			onFocus={ handleOnFocus }

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

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import UnitControl from './unit-control';
 import { LABELS } from './utils';
 import { Layout } from './styles/box-control-styles';
@@ -113,27 +114,37 @@ export default function AxialInputControls( {
 			align="top"
 			className="component-box-control__vertical-horizontal-input-controls"
 		>
-			{ filteredSides.map( ( side ) => (
-				<UnitControl
-					{ ...props }
-					isFirst={ first === side }
-					isLast={ last === side }
-					isOnly={ only === side }
-					value={ side === 'vertical' ? values.top : values.left }
-					unit={
-						side === 'vertical'
-							? selectedUnits.top
-							: selectedUnits.left
-					}
-					onChange={ createHandleOnChange( side ) }
-					onUnitChange={ createHandleOnUnitChange( side ) }
-					onFocus={ createHandleOnFocus( side ) }
-					onHoverOn={ createHandleOnHoverOn( side ) }
-					onHoverOff={ createHandleOnHoverOff( side ) }
-					label={ LABELS[ side ] }
-					key={ side }
-				/>
-			) ) }
+			{ filteredSides.map( ( side ) => {
+				const [
+					parsedQuantity,
+					parsedUnit,
+				] = parseQuantityAndUnitFromRawValue(
+					side === 'vertical' ? values.top : values.left
+				);
+				const selectedUnit =
+					side === 'vertical'
+						? selectedUnits.top
+						: selectedUnits.left;
+				return (
+					<UnitControl
+						{ ...props }
+						isFirst={ first === side }
+						isLast={ last === side }
+						isOnly={ only === side }
+						value={ [
+							parsedQuantity,
+							selectedUnit ?? parsedUnit,
+						].join( '' ) }
+						onChange={ createHandleOnChange( side ) }
+						onUnitChange={ createHandleOnUnitChange( side ) }
+						onFocus={ createHandleOnFocus( side ) }
+						onHoverOn={ createHandleOnHoverOn( side ) }
+						onHoverOff={ createHandleOnHoverOff( side ) }
+						label={ LABELS[ side ] }
+						key={ side }
+					/>
+				);
+			} ) }
 		</Layout>
 	);
 }

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

@@ -7,6 +7,7 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import { ALL_SIDES, LABELS } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
 
@@ -91,25 +92,35 @@ export default function BoxInputControls( {
 				align="top"
 				className="component-box-control__input-controls"
 			>
-				{ filteredSides.map( ( side ) => (
-					<UnitControl
-						{ ...props }
-						isFirst={ first === side }
-						isLast={ last === side }
-						isOnly={ only === side }
-						value={ values[ side ] }
-						unit={
-							values[ side ] ? undefined : selectedUnits[ side ]
-						}
-						onChange={ createHandleOnChange( side ) }
-						onUnitChange={ createHandleOnUnitChange( side ) }
-						onFocus={ createHandleOnFocus( side ) }
-						onHoverOn={ createHandleOnHoverOn( side ) }
-						onHoverOff={ createHandleOnHoverOff( side ) }
-						label={ LABELS[ side ] }
-						key={ `box-control-${ side }` }
-					/>
-				) ) }
+				{ filteredSides.map( ( side ) => {
+					const [
+						parsedQuantity,
+						parsedUnit,
+					] = parseQuantityAndUnitFromRawValue( values[ side ] );
+
+					const computedUnit = values[ side ]
+						? parsedUnit
+						: selectedUnits[ side ];
+
+					return (
+						<UnitControl
+							{ ...props }
+							isFirst={ first === side }
+							isLast={ last === side }
+							isOnly={ only === side }
+							value={ [ parsedQuantity, computedUnit ].join(
+								''
+							) }
+							onChange={ createHandleOnChange( side ) }
+							onUnitChange={ createHandleOnUnitChange( side ) }
+							onFocus={ createHandleOnFocus( side ) }
+							onHoverOn={ createHandleOnHoverOn( side ) }
+							onHoverOff={ createHandleOnHoverOff( side ) }
+							label={ LABELS[ side ] }
+							key={ `box-control-${ side }` }
+						/>
+					);
+				} ) }
 			</Layout>
 		</LayoutContainer>
 	);