@laerdal/life-react-components 1.9.8-dev.2 → 1.9.8-dev.22

package/dist/InputFields/Label.js

@@ -4,18 +4,18 @@ import _pt from "prop-types";
 
 var _templateObject, _templateObject2, _templateObject3;
 
-/**
- * Import React libraries.
+/**
+ * Import React libraries.
  */
 import * as React from 'react';
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 
 import { BREAKPOINTS, COLORS } from '../styles';
 import { Size } from '../types';
-/**
- * Import third-party libraries.
+/**
+ * Import third-party libraries.
  */
 
 import styled from 'styled-components';
@@ -45,8 +45,8 @@ var InputLabel = function InputLabel(_ref) {
       _React$useState2 = _slicedToArray(_React$useState, 2),
       required = _React$useState2[0],
       setRequired = _React$useState2[1];
-  /**
-   * Checks if field is set as required and we have to mark it accordingly.
+  /**
+   * Checks if field is set as required and we have to mark it accordingly.
    */
 
 
@@ -59,9 +59,9 @@ var InputLabel = function InputLabel(_ref) {
       setRequired(false);
     }
   }, [(_document$getElementB2 = document.getElementById(inputId)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.getAttribute('required')]);
-  /**
-   * Triggers a click element on a specific element.
-   * @param id - ID of the element which needs to be clicked.
+  /**
+   * Triggers a click element on a specific element.
+   * @param id - ID of the element which needs to be clicked.
    */
 
   var onTriggerClick = function onTriggerClick(id) {

package/dist/InputFields/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXSStyling","ComponentXXSStyling","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Small","InputLabel","inputId","text","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click","critical_500"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
+{"version":3,"sources":["../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXSStyling","ComponentXXSStyling","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Small","InputLabel","inputId","text","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click","critical_500"],"mappings":"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","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\r\nimport { SystemIcons } from '../icons';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  pointer-events: none;\r\n`;\r\n\r\nconst LabelRow = styled.div<{ margin?: string }>`\r\n  display: flex;\r\n  align-items: flex-start;\r\n  height: 16px;\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n`;\r\n\r\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  height: 100%;\r\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\r\n  align-items: center;\r\n`;\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n};\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n      setRequired(true);\r\n    } else {\r\n      setRequired(false);\r\n    }\r\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  return (\r\n    <LabelRow margin={margin}>\r\n      <LabelRowInner size={size}>\r\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\r\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n          {text}\r\n        </Label>\r\n      </LabelRowInner>\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"file":"Label.js"}

package/dist/InputFields/NumberField.cjs

@@ -9,8 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -21,6 +25,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Button = require("../Button");
 
+var _common = require("../common");
+
 var _icons = require("../icons");
 
 var _styles = require("../styles");
@@ -31,87 +37,116 @@ var _types = require("../types");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _excluded = ["size", "label", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "type", "onChange", "className"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
 
-var LabelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin-bottom: 4px;\n    color: ", ";\n    display: flex;\n    ", "\n"])), _styles.COLORS.neutral_500, function (props) {
+var LabelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: 4px;\n  color: ", ";\n  display: flex;\n  ", "\n"])), _styles.COLORS.neutral_500, function (props) {
   return props.size === _types.Size.Small ? (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null);
 });
 
 var LabelText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
 
-var LabelIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    margin-right: ", ";\n    svg {\n        height: 9px;\n        width: 9px;\n    }\n"])), function (props) {
+var LabelIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n\n  svg {\n    height: 9px;\n    width: 9px;\n  }\n"])), function (props) {
   return props.size === _types.Size.Small ? '6px' : '8px';
 });
 
-var InputWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: ", ";\n    display: flex;\n    flex-grow: 1;\n"])), function (props) {
-  return props.size === _types.Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
-});
-
-var PrefixContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    margin-right: 4px;\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    ", "\n"])), function (props) {
+var PrefixContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  ", "\n  position: absolute;\n  padding: ", ";\n"])), function (props) {
   return props.size === _types.Size.Small ? '10px' : '11px';
 }, function (props) {
   return props.size === _types.Size.Small ? '20px' : '24px';
-}, _styles.COLORS.neutral_500, function (props) {
+}, function (props) {
+  return props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_500;
+}, function (props) {
   return props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null);
