@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

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

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

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/border-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ColorPaletteProps } from '../color-palette/types';\nimport type { PopoverProps } from '../popover/types';\n\nexport type Border = {\n\tcolor?: CSSProperties[ 'borderColor' ];\n\tstyle?: CSSProperties[ 'borderStyle' ];\n\twidth?: CSSProperties[ 'borderWidth' ];\n};\n\nexport type ColorProps = Pick<\n\tColorPaletteProps,\n\t'colors' | 'enableAlpha' | '__experimentalIsRenderedInSidebar'\n> & {\n\t/**\n\t * This toggles the ability to choose custom colors.\n\t */\n\tdisableCustomColors?: boolean;\n};\n\nexport type LabelProps = {\n\t/**\n\t * Provides control over whether the label will only be visible to\n\t * screen readers.\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * If provided, a label will be generated using this as the content.\n\t */\n\tlabel?: string;\n};\n\nexport type BorderControlProps = ColorProps &\n\tLabelProps & {\n\t\t/**\n\t\t * This controls whether unit selection should be disabled.\n\t\t */\n\t\tdisableUnits?: boolean;\n\t\t/**\n\t\t * This controls whether to support border style selection.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tenableStyle?: boolean;\n\t\t/**\n\t\t * This flags the `BorderControl` to render with a more compact\n\t\t * appearance. It restricts the width of the control and prevents it\n\t\t * from expanding to take up additional space.\n\t\t */\n\t\tisCompact?: boolean;\n\t\t/**\n\t\t * A callback function invoked when the border value is changed via an\n\t\t * interaction that selects or clears, border color, style, or width.\n\t\t */\n\t\tonChange: ( value?: Border ) => void;\n\t\t/**\n\t\t * An internal prop used to control the visibility of the dropdown.\n\t\t */\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/**\n\t\t * If opted into, sanitizing the border means that if no width or color\n\t\t * have been selected, the border style is also cleared and `undefined`\n\t\t * is returned as the new border value.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tshouldSanitizeBorder?: boolean;\n\t\t/**\n\t\t * Whether or not to show the header for the border color and style\n\t\t * picker dropdown. The header includes a label for the color picker\n\t\t * and a close button.\n\t\t */\n\t\tshowDropdownHeader?: boolean;\n\t\t/**\n\t\t * Size of the control.\n\t\t *\n\t\t * @default 'default'\n\t\t */\n\t\tsize?: 'default' | '__unstable-large';\n\t\t/**\n\t\t * An object representing a border or `undefined`. Used to set the\n\t\t * current border configuration for this component.\n\t\t */\n\t\tvalue?: Border;\n\t\t/**\n\t\t * Controls the visual width of the `BorderControl`. It has no effect if\n\t\t * the `isCompact` prop is set to `true`.\n\t\t */\n\t\twidth?: CSSProperties[ 'width' ];\n\t\t/**\n\t\t * Flags whether this `BorderControl` should also render a\n\t\t * `RangeControl` for additional control over a border's width.\n\t\t */\n\t\twithSlider?: boolean;\n\t};\n\nexport type DropdownProps = ColorProps &\n\tPick< BorderControlProps, 'enableStyle' | 'size' > & {\n\t\t/**\n\t\t * An object representing a border or `undefined`. This component will\n\t\t * extract the border color and style selections from this object to use as\n\t\t * values for its popover controls.\n\t\t */\n\t\tborder?: Border;\n\t\t/**\n\t\t * An internal prop used to control the visibility of the dropdown.\n\t\t */\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/**\n\t\t * A callback invoked when the border color or style selections change.\n\t\t */\n\t\tonChange: ( newBorder?: Border ) => void;\n\t\t/**\n\t\t * Any previous style selection made by the user. This can be used to\n\t\t * reapply that previous selection when, for example, a zero border width is\n\t\t * to a non-zero value.\n\t\t */\n\t\tpreviousStyleSelection?: string;\n\t\t/**\n\t\t * Whether or not to render a header for the border color and style picker\n\t\t * dropdown. The header includes a label for the color picker and a\n\t\t * close button.\n\t\t */\n\t\tshowDropdownHeader?: boolean;\n\t};\n\nexport type StylePickerProps = LabelProps & {\n\t/**\n\t * A callback function invoked when a border style is selected or cleared.\n\t */\n\tonChange: ( style?: string ) => void;\n\t/**\n\t * The currently selected border style if there is one. Styles available via\n\t * this control are `solid`, `dashed` & `dotted`, however the possibility\n\t * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.\n\t */\n\tvalue?: string;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/border-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ColorPaletteProps } from '../color-palette/types';\nimport type { PopoverProps } from '../popover/types';\nimport type { ToggleGroupControlProps } from '../toggle-group-control/types';\n\nexport type Border = {\n\tcolor?: CSSProperties[ 'borderColor' ];\n\tstyle?: CSSProperties[ 'borderStyle' ];\n\twidth?: CSSProperties[ 'borderWidth' ];\n};\n\nexport type ColorProps = Pick<\n\tColorPaletteProps,\n\t'colors' | 'enableAlpha' | '__experimentalIsRenderedInSidebar'\n> & {\n\t/**\n\t * This toggles the ability to choose custom colors.\n\t */\n\tdisableCustomColors?: boolean;\n};\n\nexport type LabelProps = {\n\t/**\n\t * Provides control over whether the label will only be visible to\n\t * screen readers.\n\t */\n\thideLabelFromVision?: boolean;\n\t/**\n\t * If provided, a label will be generated using this as the content.\n\t */\n\tlabel?: string;\n};\n\nexport type BorderControlProps = ColorProps &\n\tLabelProps & {\n\t\t/**\n\t\t * This controls whether unit selection should be disabled.\n\t\t */\n\t\tdisableUnits?: boolean;\n\t\t/**\n\t\t * This controls whether to support border style selection.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tenableStyle?: boolean;\n\t\t/**\n\t\t * This flags the `BorderControl` to render with a more compact\n\t\t * appearance. It restricts the width of the control and prevents it\n\t\t * from expanding to take up additional space.\n\t\t */\n\t\tisCompact?: boolean;\n\t\t/**\n\t\t * A callback function invoked when the border value is changed via an\n\t\t * interaction that selects or clears, border color, style, or width.\n\t\t */\n\t\tonChange: ( value?: Border ) => void;\n\t\t/**\n\t\t * An internal prop used to control the visibility of the dropdown.\n\t\t */\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/**\n\t\t * If opted into, sanitizing the border means that if no width or color\n\t\t * have been selected, the border style is also cleared and `undefined`\n\t\t * is returned as the new border value.\n\t\t *\n\t\t * @default true\n\t\t */\n\t\tshouldSanitizeBorder?: boolean;\n\t\t/**\n\t\t * Whether or not to show the header for the border color and style\n\t\t * picker dropdown. The header includes a label for the color picker\n\t\t * and a close button.\n\t\t */\n\t\tshowDropdownHeader?: boolean;\n\t\t/**\n\t\t * Size of the control.\n\t\t *\n\t\t * @default 'default'\n\t\t */\n\t\tsize?: 'default' | '__unstable-large';\n\t\t/**\n\t\t * An object representing a border or `undefined`. Used to set the\n\t\t * current border configuration for this component.\n\t\t */\n\t\tvalue?: Border;\n\t\t/**\n\t\t * Controls the visual width of the `BorderControl`. It has no effect if\n\t\t * the `isCompact` prop is set to `true`.\n\t\t */\n\t\twidth?: CSSProperties[ 'width' ];\n\t\t/**\n\t\t * Flags whether this `BorderControl` should also render a\n\t\t * `RangeControl` for additional control over a border's width.\n\t\t */\n\t\twithSlider?: boolean;\n\t\t/**\n\t\t * Start opting into the larger default height that will become the default size in a future version.\n\t\t *\n\t\t * @default false\n\t\t */\n\t\t__next40pxDefaultSize?: boolean;\n\t};\n\nexport type DropdownProps = ColorProps &\n\tPick< BorderControlProps, 'enableStyle' | 'size' > & {\n\t\t/**\n\t\t * An object representing a border or `undefined`. This component will\n\t\t * extract the border color and style selections from this object to use as\n\t\t * values for its popover controls.\n\t\t */\n\t\tborder?: Border;\n\t\t/**\n\t\t * Whether a border style can be set, based on the border sanitization settings.\n\t\t */\n\t\tisStyleSettable: boolean;\n\t\t/**\n\t\t * An internal prop used to control the visibility of the dropdown.\n\t\t */\n\t\t__unstablePopoverProps?: Omit< PopoverProps, 'children' >;\n\t\t/**\n\t\t * A callback invoked when the border color or style selections change.\n\t\t */\n\t\tonChange: ( newBorder?: Border ) => void;\n\t\t/**\n\t\t * Any previous style selection made by the user. This can be used to\n\t\t * reapply that previous selection when, for example, a zero border width is\n\t\t * to a non-zero value.\n\t\t */\n\t\tpreviousStyleSelection?: string;\n\t\t/**\n\t\t * Whether or not to render a header for the border color and style picker\n\t\t * dropdown. The header includes a label for the color picker and a\n\t\t * close button.\n\t\t */\n\t\tshowDropdownHeader?: boolean;\n\t};\n\nexport type StylePickerProps = Omit<\n\tToggleGroupControlProps,\n\t'value' | 'onChange' | 'children'\n> & {\n\t/**\n\t * A callback function invoked when a border style is selected or cleared.\n\t */\n\tonChange: ( style?: string ) => void;\n\t/**\n\t * The currently selected border style if there is one. Styles available via\n\t * this control are `solid`, `dashed` & `dotted`, however the possibility\n\t * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.\n\t */\n\tvalue?: string;\n};\n"],"mappings":""}

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

