@dnb/eufemia 10.15.1 → 10.17.0

package/es/extensions/forms/Field/Number/Number.js

@@ -5,26 +5,28 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useContext, useMemo, useCallback } from 'react';
-import { InputMasked, HelpButton } from '../../../../components';
+import { InputMasked, HelpButton, Button } from '../../../../components';
 import SharedContext from '../../../../shared/Context';
 import classnames from 'classnames';
 import FieldBlock from '../../FieldBlock';
 import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
+import { clamp } from '../../../../components/slider/SliderHelpers';
 function NumberComponent(props) {
-  var _props$width;
+  var _props$width, _sharedContext$transl, _sharedContext$transl2;
   const sharedContext = useContext(SharedContext);
   const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const {
     currency,
     percent,
     mask,
+    step = 1,
     thousandSeparator,
     decimalSymbol,
     decimalLimit = 12,
     prefix,
     suffix,
-    rightAligned
+    showStepControls
   } = props;
   const errorMessages = useMemo(() => _objectSpread({
     required: tr.inputErrorRequired,
@@ -56,9 +58,15 @@ function NumberComponent(props) {
     numberValue
   }) => {
     if (value === '') {
-      return emptyValue;
+      return props.emptyValue;
     }
     return numberValue;
+  }, [props.emptyValue]);
+  const transformValue = useCallback((value, currentValue) => {
+    if (value > Number.MAX_SAFE_INTEGER || value < Number.MIN_SAFE_INTEGER) {
+      return currentValue;
+    }
+    return value;
   }, []);
   const maskProps = useMemo(() => {
     if (currency) {
@@ -89,6 +97,8 @@ function NumberComponent(props) {
     schema,
     toInput,
     fromInput,
+    transformValue,
+    size: props.size !== 'small' && props.size !== 'large' ? 'medium' : props.size,
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium'
   });
   const {
@@ -103,50 +113,123 @@ function NumberComponent(props) {
     labelDescription,
     labelSecondary,
     value,
+    minimum = Number.MIN_SAFE_INTEGER,
+    maximum = Number.MAX_SAFE_INTEGER,
     disabled,
     info,
     warning,
     error,
     help,
-    emptyValue,
+    size,
     width,
+    align,
     handleFocus,
     handleBlur,
     handleChange
   } = useDataValue(preparedProps);
-  return React.createElement(FieldBlock, _extends({
+  const onKeyDownHandler = useCallback(({
+    key,
+    event
+  }) => {
+    if (!showStepControls) {
+      return;
+    }
+    let numberValue = null;
+    switch (key) {
+      case 'ArrowUp':
+        numberValue = clamp(value + step, minimum, maximum);
+        break;
+      case 'ArrowDown':
+        numberValue = clamp(value - step, minimum, maximum);
+        break;
+    }
+    if (numberValue !== null) {
+      event.persist();
+      event.preventDefault();
+      handleChange({
+        numberValue
+      });
+    }
+  }, [handleChange, maximum, minimum, showStepControls, step, value]);
+  const fieldBlockProps = _objectSpread({
     className: classnames('dnb-forms-field-number', className),
+    contentClassName: classnames('dnb-forms-field-number__contents', showStepControls && 'dnb-forms-field-number__contents--has-controls', disabled && 'dnb-forms-field-number__contents--is-disabled', error && 'dnb-forms-field-number__contents--has-error'),
     forId: id,
-    layout: layout,
-    label: label,
-    labelDescription: labelDescription,
-    labelSecondary: labelSecondary,
-    info: info,
-    warning: warning,
-    error: error,
-    disabled: disabled,
+    layout,
+    label,
+    labelDescription,
+    labelSecondary,
+    info,
+    warning,
+    error,
+    disabled,
     width: width === 'stretch' ? width : undefined,
     contentsWidth: width !== false ? width : undefined
-  }, pickSpacingProps(props)), React.createElement(InputMasked, _extends({
-    id: id,
-    name: name,
-    autoComplete: autoComplete,
-    className: classnames('dnb-forms-field-number__input', inputClassName),
-    placeholder: placeholder,
-    value: value
-  }, maskProps, {
-    align: rightAligned && 'right',
-    on_focus: handleFocus,
-    on_blur: handleBlur,
-    on_change: handleChange,
-    disabled: disabled,
+  }, pickSpacingProps(props));
+  const increaseProps = showStepControls && {
+    'aria-hidden': true,
+    className: 'dnb-button--control-after',
+    variant: 'secondary',
+    icon: 'add',
+    size: convertInputSizeToButtonSize(size),
+    tabIndex: -1,
+    disabled: disabled || value >= maximum,
+    onClick: () => {
+      handleChange({
+        numberValue: clamp(value + step, minimum, maximum)
+      });
+    },
+    title: sharedContext === null || sharedContext === void 0 ? void 0 : (_sharedContext$transl = sharedContext.translation.Slider.addTitle) === null || _sharedContext$transl === void 0 ? void 0 : _sharedContext$transl.replace('%s', String(value + step))
+  };
+  const decreaseProps = showStepControls && _objectSpread(_objectSpread({}, increaseProps), {}, {
+    className: 'dnb-button--control-before',
+    icon: 'subtract',
+    disabled: disabled || value <= minimum,
+    onClick: () => {
+      handleChange({
+        numberValue: clamp(value - step, minimum, maximum)
+      });
+    },
+    title: sharedContext === null || sharedContext === void 0 ? void 0 : (_sharedContext$transl2 = sharedContext.translation.Slider.subtractTitle) === null || _sharedContext$transl2 === void 0 ? void 0 : _sharedContext$transl2.replace('%s', String(value - step))
+  });
+  const ariaParams = showStepControls && {
+    role: 'spinbutton',
+    'aria-valuemin': String(minimum),
+    'aria-valuemax': String(maximum),
+    'aria-valuenow': String(value),
+    'aria-valuetext': String(value)
+  };
+  const inputProps = _objectSpread(_objectSpread({
+    id,
+    name,
+    autoComplete,
+    className: classnames(`dnb-forms-field-number__input dnb-input--${size}`, inputClassName),
+    step,
+    placeholder,
+    value,
+    align: showStepControls ? 'center' : align
+  }, maskProps), {}, {
+    onKeyDown: onKeyDownHandler,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    disabled,
     status: error ? 'error' : undefined,
     stretch: width !== undefined,
-    suffix: help ? React.createElement(HelpButton, {
+    suffix: help && !showStepControls ? React.createElement(HelpButton, {
       title: help.title
     }, help.contents) : undefined
-  })));
+  }, ariaParams);
+  return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
+    asFieldset: false
+  }), showStepControls && React.createElement(Button, decreaseProps), React.createElement(InputMasked, inputProps), showStepControls && React.createElement(Button, increaseProps), help && showStepControls && React.createElement(HelpButton, {
+    title: help.title
+  }, help.contents));
 }
+const convertInputSizeToButtonSize = inputSize => {
+  const buttonSize = ['small', 'medium', 'large'].indexOf(inputSize) > -1 ? inputSize : 'medium';
+  return buttonSize;
+};
 NumberComponent._supportsSpacingProps = true;
 export default NumberComponent;
 //# sourceMappingURL=Number.js.map

package/es/extensions/forms/Field/Number/Number.js.map

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","SharedContext","classnames","FieldBlock","useDataValue","pickSpacingProps","NumberComponent","props","_props$width","sharedContext","tr","translation","Forms","currency","percent","mask","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","errorMessages","_objectSpread","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","value","numberValue","emptyValue","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","preparedProps","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","handleFocus","handleBlur","handleChange","createElement","_extends","forId","contentsWidth","align","on_focus","on_blur","on_change","status","stretch","title","contents","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { JSONSchema7 } from 'json-schema'\nimport { InputMasked, HelpButton } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    rightAligned?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    percent,\n    mask,\n    thousandSeparator,\n    decimalSymbol,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    rightAligned,\n  } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minimum: tr.numberFieldErrorMinimum,\n      maximum: tr.numberFieldErrorMaximum,\n      exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n      exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n      multipleOf: tr.numberFieldErrorMultipleOf,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema7>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    if (currency) {\n      return {\n        as_currency: currency,\n      }\n    }\n    if (percent) {\n      return {\n        as_percent: percent,\n      }\n    }\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        decimalLimit,\n        decimalSymbol,\n        includeThousandsSeparator: thousandSeparator !== undefined,\n        thousandsSeparatorSymbol:\n          thousandSeparator === true ? ' ' : thousandSeparator,\n        prefix,\n        suffix,\n      },\n    }\n  }, [\n    currency,\n    percent,\n    mask,\n    decimalLimit,\n    decimalSymbol,\n    thousandSeparator,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    disabled,\n    info,\n    warning,\n    error,\n    help,\n    emptyValue,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      width={width === 'stretch' ? width : undefined}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      <InputMasked\n        id={id}\n        name={name}\n        autoComplete={autoComplete}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        {...maskProps}\n        align={rightAligned && 'right'}\n        on_focus={handleFocus}\n        on_blur={handleBlur}\n        on_change={handleChange}\n        disabled={disabled}\n        status={error ? 'error' : undefined}\n        stretch={width !== undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["React","useContext","useMemo","useCallback","InputMasked","HelpButton","Button","SharedContext","classnames","FieldBlock","useDataValue","pickSpacingProps","clamp","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","sharedContext","tr","translation","Forms","currency","percent","mask","step","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","showStepControls","errorMessages","_objectSpread","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","external","undefined","fromInput","value","numberValue","emptyValue","transformValue","currentValue","Number","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","preparedProps","size","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","align","handleFocus","handleBlur","handleChange","onKeyDownHandler","key","event","persist","preventDefault","fieldBlockProps","contentClassName","forId","contentsWidth","increaseProps","variant","icon","convertInputSizeToButtonSize","tabIndex","onClick","title","Slider","addTitle","replace","String","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","createElement","contents","_extends","asFieldset","inputSize","buttonSize","indexOf","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { JSONSchema7 } from 'json-schema'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    percent,\n    mask,\n    step = 1,\n    thousandSeparator,\n    decimalSymbol,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minimum: tr.numberFieldErrorMinimum,\n      maximum: tr.numberFieldErrorMaximum,\n      exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n      exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n      multipleOf: tr.numberFieldErrorMultipleOf,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema7>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    if (currency) {\n      return {\n        as_currency: currency,\n      }\n    }\n    if (percent) {\n      return {\n        as_percent: percent,\n      }\n    }\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        decimalLimit,\n        decimalSymbol,\n        includeThousandsSeparator: thousandSeparator !== undefined,\n        thousandsSeparatorSymbol:\n          thousandSeparator === true ? ' ' : thousandSeparator,\n        prefix,\n        suffix,\n      },\n    }\n  }, [\n    currency,\n    percent,\n    mask,\n    decimalLimit,\n    decimalSymbol,\n    thousandSeparator,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    size:\n      props.size !== 'small' && props.size !== 'large'\n        ? 'medium'\n        : props.size,\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    info,\n    warning,\n    error,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp((value as number) + step, minimum, maximum)\n          break\n        case 'ArrowDown':\n          numberValue = clamp((value as number) - step, minimum, maximum)\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [handleChange, maximum, minimum, showStepControls, step, value]\n  )\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-number', className),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      disabled && 'dnb-forms-field-number__contents--is-disabled',\n      error && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    disabled,\n    width: width === 'stretch' ? width : undefined,\n    contentsWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: convertInputSizeToButtonSize(size),\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) + step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    disabled: disabled || value <= minimum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) - step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invlaid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    status: error ? 'error' : undefined,\n    stretch: width !== undefined,\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.contents}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      {showStepControls && <Button {...decreaseProps} />}\n      <InputMasked {...inputProps} />\n      {showStepControls && <Button {...increaseProps} />}\n      {help && showStepControls && (\n        <HelpButton title={help.title}>{help.contents}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nconst convertInputSizeToButtonSize = (\n  inputSize: InputSize\n): ButtonSize => {\n  const buttonSize =\n    ['small', 'medium', 'large'].indexOf(inputSize as string) > -1\n      ? inputSize\n      : 'medium'\n  return buttonSize as ButtonSize\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

package/es/extensions/forms/Field/Number/style/dnb-number.css

@@ -0,0 +1,192 @@
+/*
+ * Utilities
+ */
+:root {
+  --forms-field-width--small: 5rem;
+  --forms-field-width--medium: 11rem;
+  --forms-field-width--large: 21rem;
+}
+
+.dnb-forms-field-number {
+  --number-control-button-border-color: black;
+  --number-control-button-border-color--hover: darkgrey;
+  --number-control-button-border-color--focus: darkgrey;
+  --number-control-button-border-width--focus: 0.125rem;
+  --number-control-button-background-color--hover: grey;
+  --number-control-button-color--hover: black;
+  --number-control-button-background-color--active: black;
+  --number-control-button-color--active: lightgrey;
+  --number-control-button--error: red;
+  --number-control-button--error-contrast: white;
+  --number-control-button-width--small: 2rem;
+  --number-control-button-width--medium: 2.5rem;
+  --number-control-button-width--large: 3rem;
+  --forms-field-block--number-control-buttons-width--small: calc(
+    var(--number-control-button-width--small) * 2
+  );
+  --forms-field-block--number-control-buttons-width--medium: calc(
+    var(--number-control-button-width--medium) * 2
+  );
+  --forms-field-block--number-control-buttons-width--large: calc(
+    var(--number-control-button-width--large) * 2
+  );
+}
+.dnb-forms-field-number__contents {
+  display: flex;
+  align-items: center;
+}
+.dnb-forms-field-number__contents--has-controls {
+  border-radius: 0.25rem;
+  --border-color: var(--number-control-button-border-color);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]) {
+  --border-color: var(--number-control-button-border-color);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within {
+  --border-color: var(--number-control-button-border-color--focus);
+  --border-width: var(--number-control-button-border-width--focus);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-input__shell {
+  border-radius: 0;
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]) {
+  box-shadow: none;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell {
+  outline: initial;
+  box-shadow: none;
+}
+html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell {
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]) {
+  background-color: var(--number-control-button-background-color--hover);
+  color: var(--number-control-button-color--hover);
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]) {
+  background-color: var(--number-control-button-background-color--active);
+  color: var(--number-control-button-color--active);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error {
+  --border-color: var(--number-control-button--error);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]) {
+  --border-color: var(--number-control-button--error);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell {
+  box-shadow: none;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after {
+  color: var(--number-control-button--error);
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]) {
+  background-color: var(--number-control-button--error-contrast);
+  color: var(--number-control-button--error);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]) {
+  background-color: var(--number-control-button--error);
+  color: var(--number-control-button--error-contrast);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled],
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled] {
+  color: var(--number-control-button--error-contrast);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled {
+  --border-color: var(--color-black-55);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]) {
+  --border-color: var(--color-black-55);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell {
+  box-shadow: none;
+}
+.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled {
+  --border-color: var(--color-black-55);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled],
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled] {
+  background-color: var(--color-black-3);
+  color: var(--color-black-20);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small {
+  width: calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small));
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after {
+  width: var(--number-control-button-width--small);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium {
+  width: calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium));
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after {
+  width: var(--number-control-button-width--medium);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large {
+  width: calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large));
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after {
+  width: var(--number-control-button-width--large);
+}

package/es/extensions/forms/Field/Number/style/dnb-number.min.css

@@ -0,0 +1 @@
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}