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

package/dist/src/Image/ImageWithFallbacks.js

@@ -0,0 +1,87 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 { LoadingIndicator } from '..';
+import React from 'react';
+var ImageWithFallbacks = /** @class */ (function (_super) {
+    __extends(ImageWithFallbacks, _super);
+    function ImageWithFallbacks(props) {
+        var _this = this;
+        var _a, _b;
+        _this = _super.call(this, props) || this;
+        _this.state = {
+            src: props.src,
+            fallbackIndex: 0,
+            fallbacks: (_b = (_a = _this.props.fallbacks) === null || _a === void 0 ? void 0 : _a.split('|')) !== null && _b !== void 0 ? _b : [],
+            loaded: false,
+        };
+        return _this;
+    }
+    ImageWithFallbacks.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b;
+        if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {
+            this.setState({
+                src: this.props.src,
+                fallbackIndex: 0,
+                fallbacks: (_b = (_a = this.props.fallbacks) === null || _a === void 0 ? void 0 : _a.split('|')) !== null && _b !== void 0 ? _b : [],
+                loaded: false,
+            });
+        }
+    };
+    ImageWithFallbacks.prototype.onError = function () {
+        if (this.state.fallbackIndex > this.state.fallbacks.length) {
+            return;
+        }
+        this.setState({
+            src: this.state.fallbacks[this.state.fallbackIndex],
+            fallbackIndex: this.state.fallbackIndex + 1,
+            fallbacks: this.state.fallbacks,
+        });
+    };
+    ImageWithFallbacks.prototype.onLoad = function () {
+        this.setState(__assign(__assign({}, this.state), { loaded: true }));
+    };
+    ImageWithFallbacks.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, src = _a.src, alt = _a.alt, fallbacks = _a.fallbacks, loader = _a.loader, loading = _a.loading, rest = __rest(_a, ["src", "alt", "fallbacks", "loader", "loading"]);
+        return (React.createElement(React.Fragment, null,
+            React.createElement("img", __assign({ src: this.state.src, onError: function () { return _this.onError(); }, onChange: function () { return _this.onLoad(); }, onLoad: function () { return _this.onLoad(); }, alt: this.props.alt }, rest)),
+            this.props.loader && !this.state.loaded && React.createElement(LoadingIndicator, { id: "imgWithFallbackLoadingIndicator" })));
+    };
+    return ImageWithFallbacks;
+}(React.Component));
+export default ImageWithFallbacks;

package/dist/src/Image/index.js

@@ -0,0 +1,2 @@
+import ImageWithFallbacks from './ImageWithFallbacks';
+export { ImageWithFallbacks };

