@wordpress/components 25.0.0 → 25.1.1

package/build/unit-control/index.js

@@ -21,16 +21,12 @@ Object.defineProperty(exports, "useCustomUnits", {
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
 
 var _i18n = require("@wordpress/i18n");
 
-var inputControlActionTypes = _interopRequireWildcard(require("../input-control/reducer/actions"));
-
 var _unitControlStyles = require("./styles/unit-control-styles");
 
 var _unitSelectControl = _interopRequireDefault(require("./unit-select-control"));
@@ -39,10 +35,6 @@ var _utils = require("./utils");
 
 var _hooks = require("../utils/hooks");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * External dependencies
  */
@@ -52,7 +44,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function UnforwardedUnitControl(unitControlProps, forwardedRef) {
   const {
-    __unstableStateReducer: stateReducerProp,
+    __unstableStateReducer,
     autoComplete = 'off',
     // @ts-expect-error Ensure that children is omitted from restProps
     children,
@@ -69,7 +61,6 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     unit: unitProp,
     units: unitsProp = _utils.CSS_UNITS,
     value: valueProp,
-    onBlur: onBlurProp,
     onFocus: onFocusProp,
     ...props
   } = unitControlProps;
@@ -86,7 +77,19 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
 
 
   const nonNullValueProp = valueProp !== null && valueProp !== void 0 ? valueProp : undefined;
-  const units = (0, _element.useMemo)(() => (0, _utils.getUnitsWithCurrentUnit)(nonNullValueProp, unitProp, unitsProp), [nonNullValueProp, unitProp, unitsProp]);
+  const [units, reFirstCharacterOfUnits] = (0, _element.useMemo)(() => {
+    const list = (0, _utils.getUnitsWithCurrentUnit)(nonNullValueProp, unitProp, unitsProp);
+    const [{
+      value: firstUnitValue = ''
+    } = {}, ...rest] = list;
+    const firstCharacters = rest.reduce((carry, {
+      value
+    }) => {
+      const first = value?.substring(0, 1) || '';
+      return carry.includes(first) ? carry : `${carry}|${first}`;
+    }, firstUnitValue.substring(0, 1));
+    return [list, new RegExp(`^(?:${firstCharacters})$`, 'i')];
+  }, [nonNullValueProp, unitProp, unitsProp]);
   const [parsedQuantity, parsedUnit] = (0, _utils.getParsedQuantityAndUnit)(nonNullValueProp, unitProp, units);
   const [unit, setUnit] = (0, _hooks.useControlledState)(units.length === 1 ? units[0].value : unitProp, {
     initial: parsedUnit,
@@ -96,16 +99,14 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     if (parsedUnit !== undefined) {
       setUnit(parsedUnit);
     }
-  }, [parsedUnit, setUnit]); // Stores parsed value for hand-off in state reducer.
-
-  const refParsedQuantity = (0, _element.useRef)(undefined);
+  }, [parsedUnit, setUnit]);
   const classes = (0, _classnames.default)('components-unit-control', // This class is added for legacy purposes to maintain it on the outer
   // wrapper. See: https://github.com/WordPress/gutenberg/pull/45139
   'components-unit-control-wrapper', className);
 
   const handleOnQuantityChange = (nextQuantityValue, changeProps) => {
     if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) {
-      onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp('', changeProps);
+      onChangeProp?.('', changeProps);
       return;
     }
     /*
@@ -115,7 +116,7 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
 
 
     const onChangeValue = (0, _utils.getValidParsedQuantityAndUnit)(nextQuantityValue, units, parsedQuantity, unit).join('');
-    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(onChangeValue, changeProps);
+    onChangeProp?.(onChangeValue, changeProps);
   };
 
   const handleOnUnitChange = (nextUnitValue, changeProps) => {
@@ -124,92 +125,30 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     } = changeProps;
     let nextValue = `${parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : ''}${nextUnitValue}`;
 
-    if (isResetValueOnUnitChange && (data === null || data === void 0 ? void 0 : data.default) !== undefined) {
+    if (isResetValueOnUnitChange && data?.default !== undefined) {
       nextValue = `${data.default}${nextUnitValue}`;
     }
 
-    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(nextValue, changeProps);
-    onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(nextUnitValue, changeProps);
+    onChangeProp?.(nextValue, changeProps);
+    onUnitChange?.(nextUnitValue, changeProps);
     setUnit(nextUnitValue);
   };
 
-  const mayUpdateUnit = event => {
-    if (!isNaN(Number(event.currentTarget.value))) {
-      refParsedQuantity.current = undefined;
-      return;
-    }
+  let handleOnKeyDown;
 
-    const [validParsedQuantity, validParsedUnit] = (0, _utils.getValidParsedQuantityAndUnit)(event.currentTarget.value, units, parsedQuantity, unit);
-    refParsedQuantity.current = validParsedQuantity;
+  if (!disableUnits && isUnitSelectTabbable && units.length) {
+    handleOnKeyDown = event => {
+      props.onKeyDown?.(event); // Unless the meta key was pressed (to avoid interfering with
+      // shortcuts, e.g. pastes), moves focus to the unit select if a key
+      // matches the first character of a unit.
 
-    if (isPressEnterToChange && validParsedUnit !== unit) {
-      const data = Array.isArray(units) ? units.find(option => option.value === validParsedUnit) : undefined;
-      const changeProps = {
-        event,
-        data
-      }; // The `onChange` callback already gets called, no need to call it explicitly.
-
-      onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(validParsedUnit, changeProps);
-      setUnit(validParsedUnit);
-    }
-  };
-
-  const handleOnBlur = event => {
-    mayUpdateUnit(event);
-    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event);
-  };
-
-  const handleOnKeyDown = event => {
-    const {
-      key
-    } = event;
-
-    if (key === 'Enter') {
-      mayUpdateUnit(event);
-    }
-  };
-  /**
-   * "Middleware" function that intercepts updates from InputControl.
-   * This allows us to tap into actions to transform the (next) state for
-   * InputControl.
-   *
-   * @param state  State from InputControl
-   * @param action Action triggering state change
-   * @return The updated state to apply to InputControl
-   */
-
-
-  const unitControlStateReducer = (state, action) => {
-    const nextState = { ...state
-    };
-    /*
-     * On commits (when pressing ENTER and on blur if
-     * isPressEnterToChange is true), if a parse has been performed
-     * then use that result to update the state.
-     */
-
-    if (action.type === inputControlActionTypes.COMMIT) {
-      if (refParsedQuantity.current !== undefined) {
-        var _refParsedQuantity$cu;
-
-        nextState.value = ((_refParsedQuantity$cu = refParsedQuantity.current) !== null && _refParsedQuantity$cu !== void 0 ? _refParsedQuantity$cu : '').toString();
-        refParsedQuantity.current = undefined;
-      }
-    }
-
-    return nextState;
-  };
-
-  let stateReducer = unitControlStateReducer;
-
-  if (stateReducerProp) {
-    stateReducer = (state, action) => {
-      const baseState = unitControlStateReducer(state, action);
-      return stateReducerProp(baseState, action);
+      if (!event.metaKey && reFirstCharacterOfUnits.test(event.key)) refInputSuffix.current?.focus();
     };
   }
 
+  const refInputSuffix = (0, _element.useRef)(null);
   const inputSuffix = !disableUnits ? (0, _element.createElement)(_unitSelectControl.default, {
+    ref: refInputSuffix,
     "aria-label": (0, _i18n.__)('Select unit'),
     disabled: disabled,
     isUnitSelectTabbable: isUnitSelectTabbable,
@@ -217,8 +156,8 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     size: size,
     unit: unit,
     units: units,
-    onBlur: onBlurProp,
-    onFocus: onFocusProp
+    onFocus: onFocusProp,
+    onBlur: unitControlProps.onBlur
   }) : null;
   let step = props.step;
   /*
@@ -230,29 +169,27 @@ function UnforwardedUnitControl(unitControlProps, forwardedRef) {
     var _activeUnit$step;
 
     const activeUnit = units.find(option => option.value === unit);
-    step = (_activeUnit$step = activeUnit === null || activeUnit === void 0 ? void 0 : activeUnit.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
+    step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
   }
 
-  return (0, _element.createElement)(_unitControlStyles.ValueInput, (0, _extends2.default)({
-    type: isPressEnterToChange ? 'text' : 'number'
-  }, props, {
+  return (0, _element.createElement)(_unitControlStyles.ValueInput, { ...props,
     autoComplete: autoComplete,
     className: classes,
     disabled: disabled,
     spinControls: "none",
     isPressEnterToChange: isPressEnterToChange,
     label: label,
-    onBlur: handleOnBlur,
     onKeyDown: handleOnKeyDown,
     onChange: handleOnQuantityChange,
     ref: forwardedRef,
     size: size,
     suffix: inputSuffix,
+    type: isPressEnterToChange ? 'text' : 'number',
     value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '',
     step: step,
-    __unstableStateReducer: stateReducer,
-    onFocus: onFocusProp
-  }));
+    onFocus: onFocusProp,
+    __unstableStateReducer: __unstableStateReducer
+  });
 }
 /**
  * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","stateReducerProp","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onBlur","onBlurProp","onFocus","onFocusProp","props","since","hint","version","nonNullValueProp","undefined","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","refParsedQuantity","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","mayUpdateUnit","event","isNaN","Number","currentTarget","current","validParsedQuantity","validParsedUnit","Array","isArray","find","option","handleOnBlur","handleOnKeyDown","key","unitControlStateReducer","state","action","nextState","type","inputControlActionTypes","COMMIT","toString","stateReducer","baseState","inputSuffix","step","activeUnit","UnitControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tKeyboardEvent,\n\tForwardedRef,\n\tSyntheticEvent,\n} from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport * as inputControlActionTypes from '../input-control/reducer/actions';\nimport { ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\nimport type { StateReducer } from '../input-control/reducer/state';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer: stateReducerProp,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonBlur: onBlurProp,\n\t\tonFocus: onFocusProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst units = useMemo(\n\t\t() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),\n\t\t[ nonNullValueProp, unitProp, unitsProp ]\n\t);\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\t// Stores parsed value for hand-off in state reducer.\n\tconst refParsedQuantity = useRef< number | undefined >( undefined );\n\n\tconst classes = classnames(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tconst mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {\n\t\tif ( ! isNaN( Number( event.currentTarget.value ) ) ) {\n\t\t\trefParsedQuantity.current = undefined;\n\t\t\treturn;\n\t\t}\n\t\tconst [ validParsedQuantity, validParsedUnit ] =\n\t\t\tgetValidParsedQuantityAndUnit(\n\t\t\t\tevent.currentTarget.value,\n\t\t\t\tunits,\n\t\t\t\tparsedQuantity,\n\t\t\t\tunit\n\t\t\t);\n\n\t\trefParsedQuantity.current = validParsedQuantity;\n\n\t\tif ( isPressEnterToChange && validParsedUnit !== unit ) {\n\t\t\tconst data = Array.isArray( units )\n\t\t\t\t? units.find( ( option ) => option.value === validParsedUnit )\n\t\t\t\t: undefined;\n\t\t\tconst changeProps = { event, data };\n\n\t\t\t// The `onChange` callback already gets called, no need to call it explicitly.\n\t\t\tonUnitChange?.( validParsedUnit, changeProps );\n\n\t\t\tsetUnit( validParsedUnit );\n\t\t}\n\t};\n\n\tconst handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {\n\t\tmayUpdateUnit( event );\n\t\tonBlurProp?.( event );\n\t};\n\n\tconst handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\tconst { key } = event;\n\t\tif ( key === 'Enter' ) {\n\t\t\tmayUpdateUnit( event );\n\t\t}\n\t};\n\n\t/**\n\t * \"Middleware\" function that intercepts updates from InputControl.\n\t * This allows us to tap into actions to transform the (next) state for\n\t * InputControl.\n\t *\n\t * @param state  State from InputControl\n\t * @param action Action triggering state change\n\t * @return The updated state to apply to InputControl\n\t */\n\tconst unitControlStateReducer: StateReducer = ( state, action ) => {\n\t\tconst nextState = { ...state };\n\n\t\t/*\n\t\t * On commits (when pressing ENTER and on blur if\n\t\t * isPressEnterToChange is true), if a parse has been performed\n\t\t * then use that result to update the state.\n\t\t */\n\t\tif ( action.type === inputControlActionTypes.COMMIT ) {\n\t\t\tif ( refParsedQuantity.current !== undefined ) {\n\t\t\t\tnextState.value = (\n\t\t\t\t\trefParsedQuantity.current ?? ''\n\t\t\t\t).toString();\n\t\t\t\trefParsedQuantity.current = undefined;\n\t\t\t}\n\t\t}\n\n\t\treturn nextState;\n\t};\n\n\tlet stateReducer: StateReducer = unitControlStateReducer;\n\tif ( stateReducerProp ) {\n\t\tstateReducer = ( state, action ) => {\n\t\t\tconst baseState = unitControlStateReducer( state, action );\n\t\t\treturn stateReducerProp( baseState, action );\n\t\t};\n\t}\n\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonBlur={ onBlurProp }\n\t\t\tonFocus={ onFocusProp }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<ValueInput\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonBlur={ handleOnBlur }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\t__unstableStateReducer={ stateReducer }\n\t\t\tonFocus={ onFocusProp }\n\t\t/>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '10px' );\n *\n *   return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/index.tsx"],"names":["UnforwardedUnitControl","unitControlProps","forwardedRef","__unstableStateReducer","autoComplete","children","className","disabled","disableUnits","isPressEnterToChange","isResetValueOnUnitChange","isUnitSelectTabbable","label","onChange","onChangeProp","onUnitChange","size","unit","unitProp","units","unitsProp","CSS_UNITS","value","valueProp","onFocus","onFocusProp","props","since","hint","version","nonNullValueProp","undefined","reFirstCharacterOfUnits","list","firstUnitValue","rest","firstCharacters","reduce","carry","first","substring","includes","RegExp","parsedQuantity","parsedUnit","setUnit","length","initial","fallback","classes","handleOnQuantityChange","nextQuantityValue","changeProps","onChangeValue","join","handleOnUnitChange","nextUnitValue","data","nextValue","default","handleOnKeyDown","event","onKeyDown","metaKey","test","key","refInputSuffix","current","focus","inputSuffix","onBlur","step","activeUnit","find","option","UnitControl"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport deprecated from '@wordpress/deprecated';\nimport { forwardRef, useMemo, useRef, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport { ValueInput } from './styles/unit-control-styles';\nimport UnitSelectControl from './unit-select-control';\nimport {\n\tCSS_UNITS,\n\tgetParsedQuantityAndUnit,\n\tgetUnitsWithCurrentUnit,\n\tgetValidParsedQuantityAndUnit,\n} from './utils';\nimport { useControlledState } from '../utils/hooks';\nimport type { UnitControlProps, UnitControlOnChangeCallback } from './types';\n\nfunction UnforwardedUnitControl(\n\tunitControlProps: WordPressComponentProps<\n\t\tUnitControlProps,\n\t\t'input',\n\t\tfalse\n\t>,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst {\n\t\t__unstableStateReducer,\n\t\tautoComplete = 'off',\n\t\t// @ts-expect-error Ensure that children is omitted from restProps\n\t\tchildren,\n\t\tclassName,\n\t\tdisabled = false,\n\t\tdisableUnits = false,\n\t\tisPressEnterToChange = false,\n\t\tisResetValueOnUnitChange = false,\n\t\tisUnitSelectTabbable = true,\n\t\tlabel,\n\t\tonChange: onChangeProp,\n\t\tonUnitChange,\n\t\tsize = 'default',\n\t\tunit: unitProp,\n\t\tunits: unitsProp = CSS_UNITS,\n\t\tvalue: valueProp,\n\t\tonFocus: onFocusProp,\n\t\t...props\n\t} = unitControlProps;\n\n\tif ( 'unit' in unitControlProps ) {\n\t\tdeprecated( 'UnitControl unit prop', {\n\t\t\tsince: '5.6',\n\t\t\thint: 'The unit should be provided within the `value` prop.',\n\t\t\tversion: '6.2',\n\t\t} );\n\t}\n\n\t// The `value` prop, in theory, should not be `null`, but the following line\n\t// ensures it fallback to `undefined` in case a consumer of `UnitControl`\n\t// still passes `null` as a `value`.\n\tconst nonNullValueProp = valueProp ?? undefined;\n\tconst [ units, reFirstCharacterOfUnits ] = useMemo( () => {\n\t\tconst list = getUnitsWithCurrentUnit(\n\t\t\tnonNullValueProp,\n\t\t\tunitProp,\n\t\t\tunitsProp\n\t\t);\n\t\tconst [ { value: firstUnitValue = '' } = {}, ...rest ] = list;\n\t\tconst firstCharacters = rest.reduce( ( carry, { value } ) => {\n\t\t\tconst first = value?.substring( 0, 1 ) || '';\n\t\t\treturn carry.includes( first ) ? carry : `${ carry }|${ first }`;\n\t\t}, firstUnitValue.substring( 0, 1 ) );\n\t\treturn [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];\n\t}, [ nonNullValueProp, unitProp, unitsProp ] );\n\tconst [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(\n\t\tnonNullValueProp,\n\t\tunitProp,\n\t\tunits\n\t);\n\n\tconst [ unit, setUnit ] = useControlledState< string | undefined >(\n\t\tunits.length === 1 ? units[ 0 ].value : unitProp,\n\t\t{\n\t\t\tinitial: parsedUnit,\n\t\t\tfallback: '',\n\t\t}\n\t);\n\n\tuseEffect( () => {\n\t\tif ( parsedUnit !== undefined ) {\n\t\t\tsetUnit( parsedUnit );\n\t\t}\n\t}, [ parsedUnit, setUnit ] );\n\n\tconst classes = classnames(\n\t\t'components-unit-control',\n\t\t// This class is added for legacy purposes to maintain it on the outer\n\t\t// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139\n\t\t'components-unit-control-wrapper',\n\t\tclassName\n\t);\n\n\tconst handleOnQuantityChange = (\n\t\tnextQuantityValue: number | string | undefined,\n\t\tchangeProps: {\n\t\t\tevent: SyntheticEvent;\n\t\t}\n\t) => {\n\t\tif (\n\t\t\tnextQuantityValue === '' ||\n\t\t\ttypeof nextQuantityValue === 'undefined' ||\n\t\t\tnextQuantityValue === null\n\t\t) {\n\t\t\tonChangeProp?.( '', changeProps );\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * Customizing the onChange callback.\n\t\t * This allows as to broadcast a combined value+unit to onChange.\n\t\t */\n\t\tconst onChangeValue = getValidParsedQuantityAndUnit(\n\t\t\tnextQuantityValue,\n\t\t\tunits,\n\t\t\tparsedQuantity,\n\t\t\tunit\n\t\t).join( '' );\n\n\t\tonChangeProp?.( onChangeValue, changeProps );\n\t};\n\n\tconst handleOnUnitChange: UnitControlOnChangeCallback = (\n\t\tnextUnitValue,\n\t\tchangeProps\n\t) => {\n\t\tconst { data } = changeProps;\n\n\t\tlet nextValue = `${ parsedQuantity ?? '' }${ nextUnitValue }`;\n\n\t\tif ( isResetValueOnUnitChange && data?.default !== undefined ) {\n\t\t\tnextValue = `${ data.default }${ nextUnitValue }`;\n\t\t}\n\n\t\tonChangeProp?.( nextValue, changeProps );\n\t\tonUnitChange?.( nextUnitValue, changeProps );\n\n\t\tsetUnit( nextUnitValue );\n\t};\n\n\tlet handleOnKeyDown;\n\tif ( ! disableUnits && isUnitSelectTabbable && units.length ) {\n\t\thandleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {\n\t\t\tprops.onKeyDown?.( event );\n\t\t\t// Unless the meta key was pressed (to avoid interfering with\n\t\t\t// shortcuts, e.g. pastes), moves focus to the unit select if a key\n\t\t\t// matches the first character of a unit.\n\t\t\tif ( ! event.metaKey && reFirstCharacterOfUnits.test( event.key ) )\n\t\t\t\trefInputSuffix.current?.focus();\n\t\t};\n\t}\n\n\tconst refInputSuffix = useRef< HTMLSelectElement >( null );\n\tconst inputSuffix = ! disableUnits ? (\n\t\t<UnitSelectControl\n\t\t\tref={ refInputSuffix }\n\t\t\taria-label={ __( 'Select unit' ) }\n\t\t\tdisabled={ disabled }\n\t\t\tisUnitSelectTabbable={ isUnitSelectTabbable }\n\t\t\tonChange={ handleOnUnitChange }\n\t\t\tsize={ size }\n\t\t\tunit={ unit }\n\t\t\tunits={ units }\n\t\t\tonFocus={ onFocusProp }\n\t\t\tonBlur={ unitControlProps.onBlur }\n\t\t/>\n\t) : null;\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\treturn (\n\t\t<ValueInput\n\t\t\t{ ...props }\n\t\t\tautoComplete={ autoComplete }\n\t\t\tclassName={ classes }\n\t\t\tdisabled={ disabled }\n\t\t\tspinControls=\"none\"\n\t\t\tisPressEnterToChange={ isPressEnterToChange }\n\t\t\tlabel={ label }\n\t\t\tonKeyDown={ handleOnKeyDown }\n\t\t\tonChange={ handleOnQuantityChange }\n\t\t\tref={ forwardedRef }\n\t\t\tsize={ size }\n\t\t\tsuffix={ inputSuffix }\n\t\t\ttype={ isPressEnterToChange ? 'text' : 'number' }\n\t\t\tvalue={ parsedQuantity ?? '' }\n\t\t\tstep={ step }\n\t\t\tonFocus={ onFocusProp }\n\t\t\t__unstableStateReducer={ __unstableStateReducer }\n\t\t/>\n\t);\n}\n\n/**\n * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`).\n *\n *\n * @example\n * ```jsx\n * import { __experimentalUnitControl as UnitControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n *   const [ value, setValue ] = useState( '10px' );\n *\n *   return <UnitControl onChange={ setValue } value={ value } />;\n * };\n * ```\n */\nexport const UnitControl = forwardRef( UnforwardedUnitControl );\n\nexport { parseQuantityAndUnitFromRawValue, useCustomUnits } from './utils';\nexport default UnitControl;\n"]}

