@laerdal/life-react-components 5.0.9 → 6.0.0-dev.1.full

package/dist/InputFields/DatepickerField.js

@@ -1,10 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "overflowTooltipPosition", "onBlur", "showQuarterYearPicker", "id", "dataTestId"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "overflowTooltipPosition", "onBlur", "showQuarterYearPicker", "id", "dataTestId"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -46,194 +43,409 @@ import { Size } from '../types';
 /**
  * Add custom types.
  */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Add custom styles.
  */
-var DatePickerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, ";") : '';
-}, function (props) {
-  return COLORS.getColor('primary_20', props.theme);
-}, focusStyles, function (props) {
-  return COLORS.getColor('neutral_20', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_200', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_20', props.theme);
-}, function (props) {
-  return !props.$yearPicker ? '96px' : '54px';
-}, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
-}, function (props) {
-  return ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme));
-}, scrollBarStyling(Size.Small), function (props) {
-  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
-}, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
-}, function (props) {
-  return COLORS.getColor('neutral_600', props.theme);
-}, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_20', props.theme);
-}, focusStyles, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme));
-}, function (props) {
-  return COLORS.getColor('neutral_600', props.theme);
-}, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_20', props.theme);
-}, focusStyles, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_20', props.theme);
-}, focusStyles);
-var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var StyledInputFieldStyling = styled(InputFieldStyling)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), function (props) {
-  return COLORS.getColor('neutral_500', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_300', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_200', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_20', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_300', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return COLORS.getColor('white', props.theme);
-}, IconWrapper, function (props) {
-  return COLORS.getColor('neutral_600', props.theme);
-}, IconWrapper, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-}, IconWrapper, IconWrapper, function (props) {
-  return COLORS.getColor('primary_800', props.theme);
-}, IconWrapper, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-});
-var quarterComponentsClassPrefix = 'react-datepicker__quarter-';
-var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var disabled = _ref.disabled,
-    readOnly = _ref.readOnly,
-    _onChange = _ref.onChange,
-    invalid = _ref.invalid,
-    value = _ref.value,
-    validationMessage = _ref.validationMessage,
-    dateFormat = _ref.dateFormat,
-    autoComplete = _ref.autoComplete,
-    placeholder = _ref.placeholder,
-    required = _ref.required,
-    yearPicker = _ref.yearPicker,
-    yearsBeforeCurrentDate = _ref.yearsBeforeCurrentDate,
-    yearsAfterCurrentDate = _ref.yearsAfterCurrentDate,
-    margin = _ref.margin,
-    overflowTooltipPosition = _ref.overflowTooltipPosition,
-    onBlur = _ref.onBlur,
-    showQuarterYearPicker = _ref.showQuarterYearPicker,
-    id = _ref.id,
-    dataTestId = _ref.dataTestId,
+const DatePickerContainer = styled.div`
+  .react-datepicker-popper {
+    z-index: ${Z_INDEXES.dropdown};
+  }
+
+  .react-datepicker-popper[data-placement^=bottom] {
+    padding-top: 0px;
+  }
+
+  
+  .react-datepicker-popper[data-placement^=top] {
+    padding-bottom: 0px;
+  }
+
+  > div {
+    display: block;
+
+    ${props => props.$margin ? `margin: ${props.$margin};` : ''}
+    .react-datepicker {
+      box-sizing: border-box;
+      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);
+      border: 1px solid #e5e5e5;
+    }
+    .react-datepicker__input-container{
+      z-index: 0;
+    }
+
+    .react-datepicker__navigation {
+      line-height: normal;
+      text-indent: inherit;
+      border: none;
+      border-radius: 4px;
+      height: 48px;
+      width: 48px;
+      outline: none;
+      margin: 0px;
+      color: transparent;
+
+      &:hover {
+        background: ${props => COLORS.getColor('primary_20', props.theme)};
+
+        &.react-datepicker__navigation--previous::before {
+          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");
+        }
+
+        &.react-datepicker__navigation--next::before {
+          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");
+        }
+      }
+
+      &:focus {
+        ${focusStyles}
+        &.react-datepicker__navigation--next::before {
+          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");
+        }
+
+        &.react-datepicker__navigation--previous::before {
+          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");
+        }
+      }
+
+      &::before {
+        text-align: center;
+        display: inline-block;
+        content: '';
+        height: 32px;
+        width: 32px;
+        vertical-align: middle;
+      }
+
+      &.react-datepicker__navigation--next::before {
+        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");
+      }
+
+      &.react-datepicker__navigation--previous::before {
+        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");
+      }
+    }
+
+    .react-datepicker__month-container,
+    .react-datepicker__year--container {
+      width: 336px;
+    }
+
+    .react-datepicker__month {
+      margin: 0px;
+    }
+
+    .react-datepicker__triangle {
+      left: 50% !important;
+      display: none;
+    }
+
+    .react-datepicker-popper[data-placement^='bottom'] {
+      margin-top: 0;
+    }
+
+    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {
+      border-bottom-color: ${props => COLORS.getColor('neutral_20', props.theme)};
+    }
+
+    .react-datepicker__header {
+      border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+      background: ${props => COLORS.getColor('neutral_20', props.theme)};
+      height: ${props => !props.$yearPicker ? '96px' : '54px'};
+      padding-top: 0px;
+    }
+
+    .react-datepicker-year-header {
+      height: 48px;
+      line-height: 48px !important;
+      align-items: center;
+
+      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+    }
+
+    .react-datepicker__current-month {
+      height: 48px;
+      display: inline-flex;
+      align-items: center;
+      margin-right: 5px;
+
+      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
+    }
+
+    .react-datepicker__year {
+      max-height: 300px;
+      overflow-y: scroll;
+
+      ${scrollBarStyling(Size.Small)}
+    }
+
+    .react-datepicker__quarter-wrapper{
+      width: 100%;
+      display: flex;
+      align-content: space-evenly;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 20px;
+    }
+
+    .react-datepicker__year-wrapper {
+      max-width: 100%;
+      justify-content: space-around;
+    }
+
+    .react-datepicker__navigation-icon {
+      display: none;
+    }
+
+    .react-datepicker__day-name {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      height: 48px;
+      margin: 0px;
+      width: 48px;
+
+      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+    }
+
+    
+
+    .react-datepicker__year-text {
+      background: ${props => COLORS.getColor('white', props.theme)};
+      border: none;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 20px;
+      padding-top: 10px;
+      padding-bottom: 10px;
+
+      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+      &.react-datepicker__year-text--disabled {
+        display: none;
+      }
+
+      &.react-datepicker__day--keyboard-selected {
+        color: ${props => COLORS.getColor('neutral_600', props.theme)};
+        background: ${props => COLORS.getColor('white', props.theme)};
+        font-weight: 400;
+        border: none;
+      }
+
+      &:hover {
+        color: ${props => COLORS.getColor('primary_700', props.theme)};
+        background: ${props => COLORS.getColor('primary_20', props.theme)};
+      }
+
+      &:focus {
+        ${focusStyles}
+      }
+
+      &.react-datepicker__year-text--selected {
+        color: ${props => COLORS.getColor('white', props.theme)} !important;
+        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;
+      }
+    }
+
+    .react-datepicker__day, .react-datepicker__quarter-text {
+      background: ${props => COLORS.getColor('white', props.theme)};
+      border: none;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      flex-grow: 1;
+      height: 40px;
+      width: 40px;
+      margin: 4px;
+
+      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {
+        color: ${props => COLORS.getColor('neutral_600', props.theme)};
+        background: ${props => COLORS.getColor('white', props.theme)};
+        flex-grow: 1;
+        font-weight: 400;
+        border: none;
+      }
+
+      &.react-datepicker__quarter--selected {
+        color: ${props => COLORS.getColor('white', props.theme)} !important;
+        flex-grow: 1;
+        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;
+      }
+
+      &:hover {
+        color: ${props => COLORS.getColor('primary_700', props.theme)};
+        background: ${props => COLORS.getColor('primary_20', props.theme)};
+      }
+
+      &:focus {
+        ${focusStyles}
+      }
+
+      &.react-datepicker__day--selected {
+        color: ${props => COLORS.getColor('white', props.theme)} !important;
+        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;
+      }
+
+      &.react-datepicker__day--today {
+        border-radius: 0.3rem;
+        color: ${props => COLORS.getColor('neutral_700', props.theme)};
+        background: ${props => COLORS.getColor('neutral_100', props.theme)};
+
+        &:hover {
+          color: ${props => COLORS.getColor('primary_700', props.theme)};
+          background: ${props => COLORS.getColor('primary_20', props.theme)};
+        }
+
+        &:focus {
+          ${focusStyles}
+        }
+      }
+    }
+  }
+`;
+const IconWrapper = styled.div`
+  pointer-events: none;
+  position: absolute;
+  left: 16px;
+  width: 24px;
+  height: 24px;
+  z-index: ${+Z_INDEXES.focus + 1};
+`;
+const DatepickerRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+const StyledInputFieldStyling = styled(InputFieldStyling)`
+  padding-left: 48px !important;
+  
+  &::placeholder {
+    color: ${props => COLORS.getColor('neutral_500', props.theme)};
+  }
+
+  &:focus:not(.focus-visible) {
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_300', props.theme)};
+  }
+
+  &:hover {
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_200', props.theme)};
+
+    ::placeholder {
+      color: ${props => COLORS.getColor('primary_700', props.theme)};
+    }
+
+    cursor: pointer;
+    background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+    color: ${props => COLORS.getColor('primary_700', props.theme)};
+  }
+
+  &:active,
+  &.open {
+    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_300', props.theme)};
+    background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+    color: ${props => COLORS.getColor('primary_800', props.theme)};
+
+    ::placeholder {
+      color: ${props => COLORS.getColor('primary_800', props.theme)};
+    }
+  }
+  
+  &:disabled {
+    background-color: ${props => COLORS.getColor('white', props.theme)};
+  }
+
+  & ~ ${IconWrapper}{
+    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+  }
+
+  &:hover ~ ${IconWrapper} {
+    color: ${props => COLORS.getColor('primary_700', props.theme)};
+  }
+
+  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {
+    color: ${props => COLORS.getColor('primary_800', props.theme)};
+  }
+
+  &[tabindex='-1'] ~ ${IconWrapper} {
+    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+  }
+`;
+const quarterComponentsClassPrefix = 'react-datepicker__quarter-';
+const DatepickerField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      disabled,
+      readOnly,
+      onChange,
+      invalid,
+      value,
+      validationMessage,
+      dateFormat,
+      autoComplete,
+      placeholder,
+      required,
+      yearPicker,
+      yearsBeforeCurrentDate,
+      yearsAfterCurrentDate,
+      margin,
+      overflowTooltipPosition,
+      onBlur,
+      showQuarterYearPicker,
+      id,
+      dataTestId
+    } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   // Globally used variables within the component
-  var theme = useTheme();
-  var inputRef = useFocusVisibleRef();
-  var datepickerRef = React.useRef(null);
-  var focusedQuarterRef = React.useRef(1);
-  var _React$useState = React.useState(-1),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    activeMonthPage = _React$useState2[0],
-    setActiveMonthPage = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    yearPickerMode = _React$useState4[0],
-    setYearPickerMode = _React$useState4[1];
-  var _React$useState5 = React.useState(null),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    openAt = _React$useState6[0],
-    setOpenAt = _React$useState6[1];
+  const theme = useTheme();
+  const inputRef = useFocusVisibleRef();
+  const datepickerRef = React.useRef(null);
+  const focusedQuarterRef = React.useRef(1);
+  const [activeMonthPage, setActiveMonthPage] = React.useState(-1);
+  const [yearPickerMode, setYearPickerMode] = React.useState(false);
+  const [openAt, setOpenAt] = React.useState(null);
   // '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 _React$useState7 = React.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    open = _React$useState8[0],
