@wordpress/components 25.15.0 → 25.16.0

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

@@ -1,44 +1,36 @@
-import { createElement } from "react";
+import { createElement, Fragment } from "react";
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import UnitControl from './unit-control';
+import Tooltip from '../tooltip';
 import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
-import { ALL_SIDES, LABELS } from './utils';
-import { LayoutContainer, Layout } from './styles/box-control-styles';
+import { ALL_SIDES, CUSTOM_VALUE_SETTINGS, LABELS } from './utils';
+import { FlexedBoxControlIcon, FlexedRangeControl, InputWrapper, StyledUnitControl } from './styles/box-control-styles';
 const noop = () => {};
 export default function BoxInputControls({
+  __next40pxDefaultSize,
   onChange = noop,
   onFocus = noop,
-  onHoverOn = noop,
-  onHoverOff = noop,
   values,
   selectedUnits,
   setSelectedUnits,
   sides,
   ...props
 }) {
+  const generatedId = 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
     };
@@ -53,7 +45,7 @@ export default 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;
@@ -81,32 +73,47 @@ export default function BoxInputControls({
 
   // Filter sides if custom configuration provided, maintaining default order.
   const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES;
-  const first = filteredSides[0];
-  const last = filteredSides[filteredSides.length - 1];
-  const only = first === last && first;
-  return createElement(LayoutContainer, {
-    className: "component-box-control__input-controls-wrapper"
-  }, createElement(Layout, {
-    gap: 0,
-    align: "top",
-    className: "component-box-control__input-controls"
-  }, filteredSides.map(side => {
+  return createElement(Fragment, null, filteredSides.map(side => {
+    var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2;
     const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]);
     const computedUnit = values[side] ? parsedUnit : selectedUnits[side];
-    return createElement(UnitControl, {
+    const inputId = [generatedId, side].join('-');
+    return createElement(InputWrapper, {
+      key: `box-control-${side}`,
+      expanded: true
+    }, createElement(FlexedBoxControlIcon, {
+      side: side,
+      sides: sides
+    }), createElement(Tooltip, {
+      placement: "top-end",
+      text: LABELS[side]
+    }, createElement(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: LABELS[side],
-      key: `box-control-${side}`
-    });
-  })));
+      hideLabelFromVision: true
+    })), createElement(FlexedRangeControl, {
+      __nextHasNoMarginBottom: true,
+      __next40pxDefaultSize: __next40pxDefaultSize,
+      "aria-controls": inputId,
+      label: LABELS[side],
+      hideLabelFromVision: true,
+      onChange: newValue => {
+        handleOnValueChange(side, newValue !== undefined ? [newValue, computedUnit].join('') : undefined);
+      },
+      min: 0,
+      max: (_CUSTOM_VALUE_SETTING = 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 = 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-module/box-control/input-controls.js.map

@@ -1 +1 @@
-{"version":3,"names":["UnitControl","parseQuantityAndUnitFromRawValue","ALL_SIDES","LABELS","LayoutContainer","Layout","noop","BoxInputControls","onChange","onFocus","onHoverOn","onHoverOff","values","selectedUnits","setSelectedUnits","sides","props","createHandleOnFocus","side","event","createHandleOnHoverOn","createHandleOnHoverOff","handleOnChange","nextValues","createHandleOnChange","next","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","first","last","only","createElement","className","gap","align","map","parsedQuantity","parsedUnit","computedUnit","isFirst","isLast","isOnly","value","join","onUnitChange","label","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":["useInstanceId","Tooltip","parseQuantityAndUnitFromRawValue","ALL_SIDES","CUSTOM_VALUE_SETTINGS","LABELS","FlexedBoxControlIcon","FlexedRangeControl","InputWrapper","StyledUnitControl","noop","BoxInputControls","__next40pxDefaultSize","onChange","onFocus","values","selectedUnits","setSelectedUnits","sides","props","generatedId","createHandleOnFocus","side","event","handleOnChange","nextValues","handleOnValueChange","next","extra","isNumeric","undefined","isNaN","parseFloat","nextValue","altKey","bottom","top","right","left","createHandleOnUnitChange","newUnits","filteredSides","length","filter","includes","createElement","Fragment","map","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","parsedQuantity","parsedUnit","computedUnit","inputId","join","key","expanded","placement","text","className","id","isPressEnterToChange","value","onUnitChange","label","hideLabelFromVision","__nextHasNoMarginBottom","newValue","min","max","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-module/box-control/styles/box-control-styles.js

@@ -3,150 +3,90 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
+
 /**
  * Internal dependencies
  */
-import { Flex } from '../../flex';
-import BaseUnitControl from '../../unit-control';
-import { rtl } from '../../utils';
-export const Root = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1jovhle6"
-} : {
-  target: "e1jovhle6",
-  label: "Root"
-})(process.env.NODE_ENV === "production" ? {
-  name: "14bvcyk",
-  styles: "box-sizing:border-box;max-width:235px;padding-bottom:12px;width:100%"
-} : {
-  name: "14bvcyk",
-  styles: "box-sizing:border-box;max-width:235px;padding-bottom:12px;width:100%",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhOEIiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IEJhc2VVbml0Q29udHJvbCBmcm9tICcuLi8uLi91bml0LWNvbnRyb2wnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBCb3hVbml0Q29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdG1heC13aWR0aDogMjM1cHg7XG5cdHBhZGRpbmctYm90dG9tOiAxMnB4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXIgPSBzdHlsZWQoIEZsZXggKWBcblx0bWFyZ2luLWJvdHRvbTogOHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckNvbnRyb2xXcmFwcGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1pbi1oZWlnaHQ6IDMwcHg7XG5cdGdhcDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBVbml0Q29udHJvbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXgtd2lkdGg6IDgwcHg7XG5gO1xuXG5leHBvcnQgY29uc3QgTGF5b3V0Q29udGFpbmVyID0gc3R5bGVkKCBGbGV4IClgXG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRwYWRkaW5nLXRvcDogOHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dCA9IHN0eWxlZCggRmxleCApYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcbmA7XG5cbmNvbnN0IHVuaXRDb250cm9sQm9yZGVyUmFkaXVzU3R5bGVzID0gKCB7XG5cdGlzRmlyc3QsXG5cdGlzTGFzdCxcblx0aXNPbmx5LFxufTogUGljazwgQm94VW5pdENvbnRyb2xQcm9wcywgJ2lzRmlyc3QnIHwgJ2lzTGFzdCcgfCAnaXNPbmx5JyA+ICkgPT4ge1xuXHRpZiAoIGlzRmlyc3QgKSB7XG5cdFx0cmV0dXJuIHJ0bCggeyBib3JkZXJUb3BSaWdodFJhZGl1czogMCwgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IDAgfSApKCk7XG5cdH1cblx0aWYgKCBpc0xhc3QgKSB7XG5cdFx0cmV0dXJuIHJ0bCggeyBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLCBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiAwIH0gKSgpO1xuXHR9XG5cdGlmICggaXNPbmx5ICkge1xuXHRcdHJldHVybiBjc3MoIHsgYm9yZGVyUmFkaXVzOiAyIH0gKTtcblx0fVxuXG5cdHJldHVybiBjc3MoIHtcblx0XHRib3JkZXJSYWRpdXM6IDAsXG5cdH0gKTtcbn07XG5cbmNvbnN0IHVuaXRDb250cm9sTWFyZ2luU3R5bGVzID0gKCB7XG5cdGlzRmlyc3QsXG5cdGlzT25seSxcbn06IFBpY2s8IEJveFVuaXRDb250cm9sUHJvcHMsICdpc0ZpcnN0JyB8ICdpc09ubHknID4gKSA9PiB7XG5cdGNvbnN0IG1hcmdpbkxlZnQgPSBpc0ZpcnN0IHx8IGlzT25seSA/IDAgOiAtMTtcblxuXHRyZXR1cm4gcnRsKCB7IG1hcmdpbkxlZnQgfSApKCk7XG59O1xuXG5leHBvcnQgY29uc3QgVW5pdENvbnRyb2wgPSBzdHlsZWQoIEJhc2VVbml0Q29udHJvbCApYFxuXHRtYXgtd2lkdGg6IDYwcHg7XG5cdCR7IHVuaXRDb250cm9sQm9yZGVyUmFkaXVzU3R5bGVzIH07XG5cdCR7IHVuaXRDb250cm9sTWFyZ2luU3R5bGVzIH07XG5gO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-export const Header = /*#__PURE__*/_styled(Flex, process.env.NODE_ENV === "production" ? {
+import BoxControlIcon from '../icon';
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import RangeControl from '../../range-control';
+import UnitControl from '../../unit-control';
+import { space } from '../../utils/space';
+export const StyledUnitControl = /*#__PURE__*/_styled(UnitControl, process.env.NODE_ENV === "production" ? {
   target: "e1jovhle5"
 } : {
   target: "e1jovhle5",
-  label: "Header"
+  label: "StyledUnitControl"
 })(process.env.NODE_ENV === "production" ? {
-  name: "5bhc30",
-  styles: "margin-bottom:8px"
+  name: "1ejyr19",
+  styles: "max-width:90px"
 } : {
-  name: "5bhc30",
-  styles: "margin-bottom:8px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQm9DIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXggfSBmcm9tICcuLi8uLi9mbGV4JztcbmltcG9ydCBCYXNlVW5pdENvbnRyb2wgZnJvbSAnLi4vLi4vdW5pdC1jb250cm9sJztcbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgQm94VW5pdENvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXgtd2lkdGg6IDIzNXB4O1xuXHRwYWRkaW5nLWJvdHRvbTogMTJweDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1hcmdpbi1ib3R0b206IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJDb250cm9sV3JhcHBlciA9IHN0eWxlZCggRmxleCApYFxuXHRtaW4taGVpZ2h0OiAzMHB4O1xuXHRnYXA6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVW5pdENvbnRyb2xXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bWF4LXdpZHRoOiA4MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dENvbnRhaW5lciA9IHN0eWxlZCggRmxleCApYFxuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0cGFkZGluZy10b3A6IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXQgPSBzdHlsZWQoIEZsZXggKWBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdHdpZHRoOiAxMDAlO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5gO1xuXG5jb25zdCB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc0xhc3QsXG5cdGlzT25seSxcbn06IFBpY2s8IEJveFVuaXRDb250cm9sUHJvcHMsICdpc0ZpcnN0JyB8ICdpc0xhc3QnIHwgJ2lzT25seScgPiApID0+IHtcblx0aWYgKCBpc0ZpcnN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiAwIH0gKSgpO1xuXHR9XG5cdGlmICggaXNMYXN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wTGVmdFJhZGl1czogMCwgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCB9ICkoKTtcblx0fVxuXHRpZiAoIGlzT25seSApIHtcblx0XHRyZXR1cm4gY3NzKCB7IGJvcmRlclJhZGl1czogMiB9ICk7XG5cdH1cblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Ym9yZGVyUmFkaXVzOiAwLFxuXHR9ICk7XG59O1xuXG5jb25zdCB1bml0Q29udHJvbE1hcmdpblN0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc09ubHksXG59OiBQaWNrPCBCb3hVbml0Q29udHJvbFByb3BzLCAnaXNGaXJzdCcgfCAnaXNPbmx5JyA+ICkgPT4ge1xuXHRjb25zdCBtYXJnaW5MZWZ0ID0gaXNGaXJzdCB8fCBpc09ubHkgPyAwIDogLTE7XG5cblx0cmV0dXJuIHJ0bCggeyBtYXJnaW5MZWZ0IH0gKSgpO1xufTtcblxuZXhwb3J0IGNvbnN0IFVuaXRDb250cm9sID0gc3R5bGVkKCBCYXNlVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA2MHB4O1xuXHQkeyB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyB9O1xuXHQkeyB1bml0Q29udHJvbE1hcmdpblN0eWxlcyB9O1xuYDtcbiJdfQ== */",
+  name: "1ejyr19",
+  styles: "max-width:90px",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFjc0QiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IEJveENvbnRyb2xJY29uIGZyb20gJy4uL2ljb24nO1xuaW1wb3J0IEJ1dHRvbiBmcm9tICcuLi8uLi9idXR0b24nO1xuaW1wb3J0IHsgSFN0YWNrIH0gZnJvbSAnLi4vLi4vaC1zdGFjayc7XG5pbXBvcnQgUmFuZ2VDb250cm9sIGZyb20gJy4uLy4uL3JhbmdlLWNvbnRyb2wnO1xuaW1wb3J0IFVuaXRDb250cm9sIGZyb20gJy4uLy4uL3VuaXQtY29udHJvbCc7XG5pbXBvcnQgeyBzcGFjZSB9IGZyb20gJy4uLy4uL3V0aWxzL3NwYWNlJztcblxuZXhwb3J0IGNvbnN0IFN0eWxlZFVuaXRDb250cm9sID0gc3R5bGVkKCBVbml0Q29udHJvbCApYFxuXHRtYXgtd2lkdGg6IDkwcHg7XG5gO1xuXG5leHBvcnQgY29uc3QgSW5wdXRXcmFwcGVyID0gc3R5bGVkKCBIU3RhY2sgKWBcblx0Z3JpZC1jb2x1bW46IDEgLyBzcGFuIDM7XG5gO1xuXG5leHBvcnQgY29uc3QgUmVzZXRCdXR0b24gPSBzdHlsZWQoIEJ1dHRvbiApYFxuXHRncmlkLWFyZWE6IDEgLyAyO1xuXHRqdXN0aWZ5LXNlbGY6IGVuZDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMaW5rZWRCdXR0b25XcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Z3JpZC1hcmVhOiAxIC8gMztcblx0anVzdGlmeS1zZWxmOiBlbmQ7XG5gO1xuXG5leHBvcnQgY29uc3QgRmxleGVkQm94Q29udHJvbEljb24gPSBzdHlsZWQoIEJveENvbnRyb2xJY29uIClgXG5cdGZsZXg6IDAgMCBhdXRvO1xuYDtcblxuZXhwb3J0IGNvbnN0IEZsZXhlZFJhbmdlQ29udHJvbCA9IHN0eWxlZCggUmFuZ2VDb250cm9sIClgXG5cdHdpZHRoOiAxMDAlO1xuXHRtYXJnaW4taW5saW5lLWVuZDogJHsgc3BhY2UoIDIgKSB9O1xuYDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export const HeaderControlWrapper = /*#__PURE__*/_styled(Flex, process.env.NODE_ENV === "production" ? {
+export const InputWrapper = /*#__PURE__*/_styled(HStack, process.env.NODE_ENV === "production" ? {
   target: "e1jovhle4"
 } : {
   target: "e1jovhle4",
-  label: "HeaderControlWrapper"
+  label: "InputWrapper"
 })(process.env.NODE_ENV === "production" ? {
-  name: "aujtid",
-  styles: "min-height:30px;gap:0"
+  name: "1j1lmoi",
+  styles: "grid-column:1/span 3"
 } : {
-  name: "aujtid",
-  styles: "min-height:30px;gap:0",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3QmtEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXggfSBmcm9tICcuLi8uLi9mbGV4JztcbmltcG9ydCBCYXNlVW5pdENvbnRyb2wgZnJvbSAnLi4vLi4vdW5pdC1jb250cm9sJztcbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgQm94VW5pdENvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXgtd2lkdGg6IDIzNXB4O1xuXHRwYWRkaW5nLWJvdHRvbTogMTJweDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1hcmdpbi1ib3R0b206IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJDb250cm9sV3JhcHBlciA9IHN0eWxlZCggRmxleCApYFxuXHRtaW4taGVpZ2h0OiAzMHB4O1xuXHRnYXA6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVW5pdENvbnRyb2xXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bWF4LXdpZHRoOiA4MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dENvbnRhaW5lciA9IHN0eWxlZCggRmxleCApYFxuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0cGFkZGluZy10b3A6IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXQgPSBzdHlsZWQoIEZsZXggKWBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdHdpZHRoOiAxMDAlO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5gO1xuXG5jb25zdCB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc0xhc3QsXG5cdGlzT25seSxcbn06IFBpY2s8IEJveFVuaXRDb250cm9sUHJvcHMsICdpc0ZpcnN0JyB8ICdpc0xhc3QnIHwgJ2lzT25seScgPiApID0+IHtcblx0aWYgKCBpc0ZpcnN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiAwIH0gKSgpO1xuXHR9XG5cdGlmICggaXNMYXN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wTGVmdFJhZGl1czogMCwgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCB9ICkoKTtcblx0fVxuXHRpZiAoIGlzT25seSApIHtcblx0XHRyZXR1cm4gY3NzKCB7IGJvcmRlclJhZGl1czogMiB9ICk7XG5cdH1cblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Ym9yZGVyUmFkaXVzOiAwLFxuXHR9ICk7XG59O1xuXG5jb25zdCB1bml0Q29udHJvbE1hcmdpblN0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc09ubHksXG59OiBQaWNrPCBCb3hVbml0Q29udHJvbFByb3BzLCAnaXNGaXJzdCcgfCAnaXNPbmx5JyA+ICkgPT4ge1xuXHRjb25zdCBtYXJnaW5MZWZ0ID0gaXNGaXJzdCB8fCBpc09ubHkgPyAwIDogLTE7XG5cblx0cmV0dXJuIHJ0bCggeyBtYXJnaW5MZWZ0IH0gKSgpO1xufTtcblxuZXhwb3J0IGNvbnN0IFVuaXRDb250cm9sID0gc3R5bGVkKCBCYXNlVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA2MHB4O1xuXHQkeyB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyB9O1xuXHQkeyB1bml0Q29udHJvbE1hcmdpblN0eWxlcyB9O1xuYDtcbiJdfQ== */",
+  name: "1j1lmoi",
+  styles: "grid-column:1/span 3",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQjRDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCb3hDb250cm9sSWNvbiBmcm9tICcuLi9pY29uJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uLy4uL2gtc3RhY2snO1xuaW1wb3J0IFJhbmdlQ29udHJvbCBmcm9tICcuLi8uLi9yYW5nZS1jb250cm9sJztcbmltcG9ydCBVbml0Q29udHJvbCBmcm9tICcuLi8uLi91bml0LWNvbnRyb2wnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91dGlscy9zcGFjZSc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRVbml0Q29udHJvbCA9IHN0eWxlZCggVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA5MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IElucHV0V3JhcHBlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGdyaWQtY29sdW1uOiAxIC8gc3BhbiAzO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0Z3JpZC1hcmVhOiAxIC8gMjtcblx0anVzdGlmeS1zZWxmOiBlbmQ7XG5gO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQnV0dG9uV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtYXJlYTogMSAvIDM7XG5cdGp1c3RpZnktc2VsZjogZW5kO1xuYDtcblxuZXhwb3J0IGNvbnN0IEZsZXhlZEJveENvbnRyb2xJY29uID0gc3R5bGVkKCBCb3hDb250cm9sSWNvbiApYFxuXHRmbGV4OiAwIDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBGbGV4ZWRSYW5nZUNvbnRyb2wgPSBzdHlsZWQoIFJhbmdlQ29udHJvbCApYFxuXHR3aWR0aDogMTAwJTtcblx0bWFyZ2luLWlubGluZS1lbmQ6ICR7IHNwYWNlKCAyICkgfTtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export const UnitControlWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
+export const ResetButton = /*#__PURE__*/_styled(Button, process.env.NODE_ENV === "production" ? {
   target: "e1jovhle3"
 } : {
   target: "e1jovhle3",
-  label: "UnitControlWrapper"
+  label: "ResetButton"
 })(process.env.NODE_ENV === "production" ? {
-  name: "112jwab",
-  styles: "box-sizing:border-box;max-width:80px"
+  name: "tkya7b",
+  styles: "grid-area:1/2;justify-self:end"
 } : {
-  name: "112jwab",
-  styles: "box-sizing:border-box;max-width:80px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QjRDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXggfSBmcm9tICcuLi8uLi9mbGV4JztcbmltcG9ydCBCYXNlVW5pdENvbnRyb2wgZnJvbSAnLi4vLi4vdW5pdC1jb250cm9sJztcbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgQm94VW5pdENvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXgtd2lkdGg6IDIzNXB4O1xuXHRwYWRkaW5nLWJvdHRvbTogMTJweDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1hcmdpbi1ib3R0b206IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJDb250cm9sV3JhcHBlciA9IHN0eWxlZCggRmxleCApYFxuXHRtaW4taGVpZ2h0OiAzMHB4O1xuXHRnYXA6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVW5pdENvbnRyb2xXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bWF4LXdpZHRoOiA4MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dENvbnRhaW5lciA9IHN0eWxlZCggRmxleCApYFxuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0cGFkZGluZy10b3A6IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXQgPSBzdHlsZWQoIEZsZXggKWBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdHdpZHRoOiAxMDAlO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5gO1xuXG5jb25zdCB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc0xhc3QsXG5cdGlzT25seSxcbn06IFBpY2s8IEJveFVuaXRDb250cm9sUHJvcHMsICdpc0ZpcnN0JyB8ICdpc0xhc3QnIHwgJ2lzT25seScgPiApID0+IHtcblx0aWYgKCBpc0ZpcnN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiAwIH0gKSgpO1xuXHR9XG5cdGlmICggaXNMYXN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wTGVmdFJhZGl1czogMCwgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCB9ICkoKTtcblx0fVxuXHRpZiAoIGlzT25seSApIHtcblx0XHRyZXR1cm4gY3NzKCB7IGJvcmRlclJhZGl1czogMiB9ICk7XG5cdH1cblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Ym9yZGVyUmFkaXVzOiAwLFxuXHR9ICk7XG59O1xuXG5jb25zdCB1bml0Q29udHJvbE1hcmdpblN0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc09ubHksXG59OiBQaWNrPCBCb3hVbml0Q29udHJvbFByb3BzLCAnaXNGaXJzdCcgfCAnaXNPbmx5JyA+ICkgPT4ge1xuXHRjb25zdCBtYXJnaW5MZWZ0ID0gaXNGaXJzdCB8fCBpc09ubHkgPyAwIDogLTE7XG5cblx0cmV0dXJuIHJ0bCggeyBtYXJnaW5MZWZ0IH0gKSgpO1xufTtcblxuZXhwb3J0IGNvbnN0IFVuaXRDb250cm9sID0gc3R5bGVkKCBCYXNlVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA2MHB4O1xuXHQkeyB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyB9O1xuXHQkeyB1bml0Q29udHJvbE1hcmdpblN0eWxlcyB9O1xuYDtcbiJdfQ== */",
+  name: "tkya7b",
+  styles: "grid-area:1/2;justify-self:end",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQjJDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCb3hDb250cm9sSWNvbiBmcm9tICcuLi9pY29uJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uLy4uL2gtc3RhY2snO1xuaW1wb3J0IFJhbmdlQ29udHJvbCBmcm9tICcuLi8uLi9yYW5nZS1jb250cm9sJztcbmltcG9ydCBVbml0Q29udHJvbCBmcm9tICcuLi8uLi91bml0LWNvbnRyb2wnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91dGlscy9zcGFjZSc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRVbml0Q29udHJvbCA9IHN0eWxlZCggVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA5MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IElucHV0V3JhcHBlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGdyaWQtY29sdW1uOiAxIC8gc3BhbiAzO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0Z3JpZC1hcmVhOiAxIC8gMjtcblx0anVzdGlmeS1zZWxmOiBlbmQ7XG5gO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQnV0dG9uV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtYXJlYTogMSAvIDM7XG5cdGp1c3RpZnktc2VsZjogZW5kO1xuYDtcblxuZXhwb3J0IGNvbnN0IEZsZXhlZEJveENvbnRyb2xJY29uID0gc3R5bGVkKCBCb3hDb250cm9sSWNvbiApYFxuXHRmbGV4OiAwIDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBGbGV4ZWRSYW5nZUNvbnRyb2wgPSBzdHlsZWQoIFJhbmdlQ29udHJvbCApYFxuXHR3aWR0aDogMTAwJTtcblx0bWFyZ2luLWlubGluZS1lbmQ6ICR7IHNwYWNlKCAyICkgfTtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export const LayoutContainer = /*#__PURE__*/_styled(Flex, process.env.NODE_ENV === "production" ? {
+export const LinkedButtonWrapper = _styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1jovhle2"
 } : {
   target: "e1jovhle2",
-  label: "LayoutContainer"
+  label: "LinkedButtonWrapper"
 })(process.env.NODE_ENV === "production" ? {
-  name: "xy18ro",
-  styles: "justify-content:center;padding-top:8px"
+  name: "1dfa8al",
+  styles: "grid-area:1/3;justify-self:end"
 } : {
-  name: "xy18ro",
-  styles: "justify-content:center;padding-top:8px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFrQzZDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXggfSBmcm9tICcuLi8uLi9mbGV4JztcbmltcG9ydCBCYXNlVW5pdENvbnRyb2wgZnJvbSAnLi4vLi4vdW5pdC1jb250cm9sJztcbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgQm94VW5pdENvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXgtd2lkdGg6IDIzNXB4O1xuXHRwYWRkaW5nLWJvdHRvbTogMTJweDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1hcmdpbi1ib3R0b206IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJDb250cm9sV3JhcHBlciA9IHN0eWxlZCggRmxleCApYFxuXHRtaW4taGVpZ2h0OiAzMHB4O1xuXHRnYXA6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVW5pdENvbnRyb2xXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bWF4LXdpZHRoOiA4MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dENvbnRhaW5lciA9IHN0eWxlZCggRmxleCApYFxuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0cGFkZGluZy10b3A6IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXQgPSBzdHlsZWQoIEZsZXggKWBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdHdpZHRoOiAxMDAlO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5gO1xuXG5jb25zdCB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc0xhc3QsXG5cdGlzT25seSxcbn06IFBpY2s8IEJveFVuaXRDb250cm9sUHJvcHMsICdpc0ZpcnN0JyB8ICdpc0xhc3QnIHwgJ2lzT25seScgPiApID0+IHtcblx0aWYgKCBpc0ZpcnN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiAwIH0gKSgpO1xuXHR9XG5cdGlmICggaXNMYXN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wTGVmdFJhZGl1czogMCwgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCB9ICkoKTtcblx0fVxuXHRpZiAoIGlzT25seSApIHtcblx0XHRyZXR1cm4gY3NzKCB7IGJvcmRlclJhZGl1czogMiB9ICk7XG5cdH1cblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Ym9yZGVyUmFkaXVzOiAwLFxuXHR9ICk7XG59O1xuXG5jb25zdCB1bml0Q29udHJvbE1hcmdpblN0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc09ubHksXG59OiBQaWNrPCBCb3hVbml0Q29udHJvbFByb3BzLCAnaXNGaXJzdCcgfCAnaXNPbmx5JyA+ICkgPT4ge1xuXHRjb25zdCBtYXJnaW5MZWZ0ID0gaXNGaXJzdCB8fCBpc09ubHkgPyAwIDogLTE7XG5cblx0cmV0dXJuIHJ0bCggeyBtYXJnaW5MZWZ0IH0gKSgpO1xufTtcblxuZXhwb3J0IGNvbnN0IFVuaXRDb250cm9sID0gc3R5bGVkKCBCYXNlVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA2MHB4O1xuXHQkeyB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyB9O1xuXHQkeyB1bml0Q29udHJvbE1hcmdpblN0eWxlcyB9O1xuYDtcbiJdfQ== */",
+  name: "1dfa8al",
+  styles: "grid-area:1/3;justify-self:end",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQjZDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCb3hDb250cm9sSWNvbiBmcm9tICcuLi9pY29uJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uLy4uL2gtc3RhY2snO1xuaW1wb3J0IFJhbmdlQ29udHJvbCBmcm9tICcuLi8uLi9yYW5nZS1jb250cm9sJztcbmltcG9ydCBVbml0Q29udHJvbCBmcm9tICcuLi8uLi91bml0LWNvbnRyb2wnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91dGlscy9zcGFjZSc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRVbml0Q29udHJvbCA9IHN0eWxlZCggVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA5MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IElucHV0V3JhcHBlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGdyaWQtY29sdW1uOiAxIC8gc3BhbiAzO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0Z3JpZC1hcmVhOiAxIC8gMjtcblx0anVzdGlmeS1zZWxmOiBlbmQ7XG5gO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQnV0dG9uV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtYXJlYTogMSAvIDM7XG5cdGp1c3RpZnktc2VsZjogZW5kO1xuYDtcblxuZXhwb3J0IGNvbnN0IEZsZXhlZEJveENvbnRyb2xJY29uID0gc3R5bGVkKCBCb3hDb250cm9sSWNvbiApYFxuXHRmbGV4OiAwIDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBGbGV4ZWRSYW5nZUNvbnRyb2wgPSBzdHlsZWQoIFJhbmdlQ29udHJvbCApYFxuXHR3aWR0aDogMTAwJTtcblx0bWFyZ2luLWlubGluZS1lbmQ6ICR7IHNwYWNlKCAyICkgfTtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-export const Layout = /*#__PURE__*/_styled(Flex, process.env.NODE_ENV === "production" ? {
+export const FlexedBoxControlIcon = /*#__PURE__*/_styled(BoxControlIcon, process.env.NODE_ENV === "production" ? {
   target: "e1jovhle1"
 } : {
   target: "e1jovhle1",
-  label: "Layout"
+  label: "FlexedBoxControlIcon"
 })(process.env.NODE_ENV === "production" ? {
-  name: "3tw5wk",
-  styles: "position:relative;height:100%;width:100%;justify-content:flex-start"
+  name: "ou8xsw",
+  styles: "flex:0 0 auto"
 } : {
-  name: "3tw5wk",
-  styles: "position:relative;height:100%;width:100%;justify-content:flex-start",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1Q29DIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXggfSBmcm9tICcuLi8uLi9mbGV4JztcbmltcG9ydCBCYXNlVW5pdENvbnRyb2wgZnJvbSAnLi4vLi4vdW5pdC1jb250cm9sJztcbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgQm94VW5pdENvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXgtd2lkdGg6IDIzNXB4O1xuXHRwYWRkaW5nLWJvdHRvbTogMTJweDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1hcmdpbi1ib3R0b206IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJDb250cm9sV3JhcHBlciA9IHN0eWxlZCggRmxleCApYFxuXHRtaW4taGVpZ2h0OiAzMHB4O1xuXHRnYXA6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVW5pdENvbnRyb2xXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bWF4LXdpZHRoOiA4MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dENvbnRhaW5lciA9IHN0eWxlZCggRmxleCApYFxuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0cGFkZGluZy10b3A6IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXQgPSBzdHlsZWQoIEZsZXggKWBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdHdpZHRoOiAxMDAlO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5gO1xuXG5jb25zdCB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc0xhc3QsXG5cdGlzT25seSxcbn06IFBpY2s8IEJveFVuaXRDb250cm9sUHJvcHMsICdpc0ZpcnN0JyB8ICdpc0xhc3QnIHwgJ2lzT25seScgPiApID0+IHtcblx0aWYgKCBpc0ZpcnN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiAwIH0gKSgpO1xuXHR9XG5cdGlmICggaXNMYXN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wTGVmdFJhZGl1czogMCwgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCB9ICkoKTtcblx0fVxuXHRpZiAoIGlzT25seSApIHtcblx0XHRyZXR1cm4gY3NzKCB7IGJvcmRlclJhZGl1czogMiB9ICk7XG5cdH1cblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Ym9yZGVyUmFkaXVzOiAwLFxuXHR9ICk7XG59O1xuXG5jb25zdCB1bml0Q29udHJvbE1hcmdpblN0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc09ubHksXG59OiBQaWNrPCBCb3hVbml0Q29udHJvbFByb3BzLCAnaXNGaXJzdCcgfCAnaXNPbmx5JyA+ICkgPT4ge1xuXHRjb25zdCBtYXJnaW5MZWZ0ID0gaXNGaXJzdCB8fCBpc09ubHkgPyAwIDogLTE7XG5cblx0cmV0dXJuIHJ0bCggeyBtYXJnaW5MZWZ0IH0gKSgpO1xufTtcblxuZXhwb3J0IGNvbnN0IFVuaXRDb250cm9sID0gc3R5bGVkKCBCYXNlVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA2MHB4O1xuXHQkeyB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyB9O1xuXHQkeyB1bml0Q29udHJvbE1hcmdpblN0eWxlcyB9O1xuYDtcbiJdfQ== */",
+  name: "ou8xsw",
+  styles: "flex:0 0 auto",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnQzREIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCb3hDb250cm9sSWNvbiBmcm9tICcuLi9pY29uJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uLy4uL2gtc3RhY2snO1xuaW1wb3J0IFJhbmdlQ29udHJvbCBmcm9tICcuLi8uLi9yYW5nZS1jb250cm9sJztcbmltcG9ydCBVbml0Q29udHJvbCBmcm9tICcuLi8uLi91bml0LWNvbnRyb2wnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91dGlscy9zcGFjZSc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRVbml0Q29udHJvbCA9IHN0eWxlZCggVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA5MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IElucHV0V3JhcHBlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGdyaWQtY29sdW1uOiAxIC8gc3BhbiAzO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0Z3JpZC1hcmVhOiAxIC8gMjtcblx0anVzdGlmeS1zZWxmOiBlbmQ7XG5gO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQnV0dG9uV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtYXJlYTogMSAvIDM7XG5cdGp1c3RpZnktc2VsZjogZW5kO1xuYDtcblxuZXhwb3J0IGNvbnN0IEZsZXhlZEJveENvbnRyb2xJY29uID0gc3R5bGVkKCBCb3hDb250cm9sSWNvbiApYFxuXHRmbGV4OiAwIDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBGbGV4ZWRSYW5nZUNvbnRyb2wgPSBzdHlsZWQoIFJhbmdlQ29udHJvbCApYFxuXHR3aWR0aDogMTAwJTtcblx0bWFyZ2luLWlubGluZS1lbmQ6ICR7IHNwYWNlKCAyICkgfTtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1ch9yvl",
-  styles: "border-radius:0"
-} : {
-  name: "11flpvr-unitControlBorderRadiusStyles",
-  styles: "border-radius:0;label:unitControlBorderRadiusStyles;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2RFEiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IEJhc2VVbml0Q29udHJvbCBmcm9tICcuLi8uLi91bml0LWNvbnRyb2wnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBCb3hVbml0Q29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdG1heC13aWR0aDogMjM1cHg7XG5cdHBhZGRpbmctYm90dG9tOiAxMnB4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXIgPSBzdHlsZWQoIEZsZXggKWBcblx0bWFyZ2luLWJvdHRvbTogOHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckNvbnRyb2xXcmFwcGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1pbi1oZWlnaHQ6IDMwcHg7XG5cdGdhcDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBVbml0Q29udHJvbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXgtd2lkdGg6IDgwcHg7XG5gO1xuXG5leHBvcnQgY29uc3QgTGF5b3V0Q29udGFpbmVyID0gc3R5bGVkKCBGbGV4IClgXG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRwYWRkaW5nLXRvcDogOHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dCA9IHN0eWxlZCggRmxleCApYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcbmA7XG5cbmNvbnN0IHVuaXRDb250cm9sQm9yZGVyUmFkaXVzU3R5bGVzID0gKCB7XG5cdGlzRmlyc3QsXG5cdGlzTGFzdCxcblx0aXNPbmx5LFxufTogUGljazwgQm94VW5pdENvbnRyb2xQcm9wcywgJ2lzRmlyc3QnIHwgJ2lzTGFzdCcgfCAnaXNPbmx5JyA+ICkgPT4ge1xuXHRpZiAoIGlzRmlyc3QgKSB7XG5cdFx0cmV0dXJuIHJ0bCggeyBib3JkZXJUb3BSaWdodFJhZGl1czogMCwgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IDAgfSApKCk7XG5cdH1cblx0aWYgKCBpc0xhc3QgKSB7XG5cdFx0cmV0dXJuIHJ0bCggeyBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLCBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiAwIH0gKSgpO1xuXHR9XG5cdGlmICggaXNPbmx5ICkge1xuXHRcdHJldHVybiBjc3MoIHsgYm9yZGVyUmFkaXVzOiAyIH0gKTtcblx0fVxuXG5cdHJldHVybiBjc3MoIHtcblx0XHRib3JkZXJSYWRpdXM6IDAsXG5cdH0gKTtcbn07XG5cbmNvbnN0IHVuaXRDb250cm9sTWFyZ2luU3R5bGVzID0gKCB7XG5cdGlzRmlyc3QsXG5cdGlzT25seSxcbn06IFBpY2s8IEJveFVuaXRDb250cm9sUHJvcHMsICdpc0ZpcnN0JyB8ICdpc09ubHknID4gKSA9PiB7XG5cdGNvbnN0IG1hcmdpbkxlZnQgPSBpc0ZpcnN0IHx8IGlzT25seSA/IDAgOiAtMTtcblxuXHRyZXR1cm4gcnRsKCB7IG1hcmdpbkxlZnQgfSApKCk7XG59O1xuXG5leHBvcnQgY29uc3QgVW5pdENvbnRyb2wgPSBzdHlsZWQoIEJhc2VVbml0Q29udHJvbCApYFxuXHRtYXgtd2lkdGg6IDYwcHg7XG5cdCR7IHVuaXRDb250cm9sQm9yZGVyUmFkaXVzU3R5bGVzIH07XG5cdCR7IHVuaXRDb250cm9sTWFyZ2luU3R5bGVzIH07XG5gO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "tg3mx0",
-  styles: "border-radius:2px"
-} : {
-  name: "19k84rr-unitControlBorderRadiusStyles",
-  styles: "border-radius:2px;label:unitControlBorderRadiusStyles;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRFMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9ib3gtY29udHJvbC9zdHlsZXMvYm94LWNvbnRyb2wtc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgRmxleCB9IGZyb20gJy4uLy4uL2ZsZXgnO1xuaW1wb3J0IEJhc2VVbml0Q29udHJvbCBmcm9tICcuLi8uLi91bml0LWNvbnRyb2wnO1xuaW1wb3J0IHsgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IHR5cGUgeyBCb3hVbml0Q29udHJvbFByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5leHBvcnQgY29uc3QgUm9vdCA9IHN0eWxlZC5kaXZgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdG1heC13aWR0aDogMjM1cHg7XG5cdHBhZGRpbmctYm90dG9tOiAxMnB4O1xuXHR3aWR0aDogMTAwJTtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXIgPSBzdHlsZWQoIEZsZXggKWBcblx0bWFyZ2luLWJvdHRvbTogOHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IEhlYWRlckNvbnRyb2xXcmFwcGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1pbi1oZWlnaHQ6IDMwcHg7XG5cdGdhcDogMDtcbmA7XG5cbmV4cG9ydCBjb25zdCBVbml0Q29udHJvbFdyYXBwZXIgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXgtd2lkdGg6IDgwcHg7XG5gO1xuXG5leHBvcnQgY29uc3QgTGF5b3V0Q29udGFpbmVyID0gc3R5bGVkKCBGbGV4IClgXG5cdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRwYWRkaW5nLXRvcDogOHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dCA9IHN0eWxlZCggRmxleCApYFxuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdGhlaWdodDogMTAwJTtcblx0d2lkdGg6IDEwMCU7XG5cdGp1c3RpZnktY29udGVudDogZmxleC1zdGFydDtcbmA7XG5cbmNvbnN0IHVuaXRDb250cm9sQm9yZGVyUmFkaXVzU3R5bGVzID0gKCB7XG5cdGlzRmlyc3QsXG5cdGlzTGFzdCxcblx0aXNPbmx5LFxufTogUGljazwgQm94VW5pdENvbnRyb2xQcm9wcywgJ2lzRmlyc3QnIHwgJ2lzTGFzdCcgfCAnaXNPbmx5JyA+ICkgPT4ge1xuXHRpZiAoIGlzRmlyc3QgKSB7XG5cdFx0cmV0dXJuIHJ0bCggeyBib3JkZXJUb3BSaWdodFJhZGl1czogMCwgYm9yZGVyQm90dG9tUmlnaHRSYWRpdXM6IDAgfSApKCk7XG5cdH1cblx0aWYgKCBpc0xhc3QgKSB7XG5cdFx0cmV0dXJuIHJ0bCggeyBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLCBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiAwIH0gKSgpO1xuXHR9XG5cdGlmICggaXNPbmx5ICkge1xuXHRcdHJldHVybiBjc3MoIHsgYm9yZGVyUmFkaXVzOiAyIH0gKTtcblx0fVxuXG5cdHJldHVybiBjc3MoIHtcblx0XHRib3JkZXJSYWRpdXM6IDAsXG5cdH0gKTtcbn07XG5cbmNvbnN0IHVuaXRDb250cm9sTWFyZ2luU3R5bGVzID0gKCB7XG5cdGlzRmlyc3QsXG5cdGlzT25seSxcbn06IFBpY2s8IEJveFVuaXRDb250cm9sUHJvcHMsICdpc0ZpcnN0JyB8ICdpc09ubHknID4gKSA9PiB7XG5cdGNvbnN0IG1hcmdpbkxlZnQgPSBpc0ZpcnN0IHx8IGlzT25seSA/IDAgOiAtMTtcblxuXHRyZXR1cm4gcnRsKCB7IG1hcmdpbkxlZnQgfSApKCk7XG59O1xuXG5leHBvcnQgY29uc3QgVW5pdENvbnRyb2wgPSBzdHlsZWQoIEJhc2VVbml0Q29udHJvbCApYFxuXHRtYXgtd2lkdGg6IDYwcHg7XG5cdCR7IHVuaXRDb250cm9sQm9yZGVyUmFkaXVzU3R5bGVzIH07XG5cdCR7IHVuaXRDb250cm9sTWFyZ2luU3R5bGVzIH07XG5gO1xuIl19 */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const unitControlBorderRadiusStyles = ({
-  isFirst,
-  isLast,
-  isOnly
-}) => {
-  if (isFirst) {
-    return rtl({
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0
-    })();
-  }
-  if (isLast) {
-    return rtl({
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0
-    })();
-  }
-  if (isOnly) {
-    return _ref2;
-  }
-  return _ref;
-};
-const unitControlMarginStyles = ({
-  isFirst,
-  isOnly
-}) => {
-  const marginLeft = isFirst || isOnly ? 0 : -1;
-  return rtl({
-    marginLeft
-  })();
-};
-export const UnitControl = /*#__PURE__*/_styled(BaseUnitControl, process.env.NODE_ENV === "production" ? {
+export const FlexedRangeControl = /*#__PURE__*/_styled(RangeControl, process.env.NODE_ENV === "production" ? {
   target: "e1jovhle0"
 } : {
   target: "e1jovhle0",
-  label: "UnitControl"
-})("max-width:60px;", unitControlBorderRadiusStyles, ";", unitControlMarginStyles, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRW9EIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IEZsZXggfSBmcm9tICcuLi8uLi9mbGV4JztcbmltcG9ydCBCYXNlVW5pdENvbnRyb2wgZnJvbSAnLi4vLi4vdW5pdC1jb250cm9sJztcbmltcG9ydCB7IHJ0bCB9IGZyb20gJy4uLy4uL3V0aWxzJztcbmltcG9ydCB0eXBlIHsgQm94VW5pdENvbnRyb2xQcm9wcyB9IGZyb20gJy4uL3R5cGVzJztcblxuZXhwb3J0IGNvbnN0IFJvb3QgPSBzdHlsZWQuZGl2YFxuXHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRtYXgtd2lkdGg6IDIzNXB4O1xuXHRwYWRkaW5nLWJvdHRvbTogMTJweDtcblx0d2lkdGg6IDEwMCU7XG5gO1xuXG5leHBvcnQgY29uc3QgSGVhZGVyID0gc3R5bGVkKCBGbGV4IClgXG5cdG1hcmdpbi1ib3R0b206IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBIZWFkZXJDb250cm9sV3JhcHBlciA9IHN0eWxlZCggRmxleCApYFxuXHRtaW4taGVpZ2h0OiAzMHB4O1xuXHRnYXA6IDA7XG5gO1xuXG5leHBvcnQgY29uc3QgVW5pdENvbnRyb2xXcmFwcGVyID0gc3R5bGVkLmRpdmBcblx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0bWF4LXdpZHRoOiA4MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IExheW91dENvbnRhaW5lciA9IHN0eWxlZCggRmxleCApYFxuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0cGFkZGluZy10b3A6IDhweDtcbmA7XG5cbmV4cG9ydCBjb25zdCBMYXlvdXQgPSBzdHlsZWQoIEZsZXggKWBcblx0cG9zaXRpb246IHJlbGF0aXZlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdHdpZHRoOiAxMDAlO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGZsZXgtc3RhcnQ7XG5gO1xuXG5jb25zdCB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc0xhc3QsXG5cdGlzT25seSxcbn06IFBpY2s8IEJveFVuaXRDb250cm9sUHJvcHMsICdpc0ZpcnN0JyB8ICdpc0xhc3QnIHwgJ2lzT25seScgPiApID0+IHtcblx0aWYgKCBpc0ZpcnN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wUmlnaHRSYWRpdXM6IDAsIGJvcmRlckJvdHRvbVJpZ2h0UmFkaXVzOiAwIH0gKSgpO1xuXHR9XG5cdGlmICggaXNMYXN0ICkge1xuXHRcdHJldHVybiBydGwoIHsgYm9yZGVyVG9wTGVmdFJhZGl1czogMCwgYm9yZGVyQm90dG9tTGVmdFJhZGl1czogMCB9ICkoKTtcblx0fVxuXHRpZiAoIGlzT25seSApIHtcblx0XHRyZXR1cm4gY3NzKCB7IGJvcmRlclJhZGl1czogMiB9ICk7XG5cdH1cblxuXHRyZXR1cm4gY3NzKCB7XG5cdFx0Ym9yZGVyUmFkaXVzOiAwLFxuXHR9ICk7XG59O1xuXG5jb25zdCB1bml0Q29udHJvbE1hcmdpblN0eWxlcyA9ICgge1xuXHRpc0ZpcnN0LFxuXHRpc09ubHksXG59OiBQaWNrPCBCb3hVbml0Q29udHJvbFByb3BzLCAnaXNGaXJzdCcgfCAnaXNPbmx5JyA+ICkgPT4ge1xuXHRjb25zdCBtYXJnaW5MZWZ0ID0gaXNGaXJzdCB8fCBpc09ubHkgPyAwIDogLTE7XG5cblx0cmV0dXJuIHJ0bCggeyBtYXJnaW5MZWZ0IH0gKSgpO1xufTtcblxuZXhwb3J0IGNvbnN0IFVuaXRDb250cm9sID0gc3R5bGVkKCBCYXNlVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA2MHB4O1xuXHQkeyB1bml0Q29udHJvbEJvcmRlclJhZGl1c1N0eWxlcyB9O1xuXHQkeyB1bml0Q29udHJvbE1hcmdpblN0eWxlcyB9O1xuYDtcbiJdfQ== */"));
+  label: "FlexedRangeControl"
+})("width:100%;margin-inline-end:", space(2), ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvQ3dEIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvYm94LWNvbnRyb2wvc3R5bGVzL2JveC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCBCb3hDb250cm9sSWNvbiBmcm9tICcuLi9pY29uJztcbmltcG9ydCBCdXR0b24gZnJvbSAnLi4vLi4vYnV0dG9uJztcbmltcG9ydCB7IEhTdGFjayB9IGZyb20gJy4uLy4uL2gtc3RhY2snO1xuaW1wb3J0IFJhbmdlQ29udHJvbCBmcm9tICcuLi8uLi9yYW5nZS1jb250cm9sJztcbmltcG9ydCBVbml0Q29udHJvbCBmcm9tICcuLi8uLi91bml0LWNvbnRyb2wnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91dGlscy9zcGFjZSc7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRVbml0Q29udHJvbCA9IHN0eWxlZCggVW5pdENvbnRyb2wgKWBcblx0bWF4LXdpZHRoOiA5MHB4O1xuYDtcblxuZXhwb3J0IGNvbnN0IElucHV0V3JhcHBlciA9IHN0eWxlZCggSFN0YWNrIClgXG5cdGdyaWQtY29sdW1uOiAxIC8gc3BhbiAzO1xuYDtcblxuZXhwb3J0IGNvbnN0IFJlc2V0QnV0dG9uID0gc3R5bGVkKCBCdXR0b24gKWBcblx0Z3JpZC1hcmVhOiAxIC8gMjtcblx0anVzdGlmeS1zZWxmOiBlbmQ7XG5gO1xuXG5leHBvcnQgY29uc3QgTGlua2VkQnV0dG9uV3JhcHBlciA9IHN0eWxlZC5kaXZgXG5cdGdyaWQtYXJlYTogMSAvIDM7XG5cdGp1c3RpZnktc2VsZjogZW5kO1xuYDtcblxuZXhwb3J0IGNvbnN0IEZsZXhlZEJveENvbnRyb2xJY29uID0gc3R5bGVkKCBCb3hDb250cm9sSWNvbiApYFxuXHRmbGV4OiAwIDAgYXV0bztcbmA7XG5cbmV4cG9ydCBjb25zdCBGbGV4ZWRSYW5nZUNvbnRyb2wgPSBzdHlsZWQoIFJhbmdlQ29udHJvbCApYFxuXHR3aWR0aDogMTAwJTtcblx0bWFyZ2luLWlubGluZS1lbmQ6ICR7IHNwYWNlKCAyICkgfTtcbmA7XG4iXX0= */"));
 //# sourceMappingURL=box-control-styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["css","Flex","BaseUnitControl","rtl","Root","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","Header","HeaderControlWrapper","UnitControlWrapper","LayoutContainer","Layout","_ref","_ref2","unitControlBorderRadiusStyles","isFirst","isLast","isOnly","borderTopRightRadius","borderBottomRightRadius","borderTopLeftRadius","borderBottomLeftRadius","unitControlMarginStyles","marginLeft","UnitControl"],"sources":["@wordpress/components/src/box-control/styles/box-control-styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { Flex } from '../../flex';\nimport BaseUnitControl from '../../unit-control';\nimport { rtl } from '../../utils';\nimport type { BoxUnitControlProps } from '../types';\n\nexport const Root = styled.div`\n\tbox-sizing: border-box;\n\tmax-width: 235px;\n\tpadding-bottom: 12px;\n\twidth: 100%;\n`;\n\nexport const Header = styled( Flex )`\n\tmargin-bottom: 8px;\n`;\n\nexport const HeaderControlWrapper = styled( Flex )`\n\tmin-height: 30px;\n\tgap: 0;\n`;\n\nexport const UnitControlWrapper = styled.div`\n\tbox-sizing: border-box;\n\tmax-width: 80px;\n`;\n\nexport const LayoutContainer = styled( Flex )`\n\tjustify-content: center;\n\tpadding-top: 8px;\n`;\n\nexport const Layout = styled( Flex )`\n\tposition: relative;\n\theight: 100%;\n\twidth: 100%;\n\tjustify-content: flex-start;\n`;\n\nconst unitControlBorderRadiusStyles = ( {\n\tisFirst,\n\tisLast,\n\tisOnly,\n}: Pick< BoxUnitControlProps, 'isFirst' | 'isLast' | 'isOnly' > ) => {\n\tif ( isFirst ) {\n\t\treturn rtl( { borderTopRightRadius: 0, borderBottomRightRadius: 0 } )();\n\t}\n\tif ( isLast ) {\n\t\treturn rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )();\n\t}\n\tif ( isOnly ) {\n\t\treturn css( { borderRadius: 2 } );\n\t}\n\n\treturn css( {\n\t\tborderRadius: 0,\n\t} );\n};\n\nconst unitControlMarginStyles = ( {\n\tisFirst,\n\tisOnly,\n}: Pick< BoxUnitControlProps, 'isFirst' | 'isOnly' > ) => {\n\tconst marginLeft = isFirst || isOnly ? 0 : -1;\n\n\treturn rtl( { marginLeft } )();\n};\n\nexport const UnitControl = styled( BaseUnitControl )`\n\tmax-width: 60px;\n\t${ unitControlBorderRadiusStyles };\n\t${ unitControlMarginStyles };\n`;\n"],"mappings":"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"}
+{"version":3,"names":["BoxControlIcon","Button","HStack","RangeControl","UnitControl","space","StyledUnitControl","_styled","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","InputWrapper","ResetButton","LinkedButtonWrapper","FlexedBoxControlIcon","FlexedRangeControl"],"sources":["@wordpress/components/src/box-control/styles/box-control-styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport BoxControlIcon from '../icon';\nimport Button from '../../button';\nimport { HStack } from '../../h-stack';\nimport RangeControl from '../../range-control';\nimport UnitControl from '../../unit-control';\nimport { space } from '../../utils/space';\n\nexport const StyledUnitControl = styled( UnitControl )`\n\tmax-width: 90px;\n`;\n\nexport const InputWrapper = styled( HStack )`\n\tgrid-column: 1 / span 3;\n`;\n\nexport const ResetButton = styled( Button )`\n\tgrid-area: 1 / 2;\n\tjustify-self: end;\n`;\n\nexport const LinkedButtonWrapper = styled.div`\n\tgrid-area: 1 / 3;\n\tjustify-self: end;\n`;\n\nexport const FlexedBoxControlIcon = styled( BoxControlIcon )`\n\tflex: 0 0 auto;\n`;\n\nexport const FlexedRangeControl = styled( RangeControl )`\n\twidth: 100%;\n\tmargin-inline-end: ${ space( 2 ) };\n`;\n"],"mappings":";;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA,OAAOA,cAAc,MAAM,SAAS;AACpC,OAAOC,MAAM,MAAM,cAAc;AACjC,SAASC,MAAM,QAAQ,eAAe;AACtC,OAAOC,YAAY,MAAM,qBAAqB;AAC9C,OAAOC,WAAW,MAAM,oBAAoB;AAC5C,SAASC,KAAK,QAAQ,mBAAmB;AAEzC,OAAO,MAAMC,iBAAiB,GAAG,aAAAC,OAAA,CAAQH,WAAW,EAAAI,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAErD;AAED,OAAO,MAAMC,YAAY,GAAG,aAAAX,OAAA,CAAQL,MAAM,EAAAM,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAE3C;AAED,OAAO,MAAME,WAAW,GAAG,aAAAZ,OAAA,CAAQN,MAAM,EAAAO,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAG1C;AAED,OAAO,MAAMG,mBAAmB,GAAAb,OAAA,QAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,GAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAG/B;AAED,OAAO,MAAMI,oBAAoB,GAAG,aAAAd,OAAA,CAAQP,cAAc,EAAAQ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAC;AAAA,EAE3D;AAED,OAAO,MAAMK,kBAAkB,GAAG,aAAAf,OAAA,CAAQJ,YAAY,EAAAK,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,CAAC,CAAC,kCAEjCP,KAAK,CAAE,CAAE,CAAC,SAAAG,OAAA,CAAAC,GAAA,CAAAC,QAAA,omDAChC"}

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { useHover } from '@use-gesture/react';\n\n/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'onMouseOver' | 'onMouseOut' | 'units'\n>;\n\nexport type BoxControlProps = Pick<\n\tUnitControlProps,\n\t'onMouseOver' | 'onMouseOut' | 'units'\n> & {\n\t/**\n\t * If this property is true, a button to reset the box control is rendered.\n\t *\n\t * @default true\n\t */\n\tallowReset?: boolean;\n\t/**\n\t * The id to use as a base for the unique HTML id attribute of the control.\n\t */\n\tid?: string;\n\t/**\n\t * Props for the internal `UnitControl` components.\n\t *\n\t * @default `{ min: 0 }`\n\t */\n\tinputProps?: UnitControlPassthroughProps;\n\t/**\n\t * Heading label for the control.\n\t *\n\t * @default `__( 'Box Control' )`\n\t */\n\tlabel?: string;\n\t/**\n\t * A callback function when an input value changes.\n\t */\n\tonChange: ( next: BoxControlValue ) => void;\n\t/**\n\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t *\n\t * @default `{ top: undefined, right: undefined, bottom: undefined, left: undefined }`\n\t */\n\tresetValues?: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides?: readonly ( keyof BoxControlValue | 'horizontal' | 'vertical' )[];\n\t/**\n\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t * can be used instead of updating individual sides.\n\t *\n\t * @default false\n\t */\n\tsplitOnAxis?: boolean;\n\t/**\n\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t */\n\tvalues?: BoxControlValue;\n};\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tsides: BoxControlProps[ 'sides' ];\n\tvalues: BoxControlValue;\n};\n\nexport type BoxUnitControlProps = UnitControlPassthroughProps &\n\tPick< UnitControlProps, 'onChange' | 'onFocus' > & {\n\t\tisFirst?: boolean;\n\t\tisLast?: boolean;\n\t\tisOnly?: boolean;\n\t\tlabel?: string;\n\t\tonHoverOff?: (\n\t\t\tevent: ReturnType< typeof useHover >[ 'event' ],\n\t\t\tstate: Omit< ReturnType< typeof useHover >, 'event' >\n\t\t) => void;\n\t\tonHoverOn?: (\n\t\t\tevent: ReturnType< typeof useHover >[ 'event' ],\n\t\t\tstate: Omit< ReturnType< typeof useHover >, 'event' >\n\t\t) => void;\n\t};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/box-control/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { UnitControlProps } from '../unit-control/types';\nimport type { LABELS } from './utils';\n\nexport type BoxControlValue = {\n\ttop?: string;\n\tright?: string;\n\tbottom?: string;\n\tleft?: string;\n};\n\nexport type CustomValueUnits = {\n\t[ key: string ]: { max: number; step: number };\n};\n\ntype UnitControlPassthroughProps = Omit<\n\tUnitControlProps,\n\t'label' | 'onChange' | 'onFocus' | 'onMouseOver' | 'onMouseOut' | 'units'\n>;\n\nexport type BoxControlProps = Pick<\n\tUnitControlProps,\n\t'onMouseOver' | 'onMouseOut' | 'units'\n> & {\n\t/**\n\t * If this property is true, a button to reset the box control is rendered.\n\t *\n\t * @default true\n\t */\n\tallowReset?: boolean;\n\t/**\n\t * The id to use as a base for the unique HTML id attribute of the control.\n\t */\n\tid?: string;\n\t/**\n\t * Props for the internal `UnitControl` components.\n\t *\n\t * @default `{ min: 0 }`\n\t */\n\tinputProps?: UnitControlPassthroughProps;\n\t/**\n\t * Heading label for the control.\n\t *\n\t * @default `__( 'Box Control' )`\n\t */\n\tlabel?: string;\n\t/**\n\t * A callback function when an input value changes.\n\t */\n\tonChange: ( next: BoxControlValue ) => void;\n\t/**\n\t * The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.\n\t *\n\t * @default `{ top: undefined, right: undefined, bottom: undefined, left: undefined }`\n\t */\n\tresetValues?: BoxControlValue;\n\t/**\n\t * Collection of sides to allow control of. If omitted or empty, all sides will be available.\n\t */\n\tsides?: readonly ( keyof BoxControlValue | 'horizontal' | 'vertical' )[];\n\t/**\n\t * If this property is true, when the box control is unlinked, vertical and horizontal controls\n\t * can be used instead of updating individual sides.\n\t *\n\t * @default false\n\t */\n\tsplitOnAxis?: boolean;\n\t/**\n\t * The current values of the control, expressed as an object of `top`, `right`, `bottom`, and `left` values.\n\t */\n\tvalues?: BoxControlValue;\n\t/**\n\t * Start opting into the larger default height that will become the default size in a future version.\n\t *\n\t * @default false\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type BoxControlInputControlProps = UnitControlPassthroughProps & {\n\tonChange?: ( nextValues: BoxControlValue ) => void;\n\tonFocus?: (\n\t\t_event: React.FocusEvent< HTMLInputElement >,\n\t\t{ side }: { side: keyof typeof LABELS }\n\t) => void;\n\tonHoverOff?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tonHoverOn?: (\n\t\tsides: Partial< Record< keyof BoxControlValue, boolean > >\n\t) => void;\n\tselectedUnits: BoxControlValue;\n\tsetSelectedUnits: React.Dispatch< React.SetStateAction< BoxControlValue > >;\n\tsides: BoxControlProps[ 'sides' ];\n\tvalues: BoxControlValue;\n};\n\nexport type BoxControlIconProps = {\n\t/**\n\t * @default 24\n\t */\n\tsize?: number;\n\t/**\n\t * @default 'all'\n\t */\n\tside?: keyof typeof LABELS;\n\tsides?: BoxControlProps[ 'sides' ];\n};\n"],"mappings":""}