package/build/unit-control/index.native.js

@@ -15,8 +15,6 @@ Object.defineProperty(exports, "useCustomUnits", {
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _reactNative = require("react-native");
 
 var _rangeCell = _interopRequireDefault(require("../mobile/bottom-sheet/range-cell"));
@@ -44,33 +42,32 @@ var _i18n = require("@wordpress/i18n");
 /**
  * WordPress dependencies
  */
-function UnitControl(_ref) {
-  let {
-    currentInput,
-    label,
-    value,
-    onChange,
-    onUnitChange,
-    initialPosition,
-    min,
-    max,
-    separatorType,
-    units = _utils.CSS_UNITS,
-    unit,
-    getStylesFromColorScheme,
-    ...props
-  } = _ref;
+function UnitControl({
+  currentInput,
+  label,
+  value,
+  onChange,
+  onUnitChange,
+  initialPosition,
+  min,
+  max,
+  separatorType,
+  units = _utils.CSS_UNITS,
+  unit,
+  getStylesFromColorScheme,
+  ...props
+}) {
   const pickerRef = (0, _element.useRef)();
   const anchorNodeRef = (0, _element.useRef)();
   const onPickerPresent = (0, _element.useCallback)(() => {
-    if (pickerRef !== null && pickerRef !== void 0 && pickerRef.current) {
+    if (pickerRef?.current) {
       pickerRef.current.presentPicker();
     } // Disable reason: this should be fixed by the native team.
     // It would be great if this could be done in the context of
     // https://github.com/WordPress/gutenberg/pull/39218
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [pickerRef === null || pickerRef === void 0 ? void 0 : pickerRef.current]);
+  }, [pickerRef?.current]);
   const currentInputValue = currentInput === null ? value : currentInput;
   const initialControlValue = isFinite(currentInputValue) ? currentInputValue : initialPosition;
   const unitButtonTextStyle = getStylesFromColorScheme(_style.default.unitButtonText, _style.default.unitButtonTextDark);
@@ -85,7 +82,7 @@ function UnitControl(_ref) {
       style: unitButtonTextStyle
     }, unit));
 
-    if ((0, _utils.hasUnits)(units) && (units === null || units === void 0 ? void 0 : units.length) > 1) {
+    if ((0, _utils.hasUnits)(units) && units?.length > 1) {
       return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
         onPress: onPickerPresent,
         accessibilityLabel: accessibilityLabel,
@@ -96,11 +93,11 @@ function UnitControl(_ref) {
 
     return unitButton;
   }, [onPickerPresent, accessibilityLabel, accessibilityHint, unitButtonTextStyle, unit, units]);
-  const getAnchor = (0, _element.useCallback)(() => anchorNodeRef !== null && anchorNodeRef !== void 0 && anchorNodeRef.current ? (0, _reactNative.findNodeHandle)(anchorNodeRef === null || anchorNodeRef === void 0 ? void 0 : anchorNodeRef.current) : undefined, // Disable reason: this should be fixed by the native team.
+  const getAnchor = (0, _element.useCallback)(() => anchorNodeRef?.current ? (0, _reactNative.findNodeHandle)(anchorNodeRef?.current) : undefined, // Disable reason: this should be fixed by the native team.
   // It would be great if this could be done in the context of
   // https://github.com/WordPress/gutenberg/pull/39218
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [anchorNodeRef === null || anchorNodeRef === void 0 ? void 0 : anchorNodeRef.current]);
+  [anchorNodeRef?.current]);
 
   const getDecimal = step => {
     // Return the decimal offset based on the step size.
@@ -122,7 +119,7 @@ function UnitControl(_ref) {
     return (0, _element.createElement)(_reactNative.View, {
       style: _style.default.unitMenu,
       ref: anchorNodeRef
-    }, renderUnitButton, (0, _utils.hasUnits)(units) && (units === null || units === void 0 ? void 0 : units.length) > 1 ? (0, _element.createElement)(_picker.default, {
+    }, renderUnitButton, (0, _utils.hasUnits)(units) && units?.length > 1 ? (0, _element.createElement)(_picker.default, {
       ref: pickerRef,
       options: units,
       onChange: onUnitChange,
@@ -141,11 +138,11 @@ function UnitControl(_ref) {
     var _activeUnit$step;
 
     const activeUnit = units.find(option => option.value === unit);
-    step = (_activeUnit$step = activeUnit === null || activeUnit === void 0 ? void 0 : activeUnit.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
+    step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1;
   }
 
   const decimalNum = getDecimal(step);
-  return (0, _element.createElement)(_element.Fragment, null, unit !== '%' ? (0, _element.createElement)(_stepperCell.default, (0, _extends2.default)({
+  return (0, _element.createElement)(_element.Fragment, null, unit !== '%' ? (0, _element.createElement)(_stepperCell.default, {
     label: label,
     max: max,
     min: min,
@@ -157,8 +154,9 @@ function UnitControl(_ref) {
     shouldDisplayTextInput: true,
     decimalNum: decimalNum,
     openUnitPicker: onPickerPresent,
-    unitLabel: (0, _utils.getAccessibleLabelForUnit)(unit)
-  }, props), renderUnitPicker()) : (0, _element.createElement)(_rangeCell.default, (0, _extends2.default)({
+    unitLabel: (0, _utils.getAccessibleLabelForUnit)(unit),
+    ...props
+  }, renderUnitPicker()) : (0, _element.createElement)(_rangeCell.default, {
     label: label,
     onChange: onChange,
     minimumValue: min,
@@ -170,8 +168,9 @@ function UnitControl(_ref) {
     separatorType: separatorType,
     decimalNum: decimalNum,
     openUnitPicker: onPickerPresent,
-    unitLabel: (0, _utils.getAccessibleLabelForUnit)(unit)
-  }, props), renderUnitPicker()));
+    unitLabel: (0, _utils.getAccessibleLabelForUnit)(unit),
+    ...props
+  }, renderUnitPicker()));
 }
 
 var _default = (0, _element.memo)((0, _compose.withPreferredColorScheme)(UnitControl));

package/build/unit-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/index.native.js"],"names":["UnitControl","currentInput","label","value","onChange","onUnitChange","initialPosition","min","max","separatorType","units","CSS_UNITS","unit","getStylesFromColorScheme","props","pickerRef","anchorNodeRef","onPickerPresent","current","presentPicker","currentInputValue","initialControlValue","isFinite","unitButtonTextStyle","styles","unitButtonText","unitButtonTextDark","accessibilityLabel","accessibilityHint","Platform","OS","renderUnitButton","unitButton","length","getAnchor","undefined","getDecimal","step","stepToString","splitStep","toString","split","renderUnitPicker","unitMenu","activeUnit","find","option","decimalNum"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tText,\n\tView,\n\tTouchableWithoutFeedback,\n\tPlatform,\n\tfindNodeHandle,\n} from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\nimport Picker from '../mobile/picker';\nimport styles from './style.scss';\nimport { CSS_UNITS, hasUnits, getAccessibleLabelForUnit } from './utils';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useMemo, memo } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\nfunction UnitControl( {\n\tcurrentInput,\n\tlabel,\n\tvalue,\n\tonChange,\n\tonUnitChange,\n\tinitialPosition,\n\tmin,\n\tmax,\n\tseparatorType,\n\tunits = CSS_UNITS,\n\tunit,\n\tgetStylesFromColorScheme,\n\t...props\n} ) {\n\tconst pickerRef = useRef();\n\tconst anchorNodeRef = useRef();\n\n\tconst onPickerPresent = useCallback( () => {\n\t\tif ( pickerRef?.current ) {\n\t\t\tpickerRef.current.presentPicker();\n\t\t}\n\t\t// Disable reason: this should be fixed by the native team.\n\t\t// It would be great if this could be done in the context of\n\t\t// https://github.com/WordPress/gutenberg/pull/39218\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ pickerRef?.current ] );\n\n\tconst currentInputValue = currentInput === null ? value : currentInput;\n\tconst initialControlValue = isFinite( currentInputValue )\n\t\t? currentInputValue\n\t\t: initialPosition;\n\n\tconst unitButtonTextStyle = getStylesFromColorScheme(\n\t\tstyles.unitButtonText,\n\t\tstyles.unitButtonTextDark\n\t);\n\n\t/* translators: accessibility text. Inform about current unit value. %s: Current unit value. */\n\tconst accessibilityLabel = sprintf( __( 'Current unit is %s' ), unit );\n\n\tconst accessibilityHint =\n\t\tPlatform.OS === 'ios'\n\t\t\t? __( 'Double tap to open Action Sheet with available options' )\n\t\t\t: __( 'Double tap to open Bottom Sheet with available options' );\n\n\tconst renderUnitButton = useMemo( () => {\n\t\tconst unitButton = (\n\t\t\t<View style={ styles.unitButton }>\n\t\t\t\t<Text style={ unitButtonTextStyle }>{ unit }</Text>\n\t\t\t</View>\n\t\t);\n\n\t\tif ( hasUnits( units ) && units?.length > 1 ) {\n\t\t\treturn (\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ onPickerPresent }\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t>\n\t\t\t\t\t{ unitButton }\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t);\n\t\t}\n\n\t\treturn unitButton;\n\t}, [\n\t\tonPickerPresent,\n\t\taccessibilityLabel,\n\t\taccessibilityHint,\n\t\tunitButtonTextStyle,\n\t\tunit,\n\t\tunits,\n\t] );\n\n\tconst getAnchor = useCallback(\n\t\t() =>\n\t\t\tanchorNodeRef?.current\n\t\t\t\t? findNodeHandle( anchorNodeRef?.current )\n\t\t\t\t: undefined,\n\t\t// Disable reason: this should be fixed by the native team.\n\t\t// It would be great if this could be done in the context of\n\t\t// https://github.com/WordPress/gutenberg/pull/39218\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[ anchorNodeRef?.current ]\n\t);\n\n\tconst getDecimal = ( step ) => {\n\t\t// Return the decimal offset based on the step size.\n\t\t// if step size is 0.1 we expect the offset to be 1.\n\t\t// for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );\n\t\t// steps are defined in the CSS_UNITS and they vary from unit to unit.\n\t\tconst stepToString = step;\n\t\tconst splitStep = stepToString.toString().split( '.' );\n\t\treturn splitStep[ 1 ] ? splitStep[ 1 ].length : 0;\n\t};\n\n\tconst renderUnitPicker = useCallback( () => {\n\t\t// Keeping for legacy reasons, although `false` should not be a valid\n\t\t// value for the `units` prop anymore.\n\t\tif ( units === false ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.unitMenu } ref={ anchorNodeRef }>\n\t\t\t\t{ renderUnitButton }\n\t\t\t\t{ hasUnits( units ) && units?.length > 1 ? (\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tref={ pickerRef }\n\t\t\t\t\t\toptions={ units }\n\t\t\t\t\t\tonChange={ onUnitChange }\n\t\t\t\t\t\thideCancelButton\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tgetAnchor={ getAnchor }\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</View>\n\t\t);\n\t}, [ pickerRef, units, onUnitChange, getAnchor, renderUnitButton ] );\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\tconst decimalNum = getDecimal( step );\n\n\treturn (\n\t\t<>\n\t\t\t{ unit !== '%' ? (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tshouldDisplayTextInput\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</StepperCell>\n\t\t\t) : (\n\t\t\t\t<RangeCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tminimumValue={ min }\n\t\t\t\t\tmaximumValue={ max }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tunit={ unit }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</RangeCell>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport { useCustomUnits } from './utils';\nexport default memo( withPreferredColorScheme( UnitControl ) );\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/index.native.js"],"names":["UnitControl","currentInput","label","value","onChange","onUnitChange","initialPosition","min","max","separatorType","units","CSS_UNITS","unit","getStylesFromColorScheme","props","pickerRef","anchorNodeRef","onPickerPresent","current","presentPicker","currentInputValue","initialControlValue","isFinite","unitButtonTextStyle","styles","unitButtonText","unitButtonTextDark","accessibilityLabel","accessibilityHint","Platform","OS","renderUnitButton","unitButton","length","getAnchor","undefined","getDecimal","step","stepToString","splitStep","toString","split","renderUnitPicker","unitMenu","activeUnit","find","option","decimalNum"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tText,\n\tView,\n\tTouchableWithoutFeedback,\n\tPlatform,\n\tfindNodeHandle,\n} from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport RangeCell from '../mobile/bottom-sheet/range-cell';\nimport StepperCell from '../mobile/bottom-sheet/stepper-cell';\nimport Picker from '../mobile/picker';\nimport styles from './style.scss';\nimport { CSS_UNITS, hasUnits, getAccessibleLabelForUnit } from './utils';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useMemo, memo } from '@wordpress/element';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\n\nfunction UnitControl( {\n\tcurrentInput,\n\tlabel,\n\tvalue,\n\tonChange,\n\tonUnitChange,\n\tinitialPosition,\n\tmin,\n\tmax,\n\tseparatorType,\n\tunits = CSS_UNITS,\n\tunit,\n\tgetStylesFromColorScheme,\n\t...props\n} ) {\n\tconst pickerRef = useRef();\n\tconst anchorNodeRef = useRef();\n\n\tconst onPickerPresent = useCallback( () => {\n\t\tif ( pickerRef?.current ) {\n\t\t\tpickerRef.current.presentPicker();\n\t\t}\n\t\t// Disable reason: this should be fixed by the native team.\n\t\t// It would be great if this could be done in the context of\n\t\t// https://github.com/WordPress/gutenberg/pull/39218\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ pickerRef?.current ] );\n\n\tconst currentInputValue = currentInput === null ? value : currentInput;\n\tconst initialControlValue = isFinite( currentInputValue )\n\t\t? currentInputValue\n\t\t: initialPosition;\n\n\tconst unitButtonTextStyle = getStylesFromColorScheme(\n\t\tstyles.unitButtonText,\n\t\tstyles.unitButtonTextDark\n\t);\n\n\t/* translators: accessibility text. Inform about current unit value. %s: Current unit value. */\n\tconst accessibilityLabel = sprintf( __( 'Current unit is %s' ), unit );\n\n\tconst accessibilityHint =\n\t\tPlatform.OS === 'ios'\n\t\t\t? __( 'Double tap to open Action Sheet with available options' )\n\t\t\t: __( 'Double tap to open Bottom Sheet with available options' );\n\n\tconst renderUnitButton = useMemo( () => {\n\t\tconst unitButton = (\n\t\t\t<View style={ styles.unitButton }>\n\t\t\t\t<Text style={ unitButtonTextStyle }>{ unit }</Text>\n\t\t\t</View>\n\t\t);\n\n\t\tif ( hasUnits( units ) && units?.length > 1 ) {\n\t\t\treturn (\n\t\t\t\t<TouchableWithoutFeedback\n\t\t\t\t\tonPress={ onPickerPresent }\n\t\t\t\t\taccessibilityLabel={ accessibilityLabel }\n\t\t\t\t\taccessibilityRole=\"button\"\n\t\t\t\t\taccessibilityHint={ accessibilityHint }\n\t\t\t\t>\n\t\t\t\t\t{ unitButton }\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t);\n\t\t}\n\n\t\treturn unitButton;\n\t}, [\n\t\tonPickerPresent,\n\t\taccessibilityLabel,\n\t\taccessibilityHint,\n\t\tunitButtonTextStyle,\n\t\tunit,\n\t\tunits,\n\t] );\n\n\tconst getAnchor = useCallback(\n\t\t() =>\n\t\t\tanchorNodeRef?.current\n\t\t\t\t? findNodeHandle( anchorNodeRef?.current )\n\t\t\t\t: undefined,\n\t\t// Disable reason: this should be fixed by the native team.\n\t\t// It would be great if this could be done in the context of\n\t\t// https://github.com/WordPress/gutenberg/pull/39218\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t\t[ anchorNodeRef?.current ]\n\t);\n\n\tconst getDecimal = ( step ) => {\n\t\t// Return the decimal offset based on the step size.\n\t\t// if step size is 0.1 we expect the offset to be 1.\n\t\t// for example 12 + 0.1 we would expect the see 12.1 (not 12.10 or 12 );\n\t\t// steps are defined in the CSS_UNITS and they vary from unit to unit.\n\t\tconst stepToString = step;\n\t\tconst splitStep = stepToString.toString().split( '.' );\n\t\treturn splitStep[ 1 ] ? splitStep[ 1 ].length : 0;\n\t};\n\n\tconst renderUnitPicker = useCallback( () => {\n\t\t// Keeping for legacy reasons, although `false` should not be a valid\n\t\t// value for the `units` prop anymore.\n\t\tif ( units === false ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<View style={ styles.unitMenu } ref={ anchorNodeRef }>\n\t\t\t\t{ renderUnitButton }\n\t\t\t\t{ hasUnits( units ) && units?.length > 1 ? (\n\t\t\t\t\t<Picker\n\t\t\t\t\t\tref={ pickerRef }\n\t\t\t\t\t\toptions={ units }\n\t\t\t\t\t\tonChange={ onUnitChange }\n\t\t\t\t\t\thideCancelButton\n\t\t\t\t\t\tleftAlign\n\t\t\t\t\t\tgetAnchor={ getAnchor }\n\t\t\t\t\t/>\n\t\t\t\t) : null }\n\t\t\t</View>\n\t\t);\n\t}, [ pickerRef, units, onUnitChange, getAnchor, renderUnitButton ] );\n\n\tlet step = props.step;\n\n\t/*\n\t * If no step prop has been passed, lookup the active unit and\n\t * try to get step from `units`, or default to a value of `1`\n\t */\n\tif ( ! step && units ) {\n\t\tconst activeUnit = units.find( ( option ) => option.value === unit );\n\t\tstep = activeUnit?.step ?? 1;\n\t}\n\n\tconst decimalNum = getDecimal( step );\n\n\treturn (\n\t\t<>\n\t\t\t{ unit !== '%' ? (\n\t\t\t\t<StepperCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tmax={ max }\n\t\t\t\t\tmin={ min }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tshouldDisplayTextInput\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</StepperCell>\n\t\t\t) : (\n\t\t\t\t<RangeCell\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tminimumValue={ min }\n\t\t\t\t\tmaximumValue={ max }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tstep={ step }\n\t\t\t\t\tunit={ unit }\n\t\t\t\t\tdefaultValue={ initialControlValue }\n\t\t\t\t\tseparatorType={ separatorType }\n\t\t\t\t\tdecimalNum={ decimalNum }\n\t\t\t\t\topenUnitPicker={ onPickerPresent }\n\t\t\t\t\tunitLabel={ getAccessibleLabelForUnit( unit ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ renderUnitPicker() }\n\t\t\t\t</RangeCell>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport { useCustomUnits } from './utils';\nexport default memo( withPreferredColorScheme( UnitControl ) );\n"]}

package/build/unit-control/styles/unit-control-styles.js

@@ -36,10 +36,9 @@ const ValueInput = ( /*#__PURE__*/0, _base.default)(_numberControl.default, proc
 })("&&&{input{display:block;width:100%;}", _inputControlStyles.BackdropUI, "{transition:box-shadow 0.1s linear;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdW5pdC1jb250cm9sL3N0eWxlcy91bml0LWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCaUQiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91bml0LWNvbnRyb2wvc3R5bGVzL3VuaXQtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IE51bWJlckNvbnRyb2wgZnJvbSAnLi4vLi4vbnVtYmVyLWNvbnRyb2wnO1xuaW1wb3J0IHsgQmFja2Ryb3BVSSB9IGZyb20gJy4uLy4uL2lucHV0LWNvbnRyb2wvc3R5bGVzL2lucHV0LWNvbnRyb2wtc3R5bGVzJztcbmltcG9ydCB0eXBlIHsgU2VsZWN0U2l6ZSB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG4vLyBVc2luZyBgc2VsZWN0U2l6ZWAgaW5zdGVhZCBvZiBgc2l6ZWAgdG8gYXZvaWQgYSB0eXBlIGNvbmZsaWN0IHdpdGggdGhlXG4vLyBgc2l6ZWAgSFRNTCBhdHRyaWJ1dGUgb2YgdGhlIGBzZWxlY3RgIGVsZW1lbnQuXG50eXBlIFNlbGVjdFByb3BzID0ge1xuXHRzZWxlY3RTaXplOiBTZWxlY3RTaXplO1xufTtcblxuLy8gVE9ETzogUmVzb2x2ZSBuZWVkIHRvIHVzZSAmJiYgdG8gaW5jcmVhc2Ugc3BlY2lmaWNpdHlcbi8vIGh0dHBzOi8vZ2l0aHViLmNvbS9Xb3JkUHJlc3MvZ3V0ZW5iZXJnL2lzc3Vlcy8xODQ4M1xuXG5leHBvcnQgY29uc3QgVmFsdWVJbnB1dCA9IHN0eWxlZCggTnVtYmVyQ29udHJvbCApYFxuXHQmJiYge1xuXHRcdGlucHV0IHtcblx0XHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0fVxuXG5cdFx0JHsgQmFja2Ryb3BVSSB9IHtcblx0XHRcdHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4xcyBsaW5lYXI7XG5cdFx0fVxuXHR9XG5gO1xuXG5jb25zdCBiYXNlVW5pdExhYmVsU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6IGNzc2Bcblx0XHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0XHRwYWRkaW5nOiAycHggMXB4O1xuXHRcdFx0d2lkdGg6IDIwcHg7XG5cdFx0XHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDgwMCBdIH07XG5cdFx0XHRmb250LXNpemU6IDhweDtcblx0XHRcdGxpbmUtaGVpZ2h0OiAxO1xuXHRcdFx0bGV0dGVyLXNwYWNpbmc6IC0wLjVweDtcblx0XHRcdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdFx0XHR0ZXh0LWFsaWduLWxhc3Q6IGNlbnRlcjtcblx0XHRgLFxuXHRcdGxhcmdlOiBjc3NgXG5cdFx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdFx0bWluLXdpZHRoOiAyNHB4O1xuXHRcdFx0bWF4LXdpZHRoOiA0OHB4O1xuXHRcdFx0aGVpZ2h0OiAyNHB4O1xuXHRcdFx0bWFyZ2luLWlubGluZS1lbmQ6ICR7IHNwYWNlKCAyICkgfTtcblx0XHRcdHBhZGRpbmc6ICR7IHNwYWNlKCAxICkgfTtcblx0XHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0XHRcdGZvbnQtc2l6ZTogMTNweDtcblx0XHRcdGxpbmUtaGVpZ2h0OiAxO1xuXHRcdFx0dGV4dC1hbGlnbi1sYXN0OiBjZW50ZXI7XG5cdFx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHRcdFx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0XHRcdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuXHRcdGAsXG5cdH07XG5cblx0cmV0dXJuIHNlbGVjdFNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/IHNpemVzLmxhcmdlIDogc2l6ZXMuZGVmYXVsdDtcbn07XG5cbmV4cG9ydCBjb25zdCBVbml0TGFiZWwgPSBzdHlsZWQuZGl2PCBTZWxlY3RQcm9wcyA+YFxuXHQmJiYge1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG5cdFx0JHsgYmFzZVVuaXRMYWJlbFN0eWxlcyB9O1xuXG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHR9XG5gO1xuXG5jb25zdCB1bml0U2VsZWN0U2l6ZXMgPSAoIHsgc2VsZWN0U2l6ZSA9ICdkZWZhdWx0JyB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3Qgc2l6ZXMgPSB7XG5cdFx0ZGVmYXVsdDogY3NzYFxuXHRcdFx0aGVpZ2h0OiAxMDAlO1xuXHRcdFx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdFx0XHR0cmFuc2l0aW9uOiBib3gtc2hhZG93IDAuMXMgbGluZWFyLCBib3JkZXIgMC4xcyBsaW5lYXI7XG5cblx0XHRcdCR7IHJ0bCggeyBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLCBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiAwIH0gKSgpIH1cblxuXHRcdFx0Jjpub3QoOmRpc2FibGVkKTpob3ZlciB7XG5cdFx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdFx0fVxuXG5cdFx0XHQmOmZvY3VzIHtcblx0XHRcdFx0Ym9yZGVyOiAxcHggc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRcdGJveC1zaGFkb3c6IGluc2V0IDAgMCAwXG5cdFx0XHRcdFx0JHsgQ09ORklHLmJvcmRlcldpZHRoICsgJyAnICsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRcdG91dGxpbmUtb2Zmc2V0OiAwO1xuXHRcdFx0XHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdFx0XHRcdHotaW5kZXg6IDE7XG5cdFx0XHR9XG5cdFx0YCxcblx0XHRsYXJnZTogY3NzYFxuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHRcdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRcdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblxuXHRcdFx0Jjpob3ZlciB7XG5cdFx0XHRcdGNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDBcblx0XHRcdFx0XHQkeyBDT05GSUcuYm9yZGVyV2lkdGggKyAnICcgKyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdFx0b3V0bGluZTogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgdHJhbnNwYXJlbnQ7IC8vIEZvciBIaWdoIENvbnRyYXN0IE1vZGVcblx0XHRcdH1cblxuXHRcdFx0Jjpmb2N1cyB7XG5cdFx0XHRcdGJveC1zaGFkb3c6IDAgMCAwXG5cdFx0XHRcdFx0JHsgQ09ORklHLmJvcmRlcldpZHRoRm9jdXMgKyAnICcgKyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdFx0b3V0bGluZTogJHsgQ09ORklHLmJvcmRlcldpZHRoRm9jdXMgfSBzb2xpZCB0cmFuc3BhcmVudDsgLy8gRm9yIEhpZ2ggQ29udHJhc3QgTW9kZVxuXHRcdFx0fVxuXHRcdGAsXG5cdH07XG5cblx0cmV0dXJuIHNlbGVjdFNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/IHNpemVzLmxhcmdlIDogc2l6ZXMuZGVmYXVsdDtcbn07XG5cbmV4cG9ydCBjb25zdCBVbml0U2VsZWN0ID0gc3R5bGVkLnNlbGVjdDwgU2VsZWN0UHJvcHMgPmBcblx0Ly8gVGhlICYmJiBjb3VudGVyYWN0cyA8c2VsZWN0PiBzdHlsZXMgaW4gV1AgZm9ybXMuY3NzXG5cdCYmJiB7XG5cdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRib3JkZXItcmFkaXVzOiAycHg7XG5cdFx0Ym9yZGVyOiBub25lO1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdFx0LyogUmVtb3ZpbmcgbWFyZ2luIGVuc3VyZXMgZm9jdXMgc3R5bGVzIG5lYXRseSBvdmVybGF5IHRoZSB3cmFwcGVyLiAqL1xuXHRcdG1hcmdpbjogMDtcblx0XHRtaW4taGVpZ2h0OiBhdXRvO1xuXHRcdGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuXG5cdFx0Jjpub3QoIDpkaXNhYmxlZCApIHtcblx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblx0XHR9XG5cblx0XHQkeyBiYXNlVW5pdExhYmVsU3R5bGVzIH07XG5cdFx0JHsgdW5pdFNlbGVjdFNpemVzIH07XG5cdH1cbmA7XG4iXX0= */"));
 exports.ValueInput = ValueInput;
 
-const baseUnitLabelStyles = _ref => {
-  let {
-    selectSize
-  } = _ref;
+const baseUnitLabelStyles = ({
+  selectSize
+}) => {
   const sizes = {
     default: /*#__PURE__*/(0, _react.css)("box-sizing:border-box;padding:2px 1px;width:20px;color:", _utils.COLORS.gray[800], ";font-size:8px;line-height:1;letter-spacing:-0.5px;text-transform:uppercase;text-align-last:center;" + (process.env.NODE_ENV === "production" ? "" : ";label:default;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdW5pdC1jb250cm9sL3N0eWxlcy91bml0LWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDYyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3VuaXQtY29udHJvbC9zdHlsZXMvdW5pdC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHLCBydGwgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgTnVtYmVyQ29udHJvbCBmcm9tICcuLi8uLi9udW1iZXItY29udHJvbCc7XG5pbXBvcnQgeyBCYWNrZHJvcFVJIH0gZnJvbSAnLi4vLi4vaW5wdXQtY29udHJvbC9zdHlsZXMvaW5wdXQtY29udHJvbC1zdHlsZXMnO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RTaXplIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5cbi8vIFVzaW5nIGBzZWxlY3RTaXplYCBpbnN0ZWFkIG9mIGBzaXplYCB0byBhdm9pZCBhIHR5cGUgY29uZmxpY3Qgd2l0aCB0aGVcbi8vIGBzaXplYCBIVE1MIGF0dHJpYnV0ZSBvZiB0aGUgYHNlbGVjdGAgZWxlbWVudC5cbnR5cGUgU2VsZWN0UHJvcHMgPSB7XG5cdHNlbGVjdFNpemU6IFNlbGVjdFNpemU7XG59O1xuXG4vLyBUT0RPOiBSZXNvbHZlIG5lZWQgdG8gdXNlICYmJiB0byBpbmNyZWFzZSBzcGVjaWZpY2l0eVxuLy8gaHR0cHM6Ly9naXRodWIuY29tL1dvcmRQcmVzcy9ndXRlbmJlcmcvaXNzdWVzLzE4NDgzXG5cbmV4cG9ydCBjb25zdCBWYWx1ZUlucHV0ID0gc3R5bGVkKCBOdW1iZXJDb250cm9sIClgXG5cdCYmJiB7XG5cdFx0aW5wdXQge1xuXHRcdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0XHR3aWR0aDogMTAwJTtcblx0XHR9XG5cblx0XHQkeyBCYWNrZHJvcFVJIH0ge1xuXHRcdFx0dHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjFzIGxpbmVhcjtcblx0XHR9XG5cdH1cbmA7XG5cbmNvbnN0IGJhc2VVbml0TGFiZWxTdHlsZXMgPSAoIHsgc2VsZWN0U2l6ZSB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3Qgc2l6ZXMgPSB7XG5cdFx0ZGVmYXVsdDogY3NzYFxuXHRcdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRcdHBhZGRpbmc6IDJweCAxcHg7XG5cdFx0XHR3aWR0aDogMjBweDtcblx0XHRcdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgODAwIF0gfTtcblx0XHRcdGZvbnQtc2l6ZTogOHB4O1xuXHRcdFx0bGluZS1oZWlnaHQ6IDE7XG5cdFx0XHRsZXR0ZXItc3BhY2luZzogLTAuNXB4O1xuXHRcdFx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0XHRcdHRleHQtYWxpZ24tbGFzdDogY2VudGVyO1xuXHRcdGAsXG5cdFx0bGFyZ2U6IGNzc2Bcblx0XHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0XHRtaW4td2lkdGg6IDI0cHg7XG5cdFx0XHRtYXgtd2lkdGg6IDQ4cHg7XG5cdFx0XHRoZWlnaHQ6IDI0cHg7XG5cdFx0XHRtYXJnaW4taW5saW5lLWVuZDogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdFx0cGFkZGluZzogJHsgc3BhY2UoIDEgKSB9O1xuXHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRcdFx0Zm9udC1zaXplOiAxM3B4O1xuXHRcdFx0bGluZS1oZWlnaHQ6IDE7XG5cdFx0XHR0ZXh0LWFsaWduLWxhc3Q6IGNlbnRlcjtcblx0XHRcdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdFx0XHRvdmVyZmxvdzogaGlkZGVuO1xuXHRcdFx0dGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG5cdFx0YCxcblx0fTtcblxuXHRyZXR1cm4gc2VsZWN0U2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gc2l6ZXMubGFyZ2UgOiBzaXplcy5kZWZhdWx0O1xufTtcblxuZXhwb3J0IGNvbnN0IFVuaXRMYWJlbCA9IHN0eWxlZC5kaXY8IFNlbGVjdFByb3BzID5gXG5cdCYmJiB7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cblx0XHQkeyBiYXNlVW5pdExhYmVsU3R5bGVzIH07XG5cblx0XHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdH1cbmA7XG5cbmNvbnN0IHVuaXRTZWxlY3RTaXplcyA9ICggeyBzZWxlY3RTaXplID0gJ2RlZmF1bHQnIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRjb25zdCBzaXplcyA9IHtcblx0XHRkZWZhdWx0OiBjc3NgXG5cdFx0XHRoZWlnaHQ6IDEwMCU7XG5cdFx0XHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4xcyBsaW5lYXIsIGJvcmRlciAwLjFzIGxpbmVhcjtcblxuXHRcdFx0JHsgcnRsKCB7IGJvcmRlclRvcExlZnRSYWRpdXM6IDAsIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IDAgfSApKCkgfVxuXG5cdFx0XHQmOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHtcblx0XHRcdFx0YmFja2dyb3VuZC1jb2xvcjogJHsgQ09MT1JTLmdyYXlbIDEwMCBdIH07XG5cdFx0XHR9XG5cblx0XHRcdCY6Zm9jdXMge1xuXHRcdFx0XHRib3JkZXI6IDFweCBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDBcblx0XHRcdFx0XHQkeyBDT05GSUcuYm9yZGVyV2lkdGggKyAnICcgKyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdFx0b3V0bGluZS1vZmZzZXQ6IDA7XG5cdFx0XHRcdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdFx0ei1pbmRleDogMTtcblx0XHRcdH1cblx0XHRgLFxuXHRcdGxhcmdlOiBjc3NgXG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdFx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXG5cdFx0XHQmOmhvdmVyIHtcblx0XHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdFx0XHRib3gtc2hhZG93OiBpbnNldCAwIDAgMFxuXHRcdFx0XHRcdCR7IENPTkZJRy5ib3JkZXJXaWR0aCArICcgJyArIENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdFx0XHRvdXRsaW5lOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCB0cmFuc3BhcmVudDsgLy8gRm9yIEhpZ2ggQ29udHJhc3QgTW9kZVxuXHRcdFx0fVxuXG5cdFx0XHQmOmZvY3VzIHtcblx0XHRcdFx0Ym94LXNoYWRvdzogMCAwIDBcblx0XHRcdFx0XHQkeyBDT05GSUcuYm9yZGVyV2lkdGhGb2N1cyArICcgJyArIENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdFx0XHRvdXRsaW5lOiAkeyBDT05GSUcuYm9yZGVyV2lkdGhGb2N1cyB9IHNvbGlkIHRyYW5zcGFyZW50OyAvLyBGb3IgSGlnaCBDb250cmFzdCBNb2RlXG5cdFx0XHR9XG5cdFx0YCxcblx0fTtcblxuXHRyZXR1cm4gc2VsZWN0U2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gc2l6ZXMubGFyZ2UgOiBzaXplcy5kZWZhdWx0O1xufTtcblxuZXhwb3J0IGNvbnN0IFVuaXRTZWxlY3QgPSBzdHlsZWQuc2VsZWN0PCBTZWxlY3RQcm9wcyA+YFxuXHQvLyBUaGUgJiYmIGNvdW50ZXJhY3RzIDxzZWxlY3Q+IHN0eWxlcyBpbiBXUCBmb3Jtcy5jc3Ncblx0JiYmIHtcblx0XHRhcHBlYXJhbmNlOiBub25lO1xuXHRcdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3JkZXI6IG5vbmU7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0XHQvKiBSZW1vdmluZyBtYXJnaW4gZW5zdXJlcyBmb2N1cyBzdHlsZXMgbmVhdGx5IG92ZXJsYXkgdGhlIHdyYXBwZXIuICovXG5cdFx0bWFyZ2luOiAwO1xuXHRcdG1pbi1oZWlnaHQ6IGF1dG87XG5cdFx0Zm9udC1mYW1pbHk6IGluaGVyaXQ7XG5cblx0XHQmOm5vdCggOmRpc2FibGVkICkge1xuXHRcdFx0Y3Vyc29yOiBwb2ludGVyO1xuXHRcdH1cblxuXHRcdCR7IGJhc2VVbml0TGFiZWxTdHlsZXMgfTtcblx0XHQkeyB1bml0U2VsZWN0U2l6ZXMgfTtcblx0fVxuYDtcbiJdfQ== */"),
     large: /*#__PURE__*/(0, _react.css)("box-sizing:border-box;min-width:24px;max-width:48px;height:24px;margin-inline-end:", (0, _space.space)(2), ";padding:", (0, _space.space)(1), ";color:", _utils.COLORS.ui.theme, ";font-size:13px;line-height:1;text-align-last:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" + (process.env.NODE_ENV === "production" ? "" : ";label:large;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdW5pdC1jb250cm9sL3N0eWxlcy91bml0LWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlEWSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3VuaXQtY29udHJvbC9zdHlsZXMvdW5pdC1jb250cm9sLXN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHLCBydGwgfSBmcm9tICcuLi8uLi91dGlscyc7XG5pbXBvcnQgTnVtYmVyQ29udHJvbCBmcm9tICcuLi8uLi9udW1iZXItY29udHJvbCc7XG5pbXBvcnQgeyBCYWNrZHJvcFVJIH0gZnJvbSAnLi4vLi4vaW5wdXQtY29udHJvbC9zdHlsZXMvaW5wdXQtY29udHJvbC1zdHlsZXMnO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RTaXplIH0gZnJvbSAnLi4vdHlwZXMnO1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi8uLi91aS91dGlscy9zcGFjZSc7XG5cbi8vIFVzaW5nIGBzZWxlY3RTaXplYCBpbnN0ZWFkIG9mIGBzaXplYCB0byBhdm9pZCBhIHR5cGUgY29uZmxpY3Qgd2l0aCB0aGVcbi8vIGBzaXplYCBIVE1MIGF0dHJpYnV0ZSBvZiB0aGUgYHNlbGVjdGAgZWxlbWVudC5cbnR5cGUgU2VsZWN0UHJvcHMgPSB7XG5cdHNlbGVjdFNpemU6IFNlbGVjdFNpemU7XG59O1xuXG4vLyBUT0RPOiBSZXNvbHZlIG5lZWQgdG8gdXNlICYmJiB0byBpbmNyZWFzZSBzcGVjaWZpY2l0eVxuLy8gaHR0cHM6Ly9naXRodWIuY29tL1dvcmRQcmVzcy9ndXRlbmJlcmcvaXNzdWVzLzE4NDgzXG5cbmV4cG9ydCBjb25zdCBWYWx1ZUlucHV0ID0gc3R5bGVkKCBOdW1iZXJDb250cm9sIClgXG5cdCYmJiB7XG5cdFx0aW5wdXQge1xuXHRcdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0XHR3aWR0aDogMTAwJTtcblx0XHR9XG5cblx0XHQkeyBCYWNrZHJvcFVJIH0ge1xuXHRcdFx0dHJhbnNpdGlvbjogYm94LXNoYWRvdyAwLjFzIGxpbmVhcjtcblx0XHR9XG5cdH1cbmA7XG5cbmNvbnN0IGJhc2VVbml0TGFiZWxTdHlsZXMgPSAoIHsgc2VsZWN0U2l6ZSB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3Qgc2l6ZXMgPSB7XG5cdFx0ZGVmYXVsdDogY3NzYFxuXHRcdFx0Ym94LXNpemluZzogYm9yZGVyLWJveDtcblx0XHRcdHBhZGRpbmc6IDJweCAxcHg7XG5cdFx0XHR3aWR0aDogMjBweDtcblx0XHRcdGNvbG9yOiAkeyBDT0xPUlMuZ3JheVsgODAwIF0gfTtcblx0XHRcdGZvbnQtc2l6ZTogOHB4O1xuXHRcdFx0bGluZS1oZWlnaHQ6IDE7XG5cdFx0XHRsZXR0ZXItc3BhY2luZzogLTAuNXB4O1xuXHRcdFx0dGV4dC10cmFuc2Zvcm06IHVwcGVyY2FzZTtcblx0XHRcdHRleHQtYWxpZ24tbGFzdDogY2VudGVyO1xuXHRcdGAsXG5cdFx0bGFyZ2U6IGNzc2Bcblx0XHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0XHRtaW4td2lkdGg6IDI0cHg7XG5cdFx0XHRtYXgtd2lkdGg6IDQ4cHg7XG5cdFx0XHRoZWlnaHQ6IDI0cHg7XG5cdFx0XHRtYXJnaW4taW5saW5lLWVuZDogJHsgc3BhY2UoIDIgKSB9O1xuXHRcdFx0cGFkZGluZzogJHsgc3BhY2UoIDEgKSB9O1xuXHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRcdFx0Zm9udC1zaXplOiAxM3B4O1xuXHRcdFx0bGluZS1oZWlnaHQ6IDE7XG5cdFx0XHR0ZXh0LWFsaWduLWxhc3Q6IGNlbnRlcjtcblx0XHRcdHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cdFx0XHRvdmVyZmxvdzogaGlkZGVuO1xuXHRcdFx0dGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG5cdFx0YCxcblx0fTtcblxuXHRyZXR1cm4gc2VsZWN0U2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gc2l6ZXMubGFyZ2UgOiBzaXplcy5kZWZhdWx0O1xufTtcblxuZXhwb3J0IGNvbnN0IFVuaXRMYWJlbCA9IHN0eWxlZC5kaXY8IFNlbGVjdFByb3BzID5gXG5cdCYmJiB7XG5cdFx0cG9pbnRlci1ldmVudHM6IG5vbmU7XG5cblx0XHQkeyBiYXNlVW5pdExhYmVsU3R5bGVzIH07XG5cblx0XHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDkwMCBdIH07XG5cdH1cbmA7XG5cbmNvbnN0IHVuaXRTZWxlY3RTaXplcyA9ICggeyBzZWxlY3RTaXplID0gJ2RlZmF1bHQnIH06IFNlbGVjdFByb3BzICkgPT4ge1xuXHRjb25zdCBzaXplcyA9IHtcblx0XHRkZWZhdWx0OiBjc3NgXG5cdFx0XHRoZWlnaHQ6IDEwMCU7XG5cdFx0XHRib3JkZXI6IDFweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4xcyBsaW5lYXIsIGJvcmRlciAwLjFzIGxpbmVhcjtcblxuXHRcdFx0JHsgcnRsKCB7IGJvcmRlclRvcExlZnRSYWRpdXM6IDAsIGJvcmRlckJvdHRvbUxlZnRSYWRpdXM6IDAgfSApKCkgfVxuXG5cdFx0XHQmOm5vdCg6ZGlzYWJsZWQpOmhvdmVyIHtcblx0XHRcdFx0YmFja2dyb3VuZC1jb2xvcjogJHsgQ09MT1JTLmdyYXlbIDEwMCBdIH07XG5cdFx0XHR9XG5cblx0XHRcdCY6Zm9jdXMge1xuXHRcdFx0XHRib3JkZXI6IDFweCBzb2xpZCAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDBcblx0XHRcdFx0XHQkeyBDT05GSUcuYm9yZGVyV2lkdGggKyAnICcgKyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdFx0b3V0bGluZS1vZmZzZXQ6IDA7XG5cdFx0XHRcdG91dGxpbmU6IDJweCBzb2xpZCB0cmFuc3BhcmVudDtcblx0XHRcdFx0ei1pbmRleDogMTtcblx0XHRcdH1cblx0XHRgLFxuXHRcdGxhcmdlOiBjc3NgXG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdFx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdFx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xuXG5cdFx0XHQmOmhvdmVyIHtcblx0XHRcdFx0Y29sb3I6ICR7IENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdFx0XHRib3gtc2hhZG93OiBpbnNldCAwIDAgMFxuXHRcdFx0XHRcdCR7IENPTkZJRy5ib3JkZXJXaWR0aCArICcgJyArIENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdFx0XHRvdXRsaW5lOiAkeyBDT05GSUcuYm9yZGVyV2lkdGggfSBzb2xpZCB0cmFuc3BhcmVudDsgLy8gRm9yIEhpZ2ggQ29udHJhc3QgTW9kZVxuXHRcdFx0fVxuXG5cdFx0XHQmOmZvY3VzIHtcblx0XHRcdFx0Ym94LXNoYWRvdzogMCAwIDBcblx0XHRcdFx0XHQkeyBDT05GSUcuYm9yZGVyV2lkdGhGb2N1cyArICcgJyArIENPTE9SUy51aS5ib3JkZXJGb2N1cyB9O1xuXHRcdFx0XHRvdXRsaW5lOiAkeyBDT05GSUcuYm9yZGVyV2lkdGhGb2N1cyB9IHNvbGlkIHRyYW5zcGFyZW50OyAvLyBGb3IgSGlnaCBDb250cmFzdCBNb2RlXG5cdFx0XHR9XG5cdFx0YCxcblx0fTtcblxuXHRyZXR1cm4gc2VsZWN0U2l6ZSA9PT0gJ19fdW5zdGFibGUtbGFyZ2UnID8gc2l6ZXMubGFyZ2UgOiBzaXplcy5kZWZhdWx0O1xufTtcblxuZXhwb3J0IGNvbnN0IFVuaXRTZWxlY3QgPSBzdHlsZWQuc2VsZWN0PCBTZWxlY3RQcm9wcyA+YFxuXHQvLyBUaGUgJiYmIGNvdW50ZXJhY3RzIDxzZWxlY3Q+IHN0eWxlcyBpbiBXUCBmb3Jtcy5jc3Ncblx0JiYmIHtcblx0XHRhcHBlYXJhbmNlOiBub25lO1xuXHRcdGJhY2tncm91bmQ6IHRyYW5zcGFyZW50O1xuXHRcdGJvcmRlci1yYWRpdXM6IDJweDtcblx0XHRib3JkZXI6IG5vbmU7XG5cdFx0ZGlzcGxheTogYmxvY2s7XG5cdFx0b3V0bGluZTogbm9uZTtcblx0XHQvKiBSZW1vdmluZyBtYXJnaW4gZW5zdXJlcyBmb2N1cyBzdHlsZXMgbmVhdGx5IG92ZXJsYXkgdGhlIHdyYXBwZXIuICovXG5cdFx0bWFyZ2luOiAwO1xuXHRcdG1pbi1oZWlnaHQ6IGF1dG87XG5cdFx0Zm9udC1mYW1pbHk6IGluaGVyaXQ7XG5cblx0XHQmOm5vdCggOmRpc2FibGVkICkge1xuXHRcdFx0Y3Vyc29yOiBwb2ludGVyO1xuXHRcdH1cblxuXHRcdCR7IGJhc2VVbml0TGFiZWxTdHlsZXMgfTtcblx0XHQkeyB1bml0U2VsZWN0U2l6ZXMgfTtcblx0fVxuYDtcbiJdfQ== */")
@@ -55,10 +54,9 @@ const UnitLabel = (0, _base.default)("div", process.env.NODE_ENV === "production
 })("&&&{pointer-events:none;", baseUnitLabelStyles, ";color:", _utils.COLORS.gray[900], ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdW5pdC1jb250cm9sL3N0eWxlcy91bml0LWNvbnRyb2wtc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFFa0QiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy91bml0LWNvbnRyb2wvc3R5bGVzL3VuaXQtY29udHJvbC1zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBDT0xPUlMsIENPTkZJRywgcnRsIH0gZnJvbSAnLi4vLi4vdXRpbHMnO1xuaW1wb3J0IE51bWJlckNvbnRyb2wgZnJvbSAnLi4vLi4vbnVtYmVyLWNvbnRyb2wnO1xuaW1wb3J0IHsgQmFja2Ryb3BVSSB9IGZyb20gJy4uLy4uL2lucHV0LWNvbnRyb2wvc3R5bGVzL2lucHV0LWNvbnRyb2wtc3R5bGVzJztcbmltcG9ydCB0eXBlIHsgU2VsZWN0U2l6ZSB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vLi4vdWkvdXRpbHMvc3BhY2UnO1xuXG4vLyBVc2luZyBgc2VsZWN0U2l6ZWAgaW5zdGVhZCBvZiBgc2l6ZWAgdG8gYXZvaWQgYSB0eXBlIGNvbmZsaWN0IHdpdGggdGhlXG4vLyBgc2l6ZWAgSFRNTCBhdHRyaWJ1dGUgb2YgdGhlIGBzZWxlY3RgIGVsZW1lbnQuXG50eXBlIFNlbGVjdFByb3BzID0ge1xuXHRzZWxlY3RTaXplOiBTZWxlY3RTaXplO1xufTtcblxuLy8gVE9ETzogUmVzb2x2ZSBuZWVkIHRvIHVzZSAmJiYgdG8gaW5jcmVhc2Ugc3BlY2lmaWNpdHlcbi8vIGh0dHBzOi8vZ2l0aHViLmNvbS9Xb3JkUHJlc3MvZ3V0ZW5iZXJnL2lzc3Vlcy8xODQ4M1xuXG5leHBvcnQgY29uc3QgVmFsdWVJbnB1dCA9IHN0eWxlZCggTnVtYmVyQ29udHJvbCApYFxuXHQmJiYge1xuXHRcdGlucHV0IHtcblx0XHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdFx0d2lkdGg6IDEwMCU7XG5cdFx0fVxuXG5cdFx0JHsgQmFja2Ryb3BVSSB9IHtcblx0XHRcdHRyYW5zaXRpb246IGJveC1zaGFkb3cgMC4xcyBsaW5lYXI7XG5cdFx0fVxuXHR9XG5gO1xuXG5jb25zdCBiYXNlVW5pdExhYmVsU3R5bGVzID0gKCB7IHNlbGVjdFNpemUgfTogU2VsZWN0UHJvcHMgKSA9PiB7XG5cdGNvbnN0IHNpemVzID0ge1xuXHRcdGRlZmF1bHQ6IGNzc2Bcblx0XHRcdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5cdFx0XHRwYWRkaW5nOiAycHggMXB4O1xuXHRcdFx0d2lkdGg6IDIwcHg7XG5cdFx0XHRjb2xvcjogJHsgQ09MT1JTLmdyYXlbIDgwMCBdIH07XG5cdFx0XHRmb250LXNpemU6IDhweDtcblx0XHRcdGxpbmUtaGVpZ2h0OiAxO1xuXHRcdFx0bGV0dGVyLXNwYWNpbmc6IC0wLjVweDtcblx0XHRcdHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7XG5cdFx0XHR0ZXh0LWFsaWduLWxhc3Q6IGNlbnRlcjtcblx0XHRgLFxuXHRcdGxhcmdlOiBjc3NgXG5cdFx0XHRib3gtc2l6aW5nOiBib3JkZXItYm94O1xuXHRcdFx0bWluLXdpZHRoOiAyNHB4O1xuXHRcdFx0bWF4LXdpZHRoOiA0OHB4O1xuXHRcdFx0aGVpZ2h0OiAyNHB4O1xuXHRcdFx0bWFyZ2luLWlubGluZS1lbmQ6ICR7IHNwYWNlKCAyICkgfTtcblx0XHRcdHBhZGRpbmc6ICR7IHNwYWNlKCAxICkgfTtcblx0XHRcdGNvbG9yOiAkeyBDT0xPUlMudWkudGhlbWUgfTtcblx0XHRcdGZvbnQtc2l6ZTogMTNweDtcblx0XHRcdGxpbmUtaGVpZ2h0OiAxO1xuXHRcdFx0dGV4dC1hbGlnbi1sYXN0OiBjZW50ZXI7XG5cdFx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHRcdFx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0XHRcdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuXHRcdGAsXG5cdH07XG5cblx0cmV0dXJuIHNlbGVjdFNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/IHNpemVzLmxhcmdlIDogc2l6ZXMuZGVmYXVsdDtcbn07XG5cbmV4cG9ydCBjb25zdCBVbml0TGFiZWwgPSBzdHlsZWQuZGl2PCBTZWxlY3RQcm9wcyA+YFxuXHQmJiYge1xuXHRcdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG5cdFx0JHsgYmFzZVVuaXRMYWJlbFN0eWxlcyB9O1xuXG5cdFx0Y29sb3I6ICR7IENPTE9SUy5ncmF5WyA5MDAgXSB9O1xuXHR9XG5gO1xuXG5jb25zdCB1bml0U2VsZWN0U2l6ZXMgPSAoIHsgc2VsZWN0U2l6ZSA9ICdkZWZhdWx0JyB9OiBTZWxlY3RQcm9wcyApID0+IHtcblx0Y29uc3Qgc2l6ZXMgPSB7XG5cdFx0ZGVmYXVsdDogY3NzYFxuXHRcdFx0aGVpZ2h0OiAxMDAlO1xuXHRcdFx0Ym9yZGVyOiAxcHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdFx0XHR0cmFuc2l0aW9uOiBib3gtc2hhZG93IDAuMXMgbGluZWFyLCBib3JkZXIgMC4xcyBsaW5lYXI7XG5cblx0XHRcdCR7IHJ0bCggeyBib3JkZXJUb3BMZWZ0UmFkaXVzOiAwLCBib3JkZXJCb3R0b21MZWZ0UmFkaXVzOiAwIH0gKSgpIH1cblxuXHRcdFx0Jjpub3QoOmRpc2FibGVkKTpob3ZlciB7XG5cdFx0XHRcdGJhY2tncm91bmQtY29sb3I6ICR7IENPTE9SUy5ncmF5WyAxMDAgXSB9O1xuXHRcdFx0fVxuXG5cdFx0XHQmOmZvY3VzIHtcblx0XHRcdFx0Ym9yZGVyOiAxcHggc29saWQgJHsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRcdGJveC1zaGFkb3c6IGluc2V0IDAgMCAwXG5cdFx0XHRcdFx0JHsgQ09ORklHLmJvcmRlcldpZHRoICsgJyAnICsgQ09MT1JTLnVpLmJvcmRlckZvY3VzIH07XG5cdFx0XHRcdG91dGxpbmUtb2Zmc2V0OiAwO1xuXHRcdFx0XHRvdXRsaW5lOiAycHggc29saWQgdHJhbnNwYXJlbnQ7XG5cdFx0XHRcdHotaW5kZXg6IDE7XG5cdFx0XHR9XG5cdFx0YCxcblx0XHRsYXJnZTogY3NzYFxuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHRcdGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXHRcdFx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblxuXHRcdFx0Jjpob3ZlciB7XG5cdFx0XHRcdGNvbG9yOiAkeyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdFx0Ym94LXNoYWRvdzogaW5zZXQgMCAwIDBcblx0XHRcdFx0XHQkeyBDT05GSUcuYm9yZGVyV2lkdGggKyAnICcgKyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdFx0b3V0bGluZTogJHsgQ09ORklHLmJvcmRlcldpZHRoIH0gc29saWQgdHJhbnNwYXJlbnQ7IC8vIEZvciBIaWdoIENvbnRyYXN0IE1vZGVcblx0XHRcdH1cblxuXHRcdFx0Jjpmb2N1cyB7XG5cdFx0XHRcdGJveC1zaGFkb3c6IDAgMCAwXG5cdFx0XHRcdFx0JHsgQ09ORklHLmJvcmRlcldpZHRoRm9jdXMgKyAnICcgKyBDT0xPUlMudWkuYm9yZGVyRm9jdXMgfTtcblx0XHRcdFx0b3V0bGluZTogJHsgQ09ORklHLmJvcmRlcldpZHRoRm9jdXMgfSBzb2xpZCB0cmFuc3BhcmVudDsgLy8gRm9yIEhpZ2ggQ29udHJhc3QgTW9kZVxuXHRcdFx0fVxuXHRcdGAsXG5cdH07XG5cblx0cmV0dXJuIHNlbGVjdFNpemUgPT09ICdfX3Vuc3RhYmxlLWxhcmdlJyA/IHNpemVzLmxhcmdlIDogc2l6ZXMuZGVmYXVsdDtcbn07XG5cbmV4cG9ydCBjb25zdCBVbml0U2VsZWN0ID0gc3R5bGVkLnNlbGVjdDwgU2VsZWN0UHJvcHMgPmBcblx0Ly8gVGhlICYmJiBjb3VudGVyYWN0cyA8c2VsZWN0PiBzdHlsZXMgaW4gV1AgZm9ybXMuY3NzXG5cdCYmJiB7XG5cdFx0YXBwZWFyYW5jZTogbm9uZTtcblx0XHRiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcblx0XHRib3JkZXItcmFkaXVzOiAycHg7XG5cdFx0Ym9yZGVyOiBub25lO1xuXHRcdGRpc3BsYXk6IGJsb2NrO1xuXHRcdG91dGxpbmU6IG5vbmU7XG5cdFx0LyogUmVtb3ZpbmcgbWFyZ2luIGVuc3VyZXMgZm9jdXMgc3R5bGVzIG5lYXRseSBvdmVybGF5IHRoZSB3cmFwcGVyLiAqL1xuXHRcdG1hcmdpbjogMDtcblx0XHRtaW4taGVpZ2h0OiBhdXRvO1xuXHRcdGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuXG5cdFx0Jjpub3QoIDpkaXNhYmxlZCApIHtcblx0XHRcdGN1cnNvcjogcG9pbnRlcjtcblx0XHR9XG5cblx0XHQkeyBiYXNlVW5pdExhYmVsU3R5bGVzIH07XG5cdFx0JHsgdW5pdFNlbGVjdFNpemVzIH07XG5cdH1cbmA7XG4iXX0= */"));
 exports.UnitLabel = UnitLabel;
 
-const unitSelectSizes = _ref2 => {
-  let {
-    selectSize = 'default'
-  } = _ref2;
+const unitSelectSizes = ({
+  selectSize = 'default'
+}) => {
   const sizes = {
     default: /*#__PURE__*/(0, _react.css)("height:100%;border:1px solid transparent;transition:box-shadow 0.1s linear,border 0.1s linear;", (0, _utils.rtl)({
       borderTopLeftRadius: 0,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/unit-control/styles/unit-control-styles.ts"],"names":["ValueInput","NumberControl","BackdropUI","baseUnitLabelStyles","selectSize","sizes","default","css","COLORS","gray","large","ui","theme","UnitLabel","unitSelectSizes","borderTopLeftRadius","borderBottomLeftRadius","borderFocus","CONFIG","borderWidth","borderWidthFocus","UnitSelect"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAEA;;AAZA;AACA;AACA;;AAGA;AACA;AACA;AAaA;AACA;AAEO,MAAMA,UAAU,GAAG,iCAAQC,sBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,yCAOlBC,8BAPkB,q+KAAhB;;;AAaP,MAAMC,mBAAmB,GAAG,QAAmC;AAAA,MAAjC;AAAEC,IAAAA;AAAF,GAAiC;AAC9D,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,mBAAEC,UAAF,6DAIIC,cAAOC,IAAP,CAAa,GAAb,CAJJ,mmLADM;AAYbC,IAAAA,KAAK,mBAAEH,UAAF,wFAKkB,kBAAO,CAAP,CALlB,eAMQ,kBAAO,CAAP,CANR,aAOMC,cAAOG,EAAP,CAAUC,KAPhB;AAZQ,GAAd;AA6BA,SAAOR,UAAU,KAAK,kBAAf,GAAoCC,KAAK,CAACK,KAA1C,GAAkDL,KAAK,CAACC,OAA/D;AACA,CA/BD;;AAiCO,MAAMO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,+BAIjBV,mBAJiB,aAMVK,cAAOC,IAAP,CAAa,GAAb,CANU,k8KAAf;;;AAUP,MAAMK,eAAe,GAAG,SAA+C;AAAA,MAA7C;AAAEV,IAAAA,UAAU,GAAG;AAAf,GAA6C;AACtE,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,mBAAEC,UAAF,oGAKH,gBAAK;AAAEQ,MAAAA,mBAAmB,EAAE,CAAvB;AAA0BC,MAAAA,sBAAsB,EAAE;AAAlD,KAAL,GALG,+CAQgBR,cAAOC,IAAP,CAAa,GAAb,CARhB,iCAYgBD,cAAOG,EAAP,CAAUM,WAZ1B,8BAcDC,cAAOC,WAAP,GAAqB,GAArB,GAA2BX,cAAOG,EAAP,CAAUM,WAdpC,2jLADM;AAqBbP,IAAAA,KAAK,mBAAEH,UAAF,2EAMOC,cAAOG,EAAP,CAAUM,WANjB,8BAQCC,cAAOC,WAAP,GAAqB,GAArB,GAA2BX,cAAOG,EAAP,CAAUM,WARtC,eASSC,cAAOC,WAThB,mDAcCD,cAAOE,gBAAP,GAA0B,GAA1B,GAAgCZ,cAAOG,EAAP,CAAUM,WAd3C,eAeSC,cAAOE,gBAfhB;AArBQ,GAAd;AAyCA,SAAOhB,UAAU,KAAK,kBAAf,GAAoCC,KAAK,CAACK,KAA1C,GAAkDL,KAAK,CAACC,OAA/D;AACA,CA3CD;;AA6CO,MAAMe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,wJAkBlBlB,mBAlBkB,OAmBlBW,eAnBkB,q+KAAhB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../../utils';\nimport NumberControl from '../../number-control';\nimport { BackdropUI } from '../../input-control/styles/input-control-styles';\nimport type { SelectSize } from '../types';\nimport { space } from '../../ui/utils/space';\n\n// Using `selectSize` instead of `size` to avoid a type conflict with the\n// `size` HTML attribute of the `select` element.\ntype SelectProps = {\n\tselectSize: SelectSize;\n};\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const ValueInput = styled( NumberControl )`\n\t&&& {\n\t\tinput {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t${ BackdropUI } {\n\t\t\ttransition: box-shadow 0.1s linear;\n\t\t}\n\t}\n`;\n\nconst baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 2px 1px;\n\t\t\twidth: 20px;\n\t\t\tcolor: ${ COLORS.gray[ 800 ] };\n\t\t\tfont-size: 8px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: -0.5px;\n\t\t\ttext-transform: uppercase;\n\t\t\ttext-align-last: center;\n\t\t`,\n\t\tlarge: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tmin-width: 24px;\n\t\t\tmax-width: 48px;\n\t\t\theight: 24px;\n\t\t\tmargin-inline-end: ${ space( 2 ) };\n\t\t\tpadding: ${ space( 1 ) };\n\t\t\tcolor: ${ COLORS.ui.theme };\n\t\t\tfont-size: 13px;\n\t\t\tline-height: 1;\n\t\t\ttext-align-last: center;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t`,\n\t};\n\n\treturn selectSize === '__unstable-large' ? sizes.large : sizes.default;\n};\n\nexport const UnitLabel = styled.div< SelectProps >`\n\t&&& {\n\t\tpointer-events: none;\n\n\t\t${ baseUnitLabelStyles };\n\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t}\n`;\n\nconst unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: css`\n\t\t\theight: 100%;\n\t\t\tborder: 1px solid transparent;\n\t\t\ttransition: box-shadow 0.1s linear, border 0.1s linear;\n\n\t\t\t${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }\n\n\t\t\t&:not(:disabled):hover {\n\t\t\t\tbackground-color: ${ COLORS.gray[ 100 ] };\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tborder: 1px solid ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline-offset: 0;\n\t\t\t\toutline: 2px solid transparent;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`,\n\t\tlarge: css`\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tbox-shadow: 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidthFocus + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidthFocus } solid transparent; // For High Contrast Mode\n\t\t\t}\n\t\t`,\n\t};\n\n\treturn selectSize === '__unstable-large' ? sizes.large : sizes.default;\n};\n\nexport const UnitSelect = styled.select< SelectProps >`\n\t// The &&& counteracts <select> styles in WP forms.css\n\t&&& {\n\t\tappearance: none;\n\t\tbackground: transparent;\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t\tdisplay: block;\n\t\toutline: none;\n\t\t/* Removing margin ensures focus styles neatly overlay the wrapper. */\n\t\tmargin: 0;\n\t\tmin-height: auto;\n\t\tfont-family: inherit;\n\n\t\t&:not( :disabled ) {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t${ baseUnitLabelStyles };\n\t\t${ unitSelectSizes };\n\t}\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/unit-control/styles/unit-control-styles.ts"],"names":["ValueInput","NumberControl","BackdropUI","baseUnitLabelStyles","selectSize","sizes","default","css","COLORS","gray","large","ui","theme","UnitLabel","unitSelectSizes","borderTopLeftRadius","borderBottomLeftRadius","borderFocus","CONFIG","borderWidth","borderWidthFocus","UnitSelect"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAEA;;AAZA;AACA;AACA;;AAGA;AACA;AACA;AAaA;AACA;AAEO,MAAMA,UAAU,GAAG,iCAAQC,sBAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH,yCAOlBC,8BAPkB,q+KAAhB;;;AAaP,MAAMC,mBAAmB,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAAmC;AAC9D,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,mBAAEC,UAAF,6DAIIC,cAAOC,IAAP,CAAa,GAAb,CAJJ,mmLADM;AAYbC,IAAAA,KAAK,mBAAEH,UAAF,wFAKkB,kBAAO,CAAP,CALlB,eAMQ,kBAAO,CAAP,CANR,aAOMC,cAAOG,EAAP,CAAUC,KAPhB;AAZQ,GAAd;AA6BA,SAAOR,UAAU,KAAK,kBAAf,GAAoCC,KAAK,CAACK,KAA1C,GAAkDL,KAAK,CAACC,OAA/D;AACA,CA/BD;;AAiCO,MAAMO,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,+BAIjBV,mBAJiB,aAMVK,cAAOC,IAAP,CAAa,GAAb,CANU,k8KAAf;;;AAUP,MAAMK,eAAe,GAAG,CAAE;AAAEV,EAAAA,UAAU,GAAG;AAAf,CAAF,KAA+C;AACtE,QAAMC,KAAK,GAAG;AACbC,IAAAA,OAAO,mBAAEC,UAAF,oGAKH,gBAAK;AAAEQ,MAAAA,mBAAmB,EAAE,CAAvB;AAA0BC,MAAAA,sBAAsB,EAAE;AAAlD,KAAL,GALG,+CAQgBR,cAAOC,IAAP,CAAa,GAAb,CARhB,iCAYgBD,cAAOG,EAAP,CAAUM,WAZ1B,8BAcDC,cAAOC,WAAP,GAAqB,GAArB,GAA2BX,cAAOG,EAAP,CAAUM,WAdpC,2jLADM;AAqBbP,IAAAA,KAAK,mBAAEH,UAAF,2EAMOC,cAAOG,EAAP,CAAUM,WANjB,8BAQCC,cAAOC,WAAP,GAAqB,GAArB,GAA2BX,cAAOG,EAAP,CAAUM,WARtC,eASSC,cAAOC,WAThB,mDAcCD,cAAOE,gBAAP,GAA0B,GAA1B,GAAgCZ,cAAOG,EAAP,CAAUM,WAd3C,eAeSC,cAAOE,gBAfhB;AArBQ,GAAd;AAyCA,SAAOhB,UAAU,KAAK,kBAAf,GAAoCC,KAAK,CAACK,KAA1C,GAAkDL,KAAK,CAACC,OAA/D;AACA,CA3CD;;AA6CO,MAAMe,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,wJAkBlBlB,mBAlBkB,OAmBlBW,eAnBkB,q+KAAhB","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG, rtl } from '../../utils';\nimport NumberControl from '../../number-control';\nimport { BackdropUI } from '../../input-control/styles/input-control-styles';\nimport type { SelectSize } from '../types';\nimport { space } from '../../ui/utils/space';\n\n// Using `selectSize` instead of `size` to avoid a type conflict with the\n// `size` HTML attribute of the `select` element.\ntype SelectProps = {\n\tselectSize: SelectSize;\n};\n\n// TODO: Resolve need to use &&& to increase specificity\n// https://github.com/WordPress/gutenberg/issues/18483\n\nexport const ValueInput = styled( NumberControl )`\n\t&&& {\n\t\tinput {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t${ BackdropUI } {\n\t\t\ttransition: box-shadow 0.1s linear;\n\t\t}\n\t}\n`;\n\nconst baseUnitLabelStyles = ( { selectSize }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tpadding: 2px 1px;\n\t\t\twidth: 20px;\n\t\t\tcolor: ${ COLORS.gray[ 800 ] };\n\t\t\tfont-size: 8px;\n\t\t\tline-height: 1;\n\t\t\tletter-spacing: -0.5px;\n\t\t\ttext-transform: uppercase;\n\t\t\ttext-align-last: center;\n\t\t`,\n\t\tlarge: css`\n\t\t\tbox-sizing: border-box;\n\t\t\tmin-width: 24px;\n\t\t\tmax-width: 48px;\n\t\t\theight: 24px;\n\t\t\tmargin-inline-end: ${ space( 2 ) };\n\t\t\tpadding: ${ space( 1 ) };\n\t\t\tcolor: ${ COLORS.ui.theme };\n\t\t\tfont-size: 13px;\n\t\t\tline-height: 1;\n\t\t\ttext-align-last: center;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t`,\n\t};\n\n\treturn selectSize === '__unstable-large' ? sizes.large : sizes.default;\n};\n\nexport const UnitLabel = styled.div< SelectProps >`\n\t&&& {\n\t\tpointer-events: none;\n\n\t\t${ baseUnitLabelStyles };\n\n\t\tcolor: ${ COLORS.gray[ 900 ] };\n\t}\n`;\n\nconst unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {\n\tconst sizes = {\n\t\tdefault: css`\n\t\t\theight: 100%;\n\t\t\tborder: 1px solid transparent;\n\t\t\ttransition: box-shadow 0.1s linear, border 0.1s linear;\n\n\t\t\t${ rtl( { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 } )() }\n\n\t\t\t&:not(:disabled):hover {\n\t\t\t\tbackground-color: ${ COLORS.gray[ 100 ] };\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tborder: 1px solid ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline-offset: 0;\n\t\t\t\toutline: 2px solid transparent;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`,\n\t\tlarge: css`\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ${ COLORS.ui.borderFocus };\n\t\t\t\tbox-shadow: inset 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidth + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidth } solid transparent; // For High Contrast Mode\n\t\t\t}\n\n\t\t\t&:focus {\n\t\t\t\tbox-shadow: 0 0 0\n\t\t\t\t\t${ CONFIG.borderWidthFocus + ' ' + COLORS.ui.borderFocus };\n\t\t\t\toutline: ${ CONFIG.borderWidthFocus } solid transparent; // For High Contrast Mode\n\t\t\t}\n\t\t`,\n\t};\n\n\treturn selectSize === '__unstable-large' ? sizes.large : sizes.default;\n};\n\nexport const UnitSelect = styled.select< SelectProps >`\n\t// The &&& counteracts <select> styles in WP forms.css\n\t&&& {\n\t\tappearance: none;\n\t\tbackground: transparent;\n\t\tborder-radius: 2px;\n\t\tborder: none;\n\t\tdisplay: block;\n\t\toutline: none;\n\t\t/* Removing margin ensures focus styles neatly overlay the wrapper. */\n\t\tmargin: 0;\n\t\tmin-height: auto;\n\t\tfont-family: inherit;\n\n\t\t&:not( :disabled ) {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t${ baseUnitLabelStyles };\n\t\t${ unitSelectSizes };\n\t}\n`;\n"]}