@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.2

package/dist/InputFields/DatepickerField.cjs

@@ -1,17 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
 var _enGB = _interopRequireDefault(require("date-fns/locale/en-GB"));
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -27,30 +28,134 @@ require("react-datepicker/dist/react-datepicker.css");
 var _common = require("../common");
 var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur", "showQuarterYearPicker", "id", "dataTestId"];
+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;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-_dayjs.default.extend(_advancedFormat.default);
-_dayjs.default.extend(_quarterOfYear.default);
+/**
+ * Import react libraries.
+ */
+/**
+ * Import third-party libraries.
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["default"])(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; }
+_dayjs["default"].extend(_advancedFormat["default"]);
+_dayjs["default"].extend(_quarterOfYear["default"]);
 
 /**
  * Import custom components.
  */
 
+/**
+ * Import custom styles.
+ */
+
+/**
+ * Add custom types.
+ */
+
 /**
  * Add custom styles.
  */
-var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.Z_INDEXES.dropdown, function (props) {
+var DatePickerContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), _styles.Z_INDEXES.dropdown, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, _colors.default.primary_20, _styles.focusStyles, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
+}, function (props) {
+  return _colors["default"].getColor('primary_20', props.theme);
+}, _styles.focusStyles, function (props) {
+  return _colors["default"].getColor('neutral_20', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('neutral_200', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('neutral_20', props.theme);
+}, function (props) {
   return !props.yearPicker ? '96px' : '54px';
-}, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.scrollBarStyling)(_types.Size.Small), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.white, _colors.default.primary_500, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.neutral_700, _colors.default.neutral_100, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles);
-var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n"])), +_styles.Z_INDEXES.focus + 1);
-var DatepickerRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var StyledInputFieldStyling = (0, _styledComponents.default)(_styling.InputFieldStyling)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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.default.neutral_500, _colors.default.primary_300, _colors.default.primary_200, _colors.default.primary_700, _colors.default.primary_20, _colors.default.primary_700, _colors.default.primary_300, _colors.default.primary_100, _colors.default.primary_800, _colors.default.primary_800, _colors.default.white, IconWrapper, _colors.default.neutral_600, IconWrapper, _colors.default.primary_700, IconWrapper, IconWrapper, _colors.default.primary_800, IconWrapper, _colors.default.neutral_300);
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors["default"].getColor('neutral_600', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors["default"].getColor('neutral_600', props.theme));
+}, (0, _styles.scrollBarStyling)(_types.Size.Small), function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].getColor('neutral_600', props.theme));
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].getColor('neutral_600', props.theme));
+}, function (props) {
+  return _colors["default"].getColor('neutral_600', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_20', props.theme);
+}, _styles.focusStyles, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_500', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors["default"].getColor('neutral_600', props.theme));
+}, function (props) {
+  return _colors["default"].getColor('neutral_600', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_500', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_20', props.theme);
+}, _styles.focusStyles, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_500', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('neutral_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('neutral_100', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_20', props.theme);
+}, _styles.focusStyles);
+var IconWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n"])), +_styles.Z_INDEXES.focus + 1);
+var DatepickerRow = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
+var StyledInputFieldStyling = (0, _styledComponents["default"])(_styling.InputFieldStyling)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\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["default"].getColor('neutral_500', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_300', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_200', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_20', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_300', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_100', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_800', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('primary_800', props.theme);
+}, function (props) {
+  return _colors["default"].getColor('white', props.theme);
+}, IconWrapper, function (props) {
+  return _colors["default"].getColor('neutral_600', props.theme);
+}, IconWrapper, function (props) {
+  return _colors["default"].getColor('primary_700', props.theme);
+}, IconWrapper, IconWrapper, function (props) {
+  return _colors["default"].getColor('primary_800', props.theme);
+}, IconWrapper, function (props) {
+  return _colors["default"].getColor('neutral_300', props.theme);
+});
 var quarterComponentsClassPrefix = 'react-datepicker__quarter-';
-var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+var DatepickerField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     readOnly = _ref.readOnly,
     _onChange = _ref.onChange,
@@ -65,49 +170,51 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     yearsBeforeCurrentDate = _ref.yearsBeforeCurrentDate,
     yearsAfterCurrentDate = _ref.yearsAfterCurrentDate,
     margin = _ref.margin,
+    overflowTooltipPosition = _ref.overflowTooltipPosition,
     onBlur = _ref.onBlur,
     showQuarterYearPicker = _ref.showQuarterYearPicker,
     id = _ref.id,
     dataTestId = _ref.dataTestId,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   // Globally used variables within the component
+  var theme = (0, _styledComponents.useTheme)();
   var inputRef = (0, _common.useFocusVisibleRef)();
-  var datepickerRef = _react.default.useRef(null);
-  var focusedQuarterRef = _react.default.useRef(1);
-  var _React$useState = _react.default.useState(-1),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+  var datepickerRef = _react["default"].useRef(null);
+  var focusedQuarterRef = _react["default"].useRef(1);
+  var _React$useState = _react["default"].useState(-1),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     activeMonthPage = _React$useState2[0],
     setActiveMonthPage = _React$useState2[1];
