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

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_compose","_i18n","_baseControl","_button","_interopRequireDefault","_flex","_allInputControl","_inputControls","_axialInputControls","_icon","_linkedButton","_boxControlStyles","_utils","_utils2","_hooks","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValuesMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","createElement","Root","role","Header","className","FlexItem","BaseControl","VisualLabel","default","variant","isSmall","onClick","disabled","HeaderControlWrapper","FlexBlock","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport Button from '../button';\nimport { FlexItem, FlexBlock } from '../flex';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport BoxControlIcon from './icon';\nimport LinkedButton from './linked-button';\nimport {\n\tRoot,\n\tHeader,\n\tHeaderControlWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * BoxControl components let users set values for Top, Right, Bottom, and Left.\n * This can be used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n *\n * \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nfunction BoxControl( {\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t};\n\n\treturn (\n\t\t<Root id={ id } role=\"group\" aria-labelledby={ headingId }>\n\t\t\t<Header className=\"component-box-control__header\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t</FlexItem>\n\t\t\t\t{ allowReset && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</Header>\n\t\t\t<HeaderControlWrapper className=\"component-box-control__header-control-wrapper\">\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<BoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t</FlexItem>\n\t\t\t\t{ isLinked && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AllInputControl\n\t\t\t\t\t\t\taria-label={ label }\n\t\t\t\t\t\t\t{ ...inputControlProps }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t\t<FlexBlock>\n\t\t\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t\t\t</FlexBlock>\n\t\t\t\t) }\n\t\t\t\t{ ! hasOneSide && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HeaderControlWrapper>\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t</Root>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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"}
+{"version":3,"names":["_compose","require","_element","_i18n","_baseControl","_allInputControl","_interopRequireDefault","_inputControls","_axialInputControls","_linkedButton","_grid","_boxControlStyles","_utils","_utils2","_hooks","defaultInputProps","min","noop","useUniqueId","idProp","instanceId","useInstanceId","BoxControl","__next40pxDefaultSize","id","inputProps","onChange","label","__","values","valuesProp","units","sides","splitOnAxis","allowReset","resetValues","DEFAULT_VALUES","onMouseOver","onMouseOut","setValues","useControlledState","fallback","inputValues","hasInitialValue","isValuesDefined","hasOneSide","length","isDirty","setIsDirty","useState","isLinked","setIsLinked","isValuesMixed","side","setSide","getInitialSide","selectedUnits","setSelectedUnits","top","parseQuantityAndUnitFromRawValue","right","bottom","left","headingId","toggleLinked","handleOnFocus","_event","nextSide","handleOnChange","nextValues","handleOnReset","inputControlProps","onFocus","_react","createElement","Grid","columns","templateColumns","role","BaseControl","VisualLabel","InputWrapper","FlexedBoxControlIcon","default","LinkedButtonWrapper","onClick","ResetButton","className","variant","size","disabled","_default","exports"],"sources":["@wordpress/components/src/box-control/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BaseControl } from '../base-control';\nimport AllInputControl from './all-input-control';\nimport InputControls from './input-controls';\nimport AxialInputControls from './axial-input-controls';\nimport LinkedButton from './linked-button';\nimport { Grid } from '../grid';\nimport {\n\tFlexedBoxControlIcon,\n\tInputWrapper,\n\tResetButton,\n\tLinkedButtonWrapper,\n} from './styles/box-control-styles';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport {\n\tDEFAULT_VALUES,\n\tgetInitialSide,\n\tisValuesMixed,\n\tisValuesDefined,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type {\n\tBoxControlIconProps,\n\tBoxControlProps,\n\tBoxControlValue,\n} from './types';\n\nconst defaultInputProps = {\n\tmin: 0,\n};\n\nconst noop = () => {};\n\nfunction useUniqueId( idProp?: string ) {\n\tconst instanceId = useInstanceId( BoxControl, 'inspector-box-control' );\n\n\treturn idProp || instanceId;\n}\n\n/**\n * BoxControl components let users set values for Top, Right, Bottom, and Left.\n * This can be used as an input control for values like `padding` or `margin`.\n *\n * ```jsx\n * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ values, setValues ] = useState( {\n * \t\ttop: '50px',\n * \t\tleft: '10%',\n * \t\tright: '10%',\n * \t\tbottom: '50px',\n * \t} );\n *\n * \treturn (\n * \t\t<BoxControl\n * \t\t\tvalues={ values }\n * \t\t\tonChange={ ( nextValues ) => setValues( nextValues ) }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nfunction BoxControl( {\n\t__next40pxDefaultSize = false,\n\tid: idProp,\n\tinputProps = defaultInputProps,\n\tonChange = noop,\n\tlabel = __( 'Box Control' ),\n\tvalues: valuesProp,\n\tunits,\n\tsides,\n\tsplitOnAxis = false,\n\tallowReset = true,\n\tresetValues = DEFAULT_VALUES,\n\tonMouseOver,\n\tonMouseOut,\n}: BoxControlProps ) {\n\tconst [ values, setValues ] = useControlledState( valuesProp, {\n\t\tfallback: DEFAULT_VALUES,\n\t} );\n\tconst inputValues = values || DEFAULT_VALUES;\n\tconst hasInitialValue = isValuesDefined( valuesProp );\n\tconst hasOneSide = sides?.length === 1;\n\n\tconst [ isDirty, setIsDirty ] = useState( hasInitialValue );\n\tconst [ isLinked, setIsLinked ] = useState(\n\t\t! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide\n\t);\n\n\tconst [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(\n\t\tgetInitialSide( isLinked, splitOnAxis )\n\t);\n\n\t// Tracking selected units via internal state allows filtering of CSS unit\n\t// only values from being saved while maintaining preexisting unit selection\n\t// behaviour. Filtering CSS only values prevents invalid style values.\n\tconst [ selectedUnits, setSelectedUnits ] = useState< BoxControlValue >( {\n\t\ttop: parseQuantityAndUnitFromRawValue( valuesProp?.top )[ 1 ],\n\t\tright: parseQuantityAndUnitFromRawValue( valuesProp?.right )[ 1 ],\n\t\tbottom: parseQuantityAndUnitFromRawValue( valuesProp?.bottom )[ 1 ],\n\t\tleft: parseQuantityAndUnitFromRawValue( valuesProp?.left )[ 1 ],\n\t} );\n\n\tconst id = useUniqueId( idProp );\n\tconst headingId = `${ id }-heading`;\n\n\tconst toggleLinked = () => {\n\t\tsetIsLinked( ! isLinked );\n\t\tsetSide( getInitialSide( ! isLinked, splitOnAxis ) );\n\t};\n\n\tconst handleOnFocus = (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side: nextSide }: { side: typeof side }\n\t) => {\n\t\tsetSide( nextSide );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t\tsetValues( nextValues );\n\t\tsetIsDirty( true );\n\t};\n\n\tconst handleOnReset = () => {\n\t\tonChange( resetValues );\n\t\tsetValues( resetValues );\n\t\tsetSelectedUnits( resetValues );\n\t\tsetIsDirty( false );\n\t};\n\n\tconst inputControlProps = {\n\t\t...inputProps,\n\t\tonChange: handleOnChange,\n\t\tonFocus: handleOnFocus,\n\t\tisLinked,\n\t\tunits,\n\t\tselectedUnits,\n\t\tsetSelectedUnits,\n\t\tsides,\n\t\tvalues: inputValues,\n\t\tonMouseOver,\n\t\tonMouseOut,\n\t\t__next40pxDefaultSize,\n\t};\n\n\treturn (\n\t\t<Grid\n\t\t\tid={ id }\n\t\t\tcolumns={ 3 }\n\t\t\ttemplateColumns=\"1fr min-content min-content\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headingId }\n\t\t>\n\t\t\t<BaseControl.VisualLabel id={ headingId }>\n\t\t\t\t{ label }\n\t\t\t</BaseControl.VisualLabel>\n\t\t\t{ isLinked && (\n\t\t\t\t<InputWrapper>\n\t\t\t\t\t<FlexedBoxControlIcon side={ side } sides={ sides } />\n\t\t\t\t\t<AllInputControl { ...inputControlProps } />\n\t\t\t\t</InputWrapper>\n\t\t\t) }\n\t\t\t{ ! hasOneSide && (\n\t\t\t\t<LinkedButtonWrapper>\n\t\t\t\t\t<LinkedButton\n\t\t\t\t\t\tonClick={ toggleLinked }\n\t\t\t\t\t\tisLinked={ isLinked }\n\t\t\t\t\t/>\n\t\t\t\t</LinkedButtonWrapper>\n\t\t\t) }\n\n\t\t\t{ ! isLinked && splitOnAxis && (\n\t\t\t\t<AxialInputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t\t{ ! isLinked && ! splitOnAxis && (\n\t\t\t\t<InputControls { ...inputControlProps } />\n\t\t\t) }\n\t\t\t{ allowReset && (\n\t\t\t\t<ResetButton\n\t\t\t\t\tclassName=\"component-box-control__reset-button\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonClick={ handleOnReset }\n\t\t\t\t\tdisabled={ ! isDirty }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t</ResetButton>\n\t\t\t) }\n\t\t</Grid>\n\t);\n}\n\nexport { applyValueToSides } from './utils';\nexport default BoxControl;\n"],"mappings":"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"}

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

@@ -5,48 +5,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = BoxInputControls;
-var _element = require("@wordpress/element");
-var _unitControl = _interopRequireDefault(require("./unit-control"));
+var _react = require("react");
+var _compose = require("@wordpress/compose");
+var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _utils = require("../unit-control/utils");
 var _utils2 = require("./utils");
 var _boxControlStyles = require("./styles/box-control-styles");
+/**
+ * WordPress dependencies
+ */
+
 /**
  * Internal dependencies
  */
 
 const noop = () => {};
 function BoxInputControls({
+  __next40pxDefaultSize,
   onChange = noop,
   onFocus = noop,
-  onHoverOn = noop,
-  onHoverOff = noop,
   values,
   selectedUnits,
   setSelectedUnits,
   sides,
   ...props
 }) {
+  const generatedId = (0, _compose.useInstanceId)(BoxInputControls, 'box-control-input');
   const createHandleOnFocus = side => event => {
     onFocus(event, {
       side
     });
   };
-  const createHandleOnHoverOn = side => () => {
-    onHoverOn({
-      [side]: true
-    });
-  };
-  const createHandleOnHoverOff = side => () => {
-    onHoverOff({
-      [side]: false
-    });
-  };
   const handleOnChange = nextValues => {
     onChange(nextValues);
   };
-  const createHandleOnChange = side => (next, {
-    event
-  }) => {
+  const handleOnValueChange = (side, next, extra) => {
     const nextValues = {
       ...values
     };
@@ -61,7 +54,7 @@ function BoxInputControls({
     // @ts-expect-error - TODO: event.altKey is only present when the change event was
     // triggered by a keyboard event. Should this feature be implemented differently so
     // it also works with drag events?
-    if (event.altKey) {
+    if (extra?.event.altKey) {
       switch (side) {
         case 'top':
           nextValues.bottom = nextValue;
@@ -89,32 +82,47 @@ function BoxInputControls({
 
   // Filter sides if custom configuration provided, maintaining default order.
   const filteredSides = sides?.length ? _utils2.ALL_SIDES.filter(side => sides.includes(side)) : _utils2.ALL_SIDES;
-  const first = filteredSides[0];
-  const last = filteredSides[filteredSides.length - 1];
-  const only = first === last && first;
-  return (0, _element.createElement)(_boxControlStyles.LayoutContainer, {
-    className: "component-box-control__input-controls-wrapper"
-  }, (0, _element.createElement)(_boxControlStyles.Layout, {
-    gap: 0,
-    align: "top",
-    className: "component-box-control__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)(values[side]);
     const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
-    return (0, _element.createElement)(_unitControl.default, {
+    const inputId = [generatedId, side].join('-');
+    return (0, _react.createElement)(_boxControlStyles.InputWrapper, {
+      key: `box-control-${side}`,
+      expanded: true
+    }, (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, computedUnit].join(''),
-      onChange: createHandleOnChange(side),
+      onChange: (nextValue, extra) => handleOnValueChange(side, nextValue, extra),
       onUnitChange: createHandleOnUnitChange(side),
       onFocus: createHandleOnFocus(side),
-      onHoverOn: createHandleOnHoverOn(side),
-      onHoverOff: createHandleOnHoverOff(side),
       label: _utils2.LABELS[side],
-      key: `box-control-${side}`
-    });
-  })));
+      hideLabelFromVision: true
+    })), (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, computedUnit].join('') : undefined);
+      },
+      min: 0,
+      max: (_CUSTOM_VALUE_SETTING = _utils2.CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10,
+      step: (_CUSTOM_VALUE_SETTING2 = _utils2.CUSTOM_VALUE_SETTINGS[computedUnit !== null && computedUnit !== void 0 ? computedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 0.1,
+      value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
+      withInputField: false
+    }));
+  }));
 }
 //# sourceMappingURL=input-controls.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_unitControl","_interopRequireDefault","require","_utils","_utils2","_boxControlStyles","noop","BoxInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","createHandleOnHoverOff","handleOnChange","nextValues","createHandleOnChange","next","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","ALL_SIDES","filter","includes","first","last","only","_element","createElement","LayoutContainer","className","Layout","gap","align","map","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","default","isFirst","isLast","isOnly","value","join","onUnitChange","label","LABELS","key"],"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport UnitControl from './unit-control';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, LABELS } from './utils';\nimport { LayoutContainer, Layout } from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\nimport type { UnitControlProps } from '../unit-control/types';\n\nconst noop = () => {};\n\nexport default function BoxInputControls( {\n\tonChange = noop,\n\tonFocus = noop,\n\tonHoverOn = noop,\n\tonHoverOff = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst createHandleOnFocus =\n\t\t( side: keyof BoxControlValue ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst createHandleOnHoverOn = ( side: keyof BoxControlValue ) => () => {\n\t\tonHoverOn( { [ side ]: true } );\n\t};\n\n\tconst createHandleOnHoverOff = ( side: keyof BoxControlValue ) => () => {\n\t\tonHoverOff( { [ side ]: false } );\n\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst createHandleOnChange: (\n\t\tside: keyof BoxControlValue\n\t) => UnitControlProps[ 'onChange' ] =\n\t\t( side ) =>\n\t\t( next, { event } ) => {\n\t\t\tconst nextValues = { ...values };\n\t\t\tconst isNumeric =\n\t\t\t\tnext !== undefined && ! isNaN( parseFloat( next ) );\n\t\t\tconst nextValue = isNumeric ? next : undefined;\n\n\t\t\tnextValues[ side ] = nextValue;\n\n\t\t\t/**\n\t\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t\t * when changing the TOP will also update BOTTOM.\n\t\t\t */\n\t\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t\t// it also works with drag events?\n\t\t\tif ( event.altKey ) {\n\t\t\t\tswitch ( side ) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\thandleOnChange( nextValues );\n\t\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: keyof BoxControlValue ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\t\t\tnewUnits[ side ] = next;\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\tconst first = filteredSides[ 0 ];\n\tconst last = filteredSides[ filteredSides.length - 1 ];\n\tconst only = first === last && first;\n\n\treturn (\n\t\t<LayoutContainer className=\"component-box-control__input-controls-wrapper\">\n\t\t\t<Layout\n\t\t\t\tgap={ 0 }\n\t\t\t\talign=\"top\"\n\t\t\t\tclassName=\"component-box-control__input-controls\"\n\t\t\t>\n\t\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t\t? parsedUnit\n\t\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<UnitControl\n\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\tisFirst={ first === side }\n\t\t\t\t\t\t\tisLast={ last === side }\n\t\t\t\t\t\t\tisOnly={ only === side }\n\t\t\t\t\t\t\tvalue={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tonChange={ createHandleOnChange( side ) }\n\t\t\t\t\t\t\tonUnitChange={ createHandleOnUnitChange( side ) }\n\t\t\t\t\t\t\tonFocus={ createHandleOnFocus( side ) }\n\t\t\t\t\t\t\tonHoverOn={ createHandleOnHoverOn( side ) }\n\t\t\t\t\t\t\tonHoverOff={ createHandleOnHoverOff( side ) }\n\t\t\t\t\t\t\tlabel={ LABELS[ side ] }\n\t\t\t\t\t\t\tkey={ `box-control-${ side }` }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Layout>\n\t\t</LayoutContainer>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["_compose","require","_tooltip","_interopRequireDefault","_utils","_utils2","_boxControlStyles","noop","BoxInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","useInstanceId","createHandleOnFocus","side","event","handleOnChange","nextValues","handleOnValueChange","next","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","ALL_SIDES","filter","includes","_react","createElement","Fragment","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","computedUnit","inputId","join","InputWrapper","key","expanded","FlexedBoxControlIcon","default","placement","text","LABELS","StyledUnitControl","className","id","isPressEnterToChange","value","onUnitChange","label","hideLabelFromVision","FlexedRangeControl","__nextHasNoMarginBottom","newValue","min","max","CUSTOM_VALUE_SETTINGS","step","withInputField"],"sources":["@wordpress/components/src/box-control/input-controls.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInstanceId } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\nimport { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';\nimport { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils';\nimport {\n\tFlexedBoxControlIcon,\n\tFlexedRangeControl,\n\tInputWrapper,\n\tStyledUnitControl,\n} from './styles/box-control-styles';\nimport type { BoxControlInputControlProps, BoxControlValue } from './types';\n\nconst noop = () => {};\n\nexport default function BoxInputControls( {\n\t__next40pxDefaultSize,\n\tonChange = noop,\n\tonFocus = noop,\n\tvalues,\n\tselectedUnits,\n\tsetSelectedUnits,\n\tsides,\n\t...props\n}: BoxControlInputControlProps ) {\n\tconst generatedId = useInstanceId( BoxInputControls, 'box-control-input' );\n\n\tconst createHandleOnFocus =\n\t\t( side: keyof BoxControlValue ) =>\n\t\t( event: React.FocusEvent< HTMLInputElement > ) => {\n\t\t\tonFocus( event, { side } );\n\t\t};\n\n\tconst handleOnChange = ( nextValues: BoxControlValue ) => {\n\t\tonChange( nextValues );\n\t};\n\n\tconst handleOnValueChange = (\n\t\tside: keyof BoxControlValue,\n\t\tnext?: string,\n\t\textra?: { event: React.SyntheticEvent< Element, Event > }\n\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\tnextValues[ side ] = nextValue;\n\n\t\t/**\n\t\t * Supports changing pair sides. For example, holding the ALT key\n\t\t * when changing the TOP will also update BOTTOM.\n\t\t */\n\t\t// @ts-expect-error - TODO: event.altKey is only present when the change event was\n\t\t// triggered by a keyboard event. Should this feature be implemented differently so\n\t\t// it also works with drag events?\n\t\tif ( extra?.event.altKey ) {\n\t\t\tswitch ( side ) {\n\t\t\t\tcase 'top':\n\t\t\t\t\tnextValues.bottom = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'bottom':\n\t\t\t\t\tnextValues.top = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'left':\n\t\t\t\t\tnextValues.right = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'right':\n\t\t\t\t\tnextValues.left = nextValue;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\thandleOnChange( nextValues );\n\t};\n\n\tconst createHandleOnUnitChange =\n\t\t( side: keyof BoxControlValue ) => ( next?: string ) => {\n\t\t\tconst newUnits = { ...selectedUnits };\n\t\t\tnewUnits[ side ] = next;\n\t\t\tsetSelectedUnits( newUnits );\n\t\t};\n\n\t// Filter sides if custom configuration provided, maintaining default order.\n\tconst filteredSides = sides?.length\n\t\t? ALL_SIDES.filter( ( side ) => sides.includes( side ) )\n\t\t: ALL_SIDES;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredSides.map( ( side ) => {\n\t\t\t\tconst [ parsedQuantity, parsedUnit ] =\n\t\t\t\t\tparseQuantityAndUnitFromRawValue( values[ side ] );\n\n\t\t\t\tconst computedUnit = values[ side ]\n\t\t\t\t\t? parsedUnit\n\t\t\t\t\t: selectedUnits[ side ];\n\n\t\t\t\tconst inputId = [ generatedId, side ].join( '-' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<InputWrapper key={ `box-control-${ side }` } expanded>\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={ [ parsedQuantity, computedUnit ].join(\n\t\t\t\t\t\t\t\t\t''\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonChange={ ( nextValue, extra ) =>\n\t\t\t\t\t\t\t\t\thandleOnValueChange(\n\t\t\t\t\t\t\t\t\t\tside,\n\t\t\t\t\t\t\t\t\t\tnextValue,\n\t\t\t\t\t\t\t\t\t\textra\n\t\t\t\t\t\t\t\t\t)\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/>\n\t\t\t\t\t\t</Tooltip>\n\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? [ newValue, computedUnit ].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[ computedUnit ?? '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[ computedUnit ?? '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/linked-button.js

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

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

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

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

@@ -8,7 +8,7 @@ exports.Viewbox = exports.TopStroke = exports.Root = exports.RightStroke = expor
 var _base = _interopRequireDefault(require("@emotion/styled/base"));
 var _react = require("@emotion/react");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const Root = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+const Root = exports.Root = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
   target: "e1j5nr4z8"
 } : {
   target: "e1j5nr4z8",
@@ -22,8 +22,7 @@ const Root = (0, _base.default)("span", process.env.NODE_ENV === "production" ?
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLWljb24tc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU0rQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2JveC1jb250cm9sL3N0eWxlcy9ib3gtY29udHJvbC1pY29uLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuc3BhbmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdHdpZHRoOiAyNHB4O1xuXHRoZWlnaHQ6IDI0cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0cGFkZGluZzogNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpZXdib3ggPSBzdHlsZWQuc3BhbmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmNvbnN0IHN0cm9rZUZvY3VzID0gKCB7IGlzRm9jdXNlZCB9OiB7IGlzRm9jdXNlZDogYm9vbGVhbiB9ICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0YmFja2dyb3VuZENvbG9yOiAnY3VycmVudENvbG9yJyxcblx0XHRvcGFjaXR5OiBpc0ZvY3VzZWQgPyAxIDogMC4zLFxuXHR9ICk7XG59O1xuXG5jb25zdCBTdHJva2UgPSBzdHlsZWQuc3BhbmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdCR7IHN0cm9rZUZvY3VzIH07XG5gO1xuXG5jb25zdCBWZXJ0aWNhbFN0cm9rZSA9IHN0eWxlZCggU3Ryb2tlIClgXG5cdGJvdHRvbTogM3B4O1xuXHR0b3A6IDNweDtcblx0d2lkdGg6IDJweDtcbmA7XG5cbmNvbnN0IEhvcml6b250YWxTdHJva2UgPSBzdHlsZWQoIFN0cm9rZSApYFxuXHRoZWlnaHQ6IDJweDtcblx0bGVmdDogM3B4O1xuXHRyaWdodDogM3B4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFRvcFN0cm9rZSA9IHN0eWxlZCggSG9yaXpvbnRhbFN0cm9rZSApYFxuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgUmlnaHRTdHJva2UgPSBzdHlsZWQoIFZlcnRpY2FsU3Ryb2tlIClgXG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVN0cm9rZSA9IHN0eWxlZCggSG9yaXpvbnRhbFN0cm9rZSApYFxuXHRib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgTGVmdFN0cm9rZSA9IHN0eWxlZCggVmVydGljYWxTdHJva2UgKWBcblx0bGVmdDogMDtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.Root = Root;
-const Viewbox = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
+const Viewbox = exports.Viewbox = (0, _base.default)("span", process.env.NODE_ENV === "production" ? {
   target: "e1j5nr4z7"
 } : {
   target: "e1j5nr4z7",
@@ -37,7 +36,6 @@ const Viewbox = (0, _base.default)("span", process.env.NODE_ENV === "production"
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLWljb24tc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWVrQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2JveC1jb250cm9sL3N0eWxlcy9ib3gtY29udHJvbC1pY29uLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuc3BhbmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdHdpZHRoOiAyNHB4O1xuXHRoZWlnaHQ6IDI0cHg7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0cGFkZGluZzogNHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFZpZXdib3ggPSBzdHlsZWQuc3BhbmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0d2lkdGg6IDEwMCU7XG5cdGhlaWdodDogMTAwJTtcbmA7XG5cbmNvbnN0IHN0cm9rZUZvY3VzID0gKCB7IGlzRm9jdXNlZCB9OiB7IGlzRm9jdXNlZDogYm9vbGVhbiB9ICkgPT4ge1xuXHRyZXR1cm4gY3NzKCB7XG5cdFx0YmFja2dyb3VuZENvbG9yOiAnY3VycmVudENvbG9yJyxcblx0XHRvcGFjaXR5OiBpc0ZvY3VzZWQgPyAxIDogMC4zLFxuXHR9ICk7XG59O1xuXG5jb25zdCBTdHJva2UgPSBzdHlsZWQuc3BhbmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0ZGlzcGxheTogYmxvY2s7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdCR7IHN0cm9rZUZvY3VzIH07XG5gO1xuXG5jb25zdCBWZXJ0aWNhbFN0cm9rZSA9IHN0eWxlZCggU3Ryb2tlIClgXG5cdGJvdHRvbTogM3B4O1xuXHR0b3A6IDNweDtcblx0d2lkdGg6IDJweDtcbmA7XG5cbmNvbnN0IEhvcml6b250YWxTdHJva2UgPSBzdHlsZWQoIFN0cm9rZSApYFxuXHRoZWlnaHQ6IDJweDtcblx0bGVmdDogM3B4O1xuXHRyaWdodDogM3B4O1xuYDtcblxuZXhwb3J0IGNvbnN0IFRvcFN0cm9rZSA9IHN0eWxlZCggSG9yaXpvbnRhbFN0cm9rZSApYFxuXHR0b3A6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgUmlnaHRTdHJva2UgPSBzdHlsZWQoIFZlcnRpY2FsU3Ryb2tlIClgXG5cdHJpZ2h0OiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IEJvdHRvbVN0cm9rZSA9IHN0eWxlZCggSG9yaXpvbnRhbFN0cm9rZSApYFxuXHRib3R0b206IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgTGVmdFN0cm9rZSA9IHN0eWxlZCggVmVydGljYWxTdHJva2UgKWBcblx0bGVmdDogMDtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.Viewbox = Viewbox;
 const strokeFocus = ({
   isFocused
 }) => {
@@ -80,7 +78,7 @@ const HorizontalStroke = ( /*#__PURE__*/0, _base.default)(Stroke, process.env.NO
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLWljb24tc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRDeUMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHR3aWR0aDogMjRweDtcblx0aGVpZ2h0OiAyNHB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHBhZGRpbmc6IDRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaWV3Ym94ID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5jb25zdCBzdHJva2VGb2N1cyA9ICggeyBpc0ZvY3VzZWQgfTogeyBpc0ZvY3VzZWQ6IGJvb2xlYW4gfSApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdGJhY2tncm91bmRDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG5cdFx0b3BhY2l0eTogaXNGb2N1c2VkID8gMSA6IDAuMyxcblx0fSApO1xufTtcblxuY29uc3QgU3Ryb2tlID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHQkeyBzdHJva2VGb2N1cyB9O1xuYDtcblxuY29uc3QgVmVydGljYWxTdHJva2UgPSBzdHlsZWQoIFN0cm9rZSApYFxuXHRib3R0b206IDNweDtcblx0dG9wOiAzcHg7XG5cdHdpZHRoOiAycHg7XG5gO1xuXG5jb25zdCBIb3Jpem9udGFsU3Ryb2tlID0gc3R5bGVkKCBTdHJva2UgKWBcblx0aGVpZ2h0OiAycHg7XG5cdGxlZnQ6IDNweDtcblx0cmlnaHQ6IDNweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BTdHJva2UgPSBzdHlsZWQoIEhvcml6b250YWxTdHJva2UgKWBcblx0dG9wOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0U3Ryb2tlID0gc3R5bGVkKCBWZXJ0aWNhbFN0cm9rZSApYFxuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3R0b21TdHJva2UgPSBzdHlsZWQoIEhvcml6b250YWxTdHJva2UgKWBcblx0Ym90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRTdHJva2UgPSBzdHlsZWQoIFZlcnRpY2FsU3Ryb2tlIClgXG5cdGxlZnQ6IDA7XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-const TopStroke = ( /*#__PURE__*/0, _base.default)(HorizontalStroke, process.env.NODE_ENV === "production" ? {
+const TopStroke = exports.TopStroke = ( /*#__PURE__*/0, _base.default)(HorizontalStroke, process.env.NODE_ENV === "production" ? {
   target: "e1j5nr4z3"
 } : {
   target: "e1j5nr4z3",
@@ -94,8 +92,7 @@ const TopStroke = ( /*#__PURE__*/0, _base.default)(HorizontalStroke, process.env
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLWljb24tc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtEbUQiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHR3aWR0aDogMjRweDtcblx0aGVpZ2h0OiAyNHB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHBhZGRpbmc6IDRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaWV3Ym94ID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5jb25zdCBzdHJva2VGb2N1cyA9ICggeyBpc0ZvY3VzZWQgfTogeyBpc0ZvY3VzZWQ6IGJvb2xlYW4gfSApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdGJhY2tncm91bmRDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG5cdFx0b3BhY2l0eTogaXNGb2N1c2VkID8gMSA6IDAuMyxcblx0fSApO1xufTtcblxuY29uc3QgU3Ryb2tlID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHQkeyBzdHJva2VGb2N1cyB9O1xuYDtcblxuY29uc3QgVmVydGljYWxTdHJva2UgPSBzdHlsZWQoIFN0cm9rZSApYFxuXHRib3R0b206IDNweDtcblx0dG9wOiAzcHg7XG5cdHdpZHRoOiAycHg7XG5gO1xuXG5jb25zdCBIb3Jpem9udGFsU3Ryb2tlID0gc3R5bGVkKCBTdHJva2UgKWBcblx0aGVpZ2h0OiAycHg7XG5cdGxlZnQ6IDNweDtcblx0cmlnaHQ6IDNweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BTdHJva2UgPSBzdHlsZWQoIEhvcml6b250YWxTdHJva2UgKWBcblx0dG9wOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0U3Ryb2tlID0gc3R5bGVkKCBWZXJ0aWNhbFN0cm9rZSApYFxuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3R0b21TdHJva2UgPSBzdHlsZWQoIEhvcml6b250YWxTdHJva2UgKWBcblx0Ym90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRTdHJva2UgPSBzdHlsZWQoIFZlcnRpY2FsU3Ryb2tlIClgXG5cdGxlZnQ6IDA7XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.TopStroke = TopStroke;
-const RightStroke = ( /*#__PURE__*/0, _base.default)(VerticalStroke, process.env.NODE_ENV === "production" ? {
+const RightStroke = exports.RightStroke = ( /*#__PURE__*/0, _base.default)(VerticalStroke, process.env.NODE_ENV === "production" ? {
   target: "e1j5nr4z2"
 } : {
   target: "e1j5nr4z2",
@@ -109,8 +106,7 @@ const RightStroke = ( /*#__PURE__*/0, _base.default)(VerticalStroke, process.env
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLWljb24tc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNEbUQiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHR3aWR0aDogMjRweDtcblx0aGVpZ2h0OiAyNHB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHBhZGRpbmc6IDRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaWV3Ym94ID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5jb25zdCBzdHJva2VGb2N1cyA9ICggeyBpc0ZvY3VzZWQgfTogeyBpc0ZvY3VzZWQ6IGJvb2xlYW4gfSApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdGJhY2tncm91bmRDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG5cdFx0b3BhY2l0eTogaXNGb2N1c2VkID8gMSA6IDAuMyxcblx0fSApO1xufTtcblxuY29uc3QgU3Ryb2tlID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHQkeyBzdHJva2VGb2N1cyB9O1xuYDtcblxuY29uc3QgVmVydGljYWxTdHJva2UgPSBzdHlsZWQoIFN0cm9rZSApYFxuXHRib3R0b206IDNweDtcblx0dG9wOiAzcHg7XG5cdHdpZHRoOiAycHg7XG5gO1xuXG5jb25zdCBIb3Jpem9udGFsU3Ryb2tlID0gc3R5bGVkKCBTdHJva2UgKWBcblx0aGVpZ2h0OiAycHg7XG5cdGxlZnQ6IDNweDtcblx0cmlnaHQ6IDNweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BTdHJva2UgPSBzdHlsZWQoIEhvcml6b250YWxTdHJva2UgKWBcblx0dG9wOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0U3Ryb2tlID0gc3R5bGVkKCBWZXJ0aWNhbFN0cm9rZSApYFxuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3R0b21TdHJva2UgPSBzdHlsZWQoIEhvcml6b250YWxTdHJva2UgKWBcblx0Ym90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRTdHJva2UgPSBzdHlsZWQoIFZlcnRpY2FsU3Ryb2tlIClgXG5cdGxlZnQ6IDA7XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.RightStroke = RightStroke;
-const BottomStroke = ( /*#__PURE__*/0, _base.default)(HorizontalStroke, process.env.NODE_ENV === "production" ? {
+const BottomStroke = exports.BottomStroke = ( /*#__PURE__*/0, _base.default)(HorizontalStroke, process.env.NODE_ENV === "production" ? {
   target: "e1j5nr4z1"
 } : {
   target: "e1j5nr4z1",
@@ -124,8 +120,7 @@ const BottomStroke = ( /*#__PURE__*/0, _base.default)(HorizontalStroke, process.
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLWljb24tc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBEc0QiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHR3aWR0aDogMjRweDtcblx0aGVpZ2h0OiAyNHB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHBhZGRpbmc6IDRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaWV3Ym94ID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5jb25zdCBzdHJva2VGb2N1cyA9ICggeyBpc0ZvY3VzZWQgfTogeyBpc0ZvY3VzZWQ6IGJvb2xlYW4gfSApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdGJhY2tncm91bmRDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG5cdFx0b3BhY2l0eTogaXNGb2N1c2VkID8gMSA6IDAuMyxcblx0fSApO1xufTtcblxuY29uc3QgU3Ryb2tlID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHQkeyBzdHJva2VGb2N1cyB9O1xuYDtcblxuY29uc3QgVmVydGljYWxTdHJva2UgPSBzdHlsZWQoIFN0cm9rZSApYFxuXHRib3R0b206IDNweDtcblx0dG9wOiAzcHg7XG5cdHdpZHRoOiAycHg7XG5gO1xuXG5jb25zdCBIb3Jpem9udGFsU3Ryb2tlID0gc3R5bGVkKCBTdHJva2UgKWBcblx0aGVpZ2h0OiAycHg7XG5cdGxlZnQ6IDNweDtcblx0cmlnaHQ6IDNweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BTdHJva2UgPSBzdHlsZWQoIEhvcml6b250YWxTdHJva2UgKWBcblx0dG9wOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0U3Ryb2tlID0gc3R5bGVkKCBWZXJ0aWNhbFN0cm9rZSApYFxuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3R0b21TdHJva2UgPSBzdHlsZWQoIEhvcml6b250YWxTdHJva2UgKWBcblx0Ym90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRTdHJva2UgPSBzdHlsZWQoIFZlcnRpY2FsU3Ryb2tlIClgXG5cdGxlZnQ6IDA7XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.BottomStroke = BottomStroke;
-const LeftStroke = ( /*#__PURE__*/0, _base.default)(VerticalStroke, process.env.NODE_ENV === "production" ? {
+const LeftStroke = exports.LeftStroke = ( /*#__PURE__*/0, _base.default)(VerticalStroke, process.env.NODE_ENV === "production" ? {
   target: "e1j5nr4z0"
 } : {
   target: "e1j5nr4z0",
@@ -139,5 +134,4 @@ const LeftStroke = ( /*#__PURE__*/0, _base.default)(VerticalStroke, process.env.
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLWljb24tc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQThEa0QiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtaWNvbi1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBSb290ID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHR3aWR0aDogMjRweDtcblx0aGVpZ2h0OiAyNHB4O1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHBhZGRpbmc6IDRweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBWaWV3Ym94ID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5gO1xuXG5jb25zdCBzdHJva2VGb2N1cyA9ICggeyBpc0ZvY3VzZWQgfTogeyBpc0ZvY3VzZWQ6IGJvb2xlYW4gfSApID0+IHtcblx0cmV0dXJuIGNzcygge1xuXHRcdGJhY2tncm91bmRDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG5cdFx0b3BhY2l0eTogaXNGb2N1c2VkID8gMSA6IDAuMyxcblx0fSApO1xufTtcblxuY29uc3QgU3Ryb2tlID0gc3R5bGVkLnNwYW5gXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdGRpc3BsYXk6IGJsb2NrO1xuXHRwb2ludGVyLWV2ZW50czogbm9uZTtcblx0cG9zaXRpb246IGFic29sdXRlO1xuXHQkeyBzdHJva2VGb2N1cyB9O1xuYDtcblxuY29uc3QgVmVydGljYWxTdHJva2UgPSBzdHlsZWQoIFN0cm9rZSApYFxuXHRib3R0b206IDNweDtcblx0dG9wOiAzcHg7XG5cdHdpZHRoOiAycHg7XG5gO1xuXG5jb25zdCBIb3Jpem9udGFsU3Ryb2tlID0gc3R5bGVkKCBTdHJva2UgKWBcblx0aGVpZ2h0OiAycHg7XG5cdGxlZnQ6IDNweDtcblx0cmlnaHQ6IDNweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBUb3BTdHJva2UgPSBzdHlsZWQoIEhvcml6b250YWxTdHJva2UgKWBcblx0dG9wOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJpZ2h0U3Ryb2tlID0gc3R5bGVkKCBWZXJ0aWNhbFN0cm9rZSApYFxuXHRyaWdodDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBCb3R0b21TdHJva2UgPSBzdHlsZWQoIEhvcml6b250YWxTdHJva2UgKWBcblx0Ym90dG9tOiAwO1xuYDtcblxuZXhwb3J0IGNvbnN0IExlZnRTdHJva2UgPSBzdHlsZWQoIFZlcnRpY2FsU3Ryb2tlIClgXG5cdGxlZnQ6IDA7XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-exports.LeftStroke = LeftStroke;
 //# sourceMappingURL=box-control-icon-styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_EMOTION_STRINGIFIED_CSS_ERROR__","Root","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","exports","Viewbox","strokeFocus","isFocused","css","backgroundColor","opacity","Stroke","VerticalStroke","HorizontalStroke","TopStroke","RightStroke","BottomStroke","LeftStroke"],"sources":["@wordpress/components/src/box-control/styles/box-control-icon-styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nexport const Root = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\twidth: 24px;\n\theight: 24px;\n\tposition: relative;\n\tpadding: 4px;\n`;\n\nexport const Viewbox = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n`;\n\nconst strokeFocus = ( { isFocused }: { isFocused: boolean } ) => {\n\treturn css( {\n\t\tbackgroundColor: 'currentColor',\n\t\topacity: isFocused ? 1 : 0.3,\n\t} );\n};\n\nconst Stroke = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: absolute;\n\t${ strokeFocus };\n`;\n\nconst VerticalStroke = styled( Stroke )`\n\tbottom: 3px;\n\ttop: 3px;\n\twidth: 2px;\n`;\n\nconst HorizontalStroke = styled( Stroke )`\n\theight: 2px;\n\tleft: 3px;\n\tright: 3px;\n`;\n\nexport const TopStroke = styled( HorizontalStroke )`\n\ttop: 0;\n`;\n\nexport const RightStroke = styled( VerticalStroke )`\n\tright: 0;\n`;\n\nexport const BottomStroke = styled( HorizontalStroke )`\n\tbottom: 0;\n`;\n\nexport const LeftStroke = styled( VerticalStroke )`\n\tleft: 0;\n`;\n"],"mappings":"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"}
+{"version":3,"names":["_react","require","_EMOTION_STRINGIFIED_CSS_ERROR__","Root","exports","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","Viewbox","strokeFocus","isFocused","css","backgroundColor","opacity","Stroke","VerticalStroke","HorizontalStroke","TopStroke","RightStroke","BottomStroke","LeftStroke"],"sources":["@wordpress/components/src/box-control/styles/box-control-icon-styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\nexport const Root = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\twidth: 24px;\n\theight: 24px;\n\tposition: relative;\n\tpadding: 4px;\n`;\n\nexport const Viewbox = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n`;\n\nconst strokeFocus = ( { isFocused }: { isFocused: boolean } ) => {\n\treturn css( {\n\t\tbackgroundColor: 'currentColor',\n\t\topacity: isFocused ? 1 : 0.3,\n\t} );\n};\n\nconst Stroke = styled.span`\n\tbox-sizing: border-box;\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: absolute;\n\t${ strokeFocus };\n`;\n\nconst VerticalStroke = styled( Stroke )`\n\tbottom: 3px;\n\ttop: 3px;\n\twidth: 2px;\n`;\n\nconst HorizontalStroke = styled( Stroke )`\n\theight: 2px;\n\tleft: 3px;\n\tright: 3px;\n`;\n\nexport const TopStroke = styled( HorizontalStroke )`\n\ttop: 0;\n`;\n\nexport const RightStroke = styled( VerticalStroke )`\n\tright: 0;\n`;\n\nexport const BottomStroke = styled( HorizontalStroke )`\n\tbottom: 0;\n`;\n\nexport const LeftStroke = styled( VerticalStroke )`\n\tleft: 0;\n`;\n"],"mappings":"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"}