package/dist/src/InputFields/Checkbox.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 * 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 } from '../styles/typography';
+import { defaultOnMouseDownHandler } from '../common';
+export var StyledCheckBox = 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  .checkbox-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  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ", "\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-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  .checkbox-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  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ", "\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-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); }, 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 Checkbox = React.forwardRef(function (_a, ref) {
+    var id = _a.id, selected = _a.selected, select = _a.select, label = _a.label, invalid = _a.invalid, iconPointerEventsTransparent = _a.iconPointerEventsTransparent, disabled = _a.disabled, margin = _a.margin, size = _a.size, semiSelected = _a.semiSelected, children = _a.children, readOnly = _a.readOnly, tabIndexVal = _a.tabIndexVal, dataTestId = _a.dataTestId, className = _a.className, rest = __rest(_a, ["id", "selected", "select", "label", "invalid", "iconPointerEventsTransparent", "disabled", "margin", "size", "semiSelected", "children", "readOnly", "tabIndexVal", "dataTestId", "className"]);
+    var onKeyPress = function (e) {
+        if (e.keyCode === 13 && !disabled && !readOnly) {
+            select && select(!selected);
+        }
+    };
+    var handleClick = function (e) {
+        if (disabled || readOnly) {
+            return;
+        }
+        if (select) {
+            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            select(!selected);
+        }
+    };
+    size = size !== null && size !== void 0 ? size : Size.Medium;
+    var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '', " ").concat(readOnly ? ' readonly' : '');
+    return (React.createElement(StyledCheckBox, __assign({ key: id, ref: ref, disabled: disabled, className: cls, "aria-checked": selected, selected: selected, tabIndex: disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0), invalid: invalid, margin: margin, onClick: handleClick, onKeyDown: onKeyPress, onMouseDown: defaultOnMouseDownHandler }, rest),
+        React.createElement("div", { id: id, "data-testid": dataTestId, className: 'checkbox-icon' }, selected
+            ? React.createElement(SystemIcons.CheckboxOn, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" })
+            : semiSelected
+                ? React.createElement(SystemIcons.CheckboxSemi, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" })
+                : React.createElement(SystemIcons.CheckboxOff, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" })),
+        label &&
+            (React.createElement("label", { className: 'checkbox-label', htmlFor: id }, label)),
+        !label &&
+            React.createElement("label", { className: 'checkbox-label', htmlFor: id }, children)));
+});
+export default Checkbox;
+var templateObject_1;

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

@@ -7,7 +7,7 @@ import { Testable } from '../types';
 /**
  * Add custom types.
  */
-export type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {
+export declare type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {
     /** Optional. Selected date. Defaults to current date */
     value?: Date;
     /** Optional. Handler to be called when selected date was changed. */

package/dist/src/InputFields/DatepickerField.js

@@ -0,0 +1,237 @@
+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 React from 'react';
+/**
+ * Import third-party libraries.
+ */
+import styled from 'styled-components';
+import DatePicker from 'react-datepicker';
+import en from 'date-fns/locale/en-GB';
+import dayjs from 'dayjs';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
+import quarterOfYear from "dayjs/plugin/quarterOfYear";
+dayjs.extend(advancedFormat);
+dayjs.extend(quarterOfYear);
+/**
+ * Import custom components.
+ */
+import COLORS from '../styles/colors';
+import { SystemIcons } from '../icons';
+import { DatepickerFieldHeader } from './DatepickerFieldHeader';
+import { ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
+/**
+ * Import custom styles.
+ */
+import { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';
+import 'react-datepicker/dist/react-datepicker.css';
+import { ComponentMStyling, ComponentSStyling } from '../styles';
+import { Z_INDEXES } from '../styles';
+import { useFocusVisibleRef } from '../common';
+import { Size } from '../types';
+/**
+ * Add custom styles.
+ */
+var DatePickerContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ", "\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    \n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ", " !important;\n        flex-grow: 1;\n        background: ", " !important;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"], ["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ", "\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    \n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ", " !important;\n        flex-grow: 1;\n        background: ", " !important;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), Z_INDEXES.dropdown, function (props) { return (props.margin ? "margin: ".concat(props.margin, ";") : ''); }, COLORS.primary_20, focusStyles, COLORS.neutral_20, COLORS.neutral_200, COLORS.neutral_20, function (props) { return (!props.yearPicker ? '96px' : '54px'); }, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), scrollBarStyling(Size.Small), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, focusStyles, COLORS.white, COLORS.primary_500, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.white, COLORS.primary_500, COLORS.primary_700, COLORS.primary_20, focusStyles, COLORS.white, COLORS.primary_500, COLORS.neutral_700, COLORS.neutral_100, COLORS.primary_700, COLORS.primary_20, focusStyles);
+var IconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n"], ["\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n"])), +Z_INDEXES.focus + 1);
+var DatepickerRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
+var StyledInputFieldStyling = styled(InputFieldStyling)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n  \n  &:disabled {\n    background-color: ", ";\n  }\n\n  & ~ ", "{\n    color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &[tabindex='-1'] ~ ", " {\n    color: ", ";\n  }\n"], ["\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n  \n  &:disabled {\n    background-color: ", ";\n  }\n\n  & ~ ", "{\n    color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &[tabindex='-1'] ~ ", " {\n    color: ", ";\n  }\n"])), COLORS.neutral_500, COLORS.primary_300, COLORS.primary_200, COLORS.primary_700, COLORS.primary_20, COLORS.primary_700, COLORS.primary_300, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.white, IconWrapper, COLORS.neutral_600, IconWrapper, COLORS.primary_700, IconWrapper, IconWrapper, COLORS.primary_800, IconWrapper, COLORS.neutral_300);
+var quarterComponentsClassPrefix = 'react-datepicker__quarter-';
+var DatepickerField = React.forwardRef(function (_a, ref) {
+    var disabled = _a.disabled, readOnly = _a.readOnly, onChange = _a.onChange, invalid = _a.invalid, value = _a.value, validationMessage = _a.validationMessage, dateFormat = _a.dateFormat, autoComplete = _a.autoComplete, placeholder = _a.placeholder, required = _a.required, yearPicker = _a.yearPicker, yearsBeforeCurrentDate = _a.yearsBeforeCurrentDate, yearsAfterCurrentDate = _a.yearsAfterCurrentDate, margin = _a.margin, overflowTooltipPosition = _a.overflowTooltipPosition, onBlur = _a.onBlur, showQuarterYearPicker = _a.showQuarterYearPicker, id = _a.id, dataTestId = _a.dataTestId, rest = __rest(_a, ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "overflowTooltipPosition", "onBlur", "showQuarterYearPicker", "id", "dataTestId"]);
+    // Globally used variables within the component
+    var inputRef = useFocusVisibleRef();
+    var datepickerRef = React.useRef(null);
+    var focusedQuarterRef = React.useRef(1);
+    var _b = React.useState(-1), activeMonthPage = _b[0], setActiveMonthPage = _b[1];
+    var _c = React.useState(false), yearPickerMode = _c[0], setYearPickerMode = _c[1];
+    var _d = React.useState(null), openAt = _d[0], setOpenAt = _d[1];
+    // 'open' flag is used only for tracking current state of the dropdown,
+    // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'
+    var _e = React.useState(false), open = _e[0], setOpen = _e[1];
+    var getFormattedValue = function () {
+        if (showQuarterYearPicker) {
+            var val = dayjs(value);
+            return val.year() + ', Q' + val.quarter();
+        }
+        else
+            return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
+    };
+    /**
+     * Format the date in a specific way.
+     */
+    React.useEffect(function () {
+        if (value)
+            inputRef.current.value = getFormattedValue();
+    }, [value]);
+    function getQuarterItem(classname) {
+        return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0];
+    }
+    React.useEffect(function () {
+        var _a;
+        if (yearPickerMode) {
+            //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'
+            //we have to touch DOM directly
+            var selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0];
+            var dropdownParent = (_a = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+            if (selectedDate && dropdownParent)
+                dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;
+        }
+    }, [yearPickerMode]);
+    React.useEffect(function () {
+        if (showQuarterYearPicker && open) {
+            var wrapper_1 = getQuarterItem('wrapper');
+            var handler_1 = function (event) {
+                switch (event.key) {
+                    case ' ':
+                    case 'Enter':
+                        var currentQ = getQuarterItem(focusedQuarterRef.current + '');
+                        currentQ.click();
+                        break;
+                    case 'ArrowLeft':
+                        if (focusedQuarterRef.current > 1) {
+                            var currentQ_1 = getQuarterItem(focusedQuarterRef.current + '');
+                            var previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');
+                            if (previousQ) {
+                                currentQ_1.tabIndex = -1;
+                                previousQ.tabIndex = 0;
+                                previousQ.focus();
+                                focusedQuarterRef.current = focusedQuarterRef.current - 1;
+                            }
+                        }
+                        break;
+                    case 'ArrowRight':
+                        if (focusedQuarterRef.current < 4) {
+                            var currentQ_2 = getQuarterItem(focusedQuarterRef.current + '');
+                            var nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');
+                            if (nextQ) {
+                                currentQ_2.tabIndex = -1;
+                                nextQ.tabIndex = 0;
+                                nextQ.focus();
+                                focusedQuarterRef.current = focusedQuarterRef.current + 1;
+                            }
+                        }
+                        break;
+                }
+            };
+            wrapper_1.addEventListener('keydown', handler_1);
+            //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'
+            //we have to touch DOM directly
+            var selectedQuarter = getQuarterItem('-selected');
+            if (selectedQuarter) {
+                for (var i = 1; i < 5; i++) {
+                    if (selectedQuarter.innerText.includes('Q' + i)) {
+                        focusedQuarterRef.current = i;
+                        break;
+                    }
+                }
+                selectedQuarter.setAttribute("tabIndex", "0");
+            }
+            else {
+                var firstQuarter = getQuarterItem('1');
+                if (firstQuarter) {
+                    focusedQuarterRef.current = 1;
+                    firstQuarter.setAttribute("tabIndex", "0");
+                }
+            }
+            return function () {
+                wrapper_1.removeEventListener('keydown', handler_1);
+            };
+        }
+    }, [showQuarterYearPicker, open]);
+    //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection
+    //otherwise after year selection datepicker will show January month of the selected year
+    React.useEffect(function () {
+        if (openAt) {
+            datepickerRef.current.setOpen(true);
+            //setOpenAt(null);
+        }
+    }, [openAt]);
+    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
+    var handleCalendarClose = function () {
+        var _a;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        setOpen(false);
+    };
+    var handleCalendarOpen = function () {
+        if (openAt)
+            setOpenAt(null);
+        setOpen(true);
+    };
+    var maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());
+    maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate !== null && yearsAfterCurrentDate !== void 0 ? yearsAfterCurrentDate : 50));
+    //itemsNumber - controls number of year select options generated in the dropdown
+    //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5
+    var minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());
+    var itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate !== null && yearsBeforeCurrentDate !== void 0 ? yearsBeforeCurrentDate : 15)) / 5);
+    var handleKeyDown = function (e) {
+        if (e.key === 'Escape' || e.key === 'Esc')
+            datepickerRef.current.setOpen(false);
+    };
+    var handleBlur = function (e) {
+        // @ts-ignore
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            onBlur && onBlur(e);
+        }
+    };
+    var iconSize = 24;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DatePickerContainer, { quarterPicker: showQuarterYearPicker, "data-testid": dataTestId, yearPicker: yearPickerMode, margin: margin || '', onBlur: handleBlur },
+            React.createElement(DatePicker, { ref: datepickerRef, onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, onKeyDown: handleKeyDown, id: id, onClickOutside: function () { return datepickerRef.current.setOpen(false); }, onChange: function (e) {
+                    if (onChange) {
+                        if (yearPickerMode) {
+                            var newDate = new Date();
+                            newDate.setFullYear(e.getFullYear());
+                            newDate.setMonth(activeMonthPage);
+                            setOpenAt(newDate);
+                        }
+                        else
+                            onChange(e);
+                    }
+                    if (yearPickerMode)
+                        setYearPickerMode(false);
+                }, disabled: disabled || readOnly, locale: en, showQuarterYearPicker: showQuarterYearPicker, dateFormat: showQuarterYearPicker ? "yyyy, QQQ" : undefined, showYearPicker: yearPickerMode, 
+                //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year
+                yearItemNumber: yearPickerMode ? itemsNumber : undefined, maxDate: yearPickerMode ? maxDate : undefined, selected: value, openToDate: openAt !== null && openAt !== void 0 ? openAt : undefined, preventOpenOnFocus: true, shouldCloseOnSelect: true, renderCustomHeader: yearPicker
+                    ? function (params) {
+                        return React.createElement(DatepickerFieldHeader, __assign(__assign({}, params), { setActiveMonthPage: setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode }), null);
+                    }
+                    : undefined, customInput: React.createElement(InputWrapper, { disabled: disabled, readOnly: readOnly },
+                    React.createElement(DatepickerRow, null,
+                        React.createElement(StyledInputFieldStyling, __assign({ ref: inputRef, type: "text", name: "datepicker", onKeyDown: function (e) { return e.key === 'Enter' && datepickerRef.current.setOpen(true); }, className: (invalid ? 'invalid' : '' + (open ? ' open' : '')), tabIndex: disabled || readOnly ? -1 : 0, onFocus: function (e) { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, 0); }, autoComplete: autoComplete, placeholder: placeholder, extraRightPadding: iconSize, disabled: disabled, readOnly: true, suppressReadOnlyStyles: !readOnly, required: required }, rest)),
+                        React.createElement(IconWrapper, null,
+                            React.createElement(SystemIcons.Calendar, { size: "24" }))),
+                    !open && React.createElement(TooltipOverflow, { position: overflowTooltipPosition, input: inputRef, withArrow: true, maxWidth: "100%", size: Size.Small, align: 'end' }, getFormattedValue())) })),
+        validationMessage && (React.createElement(ErrorMessage, null,
+            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
+            React.createElement("span", null, validationMessage)))));
+});
+export default DatepickerField;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/InputFields/DatepickerFieldHeader.js