@@ -1,44 +1,51 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AllInputControl;
-var _element = require("@wordpress/element");
-var _unitControl = _interopRequireDefault(require("./unit-control"));
+var _react = require("react");
+var _compose = require("@wordpress/compose");
+var _boxControlStyles = require("./styles/box-control-styles");
+var _hStack = require("../h-stack");
+var _unitControl = require("../unit-control");
 var _utils = require("./utils");
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
 
 const noop = () => {};
 function AllInputControl({
+  __next40pxDefaultSize,
   onChange = noop,
   onFocus = noop,
-  onHoverOn = noop,
-  onHoverOff = noop,
   values,
   sides,
   selectedUnits,
   setSelectedUnits,
   ...props
 }) {
+  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
+  const inputId = (0, _compose.useInstanceId)(AllInputControl, 'box-control-input-all');
   const allValue = (0, _utils.getAllValue)(values, selectedUnits, sides);
   const hasValues = (0, _utils.isValuesDefined)(values);
   const isMixed = hasValues && (0, _utils.isValuesMixed)(values, selectedUnits, sides);
   const allPlaceholder = isMixed ? _utils.LABELS.mixed : undefined;
+  const [parsedQuantity, parsedUnit] = (0, _unitControl.parseQuantityAndUnitFromRawValue)(allValue);
   const handleOnFocus = event => {
     onFocus(event, {
       side: 'all'
     });
   };
-  const handleOnChange = next => {
+  const onValueChange = next => {
     const isNumeric = next !== undefined && !isNaN(parseFloat(next));
     const nextValue = isNumeric ? next : undefined;
     const nextValues = (0, _utils.applyValueToSides)(values, nextValue, sides);
     onChange(nextValues);
   };
+  const sliderOnChange = next => {
+    onValueChange(next !== undefined ? [next, parsedUnit].join('') : undefined);
+  };
 
   // Set selected unit so it can be used as fallback by unlinked controls
   // when individual sides do not have a value containing a unit.
@@ -46,33 +53,32 @@ function AllInputControl({
     const newUnits = (0, _utils.applyValueToSides)(selectedUnits, unit, sides);
     setSelectedUnits(newUnits);
   };
-  const handleOnHoverOn = () => {
-    onHoverOn({
-      top: true,
-      bottom: true,
-      left: true,
-      right: true
-    });
-  };
-  const handleOnHoverOff = () => {
-    onHoverOff({
-      top: false,
-      bottom: false,
-      left: false,
-      right: false
-    });
-  };
-  return (0, _element.createElement)(_unitControl.default, {
+  return (0, _react.createElement)(_hStack.HStack, null, (0, _react.createElement)(_boxControlStyles.StyledUnitControl, {
     ...props,
+    __next40pxDefaultSize: __next40pxDefaultSize,
+    className: "component-box-control__unit-control",
     disableUnits: isMixed,
-    isOnly: true,
+    id: inputId,
+    isPressEnterToChange: true,
     value: allValue,
-    onChange: handleOnChange,
+    onChange: onValueChange,
     onUnitChange: handleOnUnitChange,
     onFocus: handleOnFocus,
-    onHoverOn: handleOnHoverOn,
-    onHoverOff: handleOnHoverOff,
-    placeholder: allPlaceholder
-  });
+    placeholder: allPlaceholder,
+    label: _utils.LABELS.all,
+    hideLabelFromVision: true
+  }), (0, _react.createElement)(_boxControlStyles.FlexedRangeControl, {
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: __next40pxDefaultSize,
+    "aria-controls": inputId,
+    label: _utils.LABELS.all,
+    hideLabelFromVision: true,
+    onChange: sliderOnChange,
+    min: 0,
+    max: (_CUSTOM_VALUE_SETTING = _utils.CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
+    step: (_CUSTOM_VALUE_SETTING2 = _utils.CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
+    value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
+    withInputField: false
+  }));
 }
 //# sourceMappingURL=all-input-control.js.map

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

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

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

@@ -5,27 +5,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = AxialInputControls;
-var _element = require("@wordpress/element");
+var _react = require("react");
+var _compose = require("@wordpress/compose");
 var _utils = require("../unit-control/utils");
-var _unitControl = _interopRequireDefault(require("./unit-control"));
+var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _utils2 = require("./utils");
 var _boxControlStyles = require("./styles/box-control-styles");
+/**
+ * WordPress dependencies
+ */
+
 /**
  * Internal dependencies
  */
 
 const groupedSides = ['vertical', 'horizontal'];
 function AxialInputControls({
+  __next40pxDefaultSize,
   onChange,
   onFocus,
-  onHoverOn,
-  onHoverOff,
   values,
   selectedUnits,
   setSelectedUnits,
   sides,
   ...props
 }) {
+  const generatedId = (0, _compose.useInstanceId)(AxialInputControls, `box-control-input`);
   const createHandleOnFocus = side => event => {
     if (!onFocus) {
       return;
@@ -34,41 +39,7 @@ function AxialInputControls({
       side
     });
   };
-  const createHandleOnHoverOn = side => () => {
-    if (!onHoverOn) {
-      return;
-    }
-    if (side === 'vertical') {
-      onHoverOn({
-        top: true,
-        bottom: true
-      });
-    }
-    if (side === 'horizontal') {
-      onHoverOn({
-        left: true,
-        right: true
-      });
-    }
-  };
-  const createHandleOnHoverOff = side => () => {
-    if (!onHoverOff) {
-      return;
-    }
-    if (side === 'vertical') {
-      onHoverOff({
-        top: false,
-        bottom: false
-      });
-    }
-    if (side === 'horizontal') {
-      onHoverOff({
-        left: false,
-        right: false
-      });
-    }
-  };
-  const createHandleOnChange = side => next => {
+  const handleOnValueChange = (side, next) => {
     if (!onChange) {
       return;
     }
@@ -104,30 +75,45 @@ function AxialInputControls({
 
   // Filter sides if custom configuration provided, maintaining default order.
   const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides;
-  const first = filteredSides[0];
-  const last = filteredSides[filteredSides.length - 1];
-  const only = first === last && first;
-  return (0, _element.createElement)(_boxControlStyles.Layout, {
-    gap: 0,
-    align: "top",
-    className: "component-box-control__vertical-horizontal-input-controls"
-  }, filteredSides.map(side => {
+  return (0, _react.createElement)(_react.Fragment, null, filteredSides.map(side => {
+    var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
     const [parsedQuantity, parsedUnit] = (0, _utils.parseQuantityAndUnitFromRawValue)(side === 'vertical' ? values.top : values.left);
     const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left;
-    return (0, _element.createElement)(_unitControl.default, {
+    const inputId = [generatedId, side].join('-');
+    return (0, _react.createElement)(_boxControlStyles.InputWrapper, {
+      key: side
+    }, (0, _react.createElement)(_boxControlStyles.FlexedBoxControlIcon, {
+      side: side,
+      sides: sides
+    }), (0, _react.createElement)(_tooltip.default, {
+      placement: "top-end",
+      text: _utils2.LABELS[side]
+    }, (0, _react.createElement)(_boxControlStyles.StyledUnitControl, {
       ...props,
-      isFirst: first === side,
-      isLast: last === side,
-      isOnly: only === side,
+      __next40pxDefaultSize: __next40pxDefaultSize,
+      className: "component-box-control__unit-control",
+      id: inputId,
+      isPressEnterToChange: true,
       value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''),
-      onChange: createHandleOnChange(side),
+      onChange: newValue => handleOnValueChange(side, newValue),
       onUnitChange: createHandleOnUnitChange(side),
       onFocus: createHandleOnFocus(side),
-      onHoverOn: createHandleOnHoverOn(side),
-      onHoverOff: createHandleOnHoverOff(side),
       label: _utils2.LABELS[side],
+      hideLabelFromVision: true,
       key: side
-    });
+    })), (0, _react.createElement)(_boxControlStyles.FlexedRangeControl, {
+      __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: __next40pxDefaultSize,
+      "aria-controls": inputId,
+      label: _utils2.LABELS[side],
+      hideLabelFromVision: true,
+      onChange: newValue => handleOnValueChange(side, newValue !== undefined ? [newValue, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join('') : undefined),
+      min: 0,
+      max: (_CUSTOM_VALUE_SETTING = _utils2.CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
+      step: (_CUSTOM_VALUE_SETTING2 = _utils2.CUSTOM_VALUE_SETTINGS[selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
+      value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
+      withInputField: false
+    }));
   }));
 }
 //# sourceMappingURL=axial-input-controls.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_utils","require","_unitControl","_interopRequireDefault","_utils2","_boxControlStyles","groupedSides","AxialInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","top","bottom","left","right","createHandleOnHoverOff","createHandleOnChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","_element","createElement","Layout","gap","align","className","map","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","selectedUnit","default","isFirst","isLast","isOnly","value","join","onUnitChange","label","LABELS","key"],"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport UnitControl from './unit-control';\nimport { LABELS } from './utils';\nimport { Layout } from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\tonChange,\n\tonFocus,\n\tonHoverOn,\n\tonHoverOff,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst createHandleOnHoverOn = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOn ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOn( {\n\t\t\t\ttop: true,\n\t\t\t\tbottom: true,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOn( {\n\t\t\t\tleft: true,\n\t\t\t\tright: true,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnHoverOff = ( side: GroupedSide ) => () => {\n\t\tif ( ! onHoverOff ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( side === 'vertical' ) {\n\t\t\tonHoverOff( {\n\t\t\t\ttop: false,\n\t\t\t\tbottom: false,\n\t\t\t} );\n\t\t}\n\t\tif ( side === 'horizontal' ) {\n\t\t\tonHoverOff( {\n\t\t\t\tleft: false,\n\t\t\t\tright: false,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst createHandleOnChange = ( side: GroupedSide ) => ( next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last && first;\n\n\treturn (\n\t\t<Layout\n\t\t\tgap={ 0 }\n\t\t\talign=\"top\"\n\t\t\tclassName=\"component-box-control__vertical-horizontal-input-controls\"\n\t\t>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\t\t\t\treturn (\n\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Layout>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_compose","require","_utils","_tooltip","_interopRequireDefault","_utils2","_boxControlStyles","groupedSides","AxialInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnValueChange","next","nextValues","isNumeric","undefined","isNaN","parseFloat","nextValue","top","bottom","left","right","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","_react","createElement","Fragment","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","selectedUnit","inputId","join","InputWrapper","key","FlexedBoxControlIcon","default","placement","text","LABELS","StyledUnitControl","className","id","isPressEnterToChange","value","newValue","onUnitChange","label","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/axial-input-controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport Tooltip from '../tooltip';\nimport { CUSTOM_VALUE_SETTINGS, LABELS } from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps } from './types';\n\nconst groupedSides = [ 'vertical', 'horizontal' ] as const;\ntype GroupedSide = ( typeof groupedSides )[ number ];\n\nexport default function AxialInputControls( {\n\t__next40pxDefaultSize,\n\tonChange,\n\tonFocus,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId(\n\t\tAxialInputControls,\n\t\t`box-control-input`\n\t);\n\n\tconst createHandleOnFocus =\n\t\t( side: GroupedSide ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tif ( ! onFocus ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnValueChange = ( side: GroupedSide, next?: string ) => {\n\t\tif ( ! onChange ) {\n\t\t\treturn;\n\t\t}\n\t\tconst nextValues = { ...values };\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\tif ( side === 'vertical' ) {\n\t\t\tnextValues.top = nextValue;\n\t\t\tnextValues.bottom = nextValue;\n\t\t}\n\n\t\tif ( side === 'horizontal' ) {\n\t\t\tnextValues.left = nextValue;\n\t\t\tnextValues.right = nextValue;\n\t\t}\n\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: GroupedSide ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\n\t\t\tif ( side === 'vertical' ) {\n\t\t\t\tnewUnits.top = next;\n\t\t\t\tnewUnits.bottom = next;\n\t\t\t}\n\n\t\t\tif ( side === 'horizontal' ) {\n\t\t\t\tnewUnits.left = next;\n\t\t\t\tnewUnits.right = next;\n\t\t\t}\n\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? groupedSides.filter( ( side ) => sides.includes( side ) )\n\t\t: groupedSides;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue(\n\t\t\t\t\t\tside === 'vertical' ? values.top : values.left\n\t\t\t\t\t);\n\t\t\t\tconst selectedUnit =\n\t\t\t\t\tside === 'vertical'\n\t\t\t\t\t\t? selectedUnits.top\n\t\t\t\t\t\t: selectedUnits.left;\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ side }>\n\t\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t\t<Tooltip placement=\"top-end\" text={ LABELS[ side ] }>\n\t\t\t\t\t\t\t<StyledUnitControl\n\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\t\tclassName=\"component-box-control__unit-control\"\n\t\t\t\t\t\t\t\tid={ inputId }\n\t\t\t\t\t\t\t\tisPressEnterToChange\n\t\t\t\t\t\t\t\tvalue={ [\n\t\t\t\t\t\t\t\t\tparsedQuantity,\n\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t].join( '' ) }\n\t\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange( side, newValue )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange(\n\t\t\t\t\t\t\t\t\tside\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\t\tkey={ side }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t<FlexedRangeControl\n\t\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\t\t__next40pxDefaultSize={ __next40pxDefaultSize }\n\t\t\t\t\t\t\taria-controls={ inputId }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\tnewValue !== undefined\n\t\t\t\t\t\t\t\t\t\t? [\n\t\t\t\t\t\t\t\t\t\t\t\tnewValue,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedUnit ?? parsedUnit,\n\t\t\t\t\t\t\t\t\t\t  ].join( '' )\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstep={\n\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ selectedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t?.step ?? 0.1\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputWrapper>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n"],"mappings":"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"}

package/build/box-control/icon.js

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

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

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

package/build/box-control/index.js

@@ -11,17 +11,16 @@ Object.defineProperty(exports, "applyValueToSides", {
   }
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _baseControl = require("../base-control");
-var _button = _interopRequireDefault(require("../button"));
-var _flex = require("../flex");
 var _allInputControl = _interopRequireDefault(require("./all-input-control"));
 var _inputControls = _interopRequireDefault(require("./input-controls"));
 var _axialInputControls = _interopRequireDefault(require("./axial-input-controls"));
-var _icon = _interopRequireDefault(require("./icon"));
 var _linkedButton = _interopRequireDefault(require("./linked-button"));
+var _grid = require("../grid");
 var _boxControlStyles = require("./styles/box-control-styles");
 var _utils = require("../unit-control/utils");
 var _utils2 = require("./utils");
@@ -69,6 +68,7 @@ function useUniqueId(idProp) {
  * ```
  */
 function BoxControl({
+  __next40pxDefaultSize = false,
   id: idProp,
   inputProps = defaultInputProps,
   onChange = noop,
@@ -134,39 +134,36 @@ function BoxControl({
     sides,
     values: inputValues,
     onMouseOver,
-    onMouseOut
+    onMouseOut,
+    __next40pxDefaultSize
   };
-  return (0, _element.createElement)(_boxControlStyles.Root, {
+  return (0, _react.createElement)(_grid.Grid, {
     id: id,
+    columns: 3,
+    templateColumns: "1fr min-content min-content",
     role: "group",
     "aria-labelledby": headingId
-  }, (0, _element.createElement)(_boxControlStyles.Header, {
-    className: "component-box-control__header"
-  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_baseControl.BaseControl.VisualLabel, {
+  }, (0, _react.createElement)(_baseControl.BaseControl.VisualLabel, {
     id: headingId
-  }, label)), allowReset && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_button.default, {
-    className: "component-box-control__reset-button",
-    variant: "secondary",
-    isSmall: true,
-    onClick: handleOnReset,
-    disabled: !isDirty
-  }, (0, _i18n.__)('Reset')))), (0, _element.createElement)(_boxControlStyles.HeaderControlWrapper, {
-    className: "component-box-control__header-control-wrapper"
-  }, (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_icon.default, {
+  }, label), isLinked && (0, _react.createElement)(_boxControlStyles.InputWrapper, null, (0, _react.createElement)(_boxControlStyles.FlexedBoxControlIcon, {
     side: side,
     sides: sides
-  })), isLinked && (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_allInputControl.default, {
-    "aria-label": label,
+  }), (0, _react.createElement)(_allInputControl.default, {
     ...inputControlProps
-  })), !isLinked && splitOnAxis && (0, _element.createElement)(_flex.FlexBlock, null, (0, _element.createElement)(_axialInputControls.default, {
-    ...inputControlProps
-  })), !hasOneSide && (0, _element.createElement)(_flex.FlexItem, null, (0, _element.createElement)(_linkedButton.default, {
+  })), !hasOneSide && (0, _react.createElement)(_boxControlStyles.LinkedButtonWrapper, null, (0, _react.createElement)(_linkedButton.default, {
     onClick: toggleLinked,
     isLinked: isLinked
-  }))), !isLinked && !splitOnAxis && (0, _element.createElement)(_inputControls.default, {
+  })), !isLinked && splitOnAxis && (0, _react.createElement)(_axialInputControls.default, {
+    ...inputControlProps
+  }), !isLinked && !splitOnAxis && (0, _react.createElement)(_inputControls.default, {
     ...inputControlProps
-  }));
+  }), allowReset && (0, _react.createElement)(_boxControlStyles.ResetButton, {
+    className: "component-box-control__reset-button",
+    variant: "secondary",
+    size: "small",
+    onClick: handleOnReset,
+    disabled: !isDirty
+  }, (0, _i18n.__)('Reset')));
 }
-var _default = BoxControl;
-exports.default = _default;
+var _default = exports.default = BoxControl;
 //# sourceMappingURL=index.js.map