@cashub/ui 0.48.28 → 0.49.0-beta.0

package/dist/datetimePicker/DatetimePickerV2.js

@@ -0,0 +1,395 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _reactI18next = require("react-i18next");
+var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-click-handler"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _hooks = require("@cashub/hooks");
+var _utils = require("@cashub/utils");
+var _DateTimePickerContext = _interopRequireDefault(require("./subComponent/DateTimePickerContext"));
+var _Button = _interopRequireDefault(require("../button/Button"));
+var _Input = _interopRequireDefault(require("../form/Input"));
+var _Month = _interopRequireDefault(require("./accordion/Month"));
+var _Year = _interopRequireDefault(require("./accordion/Year"));
+var _TimePicker = _interopRequireDefault(require("./TimePicker"));
+var _GMTDate = _interopRequireDefault(require("./utils/GMTDate"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DatetimePickerV2 = _ref => {
+  let {
+    selected,
+    fixedYear,
+    minDate,
+    maxDate,
+    onConfirm,
+    disabled,
+    onBlur
+  } = _ref;
+  const {
+    t
+  } = (0, _reactI18next.useTranslation)();
+  const [toggleElement, setToggleElement] = (0, _react.useState)(null);
+  const [contentElement, setContentElement] = (0, _react.useState)(null);
+  const [inputValue, setInputValue] = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)(selected) : '');
+  const [selectedDate, setSelectedDate] = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)((0, _GMTDate.default)(selected)) : (0, _utils.datetimeTFormat)((0, _GMTDate.default)(new Date())));
+  const [confirmDate, setConfirmDate] = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)(selected) : '');
+  const [displayPicker, setDisplayPicker] = (0, _react.useState)(false);
+  const [time, setTime] = (0, _react.useState)(() => {
+    const date = new Date((0, _utils.datetimeTFormat)(selected ? selected : (0, _utils.formatDate)(new Date())));
+    if (!selected) date.setHours(0, 0, 0, 0);
+    return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+  });
+  const [accordionCurrentDisplayType, setAccordionCurrentDisplayType] = (0, _react.useState)(null);
+  const {
+    styles,
+    attributes,
+    state,
+    update
+  } = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
+    strategy: 'absolute',
+    placement: 'bottom-start'
+  });
+  const context = {
+    fixedYear,
+    minDate,
+    maxDate,
+    selectedDate,
+    setSelectedDate,
+    setAccordionCurrentDisplayType
+  };
+  const handleToggle = () => {
+    if (displayPicker && onBlur) {
+      onBlur();
+    }
+    setDisplayPicker(!displayPicker);
+    update();
+  };
+  const handleDisplayAccordionContent = (0, _react.useCallback)(type => {
+    if (accordionCurrentDisplayType === type) {
+      setAccordionCurrentDisplayType(null);
+    } else {
+      setAccordionCurrentDisplayType(type);
+    }
+  }, [accordionCurrentDisplayType]);
+  const handleConfirm = (0, _react.useCallback)(() => {
+    if (!confirmDate) return;
+    setSelectedDate(confirmDate);
+    onConfirm(inputValue);
+    setDisplayPicker(false);
+    setAccordionCurrentDisplayType(null);
+    if (displayPicker && onBlur) {
+      onBlur();
+    }
+  }, [confirmDate, inputValue, onConfirm, onBlur, displayPicker]);
+  const handleChangeDate = (0, _react.useCallback)((daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) => {
+    const date = new Date(selectedDate);
+    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    date.setDate(1);
+    const selectedYear = date.getFullYear();
+    const selectedMonth = date.getMonth();
+    if (!fixedYear) {
+      if (dayIndex < firstWeekOfMonth && selectedYear >= 1) {
+        if (selectedMonth === 0) {
+          date.setFullYear(selectedYear - 1);
+          date.setMonth(11);
+        } else {
+          date.setMonth(selectedMonth - 1);
+        }
+      } else if (dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
+        if (selectedMonth === 11) {
+          date.setFullYear(selectedYear + 1);
+          date.setMonth(0);
+        } else {
+          date.setMonth(selectedMonth + 1);
+        }
+      }
+      date.setDate(day);
+      setSelectedDate((0, _utils.datetimeTFormat)(date));
+      setConfirmDate((0, _utils.datetimeTFormat)(date));
+    } else if (fixedYear) {
+      if (dayIndex < firstWeekOfMonth) {
+        if (selectedMonth === 0) {
+          return;
+        }
+        date.setMonth(selectedMonth - 1);
+      } else if (dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth) {
+        if (selectedMonth === 11) {
+          return;
+        }
+        date.setMonth(selectedMonth + 1);
+      }
+      date.setDate(day);
+      setSelectedDate((0, _utils.datetimeTFormat)(date));
+      setConfirmDate((0, _utils.datetimeTFormat)(date));
+    }
+  }, [fixedYear, selectedDate]);
+  const handleDisabled = (0, _react.useCallback)((firstWeekOfMonth, lastWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) => {
+    let [year, month] = selectedDate.split('-');
+    if (year === '0001' && month === '01' && firstWeekOfMonth >= dayIndex + 1) {
+      return true;
+    }
+    let myDay = day.toString();
+    if (myDay.length === 1) myDay = `0${myDay}`;
+    if (fixedYear) {
+      if (month === '01' && dayIndex + 1 <= firstWeekOfMonth) {
+        // disabledDateInJan
+        return dayIndex < firstWeekOfMonth;
+      } else if (month === '12' && day + firstWeekOfMonth < dayIndex + 1) {
+        // disabledDateInDec
+        return dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
+      }
+    }
+    if (month === '01' && firstWeekOfMonth !== 0 && dayIndex + 1 <= firstWeekOfMonth) {
+      year = (+year - 1).toString();
+    } else if (month === '12' && lastWeekOfMonth !== 6 && day + firstWeekOfMonth < dayIndex + 1) {
+      year = (+year + 1).toString();
+    }
+    month = firstWeekOfMonth >= dayIndex + 1 ? +month - 1 : daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1 ? +month + 1 : +month;
+    if (month === 0) {
+      month = 12;
+    } else if (month === 13) {
+      month = 1;
+    }
+    if (year.length === 1) year = `000${year}`;
+    if (year.length === 2) year = `00${year}`;
+    if (year.length === 3) year = `0${year}`;
+    if (month.toString().length === 1) month = `0${month}`;else month = month.toString();
+    const compareMinDateDate = (0, _utils.formatDate)((0, _utils.datetimeTFormat)(new Date((0, _GMTDate.default)((0, _utils.formatDate)(new Date(`${year}-${month}-${myDay}`)), 'date')).setHours(23, 59, 59, 59)));
+    const compareMaxDateDate = (0, _utils.formatDate)((0, _utils.datetimeTFormat)(new Date((0, _GMTDate.default)((0, _utils.formatDate)(new Date(`${year}-${month}-${myDay}`)), 'date')).setHours(0, 0, 0, 0)));
+    if (minDate && !maxDate && minDate > compareMinDateDate) {
+      return true;
+    }
+    if (maxDate && !minDate && maxDate < compareMaxDateDate) {
+      return true;
+    }
+    if (maxDate && minDate && (minDate > compareMinDateDate || maxDate < compareMaxDateDate)) {
+      return true;
+    }
+    return false;
+  }, [fixedYear, minDate, maxDate, selectedDate]);
+  const handleSelectedDay = (0, _react.useCallback)((day, index, firstWeekOfMonth, lastWeekOfMonth, totalDays) => {
+    const selectedDateObj = new Date(selectedDate);
+    const confirmDateObj = new Date(confirmDate);
+    if (confirmDateObj.getFullYear() === selectedDateObj.getFullYear() && confirmDateObj.getMonth() === selectedDateObj.getMonth() && confirmDateObj.getDate() === day) {
+      if (index + 1 > firstWeekOfMonth && index < totalDays - (6 - lastWeekOfMonth)) {
+        return true;
+      }
+      return false;
+    }
+    return false;
+  }, [selectedDate, confirmDate]);
+  const days = (0, _react.useMemo)(() => {
+    let date = new Date(selectedDate);
+    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    date.setDate(1);
+    date.setMonth(date.getMonth() + 1);
+    date.setDate(0);
+    const daysOfMonthForSelectedDate = date.getDate();
+    date = new Date(selectedDate);
+    date.setMonth(date.getMonth() + 1 - 1);
+    date.setDate(0);
+    const daysOfPrevioueMonthForSelectedDate = date.getDate();
+    date = new Date(selectedDate);
+    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    date.setDate(1);
+    const firstWeekOfMonth = date.getDay();
+    date = new Date(selectedDate);
+    // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
+    date.setDate(1);
+    date.setMonth(date.getMonth() + 1);
+    date.setDate(0);
+    const lastWeekOfMonth = date.getDay();
+    const days = [];
+    for (const day of [...Array(daysOfMonthForSelectedDate).keys()]) {
+      days.push(day + 1);
+    }
+    if (firstWeekOfMonth !== 0) {
+      for (let index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
+        if (date.getFullYear() === 1 && date.getMonth() === 0) {
+          days.unshift(null);
+        } else {
+          days.unshift(index);
+        }
+      }
+    }
+    if (lastWeekOfMonth !== 6) {
+      for (let index = 1; index <= 6 - lastWeekOfMonth; index += 1) {
+        days.push(index);
+      }
+    }
+    return days.map((day, index, arr) => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
+        disabled: handleDisabled(firstWeekOfMonth, lastWeekOfMonth, daysOfMonthForSelectedDate, index, day),
+        onClick: () => {
+          handleChangeDate(daysOfMonthForSelectedDate, firstWeekOfMonth, index, day);
+        },
+        selected: handleSelectedDay(day, index, firstWeekOfMonth, lastWeekOfMonth, arr.length, daysOfMonthForSelectedDate),
+        children: day
+      }, index);
+    });
+  }, [selectedDate, handleChangeDate, handleSelectedDay, handleDisabled]);
+  const weeks = (0, _react.useMemo)(() => {
+    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(week => /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
+      children: week
+    }, week));
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (!selected) return;
+    const date = (0, _utils.datetimeTFormat)(selected);
+    const [, time] = date.split('T');
+    setSelectedDate(date);
+    setConfirmDate(date);
+    setTime(time);
+  }, [selected]);
+  (0, _react.useEffect)(() => {
+    if (!confirmDate) return;
+    const date = (0, _utils.formatDate)(confirmDate, 'date');
+    setInputValue(`${date} ${time}`);
+  }, [confirmDate, time]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerContext.default.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
+      onOutsideClick: handleConfirm,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PickerInput, {
+        ref: setToggleElement,
+        value: inputValue,
+        onClick: handleToggle,
+        readOnly: true,
+        disabled: disabled
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+        ...attributes.popper,
+        style: styles.popper,
+        placement: state && state.placement,
+        ref: setContentElement,
+        displayPicker: displayPicker,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
+          accordionCurrentDisplayType: accordionCurrentDisplayType,
+          children: [!fixedYear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Year.default, {
+            expand: accordionCurrentDisplayType === 'year',
+            handleDisplayAccordionContent: () => {
+              handleDisplayAccordionContent('year');
+            }
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Month.default, {
+            expand: accordionCurrentDisplayType === 'month',
+            handleDisplayAccordionContent: () => {
+              handleDisplayAccordionContent('month');
+            },
+            confirmDate: confirmDate
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateContent, {
+            children: [weeks, days]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePicker.default, {
+            value: time,
+            onChange: setTime
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Footer, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ConfirmButton, {
+            fullWidth: true,
+            alignCenter: true,
+            onClick: handleConfirm,
+            children: t('Confirm')
+          })
+        })]
+      })]
+    })
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  padding-bottom: var(--spacing-s);
+  background: var(--color-background1);
+  border-radius: var(--border-radius);
+  border: var(--border-width) solid var(--border-color);
+  box-shadow: var(--box-shadow);
+  overflow: hidden;
+  width: 286px;
+  z-index: 1;
+  color: var(--font-on-background);
+
+  display: ${_ref2 => {
+  let {
+    displayPicker
+  } = _ref2;
+  return displayPicker ? 'block' : 'none';
+}};
+`;
+const Week = _styledComponents.default.div`
+  height: 36px;
+  width: calc(100% / 7);
+  border-radius: var(--border-radius-s);
+  line-height: 36px;
+  text-align: center;
+`;
+const Body = _styledComponents.default.div`
+  ${_ref3 => {
+  let {
+    accordionCurrentDisplayType
+  } = _ref3;
+  return accordionCurrentDisplayType && (0, _styledComponents.css)`
+      height: 216px;
+    `;
+}}
+
+  overflow: hidden;
+  padding: ${_ref4 => {
+  let {
+    accordionCurrentDisplayType
+  } = _ref4;
+  return accordionCurrentDisplayType === 'year' ? ' 0 4px var(--spacing-s) var(--spacing-s)' : '0 var(--spacing-s) 0 var(--spacing-s)';
+}};
+`;
+const Footer = _styledComponents.default.div`
+  padding: 0 var(--spacing-s);
+`;
+const PickerInput = (0, _styledComponents.default)(_Input.default)`
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+const Day = _styledComponents.default.button`
+  width: calc(100% / 7);
+  height: 36px;
+  border-radius: var(--border-radius-s);
+  line-height: 36px;
+  text-align: center;
+  padding: 0;
+  border: 0;
+  background: var(--color-background1);
+  color: var(--font-on-background);
+  &:hover {
+    background: var(--color-primary);
+  }
+
+  ${_ref5 => {
+  let {
+    selected
+  } = _ref5;
+  return selected && 'background: var(--color-hover);';
+}}
+
+  ${_ref6 => {
+  let {
+    disabled
+  } = _ref6;
+  return disabled && (0, _styledComponents.css)`
+      color: var(--font-on-mute);
+      background: none;
+      &:hover {
+        background: none;
+      }
+    `;
+}}
+`;
+const ConfirmButton = (0, _styledComponents.default)(_Button.default)`
+  margin: 16px auto 0;
+`;
+const DateContent = _styledComponents.default.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+var _default = exports.default = DatetimePickerV2;