+}, function (props) {
+  return props.size === _types.Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
 });
 
-var OperatorWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    margin:", ";\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ", ";\n        width: 1px;\n    }\n"])), function (props) {
+var OperatorWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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 === _types.Size.Medium ? '4px 0' : '';
 }, _styles.COLORS.neutral_200);
 
-var NumberInput = _styledComponents.default.input(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%; \n    height: ", ";   \n    border: none;\n    color: ", ";\n    padding: 0;    \n    ", "\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n\n    &::placeholder {\n        ", "\n    }\n"])), function (props) {
-  return props.fieldSize === _types.Size.Small ? '20px' : '24px';
-}, _styles.COLORS.neutral_500, function (props) {
+var NumberInput = _styledComponents.default.input(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border: none;\n  border-radius: 4px;\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    cursor: not-allowed;\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    cursor: not-allowed;\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"])), _styles.COLORS.neutral_400, _styles.COLORS.neutral_500, function (props) {
   return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black);
+}, function (props) {
+  return props.type === 'NumberField' ? "\n        padding: ".concat(props.fieldSize === _types.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 === _types.Size.Small ? '14px 48px' : '16px 48px', ";\n    ") : '';
 }, function (props) {
   return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, null);
-});
+}, _styles.COLORS.primary_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_500, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
 
-var NoteLabel = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    ", "    \n"])), _styles.COLORS.neutral_500, function (props) {
+var NoteLabel = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", "\n"])), _styles.COLORS.neutral_500, function (props) {
   return props.size === _types.Size.Small ? (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null);
 });
 
-var NoteIcon = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n    svg {\n        height: 16px;\n    }\n"])));
+var NoteIcon = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    height: 16px;\n  }\n"])));
 
-var NoteContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ", " {\n            color: ", ";\n        }\n\n        ", " {\n            svg path {\n                fill: ", ";\n            }\n        }\n    }\n\n    &.invalid {\n        ", " {\n            color: ", ";\n        }\n\n        ", " {\n            svg path {\n                fill: ", ";\n            }\n        }\n    }\n"])), NoteLabel, _styles.COLORS.correct_500, NoteIcon, _styles.COLORS.correct_500, NoteLabel, _styles.COLORS.critical_500, NoteIcon, _styles.COLORS.critical_500);
+var NoteContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-top: 5px;\n\n  &.valid {\n    ", " {\n      color: ", ";\n    }\n\n    ", " {\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.invalid {\n    ", " {\n      color: ", ";\n    }\n\n    ", " {\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n"])), NoteLabel, _styles.COLORS.correct_500, NoteIcon, _styles.COLORS.correct_500, NoteLabel, _styles.COLORS.critical_500, NoteIcon, _styles.COLORS.critical_500);
 
-var InputContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 160px;\n    height: ", ";\n    display: flex;\n    border: 0;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ", ";\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &.disabled {\n        box-shadow: inset 0px 0px 0px 1px ", ";\n        cursor: not-allowed;\n        \n        ", "{\n            color: ", ";\n        }\n\n        ", "{\n            color: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n\n            &::placeholder {\n                color: ", ";\n            }\n        }\n    }\n\n    &.readOnly {\n        background: ", ";\n        box-shadow: inset 0px 0px 0px 1px ", ";\n        cursor: not-allowed;\n\n        ", "{\n            background: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n            color: ", ";\n        }\n    }\n\n    &.valid {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &.invalid {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n"])), function (props) {
+var InputContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n"])), function (props) {
+  return props.type === 'NumberField' ? '160px' : '144px';
+}, function (props) {
   return props.size === _types.Size.Small ? '48px' : '56px';
-}, _styles.COLORS.neutral_400, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, PrefixContainer, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_100, _styles.COLORS.neutral_500, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
-
-var NumberField = function NumberField(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Small : _ref$size,
-      label = _ref.label,
-      note = _ref.note,
-      noteIcon = _ref.noteIcon,
-      required = _ref.required,
-      prefix = _ref.prefix,
-      _ref$interval = _ref.interval,
-      interval = _ref$interval === void 0 ? 1 : _ref$interval,
-      minValue = _ref.minValue,
-      maxValue = _ref.maxValue,
-      allowNegative = _ref.allowNegative,
-      decimalPrecision = _ref.decimalPrecision,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      valid = _ref.valid,
-      defaultVal = _ref.defaultVal;
-
-  var _React$useState = React.useState(defaultVal ? defaultVal.toString() : ''),
+}, _styles.Z_INDEXES.focus);
+
+var LeftOperator = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) {
+  return props.size === _types.Size.Small ? '0' : '4px';
+});
+
+var RightOperator = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  right: 0;\n"])), function (props) {
+  return props.size === _types.Size.Small ? '0' : '4px';
+});
+
+var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$size = props.size,
+      size = _props$size === void 0 ? _types.Size.Small : _props$size,
+      label = props.label,
+      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,
+      type = props.type,
+      onChange = props.onChange,
+      className = props.className,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+
+  var _React$useState = React.useState(value ? value.toString() : ''),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       userInput = _React$useState2[0],
       setUserInput = _React$useState2[1];
 
