@digitransit-component/digitransit-component-datetimepicker 6.0.10 → 7.0.0

package/lib/index.js

@@ -0,0 +1,1586 @@
+import PropTypes from 'prop-types';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { useTranslation, I18nextProvider } from 'react-i18next';
+import { DateTime, Settings } from 'luxon';
+import debounce from 'lodash/debounce.js';
+import uniqueId from 'lodash/uniqueId.js';
+import Icon from '@digitransit-component/digitransit-component-icon';
+import Select from 'react-select';
+import cx from 'classnames';
+import Modal from 'react-modal';
+import { useSelect } from 'downshift';
+import { createInstance } from 'i18next';
+
+/**
+ * Handle typing time and adding necessary :
+ *
+ * @param {string} typedValue
+ *
+ * @return {string}
+ */
+function parseTypedTime(typedValue) {
+  let actualValue = typedValue;
+  if (actualValue.length === 3 && actualValue.split('').every(n => Number.isInteger(Number(n)))) {
+    // add ':' if user types three numbers in a row
+    if (Number(actualValue.slice(0, 2)) <= 23) {
+      actualValue = `${actualValue.slice(0, 2)}:${actualValue[2]}`;
+    } else {
+      actualValue = `${actualValue[0]}:${actualValue.slice(1)}`;
+    }
+  }
+  return actualValue;
+}
+const validateClock = (hours, minutes) => {
+  const hoursValid = !Number.isNaN(hours) && hours >= 0 && hours <= 23;
+  const minutesLen = minutes.length;
+  const minutesValid = minutesLen === 2 ? !Number.isNaN(minutes) && Number(minutes) >= 0 && Number(minutes <= 59) : !Number.isNaN(minutes) && Number(minutes) >= 0 && Number(minutes <= 5);
+  return hoursValid && minutesValid;
+};
+function validateInput(inputValue) {
+  // We don't accept seconds in the input
+  if (inputValue.split(':').length > 2) {
+    return false;
+  }
+  if (inputValue.length <= 2) {
+    // Too many options, don't  validate
+    return true;
+  }
+  if (inputValue.length === 3) {
+    let hours;
+    let minutes;
+    if (inputValue.includes(':')) {
+      [hours, minutes] = inputValue.split(':');
+    } else if (inputValue.startsWith('0')) {
+      hours = inputValue.substring(0, inputValue.length - 1);
+      minutes = inputValue.substring(inputValue.length - 1 || 0);
+      if (Number(minutes) > 5) {
+        return false;
+      }
+    } else {
+      // This is how basically moment handles string formatting.
+      // If the first letter of the string is 1, then rest are minutes.
+      // if the first letter is 2, then if second letter is 0,1,2 or 3, then second letter is hour, else rest are minutes
+      // else, first letter is hour, rest of them are minutes.
+      const values = inputValue.split('');
+      if (Number(values[0]) === 1) {
+        [hours, minutes] = [values[0].concat(values[1]), values[2]];
+      } else if (Number(values[0]) === 2) {
+        if (Number(values[1] <= 3)) {
+          [hours, minutes] = [values[0].concat(values[1]), values[2]];
+        } else {
+          [hours, minutes] = [values[0], values[1].concat(values[2])];
+        }
+      } else {
+        [hours, minutes] = [values[0], values[1].concat(values[2])];
+      }
+      return validateClock(hours, minutes);
+    }
+    return validateClock(hours, minutes);
+  }
+  if (inputValue.length === 5 || inputValue.length === 4) {
+    const values = inputValue.split(':');
+    const hours = values[0];
+    const minutes = values[1];
+    if (inputValue.startsWith('0') && minutes.length === 1 && Number(minutes) > 5) {
+      return false;
+    }
+    return validateClock(hours, minutes);
+  }
+  return true;
+}
+const getTs = (inputValue, currentTimestamp) => {
+  const trimmed = inputValue.trim();
+  if (trimmed.match(/^[0-9]{1,2}(\.|:)[0-9]{2}$/) !== null) {
+    const splitter = trimmed.includes('.') ? '.' : ':';
+    const values = trimmed.split(splitter);
+    const hours = Number(values[0]);
+    const hoursValid = !Number.isNaN(hours) && hours >= 0 && hours <= 23;
+    const minutes = Number(values[1]);
+    const minutesValid = !Number.isNaN(minutes) && minutes >= 0 && minutes <= 59;
+    if (!minutesValid || !hoursValid) {
+      return null;
+    }
+    const newStamp = DateTime.fromMillis(currentTimestamp).set({
+      hour: hours,
+      minute: minutes,
+      second: 0,
+      millisecond: 0
+    }).valueOf();
+    return newStamp;
+  }
+  return null;
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".styles_sr-only__D6MJ6:not(:focus, :active) {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.styles_dt-datetimepicker__DSYbh {\n  border: none;\n  padding: 0;\n  margin: 0;\n  font-size: 15px;\n  font-weight: var(--font-weight-medium);\n}\n.styles_dt-datetimepicker__DSYbh button,\n.styles_dt-datetimepicker__DSYbh label {\n  font-size: 1em;\n  font-weight: inherit;\n}\n.styles_dt-datetimepicker__DSYbh label button {\n  cursor: pointer;\n  font-family: inherit;\n}\n.styles_dt-datetimepicker__DSYbh .styles_hidden__TjnWH {\n  display: none;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-open-container__zWBiT {\n  background-color: #f2f5f7;\n  border-radius: 5px;\n  padding: 15px;\n  margin: 9px 0 9px 0;\n}\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  min-height: 36px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj.styles_closed__QYbCF {\n  margin: 4px 0 6px 18px;\n}\n@media screen and (max-width: 319px) {\n  .styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj {\n    margin-left: 14px;\n  }\n}\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj .styles_time-icon__ES47Y svg {\n  width: 18px;\n  height: 19px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj .styles_dropdown-icon__O0GrI {\n  margin-left: 9px;\n  position: relative;\n  top: 1px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj .styles_dropdown-icon__O0GrI svg {\n  width: 14px;\n  height: 10px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj .styles_close-icon__B5-I5 svg {\n  width: 12px;\n  height: 12px;\n  border-radius: 1px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj .styles_close-icon__B5-I5 svg path {\n  stroke-width: 30;\n}\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj label {\n  cursor: pointer;\n}\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj label.styles_label-open__dVDlF {\n  align-items: flex-start;\n  display: flex;\n}\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj button,\n.styles_dt-datetimepicker__DSYbh .styles_top-row-container__rGdmj label {\n  font-size: 1em;\n  letter-spacing: -0.5px;\n  line-height: 1;\n}\n.styles_dt-datetimepicker__DSYbh .styles_textbutton__sVckw {\n  margin-left: 9px;\n  background: none;\n  border: none;\n  color: #666;\n}\n@media screen and (min-width: 768px) {\n  .styles_dt-datetimepicker__DSYbh .styles_textbutton__sVckw {\n    margin-left: 14px;\n  }\n}\n.styles_dt-datetimepicker__DSYbh .styles_textbutton__sVckw.styles_active__9LaDz {\n  color: var(--color);\n}\n.styles_dt-datetimepicker__DSYbh .styles_combobox-left__nwwOo {\n  position: relative;\n  margin-right: 4px;\n  width: 63%;\n}\n.styles_dt-datetimepicker__DSYbh .styles_combobox-right__qlPKD {\n  position: relative;\n  margin-left: 4px;\n  width: 37%;\n}\n.styles_dt-datetimepicker__DSYbh .styles_departure-or-arrival-container__Rj3b9 {\n  height: calc(1rem + 20px);\n  background-color: #ddd;\n  border-radius: 8px;\n  display: flex;\n  width: calc(5px + 13em);\n}\n.styles_dt-datetimepicker__DSYbh .styles_radio-textbutton-label__LeV2o {\n  color: #333;\n  margin: 2px;\n  background: none;\n  border-radius: 6px;\n  padding: 9px 0;\n  width: 50%;\n  cursor: pointer;\n  height: calc(1rem + 16px);\n  text-align: center;\n  font-weight: 400;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.03em;\n}\n.styles_dt-datetimepicker__DSYbh .styles_radio-textbutton-label__LeV2o.styles_active__9LaDz {\n  font-weight: 500;\n  background: white;\n}\n.styles_dt-datetimepicker__DSYbh .styles_radio-textbutton-label__LeV2o:focus-within {\n  /* First apply outline that is used in Edge and Firefox */\n  outline: 1px dotted #212121;\n  /* Then override outline for webkit browsers like Chrome, this has no effect on other browsers */\n  outline: 5px auto -webkit-focus-ring-color; /* stylelint-disable-line declaration-block-no-duplicate-properties */\n}\n.styles_dt-datetimepicker__DSYbh .styles_radio-textbutton-label__LeV2o.styles_first-radio__F8N7J {\n  margin: 0;\n  display: flex;\n  align-items: flex-start;\n}\n.styles_dt-datetimepicker__DSYbh .styles_radio-textbutton__Ad81W {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_departure-now-button__8ZlDU {\n  font-family: inherit;\n  letter-spacing: -0.02em;\n  height: calc(1rem + 18px);\n  color: var(--color);\n  padding: 8px 0;\n  width: 6.6875rem;\n  background: white;\n  border: 1px solid #888;\n  border-radius: 30px;\n  margin-left: 11px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_open-button__yl4be {\n  display: flex;\n  margin-bottom: 0;\n  margin-top: 1px;\n  padding: 2px 0 2px 0;\n}\n.styles_dt-datetimepicker__DSYbh button.styles_close-button__mdfIU {\n  transition: transform 0.2s;\n  position: relative;\n  top: -14px;\n  right: -8px;\n  border: 0;\n  font-weight: normal;\n  background: none;\n  color: var(--color);\n  padding: 0;\n  line-height: normal;\n}\n.styles_dt-datetimepicker__DSYbh button.styles_close-button__mdfIU:hover {\n  transform: scale(1.2);\n}\n.styles_dt-datetimepicker__DSYbh .styles_right-edge__XbqgK {\n  margin-left: auto;\n  margin-right: 0;\n  position: relative;\n  top: -2px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_combobox-container__sR9aU {\n  cursor: pointer;\n}\n.styles_dt-datetimepicker__DSYbh .styles_combobox-icon__wsdX4 {\n  color: var(--color);\n  height: 40px;\n  position: absolute;\n  z-index: 7;\n  pointer-events: none;\n}\n.styles_dt-datetimepicker__DSYbh .styles_combobox-icon__wsdX4.styles_date-input-icon__SFXGx {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin-left: 14px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_combobox-icon__wsdX4.styles_date-input-icon__SFXGx svg {\n  width: 20px;\n  height: 18px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_combobox-icon__wsdX4.styles_time-input-icon__J1qei {\n  display: flex;\n  align-items: center;\n  padding: 0;\n  margin-left: 8px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_combobox-icon__wsdX4.styles_time-input-icon__J1qei svg {\n  margin-top: 1px;\n  width: 22px;\n  height: 22px;\n}\n.styles_dt-datetimepicker__DSYbh .datetimepicker-invalid-input input {\n  color: #f00 !important;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE {\n  position: relative;\n  height: 40px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__control {\n  cursor: inherit;\n  height: 40px;\n  border: 1px solid #888;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__value-container {\n  padding: 0;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__single-value {\n  margin: 0 0 0 47px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__input {\n  background: inherit;\n  position: relative;\n  margin-left: 40px;\n  margin-top: -4px;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__input input {\n  opacity: 1 !important;\n  background: inherit;\n  box-shadow: none;\n  font-stretch: normal;\n  font-style: normal;\n  line-height: 1.33;\n  letter-spacing: -0.5px;\n  color: #333;\n  font-family: inherit;\n  font-size: 15px;\n  font-weight: var(--font-weight-medium);\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__input input:focus {\n  box-shadow: none;\n  outline: none;\n  border: none;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__menu {\n  z-index: 19;\n  padding: 0;\n  background: #fff;\n  max-height: 250px;\n  border-radius: 5px;\n  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.06);\n  border: 1px rgba(0, 0, 0, 0.1) solid;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__menu .datetimepicker-select__menu-list {\n  max-height: 250px;\n  padding: 0;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__menu .datetimepicker-select__menu-list .datetimepicker-select__option {\n  height: 50px;\n  border-top: 1px solid #ddd;\n  padding: 13px 0 0 12px;\n  letter-spacing: -0.6px;\n  color: #333;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__menu .datetimepicker-select__menu-list .datetimepicker-select__option--is-selected {\n  background: inherit;\n}\n.styles_dt-datetimepicker__DSYbh .styles_datetimepicker-select-container__Y8wgE .datetimepicker-select__menu .datetimepicker-select__menu-list .datetimepicker-select__option--is-focused {\n  background: #dfe5e8;\n}\n.styles_dt-datetimepicker__DSYbh .styles_picker-container__wz2Zj {\n  margin: 14px 0 0 0;\n  display: flex;\n}\n.styles_dt-datetimepicker__DSYbh .styles_combobox-mobile-container__ZzG8g {\n  flex-grow: 1;\n}\n\n.styles_mobile-modal-overlay__wq8cS {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.6);\n  z-index: 10001;\n}\n\n.styles_mobile-modal-content__Gla3M {\n  font-family: inherit;\n  background: white;\n  width: 89%;\n  position: absolute;\n  left: 5.5%;\n  padding: 31px 20px 33px 20px;\n  top: 80px;\n  border-radius: 5px;\n}\n.styles_mobile-modal-content__Gla3M .styles_top-row__hzke9 {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 21px;\n}\n.styles_mobile-modal-content__Gla3M .styles_top-row__hzke9 .styles_modal-title__CztKf {\n  font-weight: var(--font-weight-medium);\n  font-size: 20px;\n  line-height: 18px;\n  letter-spacing: -0.5px;\n  color: #333;\n  padding: 6px 0 0 8px;\n}\n.styles_mobile-modal-content__Gla3M .styles_top-row__hzke9 .styles_departure-now-button__8ZlDU {\n  background-color: white;\n  font-family: inherit;\n  padding: 5px 15px;\n  border: 1px solid #888;\n  border-radius: 50px;\n  font-weight: var(--font-weight-medium);\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.02em;\n  color: var(--color);\n}\n.styles_mobile-modal-content__Gla3M .styles_tab-row__6WYwM {\n  display: flex;\n  border: 2px solid #ddd;\n  border-radius: 5px;\n  margin-bottom: 16px;\n  background-color: #ddd;\n}\n.styles_mobile-modal-content__Gla3M .styles_tab-row__6WYwM .styles_radio-tab-label__-7Fx- {\n  padding: 9px 0;\n  font-size: 15px;\n  line-height: 18px;\n  letter-spacing: -0.5px;\n  border-radius: 3px;\n  font-weight: normal;\n  width: 50%;\n  text-align: center;\n  color: #333;\n}\n.styles_mobile-modal-content__Gla3M .styles_tab-row__6WYwM .styles_radio-tab-label__-7Fx-.styles_active__9LaDz {\n  font-weight: var(--font-weight-medium);\n  background-color: #fff;\n}\n.styles_mobile-modal-content__Gla3M .styles_tab-row__6WYwM .styles_radio-textbutton__Ad81W {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j {\n  display: flex;\n  margin-bottom: 25px;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j label:first-child {\n  flex-basis: 60%;\n  margin-right: 10px;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j label:nth-child(2) {\n  flex-basis: 40%;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW {\n  border: 1px solid #888;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  height: 40px;\n  line-height: 1.5;\n  font-size: 100%;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW:focus-within {\n  background: rgba(0, 122, 201, 0.06);\n  border: 2px solid var(--color);\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_combobox-icon__wsdX4 {\n  height: 18px;\n  font-size: 18px;\n  padding: 0 0 0 10px;\n  border: none;\n  position: relative;\n  top: 3px;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_combobox-icon__wsdX4.styles_time-input-icon__J1qei > svg {\n  height: 20px;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_combobox-icon__wsdX4.styles_date-input-icon__SFXGx > svg {\n  height: 20px;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .mobile-datetimepicker-invalid-input {\n  color: #f00 !important;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_time-input-mobile__QGutf {\n  font-family: inherit;\n  box-shadow: none;\n  font-size: 18px;\n  letter-spacing: -0.5px;\n  line-height: 20px;\n  font-weight: var(--font-weight-medium);\n  border: none;\n  outline: none;\n  background: none;\n  width: 54px;\n  margin-left: 10px;\n  color: #333;\n  height: 1.5265rem;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_mobile-input-display__Xnjg1 {\n  position: relative;\n  left: 10px;\n  border: none;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_mobile-input-display__Xnjg1:focus {\n  outline: none;\n  box-shadow: none;\n  background: none;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_mobile-input-display__Xnjg1 {\n  background: inherit;\n  box-shadow: none;\n  font-family: inherit;\n  font-weight: var(--font-weight-medium);\n  font-stretch: normal;\n  font-style: normal;\n  font-size: 16px;\n  line-height: 1.33;\n  letter-spacing: -0.5px;\n  color: #333;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_mobile-input-hidden__tkKxe {\n  font-size: 16px;\n  margin-bottom: 12px;\n  height: 0;\n  width: 0;\n  background: inherit;\n  color: transparent;\n  outline: none;\n  box-shadow: none;\n  border: none;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_mobile-input-hidden__tkKxe:focus {\n  outline: none;\n  box-shadow: none;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_container__YXGq1 {\n  position: absolute;\n  width: calc((100% - 50px) * 0.6);\n  height: 25px;\n  font-size: 15px;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_container__YXGq1 .styles_suggestion__3Hx-R {\n  list-style: none;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: normal;\n  line-height: 49px;\n  height: 50px;\n  margin: 0;\n  padding: 0 0 0 16px;\n  color: rgba(0, 0, 0, 0.87);\n  background: white;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_container__YXGq1 .styles_suggestionHighlighted__lexDG {\n  background: #dfe5e8;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_container__YXGq1 .styles_suggestionsContainerOpen__pzu14 {\n  position: absolute;\n  z-index: 19;\n  max-height: 250px;\n  overflow-x: hidden;\n  overflow-y: scroll;\n  border-radius: 5px;\n  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.06);\n  border: 1px rgba(0, 0, 0, 0.1) solid;\n  top: 42px;\n  left: -2px;\n  width: 100%;\n  font-size: 16px;\n  line-height: 1;\n  color: rgba(0, 0, 0, 0.87);\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_container__YXGq1 .styles_suggestionsContainerOpen__pzu14 ul {\n  padding: 0;\n  margin: 0;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_container__YXGq1 .styles_input__Yk2Tv {\n  color: black;\n  box-shadow: none;\n  border: none;\n  background: none;\n  font-size: 16px;\n  font-weight: var(--font-weight-medium);\n  height: 25px;\n  display: inline-block;\n  font-family: inherit;\n  line-height: 1.33;\n  padding-left: 46px;\n}\n.styles_mobile-modal-content__Gla3M .styles_input-row__r-26j .styles_input-container__US3eW .styles_container__YXGq1 .styles_input__Yk2Tv:focus {\n  outline: none;\n  border: none;\n  background: none;\n}\n.styles_mobile-modal-content__Gla3M .styles_buttons-row__zrM35 {\n  display: flex;\n  flex-direction: column;\n  font-size: 16px;\n  font-weight: var(--font-weight-medium);\n}\n.styles_mobile-modal-content__Gla3M .styles_buttons-row__zrM35 button {\n  background-color: white;\n  font-family: inherit;\n  font-weight: var(--font-weight-medium);\n  font-size: 16px;\n  letter-spacing: -0.02em;\n  width: 100%;\n  border-radius: 50px;\n  height: 40px;\n  color: var(--color);\n  border: 1px solid #888;\n}\n.styles_mobile-modal-content__Gla3M .styles_buttons-row__zrM35 button.styles_ready-button__e23mO {\n  color: white;\n  background-color: var(--color);\n  border: none;\n  margin-bottom: 10px;\n}";
+var styles = {"sr-only":"styles_sr-only__D6MJ6","dt-datetimepicker":"styles_dt-datetimepicker__DSYbh","hidden":"styles_hidden__TjnWH","datetimepicker-open-container":"styles_datetimepicker-open-container__zWBiT","top-row-container":"styles_top-row-container__rGdmj","closed":"styles_closed__QYbCF","time-icon":"styles_time-icon__ES47Y","dropdown-icon":"styles_dropdown-icon__O0GrI","close-icon":"styles_close-icon__B5-I5","label-open":"styles_label-open__dVDlF","textbutton":"styles_textbutton__sVckw","active":"styles_active__9LaDz","combobox-left":"styles_combobox-left__nwwOo","combobox-right":"styles_combobox-right__qlPKD","departure-or-arrival-container":"styles_departure-or-arrival-container__Rj3b9","radio-textbutton-label":"styles_radio-textbutton-label__LeV2o","first-radio":"styles_first-radio__F8N7J","radio-textbutton":"styles_radio-textbutton__Ad81W","departure-now-button":"styles_departure-now-button__8ZlDU","open-button":"styles_open-button__yl4be","close-button":"styles_close-button__mdfIU","right-edge":"styles_right-edge__XbqgK","combobox-container":"styles_combobox-container__sR9aU","combobox-icon":"styles_combobox-icon__wsdX4","date-input-icon":"styles_date-input-icon__SFXGx","time-input-icon":"styles_time-input-icon__J1qei","datetimepicker-select-container":"styles_datetimepicker-select-container__Y8wgE","picker-container":"styles_picker-container__wz2Zj","combobox-mobile-container":"styles_combobox-mobile-container__ZzG8g","mobile-modal-overlay":"styles_mobile-modal-overlay__wq8cS","mobile-modal-content":"styles_mobile-modal-content__Gla3M","top-row":"styles_top-row__hzke9","modal-title":"styles_modal-title__CztKf","tab-row":"styles_tab-row__6WYwM","radio-tab-label":"styles_radio-tab-label__-7Fx-","input-row":"styles_input-row__r-26j","input-container":"styles_input-container__US3eW","time-input-mobile":"styles_time-input-mobile__QGutf","mobile-input-display":"styles_mobile-input-display__Xnjg1","mobile-input-hidden":"styles_mobile-input-hidden__tkKxe","container":"styles_container__YXGq1","suggestion":"styles_suggestion__3Hx-R","suggestionHighlighted":"styles_suggestionHighlighted__lexDG","suggestionsContainerOpen":"styles_suggestionsContainerOpen__pzu14","input":"styles_input__Yk2Tv","buttons-row":"styles_buttons-row__zrM35","ready-button":"styles_ready-button__e23mO"};
+styleInject(css_248z);
+
+/**
+ * Component to display a date or time input on desktop.
+ *
+ * @param {Object} props
+ * @param {Number} props.value    Currently selected time. Unix timestamp in milliseconds
+ * @param {function} props.onChange     This is called with new timestamp when input is changed
+ * @param {function} props.getDisplay   Function to get a string representation from a timestamp
+ * @param {array}    props.timeChoices  Array of timestamps to choose from
+ * @param {string} id                   Id prefix for labels and aria attributes. Should be unique in page
+ * @param {string} label                Text to show as input label
+ * @param {node} icon                   JSX for icon to show in input
+ * @param {boolean} disableTyping       Set to true to disable typing in the input
+ * @param {boolean} datePicker          Is the picker DatePicker or TimePicker
+ *
+ * @example
+ * <DesktopDatetimepicker
+ *   value={1590133823000}
+ *   onChange={timestamp => update(timestamp)}
+ *   getDisplay={timestamp => formatTime(timestamp)}
+ *   timeChoices={[1590133823000]}
+ *   id="timeinput"
+ *   icon="<Icon />"
+ *   disableTyping={false} // can be omitted if not true
+ *   datePicker={true} // can be omitted if not true
+ */
+function DesktopDatetimepicker({
+  value,
+  onChange,
+  getDisplay,
+  timeChoices,
+  id,
+  label,
+  icon,
+  disableTyping,
+  timeZone,
+  datePicker,
+  translationSettings
+}) {
+  Settings.defaultZone = timeZone;
+  const [t] = useTranslation();
+  const [displayValue, changeDisplayValue] = useState(getDisplay(value));
+  const [typing, setTyping] = useState(false);
+  const [showAllOptions, setShowAllOptions] = useState(true);
+  const [invalidInput, setinvalidInput] = useState(false);
+  useEffect(() => {
+    changeDisplayValue(getDisplay(value));
+    if (!datePicker) {
+      setinvalidInput(false);
+    }
+  }, [value]);
+
+  // newValue is string
+  const handleTimestamp = newValue => {
+    const asNumber = Number(newValue);
+    try {
+      DateTime.fromMillis(asNumber);
+    } catch (e) {
+      // If the value is not a valid timestamp, we don't change it
+      return;
+    }
+    onChange(asNumber);
+  };
+  function isinvalidInput(str) {
+    const regex = /[a-zA-Z§ÄäÖö.-\s]/g;
+    if (str.length < displayValue?.length) {
+      const valid = validateInput(str);
+      setinvalidInput(!valid);
+      return true;
+    }
+    if (regex.test(str)) {
+      return false;
+    }
+    const time = str.length > 5 ? str.slice(0, -1) : str;
+    const valid = validateInput(time);
+    setinvalidInput(!valid);
+    return str.length <= 5;
+  }
+  const onInputChange = (newValue, {
+    action
+  }) => {
+    if (action === 'menu-close') {
+      setShowAllOptions(true);
+    } else if (showAllOptions) {
+      setShowAllOptions(false);
+    }
+    if (disableTyping || newValue && !isinvalidInput(newValue)) {
+      return;
+    }
+    if (action === 'input-change') {
+      const validated = parseTypedTime(newValue);
+      changeDisplayValue(validated);
+      setTyping(true);
+    }
+  };
+  const options = timeChoices.map(time => {
+    return {
+      value: time.toString(),
+      label: getDisplay(time)
+    };
+  });
+
+  // Time picker has a list of minutes, instead of 15 minutes. We need to filter those out
+  // so closest option will show up in the list.
+  const closestOptions = datePicker ? options : options.filter(o => o.label.split(':')[1] % 15 === 0);
+  const closestOption = closestOptions.length > 0 ? closestOptions?.reduce((a, b) => Math.abs(value - a.value) < Math.abs(value - b.value) ? a : b) : undefined;
+  const inputId = `${id}-input`;
+  const labelId = `${id}-label`;
+  const filterOptions = (option, input) => {
+    const hour = input.length <= 2 ? input : input.split(':')[0];
+    const isValidHour = /^([0-1]?[0-9]|2[0-3])$/.test(hour);
+    const comp = hour.length === 1 ? '0'.concat(input) : input;
+    return isValidHour ? option.label.split(':')[0] === comp.split(':')[0] : true;
+  };
+  const ariaError = t('invalid-input', translationSettings);
+  return /*#__PURE__*/React.createElement("label", {
+    className: styles['combobox-container'],
+    htmlFor: inputId
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['sr-only'],
+    id: labelId
+  }, label, " ", displayValue), icon, /*#__PURE__*/React.createElement(Select, {
+    "aria-labelledby": labelId,
+    ariaLiveMessages: {
+      guidance: context => {
+        // When user types invalid value, isDisabled becomes undefined instead of false
+        if (context.isDisabled === undefined && invalidInput) {
+          return ariaError;
+        }
+        return '.'; // this can't be empty for some reason
+      },
+      onChange: () => {
+        return '';
+      },
+      onFilter: () => {
+        return '';
+      },
+      onFocus: ({
+        context,
+        label: itemLabel
+      }) => {
+        if (context === 'menu') {
+          return itemLabel;
+        }
+        return '';
+      }
+    },
+    options: options,
+    inputId: inputId,
+    onChange: time => {
+      const currentTime = DateTime.fromMillis(value).toFormat('HH:mm');
+      const ts = getTs(displayValue, value);
+      if (typing) {
+        if (ts !== null) {
+          if (currentTime !== displayValue && time.value === value) {
+            handleTimestamp(ts);
+          } else {
+            handleTimestamp(time.value);
+          }
+          setTyping(false);
+        } else {
+          if (time.value !== value) {
+            handleTimestamp(time.value);
+          } else {
+            // reset value
+            changeDisplayValue(getDisplay(value));
+          }
+          setTyping(false);
+        }
+        if (!datePicker) {
+          setinvalidInput(false);
+        }
+        return;
+      }
+      if (!datePicker) {
+        setinvalidInput(false);
+      }
+      handleTimestamp(time.value);
+    },
+    components: {
+      IndicatorsContainer: () => null
+    },
+    className: cx(styles['datetimepicker-select-container'], invalidInput && 'datetimepicker-invalid-input'),
+    classNamePrefix: "datetimepicker-select",
+    onInputChange: onInputChange,
+    inputValue: !disableTyping && displayValue,
+    value: closestOption,
+    noOptionsMessage: () => {
+      return '';
+    },
+    filterOption: (option, input) => {
+      if (datePicker) {
+        return true;
+      }
+      const completeInput = input.length === 5 || input.length === 4 && input.split(':')[0].length === 1;
+      const isMod15 = option.label.split(':')[1] % 15 === 0;
+      const minuteInput = input.split(':')[1]?.length === 1;
+      if (showAllOptions && isMod15) {
+        return true;
+      }
+      if (minuteInput) {
+        const inputH = input.split(':')[0].length === 1 ? '0'.concat(input.split(':')[0]) : input.split(':')[0];
+        const inputM = input.split(':')[1];
+        const optH = option.label.split(':')[0];
+        const optM = option.label.split(':')[1];
+        if (inputH === optH) {
+          const time = Number(inputM) * 10;
+          const total = Number(optM) - time;
+          if (total >= 0 && total <= 9) {
+            return true;
+          }
+          return false;
+        }
+      }
+      if (completeInput && !showAllOptions) {
+        return input.length === 4 ? '0'.concat(input) === option.label : input === option.label;
+      }
+      if (isMod15) {
+        return filterOptions(option, input);
+      }
+      return false;
+    },
+    controlShouldRenderValue: disableTyping,
+    tabSelectsValue: false,
+    placeholder: "",
+    onFocus: e => {
+      if (!disableTyping) {
+        e.target.select();
+      }
+    },
+    onBlur: () => {
+      // removing focus also locks in value
+      if (typing) {
+        const validated = getTs(displayValue, value);
+        if (validated !== null) {
+          handleTimestamp(validated);
+          setTyping(false);
+        } else {
+          changeDisplayValue(getDisplay(value));
+          setTyping(false);
+        }
+      }
+      if (!datePicker) {
+        setinvalidInput(false);
+      }
+    },
+    onKeyDown: e => {
+      if (['ArrowDown', 'ArrowUp'].includes(e.key)) {
+        setTyping(false);
+      }
+    },
+    isSearchable: !disableTyping
+  }));
+}
+process.env.NODE_ENV !== "production" ? DesktopDatetimepicker.propTypes = {
+  value: PropTypes.number.isRequired,
+  onChange: PropTypes.func.isRequired,
+  getDisplay: PropTypes.func.isRequired,
+  timeChoices: PropTypes.arrayOf(PropTypes.number).isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
+  icon: PropTypes.node.isRequired,
+  disableTyping: PropTypes.bool,
+  timeZone: PropTypes.string,
+  datePicker: PropTypes.bool,
+  translationSettings: PropTypes.shape({
+    lng: PropTypes.string.isRequired
+  })
+} : void 0;
+DesktopDatetimepicker.defaultProps = {
+  disableTyping: false,
+  timeZone: 'Europe/Helsinki',
+  datePicker: false,
+  translationSettings: {
+    lng: 'fi'
+  }
+};
+
+/**
+ *  Detect if user is on a mobile device by parsing userAgent. This is not 100% reliable but close enough.
+ *
+ * @return {boolean}
+ */
+function isMobile() {
+  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  const mobile = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(userAgent);
+  return mobile;
+}
+
+/**
+ * Detect if user is on an android device. Not 100% reliable.
+ */
+function isAndroid() {
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.indexOf('android') > -1;
+}
+
+/**
+ * Detect if input type="date" and type="time" are supported in by the browser
+ *
+ * @return {boolean}
+ */
+function dateTimeInputIsSupported() {
+  if (typeof window === 'undefined' || window === null) {
+    return false;
+  }
+  const elem = document.createElement('input');
+  elem.type = 'date';
+  if (elem.type !== 'date') {
+    return false;
+  }
+  elem.type = 'time';
+  if (elem.type !== 'time') {
+    return false;
+  }
+  return true;
+}
+
+const AndroidSelect = ({
+  value,
+  dateChoices,
+  id,
+  getDisplay,
+  onChange,
+  labelId,
+  inputId
+}) => {
+  const items = dateChoices.map(date => ({
+    value: date,
+    label: getDisplay(date)
+  }));
+  const selectedItem = items.find(option => option.value === value) || items[0] || null;
+  const {
+    isOpen,
+    getToggleButtonProps,
+    getMenuProps,
+    getItemProps,
+    highlightedIndex
+  } = useSelect({
+    selectedItem,
+    items,
+    itemToString: item => item?.label ?? '',
+    onSelectedItemChange: ({
+      selectedItem: nextSelectedItem
+    }) => {
+      if (nextSelectedItem) {
+        onChange(nextSelectedItem.value);
+      }
+    },
+    id
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement("div", getToggleButtonProps({
+    'aria-labelledby': labelId,
+    id: inputId
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.input
+  }, selectedItem.label)), /*#__PURE__*/React.createElement("div", {
+    className: cx(styles.suggestionsContainerOpen, !isOpen && 'hidden')
+  }, /*#__PURE__*/React.createElement("ul", getMenuProps(), isOpen && items.map((option, index) => /*#__PURE__*/React.createElement("li", Object.assign({
+    key: option.value,
+    className: cx(styles.suggestion, index === highlightedIndex && styles.suggestionHighlighted)
+  }, getItemProps({
+    index
+  })), /*#__PURE__*/React.createElement("span", null, option.label))))));
+};
+process.env.NODE_ENV !== "production" ? AndroidSelect.propTypes = {
+  value: PropTypes.number.isRequired,
+  dateChoices: PropTypes.arrayOf(PropTypes.number).isRequired,
+  id: PropTypes.string.isRequired,
+  getDisplay: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  labelId: PropTypes.string.isRequired,
+  inputId: PropTypes.string.isRequired
+} : void 0;
+
+/**
+ * Component to display a date input on mobile
+ */
+function MobileDatepicker({
+  value,
+  getDisplay,
+  onChange,
+  itemCount,
+  startTime,
+  id,
+  label,
+  icon,
+  timeZone
+}) {
+  Settings.defaultZone = timeZone;
+  const dateChoices = Array(itemCount).fill().map((_, i) => DateTime.fromMillis(startTime).plus({
+    days: i
+  }).toMillis());
+  const nativeInput = !isAndroid();
+  const labelId = `${id}-label`;
+  const inputId = `${id}-input`;
+  return /*#__PURE__*/React.createElement("label", {
+    className: styles['input-container'],
+    htmlFor: inputId
+  }, /*#__PURE__*/React.createElement("span", null, icon), /*#__PURE__*/React.createElement("span", {
+    className: styles['sr-only'],
+    id: labelId
+  }, label), nativeInput ? /*#__PURE__*/React.createElement("select", {
+    id: inputId,
+    className: styles['mobile-input-display'],
+    onChange: e => onChange(Number(e.target.value)),
+    value: value
+  }, dateChoices.map(date => {
+    return /*#__PURE__*/React.createElement("option", {
+      key: date,
+      value: date
+    }, getDisplay(date));
+  })) : /*#__PURE__*/React.createElement(AndroidSelect, {
+    value,
+    dateChoices,
+    id,
+    getDisplay,
+    onChange,
+    labelId,
+    inputId
+  }));
+}
+process.env.NODE_ENV !== "production" ? MobileDatepicker.propTypes = {
+  value: PropTypes.number.isRequired,
+  getDisplay: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  itemCount: PropTypes.number.isRequired,
+  startTime: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  icon: PropTypes.node,
+  timeZone: PropTypes.string
+} : void 0;
+MobileDatepicker.defaultProps = {
+  icon: null,
+  timeZone: 'Europe/Helsinki'
+};
+
+/**
+ * Component to display a time input on mobile
+ */
+function MobileTimepicker({
+  value,
+  getDisplay,
+  onChange,
+  id,
+  label,
+  icon,
+  timeZone
+}) {
+  const [inputValue, changeInputValue] = useState(getDisplay(value));
+  const [isValidInput, setValidInput] = useState(true);
+  Settings.defaultZone = timeZone;
+  const inputId = `${id}-input`;
+  const labelId = `${id}-label`;
+  const showError = !isValidInput;
+  return /*#__PURE__*/React.createElement("label", {
+    className: styles['input-container'],
+    htmlFor: inputId
+  }, /*#__PURE__*/React.createElement("span", null, icon), /*#__PURE__*/React.createElement("span", {
+    className: styles['sr-only'],
+    id: labelId
+  }, label), /*#__PURE__*/React.createElement("input", {
+    id: inputId,
+    inputMode: "numeric",
+    type: "text",
+    maxLength: "6",
+    className: cx(styles['time-input-mobile'], showError && 'mobile-datetimepicker-invalid-input'),
+    value: inputValue,
+    onFocus: e => {
+      e.target.setSelectionRange(0, 0); // set caret to start of input
+    },
+    onChange: event => {
+      let newValue = event.target.value.replace('.', ':');
+      const valid = validateInput(newValue);
+      setValidInput(valid);
+      if (
+      // number typed as first char => clear rest of the input
+      newValue.match(/[0-9]{3}:[0-9]{2}/) && newValue.slice(1) === inputValue) {
+        newValue = newValue.charAt(0);
+      }
+      if (newValue.length > 5) {
+        return;
+      }
+      const actual = parseTypedTime(newValue);
+      changeInputValue(actual);
+      const timestamp = getTs(actual, value);
+      if (timestamp) {
+        onChange(timestamp);
+      }
+    }
+  }));
+}
+process.env.NODE_ENV !== "production" ? MobileTimepicker.propTypes = {
+  value: PropTypes.number.isRequired,
+  getDisplay: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  icon: PropTypes.node,
+  timeZone: PropTypes.string
+} : void 0;
+MobileTimepicker.defaultProps = {
+  icon: null,
+  timeZone: 'Europe/Helsinki'
+};
+
+Settings.defaultLocale = 'en';
+
+/**
+ * @param {object} props
+ * @param {'arrival'|'departure'} props.departureOrArrival Whether the picker is for arrival or departure time
+ * @param {function} props.onNowClick Called when the "Now" button is clicked
+ * @param {string} props.lang Language code for translations
+ * @param {string} props.color Color for the component, used in styles
+ * @param {string} props.timeZone Time zone to use for date and time calculations
+ * @param {function} props.onSubmit Called when the user submits the selected date and time
+ * @param {function} props.onCancel called when the user cancels the selection
+ * @param {number} props.timestamp Initial timestamp to display in the picker
+ * @param {function} props.getTimeDisplay Called to get the display string for a given timestamp
+ * @param {number} props.dateSelectItemCount Determines how many date options are shown in the date picker
+ * @param {function} props.getDateDisplay Called to get the display string for a given date
+ * @param {object} props.fontWeights Font weights used in the component styles
+ * @returns {JSX.Element}
+ */
+function MobilePickerModal({
+  departureOrArrival,
+  onNowClick,
+  lang,
+  color,
+  timeZone,
+  onSubmit,
+  onCancel,
+  timestamp,
+  getTimeDisplay,
+  dateSelectItemCount,
+  getDateDisplay,
+  fontWeights,
+  onAfterClose
+}) {
+  Settings.defaultZone = timeZone;
+  const [t] = useTranslation();
+  const translationSettings = {
+    lng: lang
+  };
+  const [displayTimestamp, changeTimestamp] = useState(timestamp);
+  const [departureOrArrivalCurrent, changeDepartureOrArrival] = useState(departureOrArrival);
+  function onArrivalClick() {
+    changeDepartureOrArrival('arrival');
+  }
+  function onDepartureClick() {
+    changeDepartureOrArrival('departure');
+  }
+
+  // for input labels
+  const [htmlId] = useState(uniqueId('datetimepicker-'));
+  const dateSelectStartTime = DateTime.now().startOf('day').set({
+    hour: DateTime.fromMillis(displayTimestamp).hour,
+    minute: DateTime.fromMillis(displayTimestamp).minute
+  }).toMillis();
+  return /*#__PURE__*/React.createElement(Modal, {
+    appElement: document ? document.querySelector('#app') : undefined,
+    isOpen: true,
+    className: styles['mobile-modal-content'],
+    overlayClassName: styles['mobile-modal-overlay'],
+    onAfterClose: onAfterClose
+  }, /*#__PURE__*/React.createElement("div", {
+    id: "digitransit-mobile-datetime",
+    style: {
+      '--color': `${color}`,
+      '--font-weight-medium': fontWeights.medium
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['top-row']
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: styles['modal-title']
+  }, t('choose-time', translationSettings)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles['departure-now-button'],
+    onClick: onNowClick
+  }, t('departure-now', translationSettings))), /*#__PURE__*/React.createElement("div", {
+    className: styles['tab-row']
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: `${htmlId}-modal-departure`,
+    className: `${styles['radio-tab-label']}
+                ${styles[departureOrArrivalCurrent === 'departure' ? 'active' : undefined]}`
+  }, t('departure', translationSettings), /*#__PURE__*/React.createElement("input", {
+    id: `${htmlId}-modal-departure`,
+    name: "departureOrArrival",
+    type: "radio",
+    value: "departure",
+    className: styles['radio-textbutton'],
+    onChange: () => {
+      onDepartureClick();
+    },
+    checked: departureOrArrivalCurrent === 'departure'
+  })), /*#__PURE__*/React.createElement("label", {
+    htmlFor: `${htmlId}-modal-arrival`,
+    className: `${styles['radio-tab-label']}
+                ${styles[departureOrArrivalCurrent === 'arrival' ? 'active' : undefined]}`
+  }, t('arrival', translationSettings), /*#__PURE__*/React.createElement("input", {
+    id: `${htmlId}-modal-arrival`,
+    name: "departureOrArrival",
+    type: "radio",
+    value: "arrival",
+    className: styles['radio-textbutton'],
+    onChange: () => {
+      onArrivalClick();
+    },
+    checked: departureOrArrivalCurrent === 'arrival'
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles['input-row']
+  }, /*#__PURE__*/React.createElement(MobileDatepicker, {
+    value: displayTimestamp,
+    getDisplay: getDateDisplay,
+    onChange: changeTimestamp,
+    itemCount: dateSelectItemCount,
+    startTime: dateSelectStartTime,
+    id: `${htmlId}-date`,
+    label: t('date', translationSettings),
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: `${styles['combobox-icon']} ${styles['date-input-icon']}`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      img: "calendar",
+      color: color
+    })),
+    timeZone: timeZone
+  }), /*#__PURE__*/React.createElement(MobileTimepicker, {
+    value: displayTimestamp,
+    getDisplay: getTimeDisplay,
+    onChange: changeTimestamp,
+    id: `${htmlId}-time`,
+    label: t('time', translationSettings),
+    icon: /*#__PURE__*/React.createElement("span", {
+      className: `${styles['combobox-icon']} ${styles['time-input-icon']}`
+    }, /*#__PURE__*/React.createElement(Icon, {
+      img: "time",
+      color: color
+    })),
+    timeZone: timeZone
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['buttons-row']
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles['ready-button'],
+    onClick: () => onSubmit(displayTimestamp, departureOrArrivalCurrent)
+  }, t('ready', translationSettings)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: styles['cancel-button'],
+    onClick: onCancel
+  }, t('cancel', translationSettings)))));
+}
+process.env.NODE_ENV !== "production" ? MobilePickerModal.propTypes = {
+  timeZone: PropTypes.string,
+  departureOrArrival: PropTypes.oneOf(['departure', 'arrival']).isRequired,
+  onNowClick: PropTypes.func.isRequired,
+  lang: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onAfterClose: PropTypes.func.isRequired,
+  timestamp: PropTypes.number.isRequired,
+  getTimeDisplay: PropTypes.func.isRequired,
+  dateSelectItemCount: PropTypes.number.isRequired,
+  getDateDisplay: PropTypes.func.isRequired,
+  fontWeights: PropTypes.shape({
+    medium: PropTypes.number.isRequired
+  }).isRequired
+} : void 0;
+MobilePickerModal.defaultProps = {
+  color: '#007ac9',
+  timeZone: 'Europe/Helsinki'
+};
+
+Settings.defaultLocale = 'en';
+
+/**
+ * This component renders combobox style inputs for selecting date and time. This is a controlled component, timestamp is the current value of both inputs.
+ * @param {Object} props
+ *
+ * @param {Number} props.timestamp      Currently selected time as a unix timestamp in milliseconds. Set to null to signify that "now" is selected. Displayed time is updated in realtime when set to null
+ * @param {function} props.onTimeChange       Called with new timestamp when time input changes
+ * @param {function} props.onDateChange       Called with new timestamp when date input changes
+ * @param {'arrival'|'departure'} props.departureOrArrival   Determine if input is set to choose departure or arrival time
+ * @param {function} props.onNowClick         Called when "depart now" button is clicked
+ * @param {function} props.onDepartureClick   Called when "departure" button is clicked
+ * @param {function} props.onArrivalClick     Called when "arrival" button is clicked
+ * @param {node} props.embedWhenClosed        JSX element to render in the corner when input is closed
+ * @param {node} props.embedWhenOpen          JSX element to render when input is open
+ * @param {string} props.lang                 Language selection
+ * @param {number} props.serviceTimeRange           Determine number of days shown in timepicker. Optional. default is 30.
+ * @param {function} props.onOpen                   Determine what to do when timepicker is open. Optional. no default implementation.
+ * @param {function} props.onClose                  Determine what to do when timepicker is closed. Optional. no default implementation.
+ * @param {function} props.openPicker               Determine if timepicker should be open in intial render. Optional. Default is undefined.
+ *
+ *
+ * @example
+ * <Datetimepicker
+ *   timestamp={1590133823000}
+ *   onTimeChange={(newTimestamp) => update(newTimestamp)}
+ *   onDateChange={(newTimestamp) => update(newTimestamp)}
+ *   departureOrArrival={'departure'}
+ *   onNowClick={() => setTimestampToNull()}
+ *   onDepartureClick={() => departureClicked()}
+ *   onArrivalClick={() => arrivalClicked()}
+ *   embedWhenClosed={<button />}
+ *   lang={'en'}
+ *   serviceTimeRange={15}
+ * />
+ */
+function Datetimepicker({
+  timestamp,
+  onTimeChange,
+  onDateChange,
+  departureOrArrival,
+  onNowClick,
+  onDepartureClick,
+  onArrivalClick,
+  embedWhenClosed,
+  embedWhenOpen,
+  lang,
+  color,
+  timeZone,
+  onModalSubmit,
+  fontWeights,
+  serviceTimeRange,
+  onOpen,
+  onClose,
+  openPicker
+}) {
+  Settings.defaultZone = timeZone;
+  const [t] = useTranslation();
+  const [isOpen, changeOpen] = useState(openPicker || false);
+  const [displayTimestamp, changeDisplayTimestamp] = useState(timestamp || DateTime.now().toMillis());
+  // timer for updating displayTimestamp in real time
+  const [timerId, setTimer] = useState(null);
+  // for input labels
+  const [htmlId] = useState(uniqueId('datetimepicker-'));
+  const [useMobileInputs] = useState(isMobile() && dateTimeInputIsSupported());
+  const openPickerRef = useRef();
+  const inputRef = useRef();
+  const alertRef = useRef();
+  const translationSettings = {
+    lng: lang
+  };
+  useEffect(() => {
+    Settings.defaultLocale = lang;
+  }, [lang]);
+  const nowSelected = timestamp === null;
+  useEffect(() => {
+    if (nowSelected) {
+      changeDisplayTimestamp(DateTime.now().toMillis());
+    } else {
+      // clear timer
+      if (timerId) {
+        clearInterval(timerId);
+        setTimer(null);
+      }
+      changeDisplayTimestamp(timestamp);
+    }
+  }, [timestamp]);
+
+  // set timer to update displayTimestamp when minute changes if nowSelected
+  useEffect(() => {
+    if (!nowSelected) {
+      return undefined;
+    }
+    if (timerId) {
+      clearInterval(timerId);
+    }
+    const newId = setInterval(() => {
+      const now = DateTime.now();
+      const sameMinute = DateTime.fromMillis(displayTimestamp).hasSame(now, 'minute');
+      if (!sameMinute) {
+        clearInterval(newId);
+        setTimer(null);
+        changeDisplayTimestamp(now.toMillis());
+      }
+    }, 5000);
+    setTimer(newId);
+    return () => clearInterval(newId);
+  }, [displayTimestamp]);
+
+  /**
+   * @param {number} date Date in milliseconds since unix epoch
+   * @returns {string} formatted date
+   */
+  const getDateDisplay = date => {
+    const time = DateTime.fromMillis(date);
+    const now = DateTime.now();
+    let formatted;
+    if (time.hasSame(now, 'day')) {
+      formatted = t('today', translationSettings);
+      formatted = `${formatted.charAt(0).toUpperCase()}${formatted.slice(1)}`;
+    } else if (time.hasSame(now.plus({
+      days: 1
+    }), 'day')) {
+      formatted = t('tomorrow', translationSettings);
+      formatted = `${formatted.charAt(0).toUpperCase()}${formatted.slice(1)}`;
+    } else {
+      formatted = time.toFormat('ccc d.L.');
+    }
+    return formatted;
+  };
+
+  // param time is timestamp
+  const getTimeDisplay = time => {
+    return DateTime.fromMillis(time).toFormat('HH:mm');
+  };
+
+  // compute choices only when timestamp changes instead of every render
+  const [timeChoices, dateChoices] = useMemo(() => {
+    const selectedMoment = DateTime.fromMillis(timestamp || DateTime.now().toMillis());
+    const timeSelectStartTime = selectedMoment.startOf('day').toMillis();
+    const isMobileCurrently = isMobile();
+    let newTimeChoices = [];
+    let current = selectedMoment.startOf('day');
+    while (current.hasSame(timeSelectStartTime, 'day')) {
+      newTimeChoices.push(current.valueOf());
+      if (isMobileCurrently) {
+        current = current.plus({
+          minutes: 15
+        });
+      } else {
+        current = current.plus({
+          minutes: 1
+        });
+      }
+    }
+    if (timestamp === null) {
+      // if time is set to now
+      // add times in 5 min intervals for next 30 mins
+      const fiveMinutes = 1000 * 60 * 5;
+      const nextFiveMin = Math.ceil(displayTimestamp / fiveMinutes) * fiveMinutes;
+      const timesToAdd = Array(7).fill().map((_, i) => nextFiveMin + i * fiveMinutes);
+      const closestIndexAfter = newTimeChoices.map(time => displayTimestamp - time).findIndex(time => time <= 0);
+      newTimeChoices.splice(closestIndexAfter, 0, ...timesToAdd);
+      newTimeChoices = Array.from(new Set(newTimeChoices)); // remove duplicates
+    }
+    const dateSelectStartTime = DateTime.now().startOf('day').set({
+      hour: selectedMoment.hour,
+      minute: selectedMoment.minute
+    });
+    const newDateChoices = Array(serviceTimeRange).fill().map((_, i) => dateSelectStartTime.plus({
+      days: i
+    }).toMillis());
+    return [newTimeChoices, newDateChoices];
+  }, [timestamp]);
+  function showScreenreaderCloseAlert() {
+    if (alertRef.current) {
+      alertRef.current.innerHTML = t('accessible-closed', translationSettings);
+      setTimeout(() => {
+        // The component may have unmounted (clearing the ref) before this
+        // fires - don't crash in that case.
+        if (alertRef.current) {
+          alertRef.current.innerHTML = null;
+        }
+      }, 100);
+    }
+  }
+  function showScreenreaderOpenAlert() {
+    if (alertRef.current) {
+      alertRef.current.innerHTML = t('accessible-opened', translationSettings);
+      setTimeout(() => {
+        // The component may have unmounted (clearing the ref) before this
+        // fires - don't crash in that case.
+        if (alertRef.current) {
+          alertRef.current.innerHTML = null;
+        }
+      }, 100);
+    }
+  }
+  const handleClose = () => {
+    changeOpen(false);
+    showScreenreaderCloseAlert();
+    if (onClose) {
+      onClose();
+    }
+  };
+  const handleNowClick = () => {
+    handleClose();
+    onNowClick();
+  };
+  function renderOpen() {
+    if (useMobileInputs) {
+      return isOpen && /*#__PURE__*/React.createElement(MobilePickerModal, {
+        departureOrArrival: departureOrArrival,
+        onNowClick: handleNowClick,
+        lang: lang,
+        color: color,
+        onSubmit: (newTimestamp, newDepartureOrArrival) => {
+          onModalSubmit(newTimestamp, newDepartureOrArrival);
+          changeOpen(false);
+          showScreenreaderCloseAlert();
+        },
+        onCancel: handleClose,
+        onAfterClose: () => requestAnimationFrame(() => {
+          openPickerRef.current?.focus();
+        }),
+        getTimeDisplay: getTimeDisplay,
+        timeZone: timeZone,
+        timestamp: displayTimestamp,
+        getDateDisplay: getDateDisplay,
+        dateSelectItemCount: serviceTimeRange,
+        getDisplay: getTimeDisplay,
+        fontWeights: fontWeights
+      });
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: `${styles['datetimepicker-open-container']} ${!isOpen ? styles.hidden : ''}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: isOpen ? `${styles['top-row-container']} datetimepicker-top-row` : `${styles.hidden} datetimepicker-top-row`
+    }, ' ', /*#__PURE__*/React.createElement("span", {
+      role: "alert",
+      className: styles['sr-only'],
+      ref: alertRef
+    }), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", {
+      className: styles['departure-or-arrival-container']
+    }, /*#__PURE__*/React.createElement("label", {
+      htmlFor: `${htmlId}-departure`,
+      className: `${styles['radio-textbutton-label']}
+                ${styles[departureOrArrival === 'departure' ? 'active' : undefined]}`
+    }, t('departure', translationSettings), /*#__PURE__*/React.createElement("input", {
+      id: `${htmlId}-departure`,
+      name: "departureOrArrival",
+      type: "radio",
+      value: "departure",
+      className: styles['radio-textbutton'],
+      onChange: () => {
+        onDepartureClick();
+      },
+      checked: departureOrArrival === 'departure'
+    })), /*#__PURE__*/React.createElement("label", {
+      htmlFor: `${htmlId}-arrival`,
+      className: `${styles['radio-textbutton-label']}
+                ${styles[departureOrArrival === 'arrival' ? 'active' : undefined]}`
+    }, t('arrival', translationSettings), /*#__PURE__*/React.createElement("input", {
+      id: `${htmlId}-arrival`,
+      name: "departureOrArrival",
+      type: "radio",
+      value: "arrival",
+      className: styles['radio-textbutton'],
+      onChange: () => {
+        onArrivalClick();
+      },
+      checked: departureOrArrival === 'arrival'
+    }))), /*#__PURE__*/React.createElement("button", {
+      id: `${htmlId}-now`,
+      type: "button",
+      className: styles['departure-now-button'],
+      onClick: handleNowClick,
+      ref: inputRef
+    }, t('departure-now', translationSettings)), /*#__PURE__*/React.createElement("span", {
+      className: styles['right-edge']
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: styles['close-button'],
+      "aria-controls": `${htmlId}-root`,
+      "aria-expanded": "true",
+      onClick: handleClose
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles['close-icon']
+    }, /*#__PURE__*/React.createElement(Icon, {
+      img: "close",
+      color: color
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles['sr-only']
+    }, t('accessible-close', translationSettings))))), /*#__PURE__*/React.createElement("div", {
+      className: isOpen ? `${styles['picker-container']}` : `${styles.hidden} datetimepicker-top-row`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: styles['combobox-left']
+    }, /*#__PURE__*/React.createElement(DesktopDatetimepicker, {
+      value: displayTimestamp,
+      onChange: newValue => {
+        onDateChange(newValue);
+      },
+      getDisplay: getDateDisplay,
+      timeChoices: dateChoices,
+      validate: () => null,
+      icon: /*#__PURE__*/React.createElement("span", {
+        className: `${styles['combobox-icon']} ${styles['date-input-icon']}`
+      }, /*#__PURE__*/React.createElement(Icon, {
+        img: "calendar",
+        color: color
+      })),
+      id: `${htmlId}-date`,
+      label: t('date', translationSettings),
+      disableTyping: true,
+      timeZone: timeZone,
+      datePicker: true
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles['combobox-right']
+    }, /*#__PURE__*/React.createElement(DesktopDatetimepicker, {
+      value: displayTimestamp,
+      onChange: newValue => {
+        onTimeChange(newValue);
+      },
+      getDisplay: getTimeDisplay,
+      timeChoices: timeChoices,
+      icon: /*#__PURE__*/React.createElement("span", {
+        className: `${styles['combobox-icon']} ${styles['time-input-icon']}`
+      }, /*#__PURE__*/React.createElement(Icon, {
+        img: "time",
+        color: color
+      })),
+      id: `${htmlId}-time`,
+      label: t('time', translationSettings),
+      timeZone: timeZone,
+      translationSettings: translationSettings
+    })))), /*#__PURE__*/React.createElement("span", {
+      className: isOpen ? '' : styles.hidden
+    }, embedWhenOpen));
+  }
+  const formatToprowSummary = () => {
+    if (nowSelected && departureOrArrival === 'departure') {
+      return /*#__PURE__*/React.createElement("span", null, t('departure-now', translationSettings));
+    }
+    const dateDisplay = getDateDisplay(displayTimestamp);
+    const timeDisplay = getTimeDisplay(displayTimestamp);
+    const summary = t(departureOrArrival === 'departure' ? 'departure' : 'arrival', translationSettings);
+    const isToday = DateTime.now().hasSame(DateTime.fromMillis(displayTimestamp), 'day');
+    const isTomorrow = DateTime.now().plus({
+      days: 1
+    }).hasSame(DateTime.fromMillis(displayTimestamp), 'day');
+    if (isToday) {
+      return /*#__PURE__*/React.createElement("span", null, `${summary} ${timeDisplay}`);
+    }
+    if (isTomorrow) {
+      return /*#__PURE__*/React.createElement("span", null, `${summary} ${dateDisplay.toLowerCase()} ${timeDisplay}`);
+    }
+    return /*#__PURE__*/React.createElement("span", null, `${summary} ${dateDisplay} ${timeDisplay}`);
+  };
+  return /*#__PURE__*/React.createElement("fieldset", {
+    className: styles['dt-datetimepicker'],
+    id: `${htmlId}-root`,
+    style: {
+      '--color': `${color}`,
+      '--font-weight-medium': fontWeights.medium
+    }
+  }, /*#__PURE__*/React.createElement("legend", {
+    className: styles['sr-only']
+  }, t('accessible-title', translationSettings)), /*#__PURE__*/React.createElement("span", {
+    className: styles['sr-only']
+  }, t('accessible-update-instructions', translationSettings)), /*#__PURE__*/React.createElement("div", {
+    className: !isOpen ? `${styles['top-row-container']} ${styles.closed} datetimepicker-top-row` : `${styles.hidden} datetimepicker-top-row`
+  }, /*#__PURE__*/React.createElement("label", {
+    className: styles['label-open'],
+    htmlFor: `${htmlId}-open`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles['time-icon']
+  }, /*#__PURE__*/React.createElement(Icon, {
+    img: "time",
+    color: color
+  })), /*#__PURE__*/React.createElement("span", {
+    className: styles['sr-only']
+  }, t('accessible-open', translationSettings)), /*#__PURE__*/React.createElement("span", {
+    role: "alert",
+    className: styles['sr-only'],
+    ref: alertRef
+  }), /*#__PURE__*/React.createElement("button", {
+    id: `${htmlId}-open`,
+    type: "button",
+    className: `${styles.textbutton} ${styles.active} ${styles['open-button']}`,
+    "aria-controls": `${htmlId}-root`,
+    "aria-expanded": "false",
+    onClick: () => {
+      changeOpen(true);
+      showScreenreaderOpenAlert();
+      if (onOpen) {
+        onOpen();
+      }
+    },
+    ref: openPickerRef
+  }, formatToprowSummary(), /*#__PURE__*/React.createElement("span", {
+    className: styles['dropdown-icon']
+  }, /*#__PURE__*/React.createElement(Icon, {
+    img: "arrow-dropdown",
+    color: color
+  })))), /*#__PURE__*/React.createElement("span", {
+    className: styles['right-edge']
+  }, embedWhenClosed)), /*#__PURE__*/React.createElement("div", null), renderOpen());
+}
+process.env.NODE_ENV !== "production" ? Datetimepicker.propTypes = {
+  timestamp: PropTypes.number,
+  timeZone: PropTypes.string,
+  onTimeChange: PropTypes.func.isRequired,
+  onDateChange: PropTypes.func.isRequired,
+  departureOrArrival: PropTypes.oneOf(['departure', 'arrival']).isRequired,
+  onNowClick: PropTypes.func.isRequired,
+  onDepartureClick: PropTypes.func.isRequired,
+  onArrivalClick: PropTypes.func.isRequired,
+  embedWhenClosed: PropTypes.node,
+  embedWhenOpen: PropTypes.node,
+  lang: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  onModalSubmit: PropTypes.func.isRequired,
+  fontWeights: PropTypes.shape({
+    medium: PropTypes.number.isRequired
+  }).isRequired,
+  serviceTimeRange: PropTypes.number.isRequired,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  openPicker: PropTypes.bool
+} : void 0;
+Datetimepicker.defaultProps = {
+  timestamp: null,
+  embedWhenClosed: null,
+  embedWhenOpen: null,
+  color: '#007ac9',
+  timeZone: 'Europe/Helsinki',
+  onOpen: null,
+  onClose: null,
+  openPicker: undefined
+};
+
+/* eslint sort-keys: "error" */
+const translations = {
+  de: {
+    translation: {
+      'accessible-close': 'Schließe die Auswahl',
+      'accessible-closed': 'Auswahl geschlossen',
+      'accessible-open': 'Öffne die Auswahl',
+      'accessible-opened': 'Auswahl geöffnet',
+      'accessible-title': 'Datum und Uhrzeitauswahl',
+      arrival: 'Ankunft',
+      cancel: 'Abbrechen',
+      'choose-time': 'Zeit wählen',
+      date: 'Datum',
+      departure: 'Abfahrt',
+      'departure-now': 'Abfahrt jetzt',
+      ready: 'Fertig',
+      time: 'Zeit',
+      today: 'Heute',
+      tomorrow: 'Morgen'
+    }
+  },
+  en: {
+    translation: {
+      'accessible-close': 'Close the picker',
+      'accessible-closed': 'Timepicker closed',
+      'accessible-open': 'Open the picker',
+      'accessible-opened': 'Timepicker opened',
+      'accessible-title': 'Date and timepicker',
+      'accessible-update-instructions': 'Changing time parameters will trigger a new search.',
+      arrival: 'Arrival',
+      cancel: 'Cancel',
+      'choose-time': 'Choose time',
+      date: 'Date',
+      departure: 'Departure',
+      'departure-now': 'Leaving now',
+      'invalid-input': 'The time you entered is invalid',
+      ready: 'Ready',
+      time: 'Time',
+      today: 'Today',
+      tomorrow: 'Tomorrow'
+    }
+  },
+  fi: {
+    translation: {
+      'accessible-close': 'Sulje valitsin',
+      'accessible-closed': 'Valitsin suljettu',
+      'accessible-open': 'Avaa valitsin',
+      'accessible-opened': 'Valitsin avattu',
+      'accessible-title': 'Aika- ja päivämäärävalitsin',
+      'accessible-update-instructions': 'Aikavalintojen muuttaminen laukaisee uuden haun.',
+      arrival: 'Perillä',
+      cancel: 'Peruuta',
+      'choose-time': 'Valitse aika',
+      date: 'Päivä',
+      departure: 'Lähtöaika',
+      'departure-now': 'Lähtö nyt',
+      'invalid-input': 'Syöttämäsi aika on virheellinen',
+      ready: 'Valmis',
+      time: 'Aika',
+      today: 'Tänään',
+      tomorrow: 'Huomenna'
+    }
+  },
+  pl: {
+    translation: {
+      'accessible-close': 'Zamknij wybornik',
+      'accessible-closed': 'Zamknięto wybornik',
+      'accessible-open': 'Otwórz wybornik',
+      'accessible-opened': 'Otwarto wybornik',
+      'accessible-title': 'Wybór daty i godziny',
+      'accessible-update-instructions': 'Zmiana wybranej godziny wywoła nowe wyszukiwanie.',
+      arrival: 'Przyjazd',
+      cancel: 'Anuluj',
+      'choose-time': 'Wybierz godzinę',
+      date: 'Data',
+      departure: 'Wyjazd',
+      'departure-now': 'Wyjeżdżam teraz',
+      'invalid-input': 'Wprowadzona godzina jest nieprawidłowa',
+      ready: 'Gotowe',
+      time: 'Godzina',
+      today: 'Dziś',
+      tomorrow: 'Jutro'
+    }
+  },
+  sv: {
+    translation: {
+      'accessible-close': 'Stäng väljaren',
+      'accessible-closed': 'Väljaren stängde',
+      'accessible-open': 'Öppna väljaren',
+      'accessible-opened': 'Väljaren öppnade',
+      'accessible-title': 'Tid- och datumväljaren',
+      'accessible-update-instructions': 'Om du ändrar tiderna, startas en ny sökning automatiskt.',
+      arrival: 'Anländer',
+      cancel: 'Avbryt',
+      'choose-time': 'Välj tid',
+      date: 'Datum',
+      departure: 'Avgångstid',
+      'departure-now': 'Avgår nu',
+      'invalid-input': 'Tiden du angav är felaktig',
+      ready: 'Färdig',
+      time: 'Tid',
+      today: 'I dag',
+      tomorrow: 'I morgon'
+    }
+  }
+};
+
+const i18n = createInstance({
+  fallbackLng: 'fi',
+  // debug: true,
+  resources: translations,
+  defaultNS: 'translation',
+  react: {
+    useSuspense: true
+  }
+});
+i18n.init();
+
+/**
+ * This component renders an input to choose a date and time. Renders separate input fields for date and time selection. Values for timestamp and arriveBy correspond to Digitransit query params time and arriveBy. This component will display a native date input on mobile and a custom one for desktop. Mobile detection is done by parsing user agent.
+ *
+ * @alias Datetimepicker
+ *
+ * @param {Object} props
+ *
+ * @param {boolean} props.realtime                  Determine if selected time should be updated in realtime when 'now' is selected.
+ * @param {Number} props.initialTimestamp           Initial value for selected time. Unix timestamp in seconds. Updating this will change timepicker value but the correct value is kept in component state even if this is not updated.
+ * @param {boolean} props.initialArriveBy           Initial value for arriveBy. Determines if picker is in arrival mode (true) or departure mode (false). Correct value is kept in component state even if this is not updated. Changing this will also trigger change in the component.
+ * @param {function} props.onTimeChange             Called with (time, arriveBy) when time input changes. time is number timestamp in seconds, arriveBy is boolean
+ * @param {function} props.onDateChange             Called with (time, arriveBy) when date input changes. time is number timestamp in seconds, arriveBy is boolean
+ * @param {function} props.onNowClick               Called when "depart now" button is clicked. time is current input value in seconds
+ * @param {function} props.onDepartureClick         Called with (time) when "departure" button is clicked. time is current input value in seconds
+ * @param {function} props.onArrivalClick           Called with (time) when "arrival" button is clicked. time is current input value in seconds
+ * @param {node} props.embedWhenClosed              JSX element to render in the corner when input is closed
+ * @param {node} props.embedWhenOpen                JSX element to render when input is open
+ * @param {string} props.lang                       Language selection. Default 'en'
+ * @param {number} props.serviceTimeRange           Determine number of days shown in timepicker. Optional. default is 30.
+ * @param {function} props.onOpen                   Determine what to do when timepicker is open. Optional. no default implementation.
+ * @param {function} props.onClose                  Determine what to do when timepicker is closed. Optional. no default implementation.
+ * @param {function} props.openPicker               Determine if timepicker should be open in intial render. Optional. Default is undefined.
+ * @example
+ * <Datetimepicker
+ *   realtime={true}
+ *   initialTimestamp={1590133823}
+ *   initialArriveBy={false}
+ *   onTimeChange={(time, arriveBy) => changeUrl(time, arriveBy)}
+ *   onDateChange={(time, arriveBy) => changeUrl(time, arriveBy)}
+ *   onNowClick={(time) => changeUrl(undefined, undefined)}
+ *   onDepartureClick={(time) => changeUrl(time, 'true')}
+ *   onArrivalClick={(time) => changeUrl(time, undefined)}
+ *   embedWhenClosed={<button />}
+ *   lang={'en'}
+ *   serviceTimeRange={15}
+ * />
+ */
+function DatetimepickerStateContainer({
+  realtime,
+  initialArriveBy,
+  initialTimestamp,
+  onDepartureClick,
+  onArrivalClick,
+  onTimeChange,
+  onDateChange,
+  onNowClick,
+  embedWhenClosed,
+  embedWhenOpen,
+  lang,
+  color,
+  timeZone,
+  fontWeights,
+  serviceTimeRange,
+  onOpen,
+  onClose,
+  openPicker
+}) {
+  Settings.defaultLocale = lang;
+  Settings.defaultZone = timeZone;
+  const initialNow = realtime ? null : DateTime.now().toMillis();
+  const [timestamp, changeTimestampState] = useState(initialTimestamp ? initialTimestamp * 1000 : initialNow);
+  const [departureOrArrival, changeDepartureOrArrival] = useState(initialArriveBy === true ? 'arrival' : 'departure');
+
+  // update state if props change
+  useEffect(() => {
+    const bothNull = timestamp === null && initialTimestamp === undefined;
+    const oneNull = timestamp === null || initialTimestamp === undefined;
+    const sameTime = Math.round(timestamp / 1000) === initialTimestamp;
+    const timestampChanged = !bothNull && (oneNull || !sameTime);
+    if (timestampChanged) {
+      if (initialTimestamp === undefined) {
+        changeTimestampState(null);
+      } else {
+        changeTimestampState(initialTimestamp * 1000);
+      }
+    }
+    if (!initialArriveBy === (departureOrArrival === 'arrival')) {
+      changeDepartureOrArrival(initialArriveBy === true ? 'arrival' : 'departure');
+    }
+  }, [initialTimestamp, initialArriveBy]);
+  const timeChanged = debounce(newTime => {
+    if (newTime === null) {
+      changeTimestampState(DateTime.now().toMillis());
+      onTimeChange(DateTime.now().toUnixInteger(), departureOrArrival === 'arrival');
+      return;
+    }
+    changeTimestampState(newTime);
+    onTimeChange(Math.round(newTime / 1000), departureOrArrival === 'arrival');
+  }, 10);
+  const dateChanged = debounce(newDate => {
+    if (newDate === null) {
+      changeTimestampState(DateTime.now().toMillis());
+      onDateChange(DateTime.now().toUnixInteger(), departureOrArrival === 'arrival');
+      return;
+    }
+    changeTimestampState(newDate);
+    onDateChange(Math.round(newDate / 1000), departureOrArrival === 'arrival');
+  }, 10);
+  const nowClicked = () => {
+    changeDepartureOrArrival('departure');
+    const newTimestamp = realtime ? null : DateTime.now().toMillis();
+    changeTimestampState(newTimestamp);
+    onNowClick(Math.round(newTimestamp / 1000));
+  };
+  const departureClicked = () => {
+    let changed = false;
+    let newTime = timestamp;
+    if (timestamp === null) {
+      const now = DateTime.now().toMillis();
+      changeTimestampState(now);
+      newTime = now;
+      changed = true;
+    }
+    if (departureOrArrival !== 'departure') {
+      changeDepartureOrArrival('departure');
+      changed = true;
+    }
+    if (changed) {
+      onDepartureClick(Math.round(newTime / 1000));
+    }
+  };
+  const arrivalClicked = () => {
+    let changed = false;
+    let newTime = timestamp;
+    if (timestamp === null) {
+      const now = DateTime.now().toMillis();
+      changeTimestampState(now);
+      newTime = now;
+      changed = true;
+    }
+    if (departureOrArrival !== 'arrival') {
+      changeDepartureOrArrival('arrival');
+      changed = true;
+    }
+    if (changed) {
+      onArrivalClick(Math.round(newTime / 1000));
+    }
+  };
+  const onModalSubmit = (time, mode) => {
+    changeTimestampState(time);
+    changeDepartureOrArrival(mode);
+    onTimeChange(Math.round(time / 1000), mode === 'arrival', true);
+  };
+  return /*#__PURE__*/React.createElement(I18nextProvider, {
+    i18n: i18n
+  }, /*#__PURE__*/React.createElement(Datetimepicker, {
+    timestamp: timestamp,
+    onTimeChange: timeChanged,
+    onDateChange: dateChanged,
+    departureOrArrival: departureOrArrival,
+    onNowClick: nowClicked,
+    onDepartureClick: departureClicked,
+    onArrivalClick: arrivalClicked,
+    embedWhenClosed: embedWhenClosed,
+    embedWhenOpen: embedWhenOpen,
+    lang: lang,
+    color: color,
+    timeZone: timeZone,
+    onModalSubmit: onModalSubmit,
+    fontWeights: fontWeights,
+    serviceTimeRange: serviceTimeRange,
+    onOpen: onOpen,
+    onClose: onClose,
+    openPicker: openPicker
+  }));
+}
+process.env.NODE_ENV !== "production" ? DatetimepickerStateContainer.propTypes = {
+  realtime: PropTypes.bool,
+  initialTimestamp: PropTypes.number,
+  initialArriveBy: PropTypes.bool,
+  onDepartureClick: PropTypes.func.isRequired,
+  onArrivalClick: PropTypes.func.isRequired,
+  onTimeChange: PropTypes.func.isRequired,
+  onDateChange: PropTypes.func.isRequired,
+  onNowClick: PropTypes.func.isRequired,
+  embedWhenClosed: PropTypes.node,
+  embedWhenOpen: PropTypes.node,
+  lang: PropTypes.string,
+  color: PropTypes.string,
+  timeZone: PropTypes.string,
+  fontWeights: PropTypes.shape({
+    medium: PropTypes.number
+  }),
+  serviceTimeRange: PropTypes.number,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  openPicker: PropTypes.bool
+} : void 0;
+DatetimepickerStateContainer.defaultProps = {
+  realtime: false,
+  initialArriveBy: undefined,
+  initialTimestamp: undefined,
+  embedWhenClosed: null,
+  embedWhenOpen: null,
+  lang: 'en',
+  color: '#007ac9',
+  timeZone: 'Europe/Helsinki',
+  fontWeights: {
+    medium: 500
+  },
+  onOpen: null,
+  onClose: null,
+  openPicker: undefined,
+  serviceTimeRange: 30
+};
+
+export { DatetimepickerStateContainer as default };
+//# sourceMappingURL=index.js.map