@pega/cosmos-react-core 3.0.0-dev.9.1 → 3.0.0-rc.1

package/lib/components/MultiStepForm/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MultiStepForm';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/MultiStepForm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MultiStepForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/MultiStepForm/index.js

@@ -0,0 +1,2 @@
+export { default } from './MultiStepForm';
+//# sourceMappingURL=index.js.map

package/lib/components/MultiStepForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { default } from './MultiStepForm';\n"]}

package/lib/components/Number/NumberDisplay.d.ts

@@ -5,11 +5,6 @@ export interface NumberDisplayProps extends BaseProps, NoChildrenProp {
     value?: number | bigint;
     /** Unit to be included in the text, for example '%' */
     unit?: string;
-    /**
-     * Determines the placement of the unit.
-     * @default "after"
-     */
-    unitPlacement?: 'before' | 'after';
     formattingOptions?: {
         /**
          * Value display notation.

package/lib/components/Number/NumberDisplay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3E,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAqCvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"NumberDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3E,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,iBAAiB,CAAC,EAAE;QAClB;;;WAGG;QACH,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;QAClC;;;;WAIG;QACH,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB;;;WAGG;QACH,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B,CAAC;IACF,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA+BvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/Number/NumberDisplay.js

@@ -1,19 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useConfiguration } from '../../hooks';
-import { getFraction, formatNumber } from './utils';
-const NumberDisplay = forwardRef(({ value, unit = '', unitPlacement = 'after', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true } = {}, ...restProps }, ref) => {
+import { getFraction, getFormattedValue } from './utils';
+const NumberDisplay = forwardRef(({ value, unit = '', formattingOptions: { fractionDigits = getFraction(String(value)).substring(1).length, notation, groupSeparators = true } = {}, ...restProps }, ref) => {
     const { locale } = useConfiguration();
-    const options = {
-        minimumFractionDigits: fractionDigits,
-        maximumFractionDigits: fractionDigits,
-        useGrouping: groupSeparators,
-        notation
-    };
-    return (_jsx("span", { ref: ref, ...restProps, children: value || value === 0 ? (`${unit && unitPlacement === 'before' ? `${unit}\u00a0` : ''}${formatNumber(value, {
-            locale,
-            options
-        })}${unit && unitPlacement === 'after' ? `\u00a0${unit}` : ''}`) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" })) }));
+    return (_jsx("span", { ref: ref, ...restProps, children: value || value === 0 ? (getFormattedValue(value.toString(), locale, unit, {
+            notation,
+            useGrouping: groupSeparators,
+            maximumFractionDigits: fractionDigits,
+            minimumFractionDigits: fractionDigits
+        })) : (_jsx("span", { "aria-hidden": 'true', children: "\u2013\u2013" })) }));
 });
 export default NumberDisplay;
 //# sourceMappingURL=NumberDisplay.js.map

package/lib/components/Number/NumberDisplay.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAkCpD,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,aAAa,GAAG,OAAO,EACvB,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACvB,GAAG,EAAE,EACN,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,MAAM,OAAO,GAAG;QACd,qBAAqB,EAAE,cAAc;QACrC,qBAAqB,EAAE,cAAc;QACrC,WAAW,EAAE,eAAe;QAC5B,QAAQ;KACmB,CAAC;IAE9B,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,GAAG,IAAI,IAAI,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE;YACjF,MAAM;YACN,OAAO;SACR,CAAC,GAAG,IAAI,IAAI,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAChE,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\n\nimport { getFraction, formatNumber } from './utils';\n\nexport interface NumberDisplayProps extends BaseProps, NoChildrenProp {\n  /** Number value */\n  value?: number | bigint;\n  /** Unit to be included in the text, for example '%' */\n  unit?: string;\n  /**\n   * Determines the placement of the unit.\n   * @default \"after\"\n   */\n  unitPlacement?: 'before' | 'after';\n  formattingOptions?: {\n    /**\n     * Value display notation.\n     * @default 'standard'\n     */\n    notation?: 'standard' | 'compact';\n    /**\n     * Determines the fixed number of fraction digits. The value is rounded to the given precision.\n     * Maximum is 20, default is value precision.\n     * @default variable\n     */\n    fractionDigits?: number;\n    /**\n     * Determines whether group separators should be shown.\n     * @default true\n     */\n    groupSeparators?: boolean;\n  };\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\nconst NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      unit = '',\n      unitPlacement = 'after',\n      formattingOptions: {\n        fractionDigits = getFraction(String(value)).substring(1).length,\n        notation,\n        groupSeparators = true\n      } = {},\n      ...restProps\n    }: PropsWithoutRef<NumberDisplayProps>,\n    ref: NumberDisplayProps['ref']\n  ) => {\n    const { locale } = useConfiguration();\n\n    const options = {\n      minimumFractionDigits: fractionDigits,\n      maximumFractionDigits: fractionDigits,\n      useGrouping: groupSeparators,\n      notation\n    } as Intl.NumberFormatOptions;\n\n    return (\n      <span ref={ref} {...restProps}>\n        {value || value === 0 ? (\n          `${unit && unitPlacement === 'before' ? `${unit}\\u00a0` : ''}${formatNumber(value, {\n            locale,\n            options\n          })}${unit && unitPlacement === 'after' ? `\\u00a0${unit}` : ''}`\n        ) : (\n          <span aria-hidden='true'>&ndash;&ndash;</span>\n        )}\n      </span>\n    );\n  }\n);\n\nexport default NumberDisplay;\n"]}
+{"version":3,"file":"NumberDisplay.js","sourceRoot":"","sources":["../../../src/components/Number/NumberDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA2C,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA8BzD,MAAM,aAAa,GAAyD,UAAU,CACpF,CACE,EACE,KAAK,EACL,IAAI,GAAG,EAAE,EACT,iBAAiB,EAAE,EACjB,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAM,EAC/D,QAAQ,EACR,eAAe,GAAG,IAAI,EACvB,GAAG,EAAE,EACN,GAAG,SAAS,EACwB,EACtC,GAA8B,EAC9B,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,iBAAiB,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;YAChD,QAAQ;YACR,WAAW,EAAE,eAAe;YAC5B,qBAAqB,EAAE,cAAc;YACrC,qBAAqB,EAAE,cAAc;SACtC,CAAC,CACH,CAAC,CAAC,CAAC,CACF,8BAAkB,MAAM,6BAAsB,CAC/C,GACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport { useConfiguration } from '../../hooks';\n\nimport { getFraction, getFormattedValue } from './utils';\n\nexport interface NumberDisplayProps extends BaseProps, NoChildrenProp {\n  /** Number value */\n  value?: number | bigint;\n  /** Unit to be included in the text, for example '%' */\n  unit?: string;\n\n  formattingOptions?: {\n    /**\n     * Value display notation.\n     * @default 'standard'\n     */\n    notation?: 'standard' | 'compact';\n    /**\n     * Determines the fixed number of fraction digits. The value is rounded to the given precision.\n     * Maximum is 20, default is value precision.\n     * @default variable\n     */\n    fractionDigits?: number;\n    /**\n     * Determines whether group separators should be shown.\n     * @default true\n     */\n    groupSeparators?: boolean;\n  };\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement>;\n}\n\nconst NumberDisplay: FunctionComponent<NumberDisplayProps & ForwardProps> = forwardRef(\n  (\n    {\n      value,\n      unit = '',\n      formattingOptions: {\n        fractionDigits = getFraction(String(value)).substring(1).length,\n        notation,\n        groupSeparators = true\n      } = {},\n      ...restProps\n    }: PropsWithoutRef<NumberDisplayProps>,\n    ref: NumberDisplayProps['ref']\n  ) => {\n    const { locale } = useConfiguration();\n\n    return (\n      <span ref={ref} {...restProps}>\n        {value || value === 0 ? (\n          getFormattedValue(value.toString(), locale, unit, {\n            notation,\n            useGrouping: groupSeparators,\n            maximumFractionDigits: fractionDigits,\n            minimumFractionDigits: fractionDigits\n          })\n        ) : (\n          <span aria-hidden='true'>&ndash;&ndash;</span>\n        )}\n      </span>\n    );\n  }\n);\n\nexport default NumberDisplay;\n"]}