-  var fieldState = valid !== undefined ? valid ? 'valid' : 'invalid' : undefined;
+  var elementRef = (0, _common.useFocusVisibleRef)();
+  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) {
@@ -140,19 +175,19 @@ var NumberField = function NumberField(_ref) {
 
     if (val !== '') {
       if (allowNegative && decimalPrecision) {
-        if (val.length === 1 && val.charAt(0) === '-') setUserInput(val);else {
-          if ((negativeAndDecimalRegex.test(val) || decimalPrecisionRegex.test(val)) && isInRange(val, true)) setUserInput(val);else if ((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true)) setUserInput(val);else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, true)) setUserInput(val);
+        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) === '-') setUserInput(val);else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, false)) setUserInput(val);
+        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)) setUserInput(val);else if (decimalFormationRegEx.test(val)) setUserInput(val);else if (!val.includes('.') && simpleRegex.test(val)) setUserInput(val);
+        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)) {
-        setUserInput(val);
+        setVal(val);
       }
     }
 
-    if (val === '') setUserInput('');
+    if (val === '') setVal('');
   };
 
   var isInRange = function isInRange(value, isDecimal) {
@@ -166,7 +201,7 @@ var NumberField = function NumberField(_ref) {
 
     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) setUserInput(val.toString());else if (!maxValue) setUserInput(val.toString());
+      if (maxValue && maxValue >= val) setVal(val.toString());else if (!maxValue) setVal(val.toString());
     }
   };
 
@@ -176,7 +211,12 @@ var NumberField = function NumberField(_ref) {
 
     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) allowNegative ? setUserInput(val.toString()) : val >= 0 ? setUserInput(val.toString()) : undefined;else if (!minValue) allowNegative ? setUserInput(val.toString()) : val >= 0 ? setUserInput(val.toString()) : undefined;
+
+      if (minValue && minValue <= val || !minValue) {
+        if (allowNegative || val >= 0) {
+          setVal(val.toString());
+        }
+      }
     }
   };
 
