@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/src/InputFields/Label.js

@@ -1,83 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom styles.
- */
-import { BREAKPOINTS, COLORS } from '../styles';
-import { Size } from '../types';
-/**
- * Import third-party libraries.
- */
-import styled from 'styled-components';
-import { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';
-import { SystemIcons } from '../icons';
-// Add component-specific styles.
-var Label = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"], ["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
-var LabelRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"])));
-var CopyContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"], ["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), TypographyBase, COLORS.primary_800, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_600, TypographyBase, COLORS.neutral_300);
-var LabelRowInner = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"])));
-var CopyState;
-(function (CopyState) {
-    CopyState[CopyState["Disabled"] = 0] = "Disabled";
-    CopyState[CopyState["Available"] = 1] = "Available";
-    CopyState[CopyState["Copied"] = 2] = "Copied";
-})(CopyState || (CopyState = {}));
-var InputLabel = function (_a) {
-    var inputId = _a.inputId, text = _a.text, size = _a.size, margin = _a.margin, requiredProp = _a.required, showCopyButton = _a.showCopyButton;
-    // Globally used variables within the component
-    var _b = React.useState(false), required = _b[0], setRequired = _b[1];
-    var _c = React.useState(CopyState.Available), copyState = _c[0], setCopyState = _c[1];
-    /**
-     * Checks if field is set as required and we have to mark it accordingly.
-     */
-    React.useEffect(function () {
-        var _a;
-        if (requiredProp === undefined) {
-            if (((_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.getAttribute('required')) === '') {
-                setRequired(true);
-            }
-            else {
-                setRequired(false);
-            }
-        }
-        else
-            setRequired(Boolean(requiredProp));
-    }, []);
-    /**
-     * Triggers a click element on a specific element.
-     * @param id - ID of the element which needs to be clicked.
-     */
-    var onTriggerClick = function (id) {
-        var _a;
-        (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
-    };
-    var copyInputClick = function (e) {
-        var _a;
-        e.preventDefault();
-        if (copyState == CopyState.Copied)
-            return;
-        var val = (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.value;
-        if (val) {
-            window.navigator.clipboard.writeText(val);
-            setCopyState(CopyState.Copied);
-            setTimeout(function () {
-                setCopyState(CopyState.Available);
-            }, 1000);
-        }
-    };
-    return (React.createElement(LabelRow, { margin: margin },
-        React.createElement(LabelRowInner, { size: size },
-            React.createElement(Label, { htmlFor: inputId, onClick: function () { return onTriggerClick(inputId); }, className: size || '' }, text),
-            required && React.createElement(SystemIcons.Asterisk, { size: "16px", color: COLORS.critical_500 }),
-            showCopyButton &&
-                React.createElement(CopyContainer, { className: copyState != CopyState.Available ? "disabled" : "", onClick: copyInputClick }, size == Size.Medium ? React.createElement(ComponentXS, null, copyState == CopyState.Copied ? 'Copied' : 'Copy') :
-                    React.createElement(ComponentXXS, null, copyState == CopyState.Copied ? 'Copied' : 'Copy')))));
-};
-export default InputLabel;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/InputFields/NumberField.d.ts

@@ -1,62 +0,0 @@
-import * as React from 'react';
-import { Size, States, Testable } from '../types';
-export interface NumberFieldProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown' | 'onClick' | 'tabIndex' | 'size' | 'value' | 'prefix' | 'min' | 'max'> {
-    /**
-     * Optional. The size of the number field. Can be 'Small' or 'Medium'.
-     */
-    size?: Size.Small | Size.Medium;
-    /**
-     * Optional. The prefix to be displayed before the number in the field.
-     */
-    prefix?: string;
-    /**
-     * Optional. The interval for incrementing and decrementing the number in the field.
-     */
-    interval?: number;
-    /**
-     * Optional. The minimum value that can be entered in the field.
-     */
-    minValue?: number;
-    /**
-     * Optional. The maximum value that can be entered in the field.
-     */
-    maxValue?: number;
-    /**
-     * Optional. A boolean indicating whether negative numbers are allowed.
-     */
-    allowNegative?: boolean;
-    /**
-     * Optional. The number of decimal places allowed in the number.
-     */
-    decimalPrecision?: number;
-    /**
-     * Optional. The state of the number field. Can be 'Valid' or 'Invalid'.
-     */
-    state?: States.Valid | States.Invalid;
-    /**
-     * Optional. A note to be displayed below the number field.
-     */
-    note?: string;
-    /**
-     * Optional. An icon to be displayed next to the note.
-     */
-    noteIcon?: React.ReactNode;
-    /**
-     * Optional. The type of the number field. Can be 'NumberField' or 'NumberInput'.
-     */
-    type?: 'NumberField' | 'NumberInput';
-    /**
-     * Optional. The current value of the number field.
-     */
-    value?: number;
-    /**
-     * Optional. A function to be called when the value of the number field changes.
-     */
-    onChange?: (e: number) => void;
-    /**
-     * Optional. The position of the tooltip when the number overflows. Can be 'top' or 'bottom'.
-     */
-    overflowTooltipPosition?: 'top' | 'bottom';
-}
-declare const NumberField: React.ForwardRefExoticComponent<NumberFieldProps & React.RefAttributes<HTMLInputElement>>;
-export default NumberField;

package/dist/src/InputFields/NumberField.js

@@ -1,194 +0,0 @@
-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;

package/dist/src/InputFields/PasswordField.d.ts

@@ -1,103 +0,0 @@
-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'> & {
-    /**
-     * Required. The ID of the password field.
-     */
-    id: string;
-    /**
-     * Optional. A boolean indicating whether the password field is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Optional. A function to be called when the value of the password field changes.
-     */
-    onChange?: (text: string) => void;
-    /**
-     * Optional. A boolean indicating whether the password field is invalid.
-     */
-    invalid?: boolean;
-    /**
-     * Optional. The current value of the password field.
-     */
-    value?: string;
-    /**
-     * Optional. The validation message to be displayed when the password field is invalid.
-     */
-    validationMessage?: string;
-    /**
-     * Optional. The autocomplete attribute for the password field.
-     */
-    autoComplete?: string;
-    /**
-     * Optional. The placeholder text for the password field.
-     */
-    placeholder?: string;
-    /**
-     * Optional. A boolean indicating whether the password field is required.
-     */
-    required?: boolean;
-    /**
-     * Optional. A boolean indicating whether the password field is read-only.
-     */
-    readOnly?: boolean;
-    /**
-     * Optional. The size of the password field. Can be 'Small' or 'Medium'.
-     */
-    size?: Size.Small | Size.Medium;
-    /**
-     * Optional. The margin of the password field. Can be any valid CSS margin value.
-     */
-    margin?: string;
-};
-declare const PasswordField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "id" | "tabIndex" | "onChange" | "size" | "disabled" | "autoComplete" | "placeholder" | "readOnly" | "required"> & {
-    /**
-     * Required. The ID of the password field.
-     */
-    id: string;
-    /**
-     * Optional. A boolean indicating whether the password field is disabled.
-     */
-    disabled?: boolean | undefined;
-    /**
-     * Optional. A function to be called when the value of the password field changes.
-     */
-    onChange?: ((text: string) => void) | undefined;
-    /**
-     * Optional. A boolean indicating whether the password field is invalid.
-     */
-    invalid?: boolean | undefined;
-    /**
-     * Optional. The current value of the password field.
-     */
-    value?: string | undefined;
-    /**
-     * Optional. The validation message to be displayed when the password field is invalid.
-     */
-    validationMessage?: string | undefined;
-    /**
-     * Optional. The autocomplete attribute for the password field.
-     */
-    autoComplete?: string | undefined;
-    /**
-     * Optional. The placeholder text for the password field.
-     */
-    placeholder?: string | undefined;
-    /**
-     * Optional. A boolean indicating whether the password field is required.
-     */
-    required?: boolean | undefined;
-    /**
-     * Optional. A boolean indicating whether the password field is read-only.
-     */
-    readOnly?: boolean | undefined;
-    /**
-     * Optional. The size of the password field. Can be 'Small' or 'Medium'.
-     */
-    size?: Size.Small | Size.Medium | undefined;
-    /**
-     * Optional. The margin of the password field. Can be any valid CSS margin value.
-     */
-    margin?: string | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-export default PasswordField;

package/dist/src/InputFields/PasswordField.js

@@ -1,60 +0,0 @@
-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 styled from 'styled-components';
-import { COLORS } from '../styles';
-import { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';
-import { Z_INDEXES } from '../styles';
-import { useFocusVisibleRef } from '../common';
-import { IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-var StyledPassSwitch = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n  right: 0;\n  position: absolute;\n"], ["\n  z-index: ", ";\n  right: 0;\n  position: absolute;\n"])), Z_INDEXES.badge);
-var PasswordRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var PasswordField = React.forwardRef(function (_a, ref) {
-    var id = _a.id, disabled = _a.disabled, onChange = _a.onChange, invalid = _a.invalid, value = _a.value, validationMessage = _a.validationMessage, autoComplete = _a.autoComplete, placeholder = _a.placeholder, required = _a.required, readOnly = _a.readOnly, size = _a.size, margin = _a.margin, className = _a.className, dataTestId = _a.dataTestId, _b = _a.name, name = _b === void 0 ? 'password' : _b, rest = __rest(_a, ["id", "disabled", "onChange", "invalid", "value", "validationMessage", "autoComplete", "placeholder", "required", "readOnly", "size", "margin", "className", "dataTestId", "name"]);
-    var _c = React.useState(true), passwordHidden = _c[0], setPasswordHidden = _c[1];
-    var inputRef = useFocusVisibleRef();
-    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
-    var handleKeyDown = function (e) {
-        if (e.keyCode === 13) {
-            setPasswordHidden(!passwordHidden);
-        }
-    };
-    var cls = "".concat(invalid ? 'invalid' : '', "  ").concat(size || '', " ").concat(className);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InputWrapper, { disabled: disabled, readOnly: readOnly, margin: margin },
-            React.createElement(PasswordRow, null,
-                React.createElement(InputFieldStyling, __assign({ id: id, "data-testid": dataTestId, ref: inputRef, type: passwordHidden ? 'password' : 'text', name: name, value: value, className: cls, tabIndex: disabled || readOnly ? -1 : 0, autoComplete: autoComplete, activeErrorMessage: !!validationMessage, placeholder: placeholder, disabled: disabled, required: required, readOnly: readOnly, onChange: function (e) { var _a; return onChange && onChange(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || ''); } }, rest)),
-                React.createElement(StyledPassSwitch, { className: size ? size : '' }, !disabled && !readOnly ? (passwordHidden ? (React.createElement(IconButton, { id: "".concat(id, "_Visible"), iconColor: '#666666', variant: 'secondary', shape: 'circular', onKeyPress: handleKeyDown, action: function () { return setPasswordHidden(!passwordHidden); } },
-                    React.createElement(SystemIcons.VisibleOff, null))) : (React.createElement(IconButton, { id: "".concat(id, "_NotVisible"), iconColor: '#666666', variant: 'secondary', shape: 'circular', onKeyPress: handleKeyDown, action: function () { return setPasswordHidden(!passwordHidden); } },
-                    React.createElement(SystemIcons.VisibleOn, null)))) : null))),
-        validationMessage && (React.createElement(ErrorMessage, { className: size || '' },
-            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
-            React.createElement("span", null, validationMessage)))));
-});
-export default PasswordField;
-var templateObject_1, templateObject_2;

package/dist/src/InputFields/QuickSearch.d.ts

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { Size } from '../types';
-export declare type QuickSearchProps = {
-    /** Required. Id of the component. */
-    id: string;
-    /** Optional. Current search term entered by the user. */
-    searchTerm?: string;
-    /** Required. Handler to be called when user modified input. */
-    setSearchTerm: (term: string) => void;
-    /** Required. Handler to be called when user triggers search. */
-    enterSearch: (e: any) => void;
-    /** Required. Handler to be called when user clears input field. */
-    removeSearch: (e: any) => void;
-    /** Optional. Placeholder text to be shown in the input field when there is no input. */
-    placeholder?: string;
-    /** Optional. ARIA label to set on the input field. */
-    performSearchLabel?: string;
-    /** Optional. If disabled user can not interact with the search bar. */
-    disabled?: boolean;
-    /** Optional. Optional onkeydown handler to be set on the input field. */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    /** Optional. Size of the component. Defaults to 'medium'.   */
-    size?: Size.Small | Size.Medium;
-    /** Optional. Margin style attribute to be set on the input field. */
-    margin?: string;
-    /** Optional. If set then loading indicator will be shown on the right side of the input field. */
-    loading?: boolean;
-};
-declare const QuickSearch: React.FunctionComponent<QuickSearchProps>;
-export default QuickSearch;