@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/InputFields/NumberField.js

@@ -1,194 +1,304 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { TooltipTrigger } from '../Tooltips/TooltipStyles';
-import TooltipOverflow from '../Tooltips/TooltipOverflow';
-import styled from 'styled-components';
-import { IconButton } from '../Button';
-import { useFocusVisibleRef } from '../common';
-import { SystemIcons } from '../icons';
-import { COLORS, focusStyles, Z_INDEXES } from '../styles';
-import { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-import { Size, States } from '../types';
-import { ValidationMessage } from "./styling";
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var PrefixContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  ", "\n  position: absolute;\n  padding: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  ", "\n  position: absolute;\n  padding: ", ";\n"])), function (props) { return props.size === Size.Small ? '10px' : '11px'; }, function (props) { return props.size === Size.Small ? '20px' : '24px'; }, function (props) { return props.disabled ? COLORS.neutral_300 : COLORS.neutral_500; }, function (props) { return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null); }, function (props) { return props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px'; });
-var OperatorWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  margin: ", ";\n\n  svg {\n    height: 14px;\n    width: 14px;\n  }\n\n  .divider {\n    margin: 16px 0;\n    background: ", ";\n    width: 1px;\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  margin: ", ";\n\n  svg {\n    height: 14px;\n    width: 14px;\n  }\n\n  .divider {\n    margin: 16px 0;\n    background: ", ";\n    width: 1px;\n  }\n"])), function (props) { return props.size === Size.Medium ? '4px 0' : ''; }, COLORS.neutral_200);
-var NumberInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-radius: 4px;\n  text-overflow: ellipsis;\n  box-shadow: inset 0 0 0 1px ", ";\n  outline: none;\n  color: ", ";\n\n  ", "\n  ", "\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    color: ", ";\n    pointer-events: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &.readOnly {\n    background: ", ";\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    background: ", ";\n    pointer-events: none;\n    color: ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-radius: 4px;\n  text-overflow: ellipsis;\n  box-shadow: inset 0 0 0 1px ", ";\n  outline: none;\n  color: ", ";\n\n  ", "\n  ", "\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    color: ", ";\n    pointer-events: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &.readOnly {\n    background: ", ";\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    background: ", ";\n    pointer-events: none;\n    color: ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), COLORS.neutral_400, COLORS.neutral_500, function (props) { return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black); }, function (props) { return props.type === 'NumberField' ? "\n        padding: ".concat(props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px', ";\n        padding-left: ").concat(props.hasPrefix ? '30px' : '', ";\n    ") : ''; }, function (props) { return props.type === 'NumberInput' ? "\n        padding: ".concat(props.fieldSize === Size.Small ? '14px 48px' : '16px 48px', ";\n    ") : ''; }, function (props) { return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null); }, COLORS.primary_800, focusStyles, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_500, COLORS.correct_400, COLORS.critical_400);
-var InputContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n  margin-bottom: 4px;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n\n  ", "\n"], ["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n  margin-bottom: 4px;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n\n  ", "\n"])), function (props) { return props.type === 'NumberField' ? '160px' : '144px'; }, function (props) { return props.size === Size.Small ? '48px' : '56px'; }, Z_INDEXES.focus, TooltipTrigger('hover'));
-var LeftOperator = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"], ["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) { return props.size === Size.Small ? '0' : '4px'; });
-var RightOperator = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  right: 0;\n"], ["\n  position: absolute;\n  top: ", ";\n  right: 0;\n"])), function (props) { return props.size === Size.Small ? '0' : '4px'; });
-var NumberField = React.forwardRef(function (props, ref) {
-    var _a = props.type, type = _a === void 0 ? 'NumberField' : _a, _b = props.size, size = _b === void 0 ? Size.Medium : _b, note = props.note, noteIcon = props.noteIcon, required = props.required, prefix = props.prefix, _c = props.interval, interval = _c === void 0 ? 1 : _c, minValue = props.minValue, maxValue = props.maxValue, allowNegative = props.allowNegative, decimalPrecision = props.decimalPrecision, disabled = props.disabled, readOnly = props.readOnly, state = props.state, value = props.value, placeholder = props.placeholder, onChange = props.onChange, className = props.className, id = props.id, overflowTooltipPosition = props.overflowTooltipPosition, dataTestId = props.dataTestId, rest = __rest(props, ["type", "size", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "onChange", "className", "id", "overflowTooltipPosition", "dataTestId"]);
-    var _d = React.useState(value ? value.toString() : ''), userInput = _d[0], setUserInput = _d[1];
-    var elementRef = useFocusVisibleRef();
-    React.useEffect(function () { return setUserInput("".concat(value !== null && value !== void 0 ? value : '')); }, [value]);
-    React.useImperativeHandle(ref, function () { return elementRef.current; }, [elementRef]);
-    var setVal = function (e) {
-        setUserInput(e);
-        onChange && onChange(+e);
-    };
-    var handleKeyPress = function (e) {
-        switch (e.key) {
-            case 'ArrowUp':
-                addInterval();
-                break;
-            case 'ArrowDown':
-                subtractInterval();
-                break;
-            default:
-                break;
-        }
-    };
-    var handleInput = function (e) {
-        e.preventDefault();
-        var simpleRegex = new RegExp(/^[0-9]\d*$/);
-        var decimalFormationRegEx = new RegExp(/^[0-9]\d*\.$/);
-        var negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\d*\.$/);
-        var allowNegativeRegex = new RegExp(/^[-][0-9]\d*$/);
-        var decimalPrecisionRegex = decimalPrecision ? new RegExp("^[0-9]\\d*\\.[0-9]\\d{0,".concat(decimalPrecision - 1, "}$")) : undefined;
-        var negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp("^[-][0-9]\\d*\\.[0-9]\\d{0,".concat(decimalPrecision - 1, "}$")) : undefined;
-        var val = e.target.value;
-        if (val !== '') {
-            if (allowNegative && decimalPrecision) {
-                if (val.length === 1 && val.charAt(0) === '-')
-                    setVal(val);
-                else {
-                    if ((negativeAndDecimalRegex.test(val) || decimalPrecisionRegex.test(val)) && isInRange(val, true))
-                        setVal(val);
-                    else if ((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true))
-                        setVal(val);
-                    else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, true))
-                        setVal(val);
-                }
-            }
-            else if (allowNegative) {
-                if (val.length === 1 && val.charAt(0) === '-')
-                    setVal(val);
-                else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, false))
-                    setVal(val);
-            }
-            else if (decimalPrecision && (val.indexOf('.') === val.lastIndexOf('.')) && isInRange(val, true)) {
-                if (decimalPrecisionRegex.test(val))
-                    setVal(val);
-                else if (decimalFormationRegEx.test(val))
-                    setVal(val);
-                else if (!val.includes('.') && simpleRegex.test(val))
-                    setVal(val);
-            }
-            else if (simpleRegex.test(val) && isInRange(val, false)) {
-                setVal(val);
-            }
-        }
-        if (val === '')
-            setVal('');
-    };
-    var isInRange = function (value, isDecimal) {
-        var x = isDecimal ? parseFloat(parseFloat(value).toFixed(decimalPrecision)) : parseInt(value);
-        if (minValue && minValue > x)
-            return false;
-        else if (maxValue && maxValue < x)
-            return false;
-        else
-            return true;
-    };
-    var addInterval = function () {
-        var val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);
-        val = isNaN(val) && userInput === '' ? (minValue ? minValue - 1 : 0) : val;
-        if (!isNaN(val)) {
-            if (decimalPrecision)
-                val = Math.round((val + interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);
-            else
-                val += 1;
-            if (maxValue && maxValue >= val)
-                setVal(val.toString());
-            else if (!maxValue)
-                setVal(val.toString());
-        }
-    };
-    var subtractInterval = function () {
-        var val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);
-        val = isNaN(val) && userInput === '' ? (maxValue ? maxValue + 1 : 0) : val;
-        if (!isNaN(val)) {
-            if (decimalPrecision)
-                val = Math.round((val - interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);
-            else
-                val -= 1;
-            if ((minValue && minValue <= val) || !minValue) {
-                if (allowNegative || val >= 0) {
-                    setVal(val.toString());
-                }
-            }
-        }
-    };
-    var isLocked = function (input, operator) {
-        var val = decimalPrecision ? parseFloat(input) : parseInt(input);
-        val = isNaN(val) && userInput === '' ? 0 : val;
-        var operatorState = false;
-        if (operator === 'add' && maxValue)
-            operatorState = val >= maxValue;
-        if (operator === 'subtract' && minValue)
-            operatorState = val <= minValue;
-        if (operator === 'subtract' && !minValue && !allowNegative)
-            operatorState = val <= 0;
-        return operatorState;
-    };
-    var renderNumberFieldElements = function () {
-        return (React.createElement(React.Fragment, null,
-            prefix && React.createElement(PrefixContainer, { size: size, disabled: !!disabled, className: "operator" }, prefix),
-            React.createElement(OperatorWrapper, { "data-testid": 'operators', size: size, className: "operator" },
-                React.createElement(IconButton, { tabIndex: 0, variant: "secondary", shape: "square", action: function () { return subtractInterval(); }, useTransparentBackground: true, disabled: disabled || readOnly || isLocked(userInput, 'subtract') },
-                    React.createElement(SystemIcons.Minus, { size: "14px" })),
-                React.createElement("div", { className: "divider" }),
-                React.createElement(IconButton, { tabIndex: 0, variant: "secondary", shape: "square", action: function () { return addInterval(); }, useTransparentBackground: true, disabled: disabled || readOnly || isLocked(userInput, 'add') },
-                    React.createElement(SystemIcons.Plus, { size: "14px" })))));
-    };
-    var renderNumberInputElements = function () {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(LeftOperator, { "data-testid": 'leftOperator', size: size, className: "operator" },
-                React.createElement(IconButton, { tabIndex: 0, variant: "secondary", shape: "square", action: function () { return subtractInterval(); }, useTransparentBackground: true, disabled: disabled || readOnly || isLocked(userInput, 'subtract') },
-                    React.createElement(SystemIcons.Minus, { size: "14px" }))),
-            React.createElement(RightOperator, { "data-testid": 'rightOperator', size: size, className: "operator" },
-                React.createElement(IconButton, { tabIndex: 0, variant: "secondary", shape: "square", action: function () { return addInterval(); }, useTransparentBackground: true, disabled: disabled || readOnly || isLocked(userInput, 'add') },
-                    React.createElement(SystemIcons.Plus, { size: "14px" })))));
-    };
-    return (React.createElement(Container, null,
-        React.createElement(InputContainer, { type: type, size: size, tabIndex: -1 },
-            React.createElement(NumberInput, __assign({ type: type, id: id, "data-testid": dataTestId, fieldSize: size, hasPrefix: !!prefix, placeholder: placeholder ? placeholder : 'Enter number', value: userInput, ref: elementRef, tabIndex: (disabled || readOnly) ? -1 : 0, onChange: function (e) { return handleInput(e); }, onKeyDown: function (e) { return handleKeyPress(e); }, required: required, className: disabled ? ' disabled' : ''
-                    .concat(readOnly ? ' readOnly' : '')
-                    .concat(state ? " ".concat(state) : '')
-                    .concat(className ? " ".concat(className) : '') }, rest)),
-            type === 'NumberField' && renderNumberFieldElements(),
-            type === 'NumberInput' && renderNumberInputElements(),
-            value && React.createElement(TooltipOverflow, { position: overflowTooltipPosition, input: elementRef, withArrow: true, maxWidth: "100%", size: size, align: 'end' }, value === null || value === void 0 ? void 0 : value.toString())),
-        note &&
-            React.createElement(ValidationMessage, { type: state || States.Default },
-                noteIcon,
-                React.createElement("span", null, note))));
-});
-export default NumberField;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["type", "size", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "onChange", "className", "id", "overflowTooltipPosition", "dataTestId"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import * as React from 'react';
+import { TooltipTrigger } from '../Tooltips/TooltipStyles';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
+import styled from 'styled-components';
+import { IconButton } from '../Button';
+import { useFocusVisibleRef } from '../common';
+import { SystemIcons } from '../icons';
+import { COLORS, focusStyles, Z_INDEXES } from '../styles';
+import { ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
+import { Size, States } from '../types';
+import { ValidationMessage } from "./styling";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+var PrefixContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  ", "\n  position: absolute;\n  padding: ", ";\n"])), function (props) {
+  return props.size === Size.Small ? '10px' : '11px';
+}, function (props) {
+  return props.size === Size.Small ? '20px' : '24px';
+}, function (props) {
+  return props.disabled ? COLORS.neutral_300 : COLORS.neutral_500;
+}, function (props) {
+  return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null);
+}, function (props) {
+  return props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
+});
+var OperatorWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  margin: ", ";\n\n  svg {\n    height: 14px;\n    width: 14px;\n  }\n\n  .divider {\n    margin: 16px 0;\n    background: ", ";\n    width: 1px;\n  }\n"])), function (props) {
+  return props.size === Size.Medium ? '4px 0' : '';
+}, COLORS.neutral_200);
+var NumberInput = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  border: none;\n  border-radius: 4px;\n  text-overflow: ellipsis;\n  box-shadow: inset 0 0 0 1px ", ";\n  outline: none;\n  color: ", ";\n\n  ", "\n  ", "\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    color: ", ";\n    pointer-events: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &.readOnly {\n    background: ", ";\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    background: ", ";\n    pointer-events: none;\n    color: ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), COLORS.neutral_400, COLORS.neutral_500, function (props) {
+  return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black);
+}, function (props) {
+  return props.type === 'NumberField' ? "\n        padding: ".concat(props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px', ";\n        padding-left: ").concat(props.hasPrefix ? '30px' : '', ";\n    ") : '';
+}, function (props) {
+  return props.type === 'NumberInput' ? "\n        padding: ".concat(props.fieldSize === Size.Small ? '14px 48px' : '16px 48px', ";\n    ") : '';
+}, function (props) {
+  return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null);
+}, COLORS.primary_800, focusStyles, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_500, COLORS.correct_400, COLORS.critical_400);
+var InputContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n  margin-bottom: 4px;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n\n  ", "\n"])), function (props) {
+  return props.type === 'NumberField' ? '160px' : '144px';
+}, function (props) {
+  return props.size === Size.Small ? '48px' : '56px';
+}, Z_INDEXES.focus, TooltipTrigger('hover'));
+var LeftOperator = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) {
+  return props.size === Size.Small ? '0' : '4px';
+});
+var RightOperator = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  right: 0;\n"])), function (props) {
+  return props.size === Size.Small ? '0' : '4px';
+});
+var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? 'NumberField' : _props$type,
+    _props$size = props.size,
+    size = _props$size === void 0 ? Size.Medium : _props$size,
+    note = props.note,
+    noteIcon = props.noteIcon,
+    required = props.required,
+    prefix = props.prefix,
+    _props$interval = props.interval,
+    interval = _props$interval === void 0 ? 1 : _props$interval,
+    minValue = props.minValue,
+    maxValue = props.maxValue,
+    allowNegative = props.allowNegative,
+    decimalPrecision = props.decimalPrecision,
+    disabled = props.disabled,
+    readOnly = props.readOnly,
+    state = props.state,
+    value = props.value,
+    placeholder = props.placeholder,
+    onChange = props.onChange,
+    className = props.className,
+    id = props.id,
+    overflowTooltipPosition = props.overflowTooltipPosition,
+    dataTestId = props.dataTestId,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React.useState(value ? value.toString() : ''),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    userInput = _React$useState2[0],
+    setUserInput = _React$useState2[1];
+  var elementRef = useFocusVisibleRef();
+  React.useEffect(function () {
+    return setUserInput("".concat(value !== null && value !== void 0 ? value : ''));
+  }, [value]);
+  React.useImperativeHandle(ref, function () {
+    return elementRef.current;
+  }, [elementRef]);
+  var setVal = function setVal(e) {
+    setUserInput(e);
+    onChange && onChange(+e);
+  };
+  var handleKeyPress = function handleKeyPress(e) {
+    switch (e.key) {
+      case 'ArrowUp':
+        addInterval();
+        break;
+      case 'ArrowDown':
+        subtractInterval();
+        break;
+      default:
+        break;
+    }
+  };
+  var handleInput = function handleInput(e) {
+    e.preventDefault();
+    var simpleRegex = new RegExp(/^[0-9]\d*$/);
+    var decimalFormationRegEx = new RegExp(/^[0-9]\d*\.$/);
+    var negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\d*\.$/);
+    var allowNegativeRegex = new RegExp(/^[-][0-9]\d*$/);
+    var decimalPrecisionRegex = decimalPrecision ? new RegExp("^[0-9]\\d*\\.[0-9]\\d{0,".concat(decimalPrecision - 1, "}$")) : undefined;
+    var negativeAndDecimalRegex = decimalPrecision && allowNegative ? new RegExp("^[-][0-9]\\d*\\.[0-9]\\d{0,".concat(decimalPrecision - 1, "}$")) : undefined;
+    var val = e.target.value;
+    if (val !== '') {
+      if (allowNegative && decimalPrecision) {
+        if (val.length === 1 && val.charAt(0) === '-') setVal(val);else {
+          if ((negativeAndDecimalRegex.test(val) || decimalPrecisionRegex.test(val)) && isInRange(val, true)) setVal(val);else if ((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true)) setVal(val);else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, true)) setVal(val);
+        }
+      } else if (allowNegative) {
+        if (val.length === 1 && val.charAt(0) === '-') setVal(val);else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, false)) setVal(val);
+      } else if (decimalPrecision && val.indexOf('.') === val.lastIndexOf('.') && isInRange(val, true)) {
+        if (decimalPrecisionRegex.test(val)) setVal(val);else if (decimalFormationRegEx.test(val)) setVal(val);else if (!val.includes('.') && simpleRegex.test(val)) setVal(val);
+      } else if (simpleRegex.test(val) && isInRange(val, false)) {
+        setVal(val);
+      }
+    }
+    if (val === '') setVal('');
+  };
+  var isInRange = function isInRange(value, isDecimal) {
+    var x = isDecimal ? parseFloat(parseFloat(value).toFixed(decimalPrecision)) : parseInt(value);
+    if (minValue && minValue > x) return false;else if (maxValue && maxValue < x) return false;else return true;
+  };
+  var addInterval = function addInterval() {
+    var val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);
+    val = isNaN(val) && userInput === '' ? minValue ? minValue - 1 : 0 : val;
+    if (!isNaN(val)) {
+      if (decimalPrecision) val = Math.round((val + interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val += 1;
+      if (maxValue && maxValue >= val) setVal(val.toString());else if (!maxValue) setVal(val.toString());
+    }
+  };
+  var subtractInterval = function subtractInterval() {
+    var val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);
+    val = isNaN(val) && userInput === '' ? maxValue ? maxValue + 1 : 0 : val;
+    if (!isNaN(val)) {
+      if (decimalPrecision) val = Math.round((val - interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val -= 1;
+      if (minValue && minValue <= val || !minValue) {
+        if (allowNegative || val >= 0) {
+          setVal(val.toString());
+        }
+      }
+    }
+  };
+  var isLocked = function isLocked(input, operator) {
+    var val = decimalPrecision ? parseFloat(input) : parseInt(input);
+    val = isNaN(val) && userInput === '' ? 0 : val;
+    var operatorState = false;
+    if (operator === 'add' && maxValue) operatorState = val >= maxValue;
+    if (operator === 'subtract' && minValue) operatorState = val <= minValue;
+    if (operator === 'subtract' && !minValue && !allowNegative) operatorState = val <= 0;
+    return operatorState;
+  };
+  var renderNumberFieldElements = function renderNumberFieldElements() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [prefix && /*#__PURE__*/_jsx(PrefixContainer, {
+        size: size,
+        disabled: !!disabled,
+        className: "operator",
+        children: prefix
+      }), /*#__PURE__*/_jsxs(OperatorWrapper, {
+        "data-testid": 'operators',
+        size: size,
+        className: "operator",
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          tabIndex: 0,
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return subtractInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'subtract'),
+          children: /*#__PURE__*/_jsx(SystemIcons.Minus, {
+            size: "14px"
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "divider"
+        }), /*#__PURE__*/_jsx(IconButton, {
+          tabIndex: 0,
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return addInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'add'),
+          children: /*#__PURE__*/_jsx(SystemIcons.Plus, {
+            size: "14px"
+          })
+        })]
+      })]
+    });
+  };
+  var renderNumberInputElements = function renderNumberInputElements() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(LeftOperator, {
+        "data-testid": 'leftOperator',
+        size: size,
+        className: "operator",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          tabIndex: 0,
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return subtractInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'subtract'),
+          children: /*#__PURE__*/_jsx(SystemIcons.Minus, {
+            size: "14px"
+          })
+        })
+      }), /*#__PURE__*/_jsx(RightOperator, {
+        "data-testid": 'rightOperator',
+        size: size,
+        className: "operator",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          tabIndex: 0,
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return addInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'add'),
+          children: /*#__PURE__*/_jsx(SystemIcons.Plus, {
+            size: "14px"
+          })
+        })
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(Container, {
+    children: [/*#__PURE__*/_jsxs(InputContainer, {
+      type: type,
+      size: size,
+      tabIndex: -1,
+      children: [/*#__PURE__*/_jsx(NumberInput, _objectSpread({
+        type: type,
+        id: id,
+        "data-testid": dataTestId,
+        fieldSize: size,
+        hasPrefix: !!prefix,
+        placeholder: placeholder ? placeholder : 'Enter number',
+        value: userInput,
+        ref: elementRef,
+        tabIndex: disabled || readOnly ? -1 : 0,
+        onChange: function onChange(e) {
+          return handleInput(e);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return handleKeyPress(e);
+        },
+        required: required,
+        className: disabled ? ' disabled' : ''.concat(readOnly ? ' readOnly' : '').concat(state ? " ".concat(state) : '').concat(className ? " ".concat(className) : '')
+      }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements(), value && /*#__PURE__*/_jsx(TooltipOverflow, {
+        position: overflowTooltipPosition,
+        input: elementRef,
+        withArrow: true,
+        maxWidth: "100%",
+        size: size,
+        align: "end",
+        children: value === null || value === void 0 ? void 0 : value.toString()
+      })]
+    }), note && /*#__PURE__*/_jsxs(ValidationMessage, {
+      type: state || States.Default,
+      children: [noteIcon, /*#__PURE__*/_jsx("span", {
+        children: note
+      })]
+    })]
+  });
+});
+NumberField.propTypes = {
+  prefix: _pt.string,
+  interval: _pt.number,
+  minValue: _pt.number,
+  maxValue: _pt.number,
+  allowNegative: _pt.bool,
+  decimalPrecision: _pt.number,
+  note: _pt.string,
+  noteIcon: _pt.node,
+  type: _pt.oneOf(['NumberField', 'NumberInput']),
+  value: _pt.number,
+  onChange: _pt.func,
+  overflowTooltipPosition: _pt.oneOf(['top', 'bottom'])
+};
+export default NumberField;
+//# sourceMappingURL=NumberField.js.map

package/dist/InputFields/PasswordField.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size, Testable } from '../types';
-export declare type PasswordFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'> & {
+export type PasswordFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'> & {
     /**
      * Required. The ID of the password field.
      */