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

package/dist/src/InputFields/SearchBar.js

@@ -0,0 +1,63 @@
+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 from 'react';
+import { COLORS } from '../styles/index';
+import { SystemIcons } from '../icons';
+import { ErrorMessage, InputWrapper, SearchIconWrapper } from './styling';
+import { IconButton } from '../Button';
+import SearchBarInput from './components/SearchBarInput';
+import SearchField from './components/SearchField';
+import styled from 'styled-components';
+import { DropdownContent } from '../Dropdown';
+import { useClickOutsideRef } from '../common';
+var ClearIconWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
+var SearchBar = 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, validationMessage = _a.validationMessage, onKeyDown = _a.onKeyDown, size = _a.size, margin = _a.margin, showDropdown = _a.showDropdown, dropdownButtonIcon = _a.dropdownButtonIcon, dropdownButtonLabel = _a.dropdownButtonLabel, dropdownButtonVariant = _a.dropdownButtonVariant, dropdownButtonAction = _a.dropdownButtonAction, _b = _a.searchList, searchList = _b === void 0 ? [] : _b, addToSearchList = _a.addToSearchList, dropdownScrollable = _a.dropdownScrollable;
+    var containerRef = React.useRef(null);
+    var topLevelRef = React.useRef(null);
+    var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
+    var dropdownRef = useClickOutsideRef(function () { return setIsOpen(false); }, [containerRef, topLevelRef]);
+    var isPressingEnter = function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            return true;
+        }
+        return false;
+    };
+    var enteredSearchTerm = function (e) {
+        addToSearchList && addToSearchList({ value: e.target.value });
+        enterSearch(e);
+    };
+    var dropdownAction = function () {
+        if (dropdownButtonAction)
+            dropdownButtonAction();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputWrapper, { disabled: disabled, ref: topLevelRef, margin: margin },
+            React.createElement(SearchField, { id: 'id', size: size, ref: containerRef, searchTerm: searchTerm, disabled: disabled, validationMessage: validationMessage },
+                React.createElement(SearchBarInput, { placeholder: disabled ? '' : placeholder, id: id, size: size, disabled: disabled, setSearchTerm: function (term) { return setSearchTerm(term); }, searchTerm: searchTerm, onKeyDown: onKeyDown, enterSearch: enteredSearchTerm, focusParentRefs: [containerRef], onClick: function () { return setIsOpen(!isOpen); }, ref: dropdownRef }),
+                React.createElement(SearchIconWrapper, { className: size ? size : '', "aria-label": performSearchLabel },
+                    React.createElement(IconButton, { id: "".concat(id, "_Search"), variant: "secondary", shape: "circular", action: enterSearch, disabled: disabled, onKeyPress: function (e) { return (isPressingEnter(e) ? enterSearch(e) : null); } },
+                        React.createElement(SystemIcons.Search, { size: "24px" }))),
+                React.createElement(ClearIconWrapper, { className: (size ? size : '').concat(!searchTerm ? ' hidden' : '') },
+                    React.createElement(IconButton, { id: "".concat(id, "_Clear"), variant: "secondary", shape: "circular", action: removeSearch, disabled: disabled, onKeyPress: function (e) { return (isPressingEnter(e) ? removeSearch(e) : null); } },
+                        React.createElement(SystemIcons.Clear, { size: "24px" })))),
+            showDropdown && React.createElement(DropdownContent, { id: 'search', containerRef: containerRef, size: size, isButton: false, ariaRolesType: "input", customizationProps: {
+                    items: searchList,
+                    action: dropdownAction,
+                    actionLabel: dropdownButtonLabel,
+                    actionIcon: dropdownButtonIcon,
+                    actionVariant: dropdownButtonVariant,
+                    onValueUpdate: function (e) { },
+                    scrollable: dropdownScrollable,
+                    pinTopItem: true
+                }, isOpen: isOpen, setIsOpen: setIsOpen, filter: '', selectedValues: searchTerm ? [searchTerm] : [], setSelectedValues: function (e) { return setSearchTerm(e[0]); }, messageOnNoResults: '', focused: null, setFocused: function () { } })),
+        validationMessage && (React.createElement(ErrorMessage, { className: size || '' },
+            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400, className: size || '' }),
+            React.createElement("span", null, validationMessage)))));
+};
+export default SearchBar;
+var templateObject_1;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size, States, Testable } from '../types';
 import { TextFieldNote } from './types';