package/dist/datetimePicker/DatetimePickerV3.js

@@ -0,0 +1,279 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
+require("react-datepicker/dist/react-datepicker.css");
+var _TimePickerV = _interopRequireDefault(require("./TimePickerV2"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const setDateTime = (date, value) => {
+  const [hh, mm, ss] = value.split(':');
+  date.setHours(Number(hh) || 0, Number(mm) || 0, Number(ss) || 0, 0);
+};
+const DatetimePickerV3 = _ref => {
+  let {
+    selected = '',
+    onChange,
+    dateFormat = 'yyyy-MM-dd HH:mm:ss',
+    minDate,
+    maxDate,
+    showTimeInput,
+    readOnly,
+    disabled,
+    onBlur,
+    allowClear = false,
+    shouldCloseOnSelect = true,
+    placeholderText,
+    allowTimeInputEmpty = false
+  } = _ref;
+  const datepickerRef = (0, _react.useRef)(null);
+  const pendingTimeRef = (0, _react.useRef)(null);
+  const handleOnBlur = () => {
+    pendingTimeRef.current = null;
+    if (typeof onBlur === 'function') {
+      onBlur();
+    }
+  };
+  const selectedDate = (0, _react.useMemo)(() => {
+    return selected ? new Date(Date.parse(selected)) : '';
+  }, [selected]);
+  const handleChange = (0, _react.useCallback)(date => {
+    // when showTimeInput and DatetimePicker no value yet
+    if (showTimeInput && !selected && date) {
+      // if time selected before date, use selected time
+      if (pendingTimeRef.current) {
+        setDateTime(date, pendingTimeRef.current);
+        pendingTimeRef.current = null;
+      } else {
+        // if date selected before time, use current time
+        const now = new Date();
+        date.setHours(now.getHours(), now.getMinutes(), now.getSeconds(), 0);
+      }
+    }
+    onChange(date);
+  }, [onChange, selected, showTimeInput]);
+  const datePickerProps = {
+    dateFormat,
+    disabled,
+    onChange: handleChange,
+    selected: selectedDate,
+    minDate: minDate ? new Date(Date.parse(minDate)) : '',
+    maxDate: maxDate ? new Date(Date.parse(maxDate)) : '',
+    isClearable: allowClear && selected,
+    shouldCloseOnSelect,
+    placeholderText
+  };
+  const handleSelectTime = (0, _react.useCallback)(value => {
+    if (selectedDate) {
+      setDateTime(selectedDate, value);
+      onChange(selectedDate);
+    } else {
+      pendingTimeRef.current = value;
+    }
+  },
+  // NOTE: Adding onChange to the dependency list will cause a rerender loop
+  [selectedDate]);
+  if (showTimeInput) {
+    datePickerProps.showTimeInput = true;
+    datePickerProps.customTimeInput = /*#__PURE__*/(0, _jsxRuntime.jsx)(_TimePickerV.default, {
+      selected: selected,
+      onSelect: handleSelectTime,
+      allowEmpty: allowTimeInputEmpty && !selected
+    });
+  }
+  datePickerProps.onCalendarClose = handleOnBlur;
+  (0, _react.useEffect)(() => {
+    // set input to readonly
+    if (datepickerRef && datepickerRef.current && readOnly) {
+      datepickerRef.current.input.readOnly = readOnly;
+    }
+  }, [readOnly]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+    disabled: disabled,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactDatepicker.default, {
+      ...datePickerProps,
+      ref: datepickerRef
+    })
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  .react-datepicker-wrapper,
+  .react-datepicker__input-container {
+    width: 100%;
+
+    > input {
+      width: 100%;
+      height: 36px;
+      color: var(--font-on-background);
+      background: transparent;
+      border-radius: var(--border-radius-l);
+      border: var(--border-width) solid var(--border-color);
+      padding: 0 var(--spacing-s);
+      outline: none;
+
+      ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? 'cursor: not-allowed; opacity: 0.5;' : '';
+}}
+    }
+
+    > input + button {
+      padding: 0;
+      right: var(--spacing-s);
+      &::after {
+        color: var(--color-primary);
+        background-color: transparent;
+        font-size: 24px;
+        padding: 0;
+      }
+    }
+  }
+
+  .react-datepicker-popper {
+    z-index: 2;
+  }
+
+  .react-datepicker-popper[data-placement^='top'] {
+    padding-bottom: var(--spacing-xs);
+  }
+
+  .react-datepicker-popper[data-placement^='bottom'] {
+    padding-top: var(--spacing-xs);
+  }
+
+  .react-datepicker {
+    box-shadow: var(--box-shadow);
+    border-radius: var(--border-radius);
+    border: var(--border-width) solid var(--border-color);
+    padding: var(--spacing-s);
+    font-size: var(--font-body1);
+    color: var(--font-on-background);
+    background: var(--color-background1);
+
+    .react-datepicker__triangle {
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+
+    .react-datepicker__header {
+      border: none;
+      padding: 0;
+      background: var(--color-background1);
+    }
+
+    .react-datepicker__current-month {
+      line-height: 36px;
+      color: var(--font-on-background);
+      font-size: var(--font-body1);
+      font-weight: var(--font-normal);
+    }
+
+    .react-datepicker__day-names {
+      margin: 0;
+    }
+
+    .react-datepicker__day-name,
+    .react-datepicker__day {
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+      color: var(--font-on-background);
+      font-weight: var(--font-normal);
+      margin: 0;
+      border-radius: 4px;
+    }
+
+    .react-datepicker__day:hover {
+      background: var(--color-hover);
+    }
+
+    .react-datepicker__day--disabled {
+      color: var(--font-on-mute);
+      background: none !important;
+    }
+  }
+
+  .react-datepicker__month {
+    margin: 0;
+  }
+
+  .react-datepicker__navigation {
+    top: 0;
+    width: 36px;
+    height: 36px;
+    margin: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);
+    border-radius: 4px;
+
+    &.react-datepicker__navigation--previous {
+      left: 0;
+    }
+
+    &.react-datepicker__navigation--next {
+      right: 0;
+    }
+
+    &:hover {
+      background: var(--color-hover);
+    }
+
+    .react-datepicker__navigation-icon::before {
+      border-color: var(--font-on-background);
+    }
+
+    .react-datepicker__navigation-icon--previous::before {
+      right: -4px;
+    }
+
+    .react-datepicker__navigation-icon--next::before {
+      left: -4px;
+    }
+  }
+
+  .react-datepicker__day--selected,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__day--in-range,
+  .react-datepicker__month-text--selected,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__month-text--in-range,
+  .react-datepicker__quarter-text--selected,
+  .react-datepicker__quarter-text--in-selecting-range,
+  .react-datepicker__quarter-text--in-range,
+  .react-datepicker__year-text--selected,
+  .react-datepicker__year-text--in-selecting-range,
+  .react-datepicker__year-text--in-range {
+    background: var(--color-primary) !important;
+  }
+
+  .react-datepicker__day--keyboard-selected,
+  .react-datepicker__month-text--keyboard-selected,
+  .react-datepicker__quarter-text--keyboard-selected,
+  .react-datepicker__year-text--keyboard-selected {
+    background: none;
+  }
+
+  .react-datepicker__input-time-container {
+    margin: 0;
+    margin-top: var(--spacing-s);
+    margin-left: var(--spacing-xs);
+
+    .react-datepicker-time__input input {
+      height: 36px;
+      padding: 0 var(--spacing-xs);
+      border-radius: var(--border-radius);
+      border: var(--border-width) solid var(--border-color);
+      background: transparent;
+      color: var(--font-on-background);
+      outline: none;
+    }
+  }
+`;
+var _default = exports.default = DatetimePickerV3;