package/lib/components/Number/NumberInput.d.ts

@@ -1,6 +1,6 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '../../types';
-import NumberInputProps from './NumberInput.types';
+import { NumberInputProps } from './NumberInput.types';
 declare const NumberInput: FunctionComponent<NumberInputProps & ForwardProps>;
 export default NumberInput;
 //# sourceMappingURL=NumberInput.d.ts.map

package/lib/components/Number/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AASf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,gBAA+C,MAAM,qBAAqB,CAAC;AAWlF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA4LnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAQf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAW3C,OAAO,EAAE,gBAAgB,EAA6B,MAAM,qBAAqB,CAAC;AAWlF,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA+NnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/Number/NumberInput.js

@@ -1,39 +1,42 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useMemo, useRef } from 'react';
 import Button from '../Button';
 import Icon, { registerIcon } from '../Icon';
 import * as plusIcon from '../Icon/icons/plus.icon';
 import * as minusIcon from '../Icon/icons/minus.icon';
-import Text from '../Text';
 import Flex from '../Flex';
 import FormField from '../FormField';
-import Input from '../Input';
 import { useConfiguration, useConsolidatedRef, useI18n, useInputFormatter, useUID } from '../../hooks';
+import StyledInput from '../Input/Input.styles';
 import StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';
 import { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';
-import { getCleanedValue, getDecimal, getDecrementedValue, getFormattedValue, getIncrementedValue } from './utils';
+import { getCleanedValue, getDecimalSign, getDecrementedValue, getFormattedValue, getIncrementedValue } from './utils';
 registerIcon(minusIcon, plusIcon);
 const NumberInput = forwardRef((props, ref) => {
     const uid = useUID();
-    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, value = '', onChange, onFocus, onBlur, unit, unitPlacement = 'after', showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, ...restProps } = props;
+    const { id = uid, status, label, labelHidden, info, required, disabled, readOnly, additionalInfo, value = '', onChange, onFocus, onBlur, onResolveSuggestion, unit, showDecimal = true, numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES, showGroupSeparators = true, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, step = 1, variant, 'aria-label': ariaLabel, autoFocus, ...restProps } = props;
     const { locale } = useConfiguration();
     const inputRef = useConsolidatedRef(ref);
     const containerRef = useRef(null);
-    const numberOfDecimals = showDecimal ? numberOfDecimalsProp : 0;
-    const decimalSign = useMemo(() => getDecimal(locale), [locale]);
+    const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;
+    const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);
     const formatValue = useCallback(number => {
-        return getFormattedValue(number, locale, showGroupSeparators, numberOfDecimals);
-    }, [numberOfDecimals, showGroupSeparators, locale]);
-    const onInputChange = useCallback((e) => {
+        return getFormattedValue(number, locale, unit, {
+            useGrouping: showGroupSeparators,
+            maximumFractionDigits
+        });
+    }, [locale, unit, showGroupSeparators, maximumFractionDigits]);
+    const onInputChange = (e) => {
         const inputValue = e.target.value;
-        const cleanedInputValue = getCleanedValue(inputValue, decimalSign, numberOfDecimals);
+        const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);
         if (cleanedInputValue === value)
             return;
         onChange(cleanedInputValue);
-    }, [onChange, decimalSign, value, numberOfDecimals]);
-    const onKeyDown = useCallback((e) => {
+    };
+    const onKeyDown = (e) => {
         if (readOnly)
             return;
+        const input = e.currentTarget;
         switch (e.key) {
             case 'ArrowUp':
                 e.preventDefault();
@@ -44,17 +47,26 @@ const NumberInput = forwardRef((props, ref) => {
                 onChange(getDecrementedValue(value, min, max, step));
                 break;
             case decimalSign:
-                if (e.target.value.includes(decimalSign))
+                if (input.value.includes(decimalSign)) {
+                    if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {
+                        input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);
+                    }
+                    e.preventDefault();
+                }
+                else if (input.selectionStart !== null &&
+                    !input.value.charAt(input.selectionStart - 1).match(/\d/)) {
+                    onChange(getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits));
                     e.preventDefault();
+                }
                 break;
             case '-':
-                if (e.target.value.includes('-'))
+                if (value.startsWith('-'))
                     e.preventDefault();
                 break;
             default:
         }
-    }, [readOnly, onChange, value, min, max, step, decimalSign]);
-    const onInputFocusEvent = useCallback((e) => {
+    };
+    const onInputFocusEvent = (e) => {
         let parsableValue = value;
         if (Number.isNaN(parseFloat(value))) {
             parsableValue = '';
@@ -64,25 +76,39 @@ const NumberInput = forwardRef((props, ref) => {
         }
         if (e.type === 'focus')
             onFocus?.(parsableValue);
-        else
+        else {
+            if (parsableValue !== value) {
+                onChange(parsableValue);
+            }
             onBlur?.(parsableValue);
-    }, [value, onBlur, onFocus]);
+        }
+    };
     const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\p{N}${decimalSign}-`);
     const t = useI18n();
-    const NumberInputComp = (_jsxs(_Fragment, { children: [unit && unitPlacement === 'before' && _jsx(Text, { children: unit }), _jsx(Input, { inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps } }), unit && unitPlacement === 'after' && _jsx(Text, { children: unit })] }));
+    const NumberInputComp = (_jsx(Flex, { as: StyledNumberInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: _jsx(StyledInput, { ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, maxLength: 16, autoFocus: autoFocus }) }));
     const onMinusClick = () => {
         onChange?.(getDecrementedValue(value, min, max, step));
     };
     const onPlusClick = () => {
         onChange?.(getIncrementedValue(value, min, max, step));
     };
-    const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, unitPlacement: unitPlacement, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'minus' }) }), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
+    const StepperComp = (_jsxs(Flex, { as: StyledStepperInput, hasSuggestion: status === 'pending' && !!onResolveSuggestion, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, size: formattedValue?.length, children: [_jsx(Button, { variant: 'simple', icon: true, onClick: onMinusClick, "aria-label": t('number_decrement_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'minus' }) }), _jsx(Flex, { container: { alignItems: 'center', wrap: 'nowrap', justify: 'center' }, item: { grow: 1 }, ref: containerRef, onClick: (e) => {
                     if (e.target === containerRef.current)
                         inputRef?.current?.focus();
-                }, children: NumberInputComp }), _jsx(Button, { variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'plus' }) })] }));
-    const NumberComp = (_jsx(Flex, { as: StyledNumberInput, container: { alignItems: 'center', wrap: 'nowrap' }, status: status, readOnly: readOnly, disabled: disabled, children: NumberInputComp }));
-    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;
-    return label ? (_jsx(FormField, { ...{ label, labelHidden, id, info, status, required, disabled }, children: Comp })) : (Comp);
+                }, children: _jsx(StyledInput, { ...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }, inputMode: 'numeric', ref: inputRef, value: formattedValue, onKeyDown: onKeyDown, onFocus: onInputFocusEvent, onBlur: onInputFocusEvent, "aria-label": `${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`, maxLength: 16, autoFocus: autoFocus }) }), _jsx(Button, { variant: 'simple', icon: true, onClick: onPlusClick, "aria-label": t('number_increment_value_by', [step]), readOnly: readOnly, disabled: disabled, tabIndex: -1, children: _jsx(Icon, { name: 'plus' }) })] }));
+    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberInputComp;
+    return label ? (_jsx(FormField, { ...{
+            label,
+            labelHidden,
+            id,
+            info,
+            status,
+            required,
+            readOnly,
+            disabled,
+            additionalInfo,
+            onResolveSuggestion
+        }, children: Comp })) : (Comp);
 });
 export default NumberInput;
 //# sourceMappingURL=NumberInput.js.map

package/lib/components/Number/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useCallback,\n  useMemo,\n  useRef,\n  FocusEvent\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Text from '../Text';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport Input from '../Input';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useUID\n} from '../../hooks';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport NumberInputProps, { NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimal,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      status,\n      label,\n      labelHidden,\n      info,\n      required,\n      disabled,\n      readOnly,\n      value = '',\n      onChange,\n      onFocus,\n      onBlur,\n      unit,\n      unitPlacement = 'after',\n      showDecimal = true,\n      numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n      showGroupSeparators = true,\n      min = Number.MIN_SAFE_INTEGER,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      variant,\n      'aria-label': ariaLabel,\n      ...restProps\n    } = props;\n\n    const { locale } = useConfiguration();\n    const inputRef = useConsolidatedRef(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    const numberOfDecimals = showDecimal ? numberOfDecimalsProp : 0;\n    const decimalSign = useMemo(() => getDecimal(locale), [locale]);\n\n    const formatValue = useCallback(\n      number => {\n        return getFormattedValue(number, locale, showGroupSeparators, numberOfDecimals);\n      },\n      [numberOfDecimals, showGroupSeparators, locale]\n    );\n\n    const onInputChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        const inputValue = e.target.value;\n        const cleanedInputValue = getCleanedValue(inputValue, decimalSign, numberOfDecimals);\n        if (cleanedInputValue === value) return;\n        onChange(cleanedInputValue);\n      },\n      [onChange, decimalSign, value, numberOfDecimals]\n    );\n\n    const onKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLInputElement>) => {\n        if (readOnly) return;\n        switch (e.key) {\n          case 'ArrowUp':\n            e.preventDefault();\n            onChange(getIncrementedValue(value, min, max, step));\n            break;\n          case 'ArrowDown':\n            e.preventDefault();\n            onChange(getDecrementedValue(value, min, max, step));\n            break;\n          case decimalSign:\n            if ((e.target as HTMLInputElement).value.includes(decimalSign)) e.preventDefault();\n            break;\n          case '-':\n            if ((e.target as HTMLInputElement).value.includes('-')) e.preventDefault();\n            break;\n          default:\n        }\n      },\n      [readOnly, onChange, value, min, max, step, decimalSign]\n    );\n\n    const onInputFocusEvent = useCallback(\n      (e: FocusEvent<HTMLInputElement>) => {\n        let parsableValue = value;\n\n        if (Number.isNaN(parseFloat(value))) {\n          parsableValue = '';\n        } else if (value?.endsWith('.')) {\n          parsableValue = value.slice(0, -1);\n        }\n\n        if (e.type === 'focus') onFocus?.(parsableValue);\n        else onBlur?.(parsableValue);\n      },\n      [value, onBlur, onFocus]\n    );\n\n    const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n    const t = useI18n();\n\n    const NumberInputComp = (\n      <>\n        {unit && unitPlacement === 'before' && <Text>{unit}</Text>}\n        <Input\n          inputMode='numeric'\n          ref={inputRef}\n          value={formattedValue}\n          onKeyDown={onKeyDown}\n          onFocus={onInputFocusEvent}\n          onBlur={onInputFocusEvent}\n          aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n          {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n        />\n        {unit && unitPlacement === 'after' && <Text>{unit}</Text>}\n      </>\n    );\n\n    const onMinusClick = () => {\n      onChange?.(getDecrementedValue(value, min, max, step));\n    };\n\n    const onPlusClick = () => {\n      onChange?.(getIncrementedValue(value, min, max, step));\n    };\n\n    const StepperComp = (\n      <Flex\n        as={StyledStepperInput}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        size={formattedValue?.length}\n        unitPlacement={unitPlacement}\n      >\n        <Button\n          variant='simple'\n          icon\n          onClick={onMinusClick}\n          aria-label={t('number_decrement_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n        >\n          <Icon name='minus' />\n        </Button>\n        <Flex\n          container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n          item={{ grow: 1 }}\n          ref={containerRef}\n          onClick={(e: MouseEvent) => {\n            if (e.target === containerRef.current) inputRef?.current?.focus();\n          }}\n        >\n          {NumberInputComp}\n        </Flex>\n        <Button\n          variant='simple'\n          icon\n          onClick={onPlusClick}\n          aria-label={t('number_increment_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n        >\n          <Icon name='plus' />\n        </Button>\n      </Flex>\n    );\n\n    const NumberComp = (\n      <Flex\n        as={StyledNumberInput}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        {NumberInputComp}\n      </Flex>\n    );\n\n    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberComp;\n\n    return label ? (\n      <FormField {...{ label, labelHidden, id, info, status, required, disabled }}>\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default NumberInput;\n"]}
+{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  KeyboardEvent,\n  PropsWithoutRef,\n  useCallback,\n  useMemo,\n  useRef,\n  FocusEvent\n} from 'react';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as plusIcon from '../Icon/icons/plus.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport Flex from '../Flex';\nimport FormField from '../FormField';\nimport { ForwardProps } from '../../types';\nimport {\n  useConfiguration,\n  useConsolidatedRef,\n  useI18n,\n  useInputFormatter,\n  useUID\n} from '../../hooks';\nimport StyledInput from '../Input/Input.styles';\n\nimport StyledNumberInput, { StyledStepperInput } from './NumberInput.styles';\nimport { NumberInputProps, NUMBER_MAX_DECIMAL_PLACES } from './NumberInput.types';\nimport {\n  getCleanedValue,\n  getDecimalSign,\n  getDecrementedValue,\n  getFormattedValue,\n  getIncrementedValue\n} from './utils';\n\nregisterIcon(minusIcon, plusIcon);\n\nconst NumberInput: FunctionComponent<NumberInputProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<NumberInputProps>, ref: NumberInputProps['ref']) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      status,\n      label,\n      labelHidden,\n      info,\n      required,\n      disabled,\n      readOnly,\n      additionalInfo,\n      value = '',\n      onChange,\n      onFocus,\n      onBlur,\n      onResolveSuggestion,\n      unit,\n      showDecimal = true,\n      numberOfDecimals: numberOfDecimalsProp = NUMBER_MAX_DECIMAL_PLACES,\n      showGroupSeparators = true,\n      min = Number.MIN_SAFE_INTEGER,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      variant,\n      'aria-label': ariaLabel,\n      autoFocus,\n      ...restProps\n    } = props;\n\n    const { locale } = useConfiguration();\n    const inputRef = useConsolidatedRef(ref);\n    const containerRef = useRef<HTMLElement>(null);\n    const maximumFractionDigits = showDecimal ? numberOfDecimalsProp : 0;\n    const decimalSign = useMemo(() => getDecimalSign(locale), [locale]);\n\n    const formatValue = useCallback(\n      number => {\n        return getFormattedValue(number, locale, unit, {\n          useGrouping: showGroupSeparators,\n          maximumFractionDigits\n        });\n      },\n      [locale, unit, showGroupSeparators, maximumFractionDigits]\n    );\n\n    const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const inputValue = e.target.value;\n      const cleanedInputValue = getCleanedValue(inputValue, decimalSign, maximumFractionDigits);\n      if (cleanedInputValue === value) return;\n      onChange(cleanedInputValue);\n    };\n\n    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (readOnly) return;\n      const input = e.currentTarget;\n      switch (e.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          onChange(getIncrementedValue(value, min, max, step));\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          onChange(getDecrementedValue(value, min, max, step));\n          break;\n        case decimalSign:\n          if (input.value.includes(decimalSign)) {\n            if (input.selectionStart && input.value.charAt(input.selectionStart) === decimalSign) {\n              input.setSelectionRange(input.selectionStart + 1, input.selectionStart + 1);\n            }\n            e.preventDefault();\n          } else if (\n            input.selectionStart !== null &&\n            !input.value.charAt(input.selectionStart - 1).match(/\\d/)\n          ) {\n            onChange(\n              getCleanedValue(`${input.value}0${decimalSign}`, decimalSign, maximumFractionDigits)\n            );\n            e.preventDefault();\n          }\n          break;\n        case '-':\n          if (value.startsWith('-')) e.preventDefault();\n          break;\n        default:\n      }\n    };\n\n    const onInputFocusEvent = (e: FocusEvent<HTMLInputElement>) => {\n      let parsableValue = value;\n\n      if (Number.isNaN(parseFloat(value))) {\n        parsableValue = '';\n      } else if (value?.endsWith('.')) {\n        parsableValue = value.slice(0, -1);\n      }\n\n      if (e.type === 'focus') onFocus?.(parsableValue);\n      else {\n        if (parsableValue !== value) {\n          onChange(parsableValue);\n        }\n\n        onBlur?.(parsableValue);\n      }\n    };\n\n    const formattedValue = useInputFormatter(inputRef, value, formatValue, `\\\\p{N}${decimalSign}-`);\n\n    const t = useI18n();\n\n    const NumberInputComp = (\n      <Flex\n        as={StyledNumberInput}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n      >\n        <StyledInput\n          {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n          inputMode='numeric'\n          ref={inputRef}\n          value={formattedValue}\n          onKeyDown={onKeyDown}\n          onFocus={onInputFocusEvent}\n          onBlur={onInputFocusEvent}\n          aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n          maxLength={16}\n          autoFocus={autoFocus}\n        />\n      </Flex>\n    );\n\n    const onMinusClick = () => {\n      onChange?.(getDecrementedValue(value, min, max, step));\n    };\n\n    const onPlusClick = () => {\n      onChange?.(getIncrementedValue(value, min, max, step));\n    };\n\n    const StepperComp = (\n      <Flex\n        as={StyledStepperInput}\n        hasSuggestion={status === 'pending' && !!onResolveSuggestion}\n        container={{ alignItems: 'center', wrap: 'nowrap' }}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        size={formattedValue?.length}\n      >\n        <Button\n          variant='simple'\n          icon\n          onClick={onMinusClick}\n          aria-label={t('number_decrement_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n        >\n          <Icon name='minus' />\n        </Button>\n        <Flex\n          container={{ alignItems: 'center', wrap: 'nowrap', justify: 'center' }}\n          item={{ grow: 1 }}\n          ref={containerRef}\n          onClick={(e: MouseEvent) => {\n            if (e.target === containerRef.current) inputRef?.current?.focus();\n          }}\n        >\n          <StyledInput\n            {...{ onChange: onInputChange, id, readOnly, required, disabled, status, ...restProps }}\n            inputMode='numeric'\n            ref={inputRef}\n            value={formattedValue}\n            onKeyDown={onKeyDown}\n            onFocus={onInputFocusEvent}\n            onBlur={onInputFocusEvent}\n            aria-label={`${ariaLabel || label}. ${unit ? t('measured_in', [unit]) : ''}`}\n            maxLength={16}\n            autoFocus={autoFocus}\n          />\n        </Flex>\n        <Button\n          variant='simple'\n          icon\n          onClick={onPlusClick}\n          aria-label={t('number_increment_value_by', [step])}\n          readOnly={readOnly}\n          disabled={disabled}\n          tabIndex={-1}\n        >\n          <Icon name='plus' />\n        </Button>\n      </Flex>\n    );\n\n    const Comp = variant === 'stepper' && !readOnly ? StepperComp : NumberInputComp;\n\n    return label ? (\n      <FormField\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          required,\n          readOnly,\n          disabled,\n          additionalInfo,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default NumberInput;\n"]}

package/lib/components/Number/NumberInput.styles.d.ts

@@ -1,8 +1,11 @@
-declare type StyledStepperProps = {
+interface StyledStepperProps {
     size: number;
-    unitPlacement: 'before' | 'after';
-};
-export declare const StyledStepperInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & StyledStepperProps, never>;
-declare const StyledNumberInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>>, never>;
+}
+export declare const StyledStepperInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+} & StyledStepperProps, never>;
+declare const StyledNumberInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../..").OmitStrict<import("../FormControl").FormControlProps, never> & Required<Pick<import("../FormControl").FormControlProps, never>> & {
+    hasSuggestion?: boolean | undefined;
+}, never>;
 export default StyledNumberInput;
 //# sourceMappingURL=NumberInput.styles.d.ts.map

package/lib/components/Number/NumberInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,aAAK,kBAAkB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAE,CAAC;AAE9E,eAAO,MAAM,kBAAkB,2QAoD7B,CAAC;AAIH,QAAA,MAAM,iBAAiB,sPA8BrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"NumberInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,kBAAkB;;8BAoD7B,CAAC;AAIH,QAAA,MAAM,iBAAiB;;SAgCrB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

package/lib/components/Number/NumberInput.styles.js

@@ -6,7 +6,7 @@ import { defaultThemeProp } from '../../theme';
 import { StyledButton } from '../Button';
 import { StyledFlex } from '../Flex';
 export const StyledStepperInput = styled(StyledFormControl)(props => {
-    const { theme: { base: { spacing, 'border-radius': baseBorderRadius }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } }, size, unitPlacement } = props;
+    const { theme: { base: { spacing, 'border-radius': baseBorderRadius, palette }, components: { input: { height }, 'form-control': { 'border-radius': formBorderRadius, 'foreground-color': fgColor, 'border-width': borderWidth, ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } }, size } = props;
     return css `
     &:focus-within:not([disabled]) {
       border-color: ${focusBorderColor};
@@ -20,9 +20,10 @@ export const StyledStepperInput = styled(StyledFormControl)(props => {
     ${StyledInput} {
       width: ${size}ch;
       min-width: 1ch;
+      outline: none;
       border: 0;
       padding: 0;
-      text-align: ${unitPlacement === 'after' ? 'end' : 'start'};
+      background-color: ${palette['primary-background']};
       &:focus:not([disabled]) {
         box-shadow: none;
       }
@@ -45,7 +46,7 @@ export const StyledStepperInput = styled(StyledFormControl)(props => {
 });
 StyledStepperInput.defaultProps = defaultThemeProp;
 const StyledNumberInput = styled(StyledFormControl)(props => {
-    const { theme: { base: { spacing }, components: { 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } } } = props;
+    const { theme: { base: { spacing, palette }, components: { 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } } } } = props;
     return css `
     padding: 0 calc(0.5 * ${spacing});
     &:focus-within:not([disabled]) {
@@ -53,8 +54,10 @@ const StyledNumberInput = styled(StyledFormControl)(props => {
       box-shadow: ${shadow};
     }
     ${StyledInput} {
+      outline: none;
       border: 0;
       padding: 0 calc(0.5 * ${spacing});
+      background-color: ${palette['primary-background']};
       &:focus:not([disabled]) {
         box-shadow: none;
       }

package/lib/components/Number/NumberInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.styles.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAqB,KAAK,CAAC,EAAE;IACtF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,EACpD,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACD,IAAI,EACJ,aAAa,EACd,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;MAEpB,UAAU;;6BAEa,OAAO;2BACT,OAAO;;MAE5B,WAAW;eACF,IAAI;;;;oBAIC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;;;;;MAKzD,UAAU;8BACc,OAAO;;;QAG7B,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;GAE7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EACjB,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;4BACgB,OAAO;;sBAEb,gBAAgB;oBAClB,MAAM;;MAEpB,WAAW;;8BAEa,OAAO;;;;;MAK/B,UAAU;8BACc,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledText } from '../Text/Text';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFlex } from '../Flex';\n\ntype StyledStepperProps = { size: number; unitPlacement: 'before' | 'after' };\n\nexport const StyledStepperInput = styled(StyledFormControl)<StyledStepperProps>(props => {\n  const {\n    theme: {\n      base: { spacing, 'border-radius': baseBorderRadius },\n      components: {\n        input: { height },\n        'form-control': {\n          'border-radius': formBorderRadius,\n          'foreground-color': fgColor,\n          'border-width': borderWidth,\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    },\n    size,\n    unitPlacement\n  } = props;\n  return css`\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledFlex} {\n      overflow: auto;\n      margin-inline-start: ${spacing};\n      margin-inline-end: ${spacing};\n    }\n    ${StyledInput} {\n      width: ${size}ch;\n      min-width: 1ch;\n      border: 0;\n      padding: 0;\n      text-align: ${unitPlacement === 'after' ? 'end' : 'start'};\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n    > ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n      margin-inline-start: auto;\n      border: 0;\n      &:enabled {\n        color: ${fgColor};\n      }\n      min-height: calc(${height} - 2 * ${borderWidth});\n      height: calc(${height} - 2 * ${borderWidth});\n    }\n  `;\n});\n\nStyledStepperInput.defaultProps = defaultThemeProp;\n\nconst StyledNumberInput = styled(StyledFormControl)(props => {\n  const {\n    theme: {\n      base: { spacing },\n      components: {\n        'form-control': {\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    }\n  } = props;\n\n  return css`\n    padding: 0 calc(0.5 * ${spacing});\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledInput} {\n      border: 0;\n      padding: 0 calc(0.5 * ${spacing});\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n  `;\n});\n\nStyledNumberInput.defaultProps = defaultThemeProp;\n\nexport default StyledNumberInput;\n"]}
+{"version":3,"file":"NumberInput.styles.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,WAAW,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMrC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAqB,KAAK,CAAC,EAAE;IACtF,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,EAC7D,UAAU,EAAE,EACV,KAAK,EAAE,EAAE,MAAM,EAAE,EACjB,cAAc,EAAE,EACd,eAAe,EAAE,gBAAgB,EACjC,kBAAkB,EAAE,OAAO,EAC3B,cAAc,EAAE,WAAW,EAC3B,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACD,IAAI,EACL,GAAG,KAAK,CAAC;IACV,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;MAEpB,UAAU;;6BAEa,OAAO;2BACT,OAAO;;MAE5B,WAAW;eACF,IAAI;;;;;0BAKO,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;QAG7B,YAAY;4BACQ,gBAAgB,MAAM,gBAAgB;;;;iBAIjD,OAAO;;yBAEC,MAAM,UAAU,WAAW;qBAC/B,MAAM,UAAU,WAAW;;GAE7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,EAAE;IAC1D,MAAM,EACJ,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAC1B,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACF,EACF,GAAG,KAAK,CAAC;IAEV,OAAO,GAAG,CAAA;4BACgB,OAAO;;sBAEb,gBAAgB;oBAClB,MAAM;;MAEpB,WAAW;;;8BAGa,OAAO;0BACX,OAAO,CAAC,oBAAoB,CAAC;;;;;MAKjD,UAAU;8BACc,OAAO;;;GAGlC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,eAAe,iBAAiB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl } from '../FormControl';\nimport StyledInput from '../Input/Input.styles';\nimport { StyledText } from '../Text/Text';\nimport { defaultThemeProp } from '../../theme';\nimport { StyledButton } from '../Button';\nimport { StyledFlex } from '../Flex';\n\ninterface StyledStepperProps {\n  size: number;\n}\n\nexport const StyledStepperInput = styled(StyledFormControl)<StyledStepperProps>(props => {\n  const {\n    theme: {\n      base: { spacing, 'border-radius': baseBorderRadius, palette },\n      components: {\n        input: { height },\n        'form-control': {\n          'border-radius': formBorderRadius,\n          'foreground-color': fgColor,\n          'border-width': borderWidth,\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    },\n    size\n  } = props;\n  return css`\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledFlex} {\n      overflow: auto;\n      margin-inline-start: ${spacing};\n      margin-inline-end: ${spacing};\n    }\n    ${StyledInput} {\n      width: ${size}ch;\n      min-width: 1ch;\n      outline: none;\n      border: 0;\n      padding: 0;\n      background-color: ${palette['primary-background']};\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n    > ${StyledButton} {\n      border-radius: calc(${baseBorderRadius} * ${formBorderRadius});\n      margin-inline-start: auto;\n      border: 0;\n      &:enabled {\n        color: ${fgColor};\n      }\n      min-height: calc(${height} - 2 * ${borderWidth});\n      height: calc(${height} - 2 * ${borderWidth});\n    }\n  `;\n});\n\nStyledStepperInput.defaultProps = defaultThemeProp;\n\nconst StyledNumberInput = styled(StyledFormControl)(props => {\n  const {\n    theme: {\n      base: { spacing, palette },\n      components: {\n        'form-control': {\n          ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n        }\n      }\n    }\n  } = props;\n\n  return css`\n    padding: 0 calc(0.5 * ${spacing});\n    &:focus-within:not([disabled]) {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    ${StyledInput} {\n      outline: none;\n      border: 0;\n      padding: 0 calc(0.5 * ${spacing});\n      background-color: ${palette['primary-background']};\n      &:focus:not([disabled]) {\n        box-shadow: none;\n      }\n    }\n    ${StyledText} {\n      padding: 0 calc(0.5 * ${spacing});\n      white-space: nowrap;\n    }\n  `;\n});\n\nStyledNumberInput.defaultProps = defaultThemeProp;\n\nexport default StyledNumberInput;\n"]}

package/lib/components/Number/NumberInput.types.d.ts

@@ -1,7 +1,7 @@
 import { Ref } from 'react';
 import { FormControlProps } from '../FormControl';
 import { BaseProps, NoChildrenProp } from '../../types';
-export default interface NumberInputProps extends BaseProps, NoChildrenProp {
+export interface NumberProps extends BaseProps, NoChildrenProp {
     /**
      * Sets DOM id for the control and associates label element via 'for' attribute.
      * If an id is not pass, a random id will be generated for any render.
@@ -28,27 +28,15 @@ export default interface NumberInputProps extends BaseProps, NoChildrenProp {
     readOnly?: FormControlProps['readOnly'];
     /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */
     name?: FormControlProps['name'];
-    /**
-     * CurrencyInput input value.
-     * Requires an onChange handler to update value.
-     */
-    value?: string;
-    /** Callback fired when input value changes. */
-    onChange: (value: string) => void;
-    /** Callback fired when the component gets focus. */
-    onFocus?: (value: string) => void;
-    /** Callback fired when the component loses focus. */
-    onBlur?: (value: string) => void;
+    /** Button when clicked will show additional information */
+    additionalInfo?: FormControlProps['additionalInfo'];
     /** Defines unit of the number, like 'kg', 'miles' or '%'. */
     unit?: string;
     /**
-     * Determines the placement of the unit.
-     * @default "after"
-     */
-    unitPlacement?: 'before' | 'after';
-    /** Determines whether decimal places should be shown. The value is rounded if true.
-     * @default true
-     */
+    *
+   /** Determines whether decimal places should be shown. The value is rounded if true.
+    * @default true
+    */
     showDecimal?: boolean;
     /** Determines the maximum number of decimal places. The value is rounded to the number of places.
      * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.
@@ -78,10 +66,57 @@ export default interface NumberInputProps extends BaseProps, NoChildrenProp {
      * @default 'default'
      */
     variant?: 'default' | 'stepper';
-    /** Ref for the wrapping element. */
-    ref?: Ref<HTMLInputElement>;
     /** Optional manual override for generated aria label */
     'aria-label'?: string;
+    /** Automatically focuses the input on render. */
+    autoFocus?: boolean;
+}
+export interface NumberInputProps extends NumberProps {
+    /**
+     * CurrencyInput input value.
+     * Requires an onChange handler to update value.
+     */
+    value?: string;
+    /** Callback fired when input value changes. */
+    onChange: (value: string) => void;
+    /** Callback fired when the component gets focus. */
+    onFocus?: (value: string) => void;
+    /** Callback fired when the component loses focus. */
+    onBlur?: (value: string) => void;
+    /** Callback fired when AI suggestion is accepted/rejected */
+    onResolveSuggestion?: FormControlProps['onResolveSuggestion'];
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLInputElement>;
+}
+export interface NumberRangeInputProps extends NumberProps {
+    /** Range as a tuple of start and end. */
+    value?: {
+        start?: string;
+        end?: string;
+    };
+    /** Callback for any modifications to the range */
+    onChange: (value: {
+        start: string;
+        end: string;
+    }) => void;
+    /** Callback fired when the component loses focus. */
+    onBlur?: (value: {
+        start: string;
+        end: string;
+    }) => void;
+    /** Callback fired when the component gets focus. */
+    onFocus?: (value: {
+        start: string;
+        end: string;
+    }) => void;
+    /** Pass a string or a fragment with an Icon and string for first part of NumberRangeInput. */
+    fromLabel?: FormControlProps['label'];
+    /** Pass a string or a fragment with an Icon and string for second part of NumberRangeInput. */
+    toLabel?: FormControlProps['label'];
+    /** Pass an object with "heading" and "content" properties to show AdditionalInfo for first part of NumberRangeInput. */
+    fromAdditionalInfo?: FormControlProps['additionalInfo'];
+    /** Pass an object with "heading" and "content" properties to show AdditionalInfo for second part of NumberRangeInput. */
+    toAdditionalInfo?: FormControlProps['additionalInfo'];
 }
 /** Maximum fraction digits is 20. */
 export declare const NUMBER_MAX_DECIMAL_PLACES = 20;

package/lib/components/Number/NumberInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,CAAC,OAAO,WAAW,gBAAiB,SAAQ,SAAS,EAAE,cAAc;IACzE;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,iEAAiE;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,yFAAyF;IACzF,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qDAAqD;IACrD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,qCAAqC;AACrC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}
+{"version":3,"file":"NumberInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"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"}

package/lib/components/Number/NumberInput.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAwFA,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import { Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nexport default interface NumberInputProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the component non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /**\n   * CurrencyInput input value.\n   * Requires an onChange handler to update value.\n   */\n  value?: string;\n  /** Callback fired when input value changes. */\n  onChange: (value: string) => void;\n  /** Callback fired when the component gets focus. */\n  onFocus?: (value: string) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: string) => void;\n  /** Defines unit of the number, like 'kg', 'miles' or '%'. */\n  unit?: string;\n  /**\n   * Determines the placement of the unit.\n   * @default \"after\"\n   */\n  unitPlacement?: 'before' | 'after';\n  /** Determines whether decimal places should be shown. The value is rounded if true.\n   * @default true\n   */\n  showDecimal?: boolean;\n  /** Determines the maximum number of decimal places. The value is rounded to the number of places.\n   * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n   */\n  numberOfDecimals?: number;\n  /** Determines whether group separators should be shown.\n   * @default true\n   */\n  showGroupSeparators?: boolean;\n  /** The minimum value to accept for this input.\n   *  This value must be less than or equal to the value of the max attribute.\n   *  @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /**\n   * The maximum value to accept for this input.\n   *  This value must be greater than or equal to the value of the min attribute.\n   *  @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /** A stepping interval to use when using up and down arrows to adjust the value.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Component variation. Might be rendered as regular input or stepper.\n   * @default 'default'\n   */\n  variant?: 'default' | 'stepper';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n  /** Optional manual override for generated aria label */\n  'aria-label'?: string;\n}\n\n/** Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}
+{"version":3,"file":"NumberInput.types.js","sourceRoot":"","sources":["../../../src/components/Number/NumberInput.types.ts"],"names":[],"mappings":"AAiHA,qCAAqC;AACrC,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC","sourcesContent":["import { Ref } from 'react';\n\nimport { FormControlProps } from '../FormControl';\nimport { BaseProps, NoChildrenProp } from '../../types';\n\nexport interface NumberProps extends BaseProps, NoChildrenProp {\n  /**\n   * Sets DOM id for the control and associates label element via 'for' attribute.\n   * If an id is not pass, a random id will be generated for any render.\n   */\n  id?: FormControlProps['id'];\n  /** Set visual state based on a validation state. */\n  status?: FormControlProps['status'];\n  /** Pass a string or a fragment with an Icon and string. */\n  label?: FormControlProps['label'];\n  /**\n   * Visually hides the label region.\n   * @default false\n   */\n  labelHidden?: FormControlProps['labelHidden'];\n  /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n  info?: FormControlProps['info'];\n  /** Indicate if the field is required. The browser defaults to false. */\n  required?: FormControlProps['required'];\n  /** Placeholder text. The browser defaults to an empty string. */\n  placeholder?: string;\n  /** Disable the control. The browser defaults to false. */\n  disabled?: FormControlProps['disabled'];\n  /** Makes the component non editable and non clickable. The browser defaults to false. */\n  readOnly?: FormControlProps['readOnly'];\n  /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n  name?: FormControlProps['name'];\n  /** Button when clicked will show additional information */\n  additionalInfo?: FormControlProps['additionalInfo'];\n  /** Defines unit of the number, like 'kg', 'miles' or '%'. */\n  unit?: string;\n  /**\n  *\n /** Determines whether decimal places should be shown. The value is rounded if true.\n  * @default true\n  */\n  showDecimal?: boolean;\n  /** Determines the maximum number of decimal places. The value is rounded to the number of places.\n   * @default variable NUMBER_MAX_DECIMAL_PLACES. Recommended minimum: 1.\n   */\n  numberOfDecimals?: number;\n  /** Determines whether group separators should be shown.\n   * @default true\n   */\n  showGroupSeparators?: boolean;\n  /** The minimum value to accept for this input.\n   *  This value must be less than or equal to the value of the max attribute.\n   *  @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /**\n   * The maximum value to accept for this input.\n   *  This value must be greater than or equal to the value of the min attribute.\n   *  @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /** A stepping interval to use when using up and down arrows to adjust the value.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * Component variation. Might be rendered as regular input or stepper.\n   * @default 'default'\n   */\n  variant?: 'default' | 'stepper';\n  /** Optional manual override for generated aria label */\n  'aria-label'?: string;\n  /** Automatically focuses the input on render. */\n  autoFocus?: boolean;\n}\n\nexport interface NumberInputProps extends NumberProps {\n  /**\n   * CurrencyInput input value.\n   * Requires an onChange handler to update value.\n   */\n  value?: string;\n  /** Callback fired when input value changes. */\n  onChange: (value: string) => void;\n  /** Callback fired when the component gets focus. */\n  onFocus?: (value: string) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: string) => void;\n  /** Callback fired when AI suggestion is accepted/rejected */\n  onResolveSuggestion?: FormControlProps['onResolveSuggestion'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport interface NumberRangeInputProps extends NumberProps {\n  /** Range as a tuple of start and end. */\n  value?: { start?: string; end?: string };\n  /** Callback for any modifications to the range */\n  onChange: (value: { start: string; end: string }) => void;\n  /** Callback fired when the component loses focus. */\n  onBlur?: (value: { start: string; end: string }) => void;\n  /** Callback fired when the component gets focus. */\n  onFocus?: (value: { start: string; end: string }) => void;\n  /** Pass a string or a fragment with an Icon and string for first part of NumberRangeInput. */\n  fromLabel?: FormControlProps['label'];\n  /** Pass a string or a fragment with an Icon and string for second part of NumberRangeInput. */\n  toLabel?: FormControlProps['label'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for first part of NumberRangeInput. */\n  fromAdditionalInfo?: FormControlProps['additionalInfo'];\n  /** Pass an object with \"heading\" and \"content\" properties to show AdditionalInfo for second part of NumberRangeInput. */\n  toAdditionalInfo?: FormControlProps['additionalInfo'];\n}\n\n/** Maximum fraction digits is 20. */\nexport const NUMBER_MAX_DECIMAL_PLACES = 20;\n"]}

package/lib/components/Number/NumberRangeInput.d.ts

@@ -0,0 +1,6 @@
+import { FunctionComponent } from 'react';
+import type { ForwardProps } from '../../types';
+import type { NumberRangeInputProps } from './NumberInput.types';
+declare const NumberRangeInput: FunctionComponent<NumberRangeInputProps & ForwardProps>;
+export default NumberRangeInput;
+//# sourceMappingURL=NumberRangeInput.d.ts.map

package/lib/components/Number/NumberRangeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberRangeInput.d.ts","sourceRoot":"","sources":["../../../src/components/Number/NumberRangeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAOhD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,QAAA,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,YAAY,CA0F7E,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/lib/components/Number/NumberRangeInput.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { useConsolidatedRef, useI18n, useFocusWithin } from '../../hooks';
+import { StyledRangeInputContainer } from '../Input/Input.styles';
+import FormField from '../FormField';
+import Flex from '../Flex';
+import NumberInput from './NumberInput';
+const NumberRangeInput = forwardRef(({ value = {}, onChange, onBlur, onFocus, label, fromLabel, toLabel, labelHidden, placeholder, disabled, readOnly, required, unit, showDecimal, numberOfDecimals, showGroupSeparators, min, max, step, variant, fromAdditionalInfo, toAdditionalInfo, autoFocus, ...restProps }, ref) => {
+    const t = useI18n();
+    const onFocusChange = useCallback((focused) => {
+        (focused ? onFocus : onBlur)?.({ start: value.start ?? '', end: value.end ?? '' });
+    }, [onBlur, value.start, value.end]);
+    const containerRef = useConsolidatedRef(ref);
+    useFocusWithin([containerRef], onFocusChange);
+    const commonProps = {
+        placeholder,
+        readOnly,
+        required,
+        unit,
+        showDecimal,
+        numberOfDecimals,
+        showGroupSeparators,
+        min,
+        max,
+        variant
+    };
+    return (_jsx(FormField, { as: 'fieldset', ...restProps, ref: containerRef, container: { wrap: 'nowrap' }, labelHidden: labelHidden, labelAs: 'legend', label: label, disabled: disabled, required: required, readOnly: readOnly, children: _jsxs(Flex, { container: true, as: StyledRangeInputContainer, children: [_jsx(NumberInput, { ...commonProps, value: value.start, onChange: fromValue => onChange({ start: fromValue, end: value.end ?? '' }), label: fromLabel, "aria-label": `${t('range_from_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: fromAdditionalInfo, autoFocus: autoFocus }), _jsx(NumberInput, { ...commonProps, value: value.end, onChange: toValue => onChange({ start: value.start ?? '', end: toValue }), label: toLabel, "aria-label": `${t('range_to_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: toAdditionalInfo })] }) }));
+});
+export default NumberRangeInput;
+//# sourceMappingURL=NumberRangeInput.js.map