@@ -184,51 +224,25 @@ var NumberField = function NumberField(_ref) {
     var val = decimalPrecision ? parseFloat(input) : parseInt(input);
     val = isNaN(val) && userInput === '' ? 0 : val;
     var operatorState = false;
-    if (operator === 'add' && maxValue) operatorState = val < maxValue ? false : true;
-    if (operator === 'subtract' && minValue) operatorState = val > minValue ? false : true;
-    if (operator === 'subtract' && !minValue && !allowNegative) operatorState = val > 0 ? false : true;
+    if (operator === 'add' && maxValue) operatorState = val >= maxValue;
+    if (operator === 'subtract' && minValue) operatorState = val <= minValue;
+    if (operator === 'subtract' && !minValue && !allowNegative) operatorState = val <= 0;
     return operatorState;
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelContainer, {
-      size: size,
-      children: [required && /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelIcon, {
+  var renderNumberFieldElements = function renderNumberFieldElements() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(PrefixContainer, {
         size: size,
-        "data-testid": 'labelIcon',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Asterisk, {
-          color: _styles.COLORS.critical_500
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelText, {
-        children: label
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputContainer, {
-      size: size,
-      "data-testid": 'inputContainer',
-      tabIndex: -1,
-      className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(fieldState ? " ".concat(fieldState) : ''),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputWrapper, {
-        size: size,
-        children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(PrefixContainer, {
-          size: size,
-          children: prefix
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NumberInput, {
-          fieldSize: size,
-          placeholder: "Enter number",
-          value: userInput,
-          tabIndex: disabled || readOnly ? -1 : 0,
-          onChange: function onChange(e) {
-            return handleInput(e);
-          },
-          onKeyDown: function onKeyDown(e) {
-            return handleKeyPress(e);
-          }
-        })]
+        disabled: !!disabled,
+        className: "operator",
+        children: prefix
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(OperatorWrapper, {
         "data-testid": 'operators',
         size: size,
+        className: "operator",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          tabIndex: -1,
+          tabIndex: 0,
           variant: "secondary",
           shape: "square",
           action: function action() {
@@ -242,7 +256,7 @@ var NumberField = function NumberField(_ref) {
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "divider"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
-          tabIndex: -1,
+          tabIndex: 0,
           variant: "secondary",
           shape: "square",
           action: function action() {
@@ -255,8 +269,84 @@ var NumberField = function NumberField(_ref) {
           })
         })]
       })]
+    });
+  };
+
+  var renderNumberInputElements = function renderNumberInputElements() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LeftOperator, {
+        "data-testid": 'leftOperator',
+        size: size,
+        className: "operator",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          tabIndex: 0,
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return subtractInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'subtract'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Minus, {
+            size: "14px"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RightOperator, {
+        "data-testid": 'rightOperator',
+        size: size,
+        className: "operator",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          tabIndex: 0,
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return addInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'add'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Plus, {
+            size: "14px"
+          })
+        })
+      })]
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelContainer, {
+      size: size,
+      children: [required && /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelIcon, {
+        size: size,
+        "data-testid": 'labelIcon',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Asterisk, {
+          color: _styles.COLORS.critical_500
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelText, {
+        children: label
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputContainer, {
+      type: type,
+      size: size,
+      tabIndex: -1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NumberInput, _objectSpread({
+        type: type,
+        "data-testid": 'numberInput',
+        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);
+        },
+        className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(state ? " ".concat(state) : '').concat(className ? " ".concat(className) : '')
+      }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements()]
     }), note && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteContainer, {
-      className: 'noteField'.concat(fieldState ? " ".concat(fieldState) : ''),
+      className: 'noteField'.concat(state ? " ".concat(state) : ''),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NoteIcon, {
         children: noteIcon
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteLabel, {
@@ -265,23 +355,20 @@ var NumberField = function NumberField(_ref) {
       })]
     })]
   });
-};
-
+});
 NumberField.propTypes = {
   prefix: _propTypes.default.string,
   interval: _propTypes.default.number,
   label: _propTypes.default.string.isRequired,
   note: _propTypes.default.string,
   noteIcon: _propTypes.default.node,
-  required: _propTypes.default.bool,
   minValue: _propTypes.default.number,
   maxValue: _propTypes.default.number,
   allowNegative: _propTypes.default.bool,
   decimalPrecision: _propTypes.default.number,
-  disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  valid: _propTypes.default.bool,
-  defaultVal: _propTypes.default.number
+  type: _propTypes.default.oneOf(['NumberField', 'NumberInput']).isRequired,
+  value: _propTypes.default.number,
+  onChange: _propTypes.default.func
 };
 var _default = NumberField;
 exports.default = _default;