-export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
+export declare type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
     /**
        * Optional. The ID of the text field.
        */

package/dist/src/InputFields/TextField.js

@@ -0,0 +1,51 @@
+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 { SystemIcons } from '../icons';
+import { COLORS } from '../styles';
+import { States } from '../types';
+import { InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage } from './styling';
+import { useFocusVisibleRef } from '../common';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
+var TextField = React.forwardRef(function (_a, ref) {
+    var id = _a.id, disabled = _a.disabled, readOnly = _a.readOnly, onChange = _a.onChange, value = _a.value, validationMessage = _a.validationMessage, type = _a.type, autoComplete = _a.autoComplete, placeholder = _a.placeholder, required = _a.required, pattern = _a.pattern, maxLength = _a.maxLength, withoutBorder = _a.withoutBorder, state = _a.state, size = _a.size, margin = _a.margin, overflowTooltipPosition = _a.overflowTooltipPosition, note = _a.note, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"]);
+    var elementRef = useFocusVisibleRef();
+    React.useImperativeHandle(ref, function () { return elementRef.current; }, [elementRef]);
+    var cls = "".concat(state || (validationMessage ? States.Invalid : ''), " ").concat(size || '');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputWrapper, { readOnly: readOnly, disabled: disabled, margin: margin, onClick: function (e) {
+                if (disabled || readOnly) {
+                    e.preventDefault();
+                }
+            } },
+            React.createElement(InputFieldStyling, __assign({ id: id, "data-testid": dataTestId, ref: elementRef, type: type || 'text', value: value, className: cls, tabIndex: readOnly || disabled ? -1 : 0, autoComplete: autoComplete, placeholder: disabled ? undefined : placeholder, disabled: disabled, 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) || ''); }, activeErrorMessage: !!validationMessage && state !== States.Valid, required: required, pattern: pattern, maxLength: maxLength, withoutBorder: withoutBorder }, rest)),
+            React.createElement(TooltipOverflow, { value: value, position: overflowTooltipPosition, input: elementRef, withArrow: true, maxWidth: "100%", size: size, align: 'end' }, value),
+            validationMessage && (React.createElement(ValidationMessage, { className: size || '', type: state !== null && state !== void 0 ? state : States.Invalid },
+                state === States.Valid ? React.createElement(SystemIcons.CheckMark, { color: COLORS.correct_400 }) :
+                    React.createElement(SystemIcons.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))))));
+});
+export default TextField;

package/dist/src/InputFields/Textarea.js

@@ -0,0 +1,65 @@
+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 libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom styles.
+ */
+import { COLORS, ComponentSStyling, focusStyles } from '../styles';
+import { NoteMessage, readOnlyState, ValidationMessage } from './styling';
+import { States } from '../types';
+/**
+ * Import custom components.
+ */
+import { SystemIcons } from '../icons';
+/**
+ * Import third-party libraries.
+ */
+import styled from 'styled-components';
+import { ComponentMStyling, ComponentTextStyle } from '../styles';
+import { useFocusVisibleRef } from "../common";
+// Add component-specific styles.
+var TextareaWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  ", "\n"], ["\n  width: 100%;\n  ", "\n"])), function (props) { return (props.margin ? "margin: ".concat(props.margin, ";") : ''); });
+var TextArea = styled.textarea(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  resize: ", ";\n\n  ", "\n  &.small {\n    ", "\n    width: 304px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    &::placeholder {\n      ", "\n    }\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    box-shadow: none !important;\n    color: ", " !important;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"], ["\n  display: block;\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  resize: ", ";\n\n  ", "\n  &.small {\n    ", "\n    width: 304px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    &::placeholder {\n      ", "\n    }\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    box-shadow: none !important;\n    color: ", " !important;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), COLORS.white, COLORS.neutral_400, function (props) { return (props.autoHeight ? 'none' : ''); }, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_800, focusStyles, COLORS.critical_500, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800, readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
+var Textarea = React.forwardRef(function (_a, ref) {
+    var id = _a.id, placeholder = _a.placeholder, state = _a.state, value = _a.value, size = _a.size, disabled = _a.disabled, validationMessage = _a.validationMessage, onChange = _a.onChange, margin = _a.margin, autoHeight = _a.autoHeight, note = _a.note, required = _a.required, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className", "dataTestId"]);
+    var elementRef = useFocusVisibleRef();
+    React.useImperativeHandle(ref, function () { return elementRef.current; }, [elementRef]);
+    var cls = "".concat(size, " ").concat(state || (validationMessage ? States.Invalid : ''), " ").concat(className || '');
+    return (React.createElement(TextareaWrapper, null,
+        React.createElement(TextArea, __assign({ id: id, "data-testid": dataTestId, ref: elementRef, value: value, placeholder: disabled ? undefined : placeholder, autoHeight: autoHeight, className: cls, disabled: disabled, 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) || ''); }, required: required }, rest)),
+        validationMessage && (React.createElement(ValidationMessage, { className: size || '', type: state !== null && state !== void 0 ? state : States.Invalid },
+            state === States.Valid ? React.createElement(SystemIcons.CheckMark, { color: COLORS.correct_400 }) : React.createElement(SystemIcons.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)))));
+});
+export default Textarea;
+var templateObject_1, templateObject_2;