@@ -0,0 +1,45 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/**
+ * Import react libraries.
+ */
+import * as React from 'react';
+import { SystemIcons } from '../icons';
+import styled from 'styled-components';
+import { CommonInteractionStyling } from '../common';
+import { COLORS } from '../styles';
+var HeaderLabelContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ", ";\n  }\n\n  ", "\n\n  &:hover {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  &:active {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ", ";\n  }\n\n  ", "\n\n  &:hover {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  &:active {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n"])), COLORS.neutral_600, CommonInteractionStyling, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600, COLORS.primary_600);
+export var DatepickerFieldHeader = function (_a) {
+    var date = _a.date, decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, setYearPickerMode = _a.setYearPickerMode, yearPickerMode = _a.yearPickerMode, setActiveMonthPage = _a.setActiveMonthPage;
+    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+    var handleDecreaseMonth = function () {
+        var previousMonth = date.getMonth() - 1;
+        if (previousMonth < 0)
+            previousMonth = months.length - 1;
+        setActiveMonthPage(previousMonth);
+        decreaseMonth();
+    };
+    var handleIncreaseMonth = function () {
+        var nextMonth = date.getMonth() + 1;
+        if (nextMonth >= months.length - 1)
+            nextMonth = 0;
+        setActiveMonthPage(nextMonth);
+        increaseMonth();
+    };
+    React.useEffect(function () {
+        setActiveMonthPage(date.getMonth());
+    }, [date]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                display: 'flex',
+                justifyContent: 'center',
+            } },
+            !yearPickerMode && (React.createElement("button", { type: "button", className: "react-datepicker__navigation react-datepicker__navigation--previous", onClick: handleDecreaseMonth, disabled: prevMonthButtonDisabled })),
+            React.createElement(HeaderLabelContainer, { onClick: function () { return setYearPickerMode(!yearPickerMode); } },
+                React.createElement("div", { className: "react-datepicker__current-month" }, "".concat(months[date.getMonth()], " ").concat(date.getFullYear())),
+                yearPickerMode ? React.createElement(SystemIcons.ArrowDropUp, { size: "24px" }) : React.createElement(SystemIcons.ArrowDropDown, { size: "24px" })),
+            !yearPickerMode && (React.createElement("button", { type: "button", className: "react-datepicker__navigation react-datepicker__navigation--next", onClick: handleIncreaseMonth, disabled: nextMonthButtonDisabled })))));
+};
+var templateObject_1;

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

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

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