-    setOpen = _React$useState8[1];
-  var getFormattedValue = function getFormattedValue() {
+  const [open, setOpen] = React.useState(false);
+  const getFormattedValue = () => {
     if (showQuarterYearPicker) {
-      var val = dayjs(value);
+      const 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 () {
+  React.useEffect(() => {
     if (value) inputRef.current.value = getFormattedValue();
   }, [value]);
   function getQuarterItem(classname) {
     return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0];
   }
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (yearPickerMode) {
-      var _selectedDate$parentE;
       //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 = selectedDate === null || selectedDate === void 0 ? void 0 : (_selectedDate$parentE = selectedDate.parentElement) === null || _selectedDate$parentE === void 0 ? void 0 : _selectedDate$parentE.parentElement;
+      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0];
+      const dropdownParent = selectedDate?.parentElement?.parentElement;
       if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;
     }
   }, [yearPickerMode]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (showQuarterYearPicker && open) {
-      var wrapper = getQuarterItem('wrapper');
-      var handler = function handler(event) {
+      const wrapper = getQuarterItem('wrapper');
+      const handler = event => {
         switch (event.key) {
           case ' ':
           case 'Enter':
-            var currentQ = getQuarterItem(focusedQuarterRef.current + '');
+            const currentQ = getQuarterItem(focusedQuarterRef.current + '');
             currentQ.click();
             break;
           case 'ArrowLeft':
             if (focusedQuarterRef.current > 1) {
-              var _currentQ = getQuarterItem(focusedQuarterRef.current + '');
-              var previousQ = getQuarterItem(focusedQuarterRef.current - 1 + '');
+              const currentQ = getQuarterItem(focusedQuarterRef.current + '');
+              const previousQ = getQuarterItem(focusedQuarterRef.current - 1 + '');
               if (previousQ) {
-                _currentQ.tabIndex = -1;
+                currentQ.tabIndex = -1;
                 previousQ.tabIndex = 0;
                 previousQ.focus();
                 focusedQuarterRef.current = focusedQuarterRef.current - 1;
@@ -242,10 +454,10 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             break;
           case 'ArrowRight':
             if (focusedQuarterRef.current < 4) {
-              var _currentQ2 = getQuarterItem(focusedQuarterRef.current + '');
-              var nextQ = getQuarterItem(focusedQuarterRef.current + 1 + '');
+              const currentQ = getQuarterItem(focusedQuarterRef.current + '');
+              const nextQ = getQuarterItem(focusedQuarterRef.current + 1 + '');
               if (nextQ) {
-                _currentQ2.tabIndex = -1;
+                currentQ.tabIndex = -1;
                 nextQ.tabIndex = 0;
                 nextQ.focus();
                 focusedQuarterRef.current = focusedQuarterRef.current + 1;
@@ -258,9 +470,9 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       //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');
+      const selectedQuarter = getQuarterItem('-selected');
       if (selectedQuarter) {
-        for (var i = 1; i < 5; i++) {
+        for (let i = 1; i < 5; i++) {
           if (selectedQuarter.innerText.includes('Q' + i)) {
             focusedQuarterRef.current = i;
             break;
@@ -268,13 +480,13 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         }
         selectedQuarter.setAttribute("tabIndex", "0");
       } else {
-        var firstQuarter = getQuarterItem('1');
+        const firstQuarter = getQuarterItem('1');
         if (firstQuarter) {
           focusedQuarterRef.current = 1;
           firstQuarter.setAttribute("tabIndex", "0");
         }
       }
-      return function () {
+      return () => {
         wrapper.removeEventListener('keydown', handler);
       };
     }
@@ -282,41 +494,38 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   //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 () {
+  React.useEffect(() => {
     if (openAt) {
       datepickerRef.current.setOpen(true);
       //setOpenAt(null);
     }
   }, [openAt]);
-  React.useImperativeHandle(ref, function () {
-    return inputRef.current;
-  }, [inputRef]);
-  var handleCalendarClose = function handleCalendarClose() {
-    var _inputRef$current;
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
+  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);
+  const handleCalendarClose = () => {
+    inputRef.current?.blur();
     setOpen(false);
   };
-  var handleCalendarOpen = function handleCalendarOpen() {
+  const handleCalendarOpen = () => {
     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));
+  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());
+  maxDate.setFullYear(maxDate.getFullYear() + (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 handleKeyDown(e) {
+  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());
+  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);
+  const handleKeyDown = e => {
     if (e.key === 'Escape' || e.key === 'Esc') datepickerRef.current.setOpen(false);
   };
-  var handleBlur = function handleBlur(e) {
+  const handleBlur = e => {
     // @ts-ignore
     if (!e.currentTarget.contains(e.relatedTarget)) {
       onBlur && onBlur(e);
     }
   };
-  var iconSize = 24;
+  const iconSize = 24;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(DatePickerContainer, {
       $quarterPicker: showQuarterYearPicker,
@@ -330,17 +539,15 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onCalendarClose: handleCalendarClose,
         onKeyDown: handleKeyDown,
         id: id,
-        onClickOutside: function onClickOutside() {
-          return datepickerRef.current.setOpen(false);
-        },
-        onChange: function onChange(e) {
-          if (_onChange) {
+        onClickOutside: () => datepickerRef.current.setOpen(false),
+        onChange: e => {
+          if (onChange) {
             if (yearPickerMode) {
-              var newDate = new Date();
+              const newDate = new Date();
               newDate.setFullYear(e.getFullYear());
               newDate.setMonth(activeMonthPage);
               setOpenAt(newDate);
-            } else _onChange(e);
+            } else onChange(e);
           }
           if (yearPickerMode) setYearPickerMode(false);
         },
@@ -354,17 +561,15 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         yearItemNumber: yearPickerMode ? itemsNumber : undefined,
         maxDate: yearPickerMode ? maxDate : undefined,
         selected: value,
-        openToDate: openAt !== null && openAt !== void 0 ? openAt : undefined,
+        openToDate: openAt ?? undefined,
         preventOpenOnFocus: true,
         shouldCloseOnSelect: true,
-        renderCustomHeader: yearPicker ? function (params) {
-          return /*#__PURE__*/React.createElement(DatepickerFieldHeader, _objectSpread(_objectSpread({}, params), {}, {
-            setActiveMonthPage: setActiveMonthPage,
-            customHeaderCount: 0,
-            yearPickerMode: yearPickerMode,
-            setYearPickerMode: setYearPickerMode
-          }), null);
-        } : undefined,
+        renderCustomHeader: yearPicker ? params => /*#__PURE__*/React.createElement(DatepickerFieldHeader, _objectSpread(_objectSpread({}, params), {}, {
+          setActiveMonthPage,
+          customHeaderCount: 0,
+          yearPickerMode: yearPickerMode,
+          setYearPickerMode: setYearPickerMode
+        }), null) : undefined,
         customInput: /*#__PURE__*/_jsxs(InputWrapper, {
           $disabled: disabled,
           $readOnly: readOnly,
@@ -373,15 +578,10 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               ref: inputRef,
               type: "text",
               name: "datepicker",
-              onKeyDown: function onKeyDown(e) {
-                return e.key === 'Enter' && datepickerRef.current.setOpen(true);
-              },
+              onKeyDown: e => e.key === 'Enter' && datepickerRef.current.setOpen(true),
               className: invalid ? 'invalid' : '' + (open ? ' open' : ''),
               tabIndex: disabled || readOnly ? -1 : 0,
-              onFocus: function onFocus(e) {
-                var _inputRef$current2;
-                return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.setSelectionRange(0, 0);
-              },
+              onFocus: e => inputRef.current?.setSelectionRange(0, 0),
               autoComplete: autoComplete,
               placeholder: placeholder,
               $extraRightPadding: iconSize,