package/dist/src/InputFields/components/SearchBarInput.d.ts

@@ -3,7 +3,7 @@ import { Size } from '../../types';
 export declare const Search: import("styled-components").StyledComponent<"input", any, {
     type: "search";
 }, "type">;
-type SearchBarInputProps = {
+declare type SearchBarInputProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;

package/dist/src/InputFields/components/SearchBarInput.js

@@ -0,0 +1,26 @@
+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 { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+import { useFocusVisibleRef } from '../../common';
+export var Search = styled.input.attrs(function () { return ({ type: 'search' }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ", "\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ", "\n    \n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"], ["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ", "\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ", "\n    \n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
+var SearchBarInput = React.forwardRef(function (props, ref) {
+    var id = props.id, searchTerm = props.searchTerm, setSearchTerm = props.setSearchTerm, enterSearch = props.enterSearch, placeholder = props.placeholder, disabled = props.disabled, onKeyDown = props.onKeyDown, size = props.size, onBlur = props.onBlur, onClick = props.onClick;
+    var elementRef = useFocusVisibleRef(props.focusParentRefs || []);
+    React.useImperativeHandle(ref, function () { return elementRef.current; }, [elementRef]);
+    var isPressingEnter = function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            return true;
+        }
+        return false;
+    };
+    return (React.createElement(Search, { placeholder: disabled ? '' : placeholder, ref: elementRef, id: id, "data-testid": id, className: size ? size : '', tabIndex: 0, disabled: disabled, onChange: function (e) { return setSearchTerm(e.target.value); }, value: searchTerm, onBlur: function (e) { return onBlur && onBlur(e); }, onKeyDown: onKeyDown, onKeyPress: function (e) { return (isPressingEnter(e) ? enterSearch(e) : null); }, onClick: onClick }));
+});
+export default SearchBarInput;
+var templateObject_1;

package/dist/src/InputFields/components/SearchField.js

@@ -0,0 +1,44 @@
+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 { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+export var SearchFieldWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.focus-visible-within {\n    ", "\n  }\n"], ["\n  &.focus-visible-within {\n    ", "\n  }\n"])), focusStyles);
+export var StyledSearchField = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_800, COLORS.primary_800, COLORS.neutral_600, COLORS.critical_400, COLORS.neutral_100);
+var SearchField = React.forwardRef(function (_a, ref) {
+    var id = _a.id, searchTerm = _a.searchTerm, disabled = _a.disabled, validationMessage = _a.validationMessage, children = _a.children, size = _a.size, className = _a.className, rest = __rest(_a, ["id", "searchTerm", "disabled", "validationMessage", "children", "size", "className"]);
+    var cls = (disabled ? 'disabled ' : '')
+        .concat(searchTerm !== '' ? 'searchactive ' : '')
+        .concat(size ? "".concat(size, " ") : '')
+        .concat(validationMessage ? ' invalid ' : '')
+        .concat("".concat(className !== null && className !== void 0 ? className : '', " "));
+    return (React.createElement(SearchFieldWrapper, { ref: ref },
+        React.createElement(StyledSearchField, __assign({ id: "".concat(id, "_main"), "data-testid": "".concat(id, "_main"), className: cls }, rest), children)));
+});
+export default SearchField;
+var templateObject_1, templateObject_2;

package/dist/src/InputFields/index.js

@@ -0,0 +1,13 @@
+import TextField from './TextField';
+import PasswordField from './PasswordField';
+import Checkbox from './Checkbox';
+import RadioButton from './RadioButton';
+import SearchBar from './SearchBar';
+import InputLabel from './Label';
+import DatepickerField from './DatepickerField';
+import Textarea from './Textarea';
+import QuickSearch from './QuickSearch';
+import NumberField from './NumberField';
+export * from './styling';
+export * from './RichTextField';
+export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };

package/dist/src/InputFields/styling.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var _a;
+import { TooltipTrigger } from '../Tooltips/TooltipStyles';
+import styled, { css } from 'styled-components';
+import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
+import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';
+import { States } from '../types';
+export var InputWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"], ["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), function (props) { return (props.readOnly || props.disabled ? 'cursor: not-allowed;' : ''); }, function (props) { return (props.margin ? "margin: ".concat(props.margin, ";") : ''); }, TooltipTrigger('hover'));
+export var readOnlyState = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"], ["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
+export var activeErrorMessageState = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-shadow: inset 0 0 0 2px ", ";\n"], ["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.critical_400);
+var InputFieldStyling = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"], ["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
+    return props.withoutBorder
+        ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      "
+        : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";");
+}, function (props) { var _a; return 16 + ((_a = props.extraRightPadding) !== null && _a !== void 0 ? _a : 0); }, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.black, function (props) { return (props.activeErrorMessage ? activeErrorMessageState : ''); }, function (props) { return (props.suppressReadOnlyStyles ? '' : readOnlyState); }, COLORS.neutral_100, COLORS.neutral_300, COLORS.primary_800, focusStyles, COLORS.critical_400, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800);
+var ValidationStyling = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"], ["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468'));
+export var Warning = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ", "\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ", " {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ", "\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ", "\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ", " {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ", "\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, ComponentXSStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), ComponentXSStyling(ComponentTextStyle.Regular, null));
+export var ErrorMessage = styled(Warning)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), COLORS.critical_500);
+var StateColors = (_a = {},
+    _a[States.Default] = COLORS.neutral_500,
+    _a[States.Valid] = COLORS.correct_500,
+    _a[States.Invalid] = COLORS.critical_500,
+    _a);
+export var ValidationMessage = styled(Warning)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (props) { return StateColors[props.type]; });
+export var NoteMessage = styled(Warning)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), COLORS.neutral_500);
+export var AutofilledMessage = styled(Warning)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), COLORS.neutral_600);
+export { ValidationStyling, InputFieldStyling };
+export var StyledIcon = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-radius: 50%;\n"], ["\n  border-radius: 50%;\n"])));
+export var SearchIconWrapper = styled(StyledIcon)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: absolute;\n  border-radius: 50%;\n"], ["\n  position: absolute;\n  border-radius: 50%;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

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

