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

package/dist/src/InputFields/NumberField.js

@@ -0,0 +1,194 @@
+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,6 +1,6 @@
 import * as React from 'react';
 import { Size, Testable } from '../types';
-export type PasswordFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'> & {
+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.
      */

package/dist/src/InputFields/PasswordField.js

@@ -0,0 +1,60 @@
+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,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-export type QuickSearchProps = {
+export declare type QuickSearchProps = {
     /** Required. Id of the component. */
     id: string;
     /** Optional. Current search term entered by the user. */

package/dist/src/InputFields/QuickSearch.js

@@ -0,0 +1,92 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';
+import { SearchIconWrapper, StyledIcon } from './styling';
+import { Size } from '../types';
+import { COLORS, LoadingIndicator } from '..';
+import { SystemIcons } from '../icons';
+import SearchBarInput from './components/SearchBarInput';
+import SearchField, { StyledSearchField } from './components/SearchField';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n\n  ", " {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n\n  ", " {\n    pointer-events: ", ";\n  }\n"], ["\n  width: 100%;\n\n  ", " {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n\n  ", " {\n    pointer-events: ", ";\n  }\n"])), StyledSearchField, COLORS.white, COLORS.neutral_400, COLORS.primary_800, IconButtonStyledSecondary, function (props) { return (props.shouldNotInteract ? 'none' : 'auto'); });
+var QuickSearch = function (_a) {
+    var id = _a.id, searchTerm = _a.searchTerm, setSearchTerm = _a.setSearchTerm, enterSearch = _a.enterSearch, removeSearch = _a.removeSearch, placeholder = _a.placeholder, performSearchLabel = _a.performSearchLabel, disabled = _a.disabled, onKeyDown = _a.onKeyDown, size = _a.size, margin = _a.margin, loading = _a.loading;
+    var searchFieldRef = React.useRef(null);
+    var searchFieldInputRef = React.useRef(null);
+    var _b = React.useState({
+        visible: false,
+    }), searchFieldVisible = _b[0], setSearchFieldVisible = _b[1];
+    var handleClickOutside = function (e) {
+        if ((searchFieldRef === null || searchFieldRef === void 0 ? void 0 : searchFieldRef.current) && !searchFieldRef.current.contains(e.target)) {
+            if ((searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && !(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length)) {
+                setSearchFieldVisible({ visible: false });
+            }
+        }
+    };
+    var handleKeyDown = function (e) {
+        if (onKeyDown) {
+            onKeyDown(e);
+        }
+        if (e.key === 'Escape') {
+            if ((searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && !(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length)) {
+                setSearchFieldVisible({ visible: false });
+            }
+        }
+    };
+    var handleBlur = function (e) {
+        var _a;
+        if (!searchTerm && (!e.relatedTarget || !((_a = searchFieldRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)))) {
+            setSearchFieldVisible({ visible: false });
+        }
+    };
+    var handleSearchIconAction = function (e) {
+        if (!(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible)) {
+            setSearchFieldVisible({
+                visible: !searchFieldVisible.visible,
+                focus: !searchFieldVisible.visible && (e === null || e === void 0 ? void 0 : e.detail) !== 1,
+            });
+        }
+    };
+    // set search field visibility on search term change
+    React.useEffect(function () {
+        if (!!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) && !(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible)) {
+            setSearchFieldVisible({ visible: true, focus: false });
+        }
+    }, [searchTerm, searchFieldVisible]);
+    // register click outside handler
+    React.useEffect(function () {
+        document.addEventListener('click', handleClickOutside);
+        return function () {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+    // focus search input on visibility change
+    React.useEffect(function () {
+        var _a;
+        if (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) {
+            (_a = searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : searchFieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: searchFieldVisible.focus });
+        }
+    }, [searchFieldVisible.visible, searchFieldInputRef]);
+    return (React.createElement(Wrapper, { shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible },
+        React.createElement(SearchField, { ref: searchFieldRef, id: id, size: size, searchTerm: searchTerm, style: {
+                margin: margin,
+            }, onBlur: handleBlur, className: (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) ? 'expanded' : '' },
+            (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && (React.createElement(SearchBarInput, { placeholder: disabled ? '' : placeholder, id: id, ref: searchFieldInputRef, disabled: disabled, onKeyDown: handleKeyDown, size: size, setSearchTerm: function (term) { return setSearchTerm(term); }, searchTerm: searchTerm, enterSearch: enterSearch, focusParentRefs: [searchFieldRef] })),
+            React.createElement(SearchIconWrapper, { className: size ? size : '', role: "button", "aria-label": performSearchLabel },
+                React.createElement(IconButton, { id: "".concat(id, "_Searchbutton"), dataTestId: "".concat(id, "_Searchbutton"), variant: "secondary", shape: "circular", tabIndex: (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) ? -1 : 0, action: handleSearchIconAction },
+                    React.createElement(SystemIcons.Search, { size: "24px", color: disabled ? COLORS.neutral_300 : COLORS.neutral_600 }))),
+            React.createElement(StyledIcon, { className: size ? size : '', role: "button", hidden: !searchTerm || !(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) },
+                React.createElement(IconButton, { id: "".concat(id, "_Clearicon"), dataTestId: "".concat(id, "_Clearicon"), variant: "secondary", shape: "circular", action: function (e) {
+                        var _a;
+                        removeSearch(e);
+                        (_a = searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : searchFieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    } },
+                    React.createElement(SystemIcons.Clear, { size: "24px", color: disabled ? COLORS.neutral_300 : COLORS.neutral_600 }))),
+            loading && (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && (React.createElement(StyledIcon, { className: size ? size : '' },
+                React.createElement(LoadingIndicator, { size: Size.Small, color: COLORS.neutral_600 }))))));
+};
+export default QuickSearch;
+var templateObject_1;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size, Testable } from '../types';
-export type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {
+export declare type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {
     /** Optional. Id of the component */
     id?: string;
     /** Required. Current state of the component. */

package/dist/src/InputFields/RadioButton.js

@@ -0,0 +1,54 @@
+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 { SystemIcons } from '../icons';
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
+import { Size } from '../types';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+var StyledRadioButton = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) { return (props.margin ? "margin: ".concat(props.margin, ";") : ''); }, COLORS.black, function (props) { return (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600); }, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_700);
+var RadioButton = React.forwardRef(function (_a, ref) {
+    var id = _a.id, selected = _a.selected, label = _a.label, additionalLabel = _a.additionalLabel, invalid = _a.invalid, select = _a.select, disabled = _a.disabled, margin = _a.margin, iconPointerEventsTransparent = _a.iconPointerEventsTransparent, size = _a.size, tabIndexVal = _a.tabIndexVal, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"]);
+    var onKeyPress = function (e) {
+        if (e.keyCode === 13 && !disabled) {
+            select(!selected);
+        }
+    };
+    size = size !== null && size !== void 0 ? size : Size.Medium;
+    var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
+    return (React.createElement(StyledRadioButton, __assign({ key: id, margin: margin, ref: ref, onClick: function () { return !disabled && select(!selected); }, onMouseDown: defaultOnMouseDownHandler, onKeyDown: onKeyPress, disabled: disabled, className: cls, tabIndex: disabled ? -1 : (tabIndexVal ? tabIndexVal : 0), invalid: invalid, selected: selected }, rest),
+        React.createElement("div", { className: 'radio-button-icon', id: id, "data-testid": dataTestId },
+            selected && React.createElement(SystemIcons.RadioButtonOn, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" }),
+            !selected &&
+                React.createElement(SystemIcons.RadioButtonOff, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" })),
+        React.createElement("div", { className: 'radio-button-label' },
+            label && React.createElement("label", { htmlFor: id }, label),
+            additionalLabel !== undefined && React.createElement("span", null, additionalLabel))));
+});
+export default RadioButton;
+var templateObject_1;

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

@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import { Size } from '../types';
-type LabelProps = {
+declare type LabelProps = {
     size?: Size.Small | Size.Medium;
     children?: any;
 };

package/dist/src/InputFields/ResponsiveComponentWrapper.js

@@ -0,0 +1,24 @@
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+/**
+ * Import custom styles.
+ */
+import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';
+var ReponsiveComponentWrapper = function (_a) {
+    var children = _a.children, size = _a.size;
+    // Globally used variables within the component
+    var _b = React.useState(false), isMediumView = _b[0], setIsMediumView = _b[1];
+    React.useEffect(function () {
+        var handleResize = function () {
+            var mql = window.matchMedia("".concat(BREAKPOINTS.MEDIUM.replace('@media ', '')));
+            setIsMediumView(mql.matches);
+        };
+        window.addEventListener('resize', handleResize);
+        return function () { return window.removeEventListener('resize', handleResize); };
+    }, []);
+    return size && size === Size.Medium ? (React.createElement(ComponentXS, null, children)) : size && size === Size.Small ? (React.createElement(ComponentXXS, null, children)) : isMediumView ? (React.createElement(ComponentXS, null, children)) : (React.createElement(ComponentXXS, null, children));
+};
+export default ReponsiveComponentWrapper;

package/dist/src/InputFields/RichTextField.js

@@ -0,0 +1,83 @@
+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 React from 'react';
+import ReactQuill from "react-quill";
+import styled from "styled-components";
+import { NoteMessage, readOnlyState, ValidationMessage } from "./styling";
+import { Size, States } from "../types";
+import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling } from "../styles";
+import { CheckMark, TechnicalWarning } from "../icons/systemicons";
+import 'react-quill/dist/quill.snow.css';
+export var RichTextFieldContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"], ["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_400, COLORS.correct_500, COLORS.critical_500, COLORS.primary_700, COLORS.primary_800, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.neutral_200, scrollBarStyling(Size.Small), readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300);
+export var RichTextFieldFormats;
+(function (RichTextFieldFormats) {
+    RichTextFieldFormats["Background"] = "background";
+    RichTextFieldFormats["Bold"] = "bold";
+    RichTextFieldFormats["Color"] = "color";
+    RichTextFieldFormats["Font"] = "font";
+    RichTextFieldFormats["Code"] = "code";
+    RichTextFieldFormats["Italic"] = "italic";
+    RichTextFieldFormats["Link"] = "link";
+    RichTextFieldFormats["Size"] = "size";
+    RichTextFieldFormats["Strike"] = "strike";
+    RichTextFieldFormats["Script"] = "script";
+    RichTextFieldFormats["Underline"] = "underline";
+    RichTextFieldFormats["Blockquote"] = "blockquote";
+    RichTextFieldFormats["Header"] = "header";
+    RichTextFieldFormats["Indent"] = "indent";
+    RichTextFieldFormats["List"] = "list";
+    RichTextFieldFormats["Align"] = "align";
+    RichTextFieldFormats["Direction"] = "direction";
+    RichTextFieldFormats["CodeBlock"] = "code-block";
+    RichTextFieldFormats["Formula"] = "formula";
+    RichTextFieldFormats["Image"] = "image";
+    RichTextFieldFormats["Video"] = "video";
+})(RichTextFieldFormats || (RichTextFieldFormats = {}));
+var defaultToolBarOptions = [
+    [{ header: [1, 2, 3, false] }],
+    ['bold', 'italic', 'underline', 'strike'],
+    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+    ['link'],
+    ['clean']
+];
+export var RichTextField = React.forwardRef(function (_a, ref) {
+    var _b;
+    var readOnly = _a.readOnly, disabled = _a.disabled, validationMessage = _a.validationMessage, note = _a.note, _c = _a.size, size = _c === void 0 ? Size.Medium : _c, state = _a.state, resizable = _a.resizable, modules = _a.modules, formats = _a.formats, rest = __rest(_a, ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"]);
+    var m = __assign(__assign({}, (modules !== null && modules !== void 0 ? modules : {})), { toolbar: (_b = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _b !== void 0 ? _b : defaultToolBarOptions });
+    var f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(function (a) { return a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula; });
+    return (React.createElement(RichTextFieldContainer, { className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', "  ").concat(disabled ? 'disabled' : '') },
+        React.createElement(ReactQuill, __assign({ ref: ref, readOnly: readOnly || disabled, modules: m, theme: 'snow', formats: f }, rest)),
+        validationMessage && (React.createElement(ValidationMessage, { className: size || '', type: state !== null && state !== void 0 ? state : States.Invalid },
+            state === States.Valid
+                ? React.createElement(CheckMark, { color: COLORS.correct_400 })
+                : React.createElement(TechnicalWarning, { color: COLORS.critical_400 }),
+            React.createElement("span", null, validationMessage))),
+        note && !disabled && (React.createElement(NoteMessage, { className: size },
+            note.icon,
+            React.createElement("span", null, note.message)))));
+});
+var templateObject_1;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Size } from '../types';
 import { DropdownItem } from '../Dropdown';
-export type SearchBarProps = {
+export declare type SearchBarProps = {
     /**
      * Required. The ID of the search bar.
      */