-  var _React$useState3 = _react.default.useState(false),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+  var _React$useState3 = _react["default"].useState(false),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
     yearPickerMode = _React$useState4[0],
     setYearPickerMode = _React$useState4[1];
-  var _React$useState5 = _react.default.useState(null),
-    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+  var _React$useState5 = _react["default"].useState(null),
+    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
     openAt = _React$useState6[0],
     setOpenAt = _React$useState6[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 _React$useState7 = _react.default.useState(false),
-    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+  var _React$useState7 = _react["default"].useState(false),
+    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
     open = _React$useState8[0],
     setOpen = _React$useState8[1];
   var getFormattedValue = function getFormattedValue() {
     if (showQuarterYearPicker) {
-      var val = (0, _dayjs.default)(value);
+      var val = (0, _dayjs["default"])(value);
       return val.year() + ', Q' + val.quarter();
-    } else return (0, _dayjs.default)(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
+    } else return (0, _dayjs["default"])(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
   };
   /**
    * Format the date in a specific way.
    */
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (value) inputRef.current.value = getFormattedValue();
   }, [value]);
   function getQuarterItem(classname) {
     return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0];
   }
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (yearPickerMode) {
       var _selectedDate$parentE;
       //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'
@@ -117,7 +224,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;
     }
   }, [yearPickerMode]);
-  _react.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (showQuarterYearPicker && open) {
       var wrapper = getQuarterItem('wrapper');
       var handler = function handler(event) {
@@ -181,13 +288,13 @@ var DatepickerField = /*#__PURE__*/_react.default.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.default.useEffect(function () {
+  _react["default"].useEffect(function () {
     if (openAt) {
       datepickerRef.current.setOpen(true);
       //setOpenAt(null);
     }
   }, [openAt]);
-  _react.default.useImperativeHandle(ref, function () {
+  _react["default"].useImperativeHandle(ref, function () {
     return inputRef.current;
   }, [inputRef]);
   var handleCalendarClose = function handleCalendarClose() {
@@ -223,7 +330,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       yearPicker: yearPickerMode,
       margin: margin || '',
       onBlur: handleBlur,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker["default"], {
         ref: datepickerRef,
         onCalendarOpen: handleCalendarOpen,
         onCalendarClose: handleCalendarClose,
@@ -244,7 +351,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
           if (yearPickerMode) setYearPickerMode(false);
         },
         disabled: disabled || readOnly,
-        locale: _enGB.default,
+        locale: _enGB["default"],
         showQuarterYearPicker: showQuarterYearPicker,
         dateFormat: showQuarterYearPicker ? "yyyy, QQQ" : undefined,
         showYearPicker: yearPickerMode
@@ -257,7 +364,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         preventOpenOnFocus: true,
         shouldCloseOnSelect: true,
         renderCustomHeader: yearPicker ? function (params) {
-          return /*#__PURE__*/_react.default.createElement(_DatepickerFieldHeader.DatepickerFieldHeader, _objectSpread(_objectSpread({}, params), {}, {
+          return /*#__PURE__*/_react["default"].createElement(_DatepickerFieldHeader.DatepickerFieldHeader, _objectSpread(_objectSpread({}, params), {}, {
             setActiveMonthPage: setActiveMonthPage,
             customHeaderCount: 0,
             yearPickerMode: yearPickerMode,
@@ -293,20 +400,20 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
                 size: "24"
               })
             })]
-          }), !open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
+          }), !open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow["default"], {
+            position: overflowTooltipPosition,
             input: inputRef,
             withArrow: true,
             maxWidth: "100%",
             size: _types.Size.Small,
             align: "end",
-            position: "bottom",
             children: getFormattedValue()
           })]
         })
       })
     }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
-        color: _colors.default.critical_400
+        color: _colors["default"].getColor('critical_400', theme)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage
       })]
@@ -314,20 +421,21 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   });
 });
 DatepickerField.propTypes = {
-  value: _propTypes.default.instanceOf(Date),
-  onChange: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  showQuarterYearPicker: _propTypes.default.bool,
-  invalid: _propTypes.default.bool,
-  dateFormat: _propTypes.default.string,
-  validationMessage: _propTypes.default.string,
-  autoComplete: _propTypes.default.string,
-  placeholder: _propTypes.default.string,
-  yearPicker: _propTypes.default.bool,
-  yearsBeforeCurrentDate: _propTypes.default.number,
-  yearsAfterCurrentDate: _propTypes.default.number,
-  margin: _propTypes.default.string
+  value: _propTypes["default"].instanceOf(Date),
+  onChange: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func,
+  showQuarterYearPicker: _propTypes["default"].bool,
+  invalid: _propTypes["default"].bool,
+  dateFormat: _propTypes["default"].string,
+  validationMessage: _propTypes["default"].string,
+  autoComplete: _propTypes["default"].string,
+  placeholder: _propTypes["default"].string,
+  yearPicker: _propTypes["default"].bool,
+  yearsBeforeCurrentDate: _propTypes["default"].number,
+  yearsAfterCurrentDate: _propTypes["default"].number,
+  margin: _propTypes["default"].string,
+  overflowTooltipPosition: _propTypes["default"].oneOf(['top', 'bottom'])
 };
 var _default = DatepickerField;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=DatepickerField.cjs.map