@@ -1,6 +1,6 @@
 import { Size, States, Testable } from '../types';
 import React from 'react';
-export type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
+export declare type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
     /**
      * Required. The ID of the textarea.
      */
@@ -35,7 +35,7 @@ export type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTex
      */
     note?: TextFieldNote;
 };
-export type TextFieldNote = {
+export declare type TextFieldNote = {
     message: string;
     icon: React.ReactNode;
 };

package/dist/src/InputFields/types.js

@@ -0,0 +1,2 @@
+;
+export {};

package/dist/src/Layouts/index.js

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from 'styled-components';
+import { BREAKPOINTS } from '../styles';
+var GRID = {
+    GAP: {
+        SMALL: '16px',
+        MEDIUM: '24px',
+        LARGE: '32px',
+    },
+    GUTTER: {
+        SMALL: '16px 16px 32px',
+        MEDIUM: '24px 32px 64px',
+        LARGE: '32px 64px 128px',
+    },
+};
+export var PageWidth = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  margin: ", ";\n  ", "\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n  }\n"], ["\n  display: block;\n  margin: ", ";\n  ", "\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n  }\n"])), GRID.GUTTER.SMALL, function (props) { return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'; }, BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, function (props) { return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'; }, BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, function (props) { return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'; }, BREAKPOINTS.LARGE, function (props) { return (props.useMaxWidth
+    ? (props.maxWidth
+        ? 'min(100% - 128px,' + props.maxWidth + 'px)'
+        : 'calc(100% - 128px)')
+    : 'calc(1600px - 128px)'); }, function (props) { return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;'; });
+export var Columns = styled.section(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"], ["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), function (props) { return props.gap || GRID.GAP.SMALL; }, BREAKPOINTS.MEDIUM, function (props) { return props.columns; }, function (props) { return props.columns; }, function (props) { return props.gap || GRID.GAP.MEDIUM; }, BREAKPOINTS.LARGE, function (props) { return props.gap || GRID.GAP.LARGE; }, GRID.GAP.MEDIUM, function (props) { return props.printColumns || 'none'; });
+var templateObject_1, templateObject_2;

package/dist/src/LinearProgress/LinearProgress.js

@@ -0,0 +1,78 @@
+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 { Size } from '../types';
+import styled from 'styled-components';
+import { COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';
+export var Bar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ", ";\n\n  &.active {\n    background-color: ", ";\n  }\n\n  &.current {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n  }\n\n  &.inverted.active {\n    background-color: ", ";\n  }\n\n  &.inverted.current {\n    background-color: ", ";\n  }\n\n"], ["\n  flex: 1;\n  height: 6px;\n\n  &.small {\n    height: 6px;\n  }\n\n  &.medium {\n    height: 8px;\n  }\n\n  &.large {\n    height: 12px;\n  }\n\n  background-color: ", ";\n\n  &.active {\n    background-color: ", ";\n  }\n\n  &.current {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n  }\n\n  &.inverted.active {\n    background-color: ", ";\n  }\n\n  &.inverted.current {\n    background-color: ", ";\n  }\n\n"])), COLORS.neutral_100, COLORS.accent1_400, COLORS.accent1_800, COLORS.neutral_600, COLORS.accent1_400, COLORS.white);
+export var Dot = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ", ";\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ", ";\n  }\n\n  &.current:after {\n    background-color: ", ";\n  }\n\n  &.inverted:after {\n    background-color: ", ";\n  }\n\n  &.inverted.active:after {\n    background-color: ", ";\n  }\n\n  &.inverted.current:after {\n    background-color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n\n\n  &:after {\n    content: '';\n    display: block;\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: ", ";\n  }\n\n  &.small {\n    &:after {\n      width: 6px;\n      height: 6px;\n    }\n\n    &.current:after {\n      width: 10px;\n      height: 10px;\n    }\n  }\n\n  &.medium {\n    &:after {\n      width: 8px;\n      height: 8px;\n    }\n\n    &.current:after {\n      width: 12px;\n      height: 12px;\n    }\n  }\n\n  &.large {\n    &:after {\n      width: 12px;\n      height: 12px;\n    }\n\n    &.current:after {\n      width: 16px;\n      height: 16px;\n    }\n  }\n\n\n  &.active:after {\n    background-color: ", ";\n  }\n\n  &.current:after {\n    background-color: ", ";\n  }\n\n  &.inverted:after {\n    background-color: ", ";\n  }\n\n  &.inverted.active:after {\n    background-color: ", ";\n  }\n\n  &.inverted.current:after {\n    background-color: ", ";\n  }\n"])), COLORS.neutral_400, COLORS.accent1_600, COLORS.accent1_800, COLORS.neutral_400, COLORS.accent1_400, COLORS.white);
+export var LineFill = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n"], ["\n  height: 100%;\n  max-width: 100%;\n  position: absolute;\n  z-index: 1;\n"])));
+export var Line = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ", " {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ", ";\n\n  ", " {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n\n    &:after,\n    &:before {\n      background-color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"], ["\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n\n  &:after {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    right: 0;\n  }\n\n  &:before {\n    content: '';\n    display: block;\n    height: 100%;\n    background-color: ", ";\n    position: absolute;\n    left: 0;\n  }\n\n  &.small {\n    height: 6px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 3px;\n      border-top-right-radius: 6px;\n      border-bottom-right-radius: 6px;\n    }\n\n    &:before {\n      width: 3px;\n      border-top-left-radius: 6px;\n      border-bottom-left-radius: 6px;\n    }\n  }\n\n  &.medium {\n    height: 8px;\n    border-radius: 4px;\n\n    ", " {\n      border-radius: 4px;\n    }\n\n    &:after {\n      width: 4px;\n      border-top-right-radius: 8px;\n      border-bottom-right-radius: 8px;\n    }\n\n    &:before {\n      width: 4px;\n      border-top-left-radius: 8px;\n      border-bottom-left-radius: 8px;\n    }\n  }\n\n  &.large {\n    height: 12px;\n    border-radius: 6px;\n\n    ", " {\n      border-radius: 6px;\n    }\n\n    &:after {\n      width: 6px;\n      border-top-right-radius: 12px;\n      border-bottom-right-radius: 12px;\n    }\n\n    &:before {\n      width: 6px;\n      border-top-left-radius: 12px;\n      border-bottom-left-radius: 12px;\n    }\n  }\n\n  background-color: ", ";\n\n  ", " {\n    background-color: ", ";\n  }\n\n  &.inverted {\n    background-color: ", ";\n\n    &:after,\n    &:before {\n      background-color: ", ";\n    }\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n"])), COLORS.neutral_500, COLORS.neutral_500, LineFill, LineFill, LineFill, COLORS.neutral_100, LineFill, COLORS.accent1_500, COLORS.neutral_700, COLORS.neutral_400, LineFill, COLORS.accent1_400);
+var Label = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), COLORS.black);
+var Content = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n"], ["\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  height: 16px;\n"])));
+var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ", " {\n      color: ", ";\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 4px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 6px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 8px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ", " {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ", " {\n      padding: 0 3px;\n    }\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  &.inverted {\n    ", " {\n      color: ", ";\n    }\n  }\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 4px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 6px;\n        border-bottom-left-radius: 6px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 6px;\n        border-bottom-right-radius: 6px;\n      }\n    }\n  }\n\n  &.medium {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 6px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 8px;\n        border-bottom-left-radius: 8px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 8px;\n        border-bottom-right-radius: 8px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      ", "\n    }\n\n    ", " {\n      gap: 8px;\n\n      ", ":first-of-type {\n        border-top-left-radius: 12px;\n        border-bottom-left-radius: 12px;\n      }\n\n      ", ":last-of-type {\n        border-top-right-radius: 12px;\n        border-bottom-right-radius: 12px;\n      }\n    }\n  }\n\n  &.dots.small,\n  &.dots.medium {\n    ", " {\n      padding: 0 2px;\n    }\n  }\n\n  &.dots.large {\n    ", " {\n      padding: 0 3px;\n    }\n  }\n"])), Label, COLORS.white, Label, ComponentSStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, ComponentMStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Label, ComponentLStyling(ComponentTextStyle.Regular, null), Content, Bar, Bar, Content, Content);
+export var LinearProgressType;
+(function (LinearProgressType) {
+    LinearProgressType["Dots"] = "dots";
+    LinearProgressType["Line"] = "line";
+    LinearProgressType["Bars"] = "bars";
+})(LinearProgressType || (LinearProgressType = {}));
+export var LinearProgressVariant;
+(function (LinearProgressVariant) {
+    LinearProgressVariant["Normal"] = "normal";
+    LinearProgressVariant["Inverted"] = "inverted";
+})(LinearProgressVariant || (LinearProgressVariant = {}));
+var LinearProgress = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? Size.Medium : _b, _c = _a.type, type = _c === void 0 ? LinearProgressType.Line : _c, _d = _a.variant, variant = _d === void 0 ? LinearProgressVariant.Normal : _d, label = _a.label, value = _a.value, max = _a.max, className = _a.className, rest = __rest(_a, ["size", "type", "variant", "label", "value", "max", "className"]);
+    var renderBars = function () {
+        return React.createElement(React.Fragment, null, Array.from(Array(max).keys()).map(function (i) { return (React.createElement(Bar, { key: i, className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size) })); }));
+    };
+    var renderDots = function () {
+        return React.createElement(React.Fragment, null, Array.from(Array(max).keys()).map(function (i) { return (React.createElement(Dot, { key: i, className: "".concat(Math.ceil(value) >= i + 1 ? 'active' : '', " ").concat(Math.ceil(value) === i + 1 ? 'current' : '', " ").concat(variant, " ").concat(size) })); }));
+    };
+    var renderLine = function () {
+        return React.createElement(React.Fragment, null,
+            React.createElement(Line, { className: "".concat(variant, " ").concat(size) },
+                React.createElement(LineFill, { style: { width: "".concat(value / max * 100, "%") } })));
+    };
+    var render = function () {
+        switch (type) {
+            case LinearProgressType.Bars:
+                return renderBars();
+            case LinearProgressType.Dots:
+                return renderDots();
+            case LinearProgressType.Line:
+            default:
+                return renderLine();
+        }
+    };
+    return (React.createElement(Wrapper, __assign({ className: "".concat(size, " ").concat(type, " ").concat(variant, " ").concat(className || '') }, rest),
+        label && React.createElement(Label, null, label),
+        React.createElement(Content, null, render())));
+};
+export default LinearProgress;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/src/LinearProgress/index.js

@@ -0,0 +1,3 @@
+import LinearProgress, { LinearProgressType, LinearProgressVariant } from './LinearProgress';
+export { LinearProgressType, LinearProgressVariant };
+export { LinearProgress };