@kodezen/kz-react-datepicker 1.0.0-beta.0

package/dist/index.esm.js

@@ -0,0 +1,1794 @@
+import React, { createContext, useContext, useMemo, useState, useRef, useEffect, useCallback } from 'react';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var COLORS = ["blue", "orange", "yellow", "red", "purple", "amber", "lime", "green", "emerald", "teal", "cyan", "sky", "indigo", "violet", "fuchsia", "pink", "rose"];
+var DEFAULT_COLOR = "blue";
+var LANGUAGE = "en";
+var DATE_FORMAT = "YYYY-MM-DD";
+var START_WEEK = "sun";
+var DAYS = [0, 1, 2, 3, 4, 5, 6];
+var MONTHS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+
+/**
+ * @typedef {Object} Period
+ * @property {string|null} start
+ * @property {string|null} end
+ */
+
+/**
+ * @typedef {Object} DateValueType
+ * @property {Date|string|null} startDate
+ * @property {Date|string|null} endDate
+ */
+
+/**
+ * @typedef {Object} DatepickerStore
+ * @property {import("react").RefObject} [input]
+ * @property {boolean} [asSingle]
+ * @property {string} primaryColor
+ * @property {Object} [configs]
+ * @property {import("react").RefObject} calendarContainer
+ * @property {import("react").RefObject} arrowContainer
+ * @property {() => void} hideDatepicker
+ * @property {Period} period
+ * @property {(period: Period) => void} changePeriod
+ * @property {string|null} dayHover
+ * @property {(day: string|null) => void} changeDayHover
+ * @property {string} inputText
+ * @property {(text: string) => void} changeInputText
+ * @property {(date: Date) => void} updateFirstDate
+ * @property {(value: DateValueType, e?: HTMLInputElement | null) => void} changeDatepickerValue
+ * @property {boolean} [showFooter]
+ * @property {string|null} [placeholder]
+ * @property {string} separator
+ * @property {string|null} shortcutText
+ * @property {string} i18n
+ * @property {DateValueType|null} value
+ * @property {boolean} [disabled]
+ * @property {((className: string) => string)|string|null} [inputClassName]
+ * @property {((className: string) => string)|string|null} [containerClassName]
+ * @property {((className: string) => string)|string|null} [toggleClassName]
+ * @property {(open: boolean) => import("react").ReactNode} [toggleIcon]
+ * @property {boolean} [readOnly]
+ * @property {string|null} [startWeekOn]
+ * @property {string} displayFormat
+ * @property {Date|string|null} [minDate]
+ * @property {Date|string|null} [maxDate]
+ * @property {"forward"|"backward"|"middle"} [dateLooking]
+ * @property {Array<{start: Date|string, end: Date|string}>|null} [disabledDates]
+ * @property {string} [inputId]
+ * @property {string} [inputName]
+ * @property {Object} [classNames]
+ * @property {string} [popoverDirection]
+ * @property {"auto"|"light"|"dark"} theme
+ * @property {"bottom"|"top"|"left"|"right"|"auto"} placement
+ */
+
+/**
+ * @type {import("react").Context<DatepickerStore>}
+ */
+var DatepickerContext = /*#__PURE__*/createContext({
+  input: undefined,
+  primaryColor: "blue",
+  configs: undefined,
+  calendarContainer: null,
+  arrowContainer: null,
+  period: {
+    start: null,
+    end: null
+  },
+  changePeriod: function changePeriod(period) {},
+  hideDatepicker: function hideDatepicker() {},
+  dayHover: null,
+  changeDayHover: function changeDayHover(day) {},
+  inputText: "",
+  changeInputText: function changeInputText(text) {},
+  updateFirstDate: function updateFirstDate(date) {},
+  changeDatepickerValue: function changeDatepickerValue(value, e) {},
+  showFooter: false,
+  value: null,
+  i18n: LANGUAGE,
+  disabled: false,
+  inputClassName: "",
+  containerClassName: "",
+  toggleClassName: "",
+  readOnly: false,
+  displayFormat: DATE_FORMAT,
+  minDate: null,
+  maxDate: null,
+  dateLooking: "forward",
+  disabledDates: null,
+  inputId: undefined,
+  inputName: undefined,
+  startWeekOn: START_WEEK,
+  toggleIcon: undefined,
+  classNames: undefined,
+  popoverDirection: undefined,
+  separator: "~",
+  shortcutText: null,
+  suffix: "",
+  theme: "auto",
+  placement: "bottom"
+});
+
+function generateArrayNumber() {
+  var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var array = [];
+  for (var i = start; i <= end; i++) {
+    array.push(i);
+  }
+  return array;
+}
+function shortString(value) {
+  var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
+  return value.slice(0, limit);
+}
+function ucFirst(value) {
+  return "".concat(value[0].toUpperCase()).concat(value.slice(1));
+}
+
+/**
+ * Parses a string to Date object or returns the Date if already a Date.
+ * Supports basic 'YYYY-MM-DD' parser fallback since removing dayjs.
+ * @param {Date|string} date
+ * @returns {Date}
+ */
+function parseDate(date) {
+  if (date instanceof Date) return new Date(date);
+  // Attempt simple parsing for YYYY-MM-DD
+  if (typeof date === "string" && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
+    var _date$split$map = date.split("-").map(Number),
+      _date$split$map2 = _slicedToArray(_date$split$map, 3),
+      y = _date$split$map2[0],
+      m = _date$split$map2[1],
+      d = _date$split$map2[2];
+    return new Date(y, m - 1, d);
+  }
+  return new Date(date);
+}
+
+/**
+ * Format date nicely, replacing dayjs formatting
+ * Defaults to YYYY-MM-DD
+ * @param {Date|string} date
+ * @param {string} format
+ * @returns {string}
+ */
+function formatDate(date) {
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DATE_FORMAT;
+  var d = parseDate(date);
+  if (!dateIsValid(d)) return "";
+  var map = {
+    YYYY: d.getFullYear(),
+    MM: String(d.getMonth() + 1).padStart(2, "0"),
+    DD: String(d.getDate()).padStart(2, "0"),
+    ddd: d.toLocaleDateString("en-US", {
+      weekday: "short"
+    })
+  };
+  var result = format;
+  for (var _i = 0, _Object$entries = Object.entries(map); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      key = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    result = result.replace(key, value);
+  }
+  return result;
+}
+function getFirstDayInMonth(date) {
+  var d = parseDate(date);
+  var firstDay = new Date(d.getFullYear(), d.getMonth(), 1);
+  return {
+    ddd: formatDate(firstDay, "ddd"),
+    basic: formatDate(firstDay),
+    object: firstDay
+  };
+}
+function getDaysInMonth(date) {
+  var d = parseDate(date);
+  var days = new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
+  return generateArrayNumber(1, days);
+}
+function nextMonth(date) {
+  var d = parseDate(date);
+  return new Date(d.getFullYear(), d.getMonth() + 1, 1);
+}
+function previousMonth(date) {
+  var d = parseDate(date);
+  return new Date(d.getFullYear(), d.getMonth() - 1, 1);
+}
+function getFirstElementsInArray() {
+  var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return array.slice(0, size);
+}
+function getLastElementsInArray() {
+  var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var result = [];
+  if (Array.isArray(array) && size > 0) {
+    if (size >= array.length) {
+      return array;
+    }
+    var y = array.length - 1;
+    for (var i = 0; i < size; i++) {
+      result.push(array[y]);
+      y--;
+    }
+  }
+  return result.reverse();
+}
+function getNumberOfDay(dayString) {
+  var startWeekOn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "sun";
+  var number = 0;
+  var startDateModifier = 0;
+  switch (startWeekOn) {
+    case "mon":
+      startDateModifier = 6;
+      break;
+    case "tue":
+      startDateModifier = 5;
+      break;
+    case "wed":
+      startDateModifier = 4;
+      break;
+    case "thu":
+      startDateModifier = 3;
+      break;
+    case "fri":
+      startDateModifier = 2;
+      break;
+    case "sat":
+      startDateModifier = 1;
+      break;
+    case "sun":
+    default:
+      startDateModifier = 0;
+      break;
+  }
+  var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+  days.forEach(function (item, index) {
+    if (item.includes(dayString)) {
+      number = (index + startDateModifier) % 7;
+    }
+  });
+  return number;
+}
+function getLastDaysInMonth(date) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return getLastElementsInArray(getDaysInMonth(date), size);
+}
+function getFirstDaysInMonth(date) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return getFirstElementsInArray(getDaysInMonth(date), size);
+}
+function dateIsValid(date) {
+  return date instanceof Date && !isNaN(date.getTime());
+}
+function isSameDate(date1, date2) {
+  var d1 = parseDate(date1);
+  var d2 = parseDate(date2);
+  if (!dateIsValid(d1) || !dateIsValid(d2)) return false;
+  return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
+}
+function isBeforeDate(date1, date2) {
+  var d1 = parseDate(date1);
+  var d2 = parseDate(date2);
+  if (!dateIsValid(d1) || !dateIsValid(d2)) return false;
+
+  // Set time limits for strict date comparison
+  var t1 = new Date(d1.getFullYear(), d1.getMonth(), d1.getDate()).getTime();
+  var t2 = new Date(d2.getFullYear(), d2.getMonth(), d2.getDate()).getTime();
+  return t1 < t2;
+}
+function isAfterDate(date1, date2) {
+  var d1 = parseDate(date1);
+  var d2 = parseDate(date2);
+  if (!dateIsValid(d1) || !dateIsValid(d2)) return false;
+  var t1 = new Date(d1.getFullYear(), d1.getMonth(), d1.getDate()).getTime();
+  var t2 = new Date(d2.getFullYear(), d2.getMonth(), d2.getDate()).getTime();
+  return t1 > t2;
+}
+function isBetweenDates(target, date1, date2) {
+  var t = parseDate(target).getTime();
+  var d1 = parseDate(date1).getTime();
+  var d2 = parseDate(date2).getTime();
+  var start = Math.min(d1, d2);
+  var end = Math.max(d1, d2);
+  return t > start && t < end;
+}
+
+var ChevronLeftIcon = function ChevronLeftIcon(_ref3) {
+  var _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? "w-6 h-6" : _ref3$className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M15.75 19.5L8.25 12l7.5-7.5"
+  }));
+};
+var DoubleChevronLeftIcon = function DoubleChevronLeftIcon(_ref4) {
+  var _ref4$className = _ref4.className,
+    className = _ref4$className === void 0 ? "w-6 h-6" : _ref4$className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5"
+  }));
+};
+var ChevronRightIcon = function ChevronRightIcon(_ref5) {
+  var _ref5$className = _ref5.className,
+    className = _ref5$className === void 0 ? "w-6 h-6" : _ref5$className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M8.25 4.5l7.5 7.5-7.5 7.5"
+  }));
+};
+var DoubleChevronRightIcon = function DoubleChevronRightIcon(_ref6) {
+  var _ref6$className = _ref6.className,
+    className = _ref6$className === void 0 ? "w-6 h-6" : _ref6$className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"
+  }));
+};
+var Arrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useContext = useContext(DatepickerContext),
+    suffix = _useContext.suffix;
+  var baseClass = "kz-arrow-indicator";
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: baseClass + (suffix ? " ".concat(baseClass, "--").concat(suffix) : "")
+  });
+});
+var SecondaryButton = function SecondaryButton(_ref7) {
+  var children = _ref7.children,
+    onClick = _ref7.onClick,
+    _ref7$disabled = _ref7.disabled,
+    disabled = _ref7$disabled === void 0 ? false : _ref7$disabled;
+  var _useContext2 = useContext(DatepickerContext),
+    suffix = _useContext2.suffix;
+  var baseClass = "kz-secondary-btn";
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: baseClass + (suffix ? " ".concat(baseClass, "--").concat(suffix) : ""),
+    onClick: onClick,
+    disabled: disabled
+  }, children);
+};
+var PrimaryButton = function PrimaryButton(_ref8) {
+  var children = _ref8.children,
+    onClick = _ref8.onClick,
+    _ref8$disabled = _ref8.disabled,
+    disabled = _ref8$disabled === void 0 ? false : _ref8$disabled;
+  var _useContext3 = useContext(DatepickerContext),
+    suffix = _useContext3.suffix;
+  var baseClass = "kz-primary-btn";
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: baseClass + (suffix ? " ".concat(baseClass, "--").concat(suffix) : ""),
+    onClick: onClick,
+    disabled: disabled
+  }, children);
+};
+var RoundedButton = function RoundedButton(_ref9) {
+  var children = _ref9.children,
+    onClick = _ref9.onClick,
+    disabled = _ref9.disabled,
+    _ref9$roundedFull = _ref9.roundedFull,
+    roundedFull = _ref9$roundedFull === void 0 ? false : _ref9$roundedFull,
+    _ref9$active = _ref9.active,
+    active = _ref9$active === void 0 ? false : _ref9$active;
+  var _useContext4 = useContext(DatepickerContext),
+    suffix = _useContext4.suffix;
+  var baseClass = "kz-rounded-btn";
+  var cn = [baseClass];
+  if (suffix) cn.push("".concat(baseClass, "--").concat(suffix));
+  if (roundedFull) {
+    cn.push("is-rounded-full");
+    if (suffix) cn.push("is-rounded-full--".concat(suffix));
+  }
+  if (active) {
+    cn.push("is-active");
+    if (suffix) cn.push("is-active--".concat(suffix));
+  }
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: cn.join(" "),
+    onClick: onClick,
+    disabled: disabled
+  }, children);
+};
+var VerticalDash = function VerticalDash() {
+  var _useContext5 = useContext(DatepickerContext),
+    suffix = _useContext5.suffix;
+  var baseClass = "kz-vertical-dash";
+  return /*#__PURE__*/React.createElement("div", {
+    className: baseClass + (suffix ? " ".concat(baseClass, "--").concat(suffix) : "")
+  });
+};
+
+var Days = function Days(_ref) {
+  var calendarData = _ref.calendarData,
+    onClickPreviousDays = _ref.onClickPreviousDays,
+    onClickDay = _ref.onClickDay,
+    onClickNextDays = _ref.onClickNextDays;
+  var _useContext = useContext(DatepickerContext),
+    period = _useContext.period,
+    dayHover = _useContext.dayHover,
+    changeDayHover = _useContext.changeDayHover,
+    minDate = _useContext.minDate,
+    maxDate = _useContext.maxDate,
+    disabledDates = _useContext.disabledDates,
+    suffix = _useContext.suffix;
+  var isDateDisabledInner = function isDateDisabledInner(day, type) {
+    var date = calendarData.date;
+    var m = date.getMonth();
+    var y = date.getFullYear();
+    if (type === "previous") m -= 1;
+    if (type === "next") m += 1;
+    var currentDayDate = new Date(y, m, day);
+    if (minDate && isBeforeDate(currentDayDate, minDate)) return true;
+    if (maxDate && isAfterDate(currentDayDate, maxDate)) return true;
+    if (disabledDates !== null && disabledDates !== void 0 && disabledDates.length) {
+      for (var i = 0; i < disabledDates.length; i++) {
+        if (isBetweenDates(currentDayDate, disabledDates[i].startDate, disabledDates[i].endDate) || currentDayDate.getTime() === new Date(disabledDates[i].startDate).getTime() || currentDayDate.getTime() === new Date(disabledDates[i].endDate).getTime()) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+  var isDateDisabled = function isDateDisabled(day, type) {
+    return isDateDisabledInner(day, type);
+  };
+  var getButtonClass = function getButtonClass(day, type) {
+    var date = calendarData.date;
+    var m = date.getMonth();
+    var y = date.getFullYear();
+    if (type === "previous") m -= 1;
+    if (type === "next") m += 1;
+    var currentDayDate = new Date(y, m, day);
+    var today = new Date();
+    var isToday = today.getDate() === day && today.getMonth() === m && today.getFullYear() === y;
+    var start = period.start ? parseDate(period.start) : null;
+    var end = period.end ? parseDate(period.end) : null;
+    var hover = dayHover ? parseDate(dayHover) : null;
+    var baseClass = "kz-calendar-day";
+    if (suffix) baseClass += " kz-calendar-day--".concat(suffix);
+    if (type !== "current" || isDateDisabled(day, type)) {
+      baseClass += " kz-calendar-day-disabled";
+      if (suffix) baseClass += " kz-calendar-day-disabled--".concat(suffix);
+      return baseClass;
+    }
+    if (isToday) {
+      baseClass += " kz-calendar-day-today";
+      if (suffix) baseClass += " kz-calendar-day-today--".concat(suffix);
+    }
+    var isStart = start && isSameDate(start, currentDayDate);
+    var isEnd = end && isSameDate(end, currentDayDate);
+
+    // Initial click: make it rounded
+    if (start && !end && isStart) {
+      baseClass += " kz-calendar-day-active kz-calendar-day-rounded";
+      if (suffix) {
+        baseClass += " kz-calendar-day-active--".concat(suffix, " kz-calendar-day-rounded--").concat(suffix);
+      }
+      return baseClass;
+    }
+    if (isStart && isEnd) {
+      baseClass += " kz-calendar-day-active kz-calendar-day-rounded";
+      if (suffix) {
+        baseClass += " kz-calendar-day-active--".concat(suffix, " kz-calendar-day-rounded--").concat(suffix);
+      }
+    } else if (isStart) {
+      baseClass += " kz-calendar-day-active";
+      if (suffix) baseClass += " kz-calendar-day-active--".concat(suffix);
+      var isStartBeforeEnd = end && isBeforeDate(start, end);
+      var isStartBeforeHover = !end && hover && isBeforeDate(start, hover);
+      if (isStartBeforeEnd || isStartBeforeHover) {
+        baseClass += " kz-calendar-day-hover-left";
+        if (suffix) baseClass += " kz-calendar-day-hover-left--".concat(suffix);
+      } else {
+        baseClass += " kz-calendar-day-hover-right";
+        if (suffix) baseClass += " kz-calendar-day-hover-right--".concat(suffix);
+      }
+    } else if (isEnd) {
+      baseClass += " kz-calendar-day-active";
+      if (suffix) baseClass += " kz-calendar-day-active--".concat(suffix);
+      var isEndAfterStart = start && isAfterDate(end, start);
+      var isEndAfterHover = !start && hover && isAfterDate(end, hover);
+      if (isEndAfterStart || isEndAfterHover) {
+        baseClass += " kz-calendar-day-hover-right";
+        if (suffix) baseClass += " kz-calendar-day-hover-right--".concat(suffix);
+      } else {
+        baseClass += " kz-calendar-day-hover-left";
+        if (suffix) baseClass += " kz-calendar-day-hover-left--".concat(suffix);
+      }
+    }
+    if (start && end && isBetweenDates(currentDayDate, start, end)) {
+      baseClass += " kz-calendar-day-in-range";
+      if (suffix) baseClass += " kz-calendar-day-in-range--".concat(suffix);
+    }
+    if (hover) {
+      if (start && !end && isBetweenDates(currentDayDate, start, hover)) {
+        baseClass += " kz-calendar-day-in-range";
+        if (suffix) baseClass += " kz-calendar-day-in-range--".concat(suffix);
+      }
+      if (end && !start && isBetweenDates(currentDayDate, hover, end)) {
+        baseClass += " kz-calendar-day-in-range";
+        if (suffix) baseClass += " kz-calendar-day-in-range--".concat(suffix);
+      }
+      if (hover.getTime() === currentDayDate.getTime() && !(isStart || isEnd)) {
+        baseClass += " kz-calendar-day-hover-end";
+        if (suffix) baseClass += " kz-calendar-day-hover-end--".concat(suffix);
+        if (start) {
+          if (isBeforeDate(currentDayDate, start)) {
+            baseClass += " kz-calendar-day-hover-left";
+            if (suffix) baseClass += " kz-calendar-day-hover-left--".concat(suffix);
+          } else {
+            baseClass += " kz-calendar-day-hover-right";
+            if (suffix) baseClass += " kz-calendar-day-hover-right--".concat(suffix);
+          }
+        } else if (end) {
+          if (isAfterDate(currentDayDate, end)) {
+            baseClass += " kz-calendar-day-hover-right";
+            if (suffix) baseClass += " kz-calendar-day-hover-right--".concat(suffix);
+          } else {
+            baseClass += " kz-calendar-day-hover-left";
+            if (suffix) baseClass += " kz-calendar-day-hover-left--".concat(suffix);
+          }
+        }
+      }
+    }
+    return baseClass;
+  };
+  var handleClick = function handleClick(day, type) {
+    if (isDateDisabled(day, type)) return;
+    if (type === "previous") onClickPreviousDays(day);
+    if (type === "current") onClickDay(day);
+    if (type === "next") onClickNextDays(day);
+  };
+  var processHover = function processHover(day, type) {
+    if (isDateDisabled(day, type)) return;
+    var date = calendarData.date;
+    var m = date.getMonth();
+    var y = date.getFullYear();
+    if (type === "previous") m -= 1;
+    if (type === "next") m += 1;
+    var dStr = "".concat(y, "-").concat(String(m + 1).padStart(2, '0'), "-").concat(String(day).padStart(2, '0'));
+    changeDayHover(dStr);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-days-grid" + (suffix ? " kz-calendar-days-grid--".concat(suffix) : ""),
+    onMouseLeave: function onMouseLeave() {
+      return changeDayHover(null);
+    }
+  }, ["previous", "current", "next"].map(function (type) {
+    return calendarData.days[type].map(function (day, idx) {
+      return /*#__PURE__*/React.createElement("button", {
+        key: "".concat(type, "-").concat(idx),
+        className: getButtonClass(day, type),
+        onClick: function onClick() {
+          return handleClick(day, type);
+        },
+        onMouseOver: function onMouseOver() {
+          return processHover(day, type);
+        },
+        disabled: isDateDisabled(day, type)
+      }, day);
+    });
+  }));
+};
+
+var Months = function Months(_ref) {
+  var currentMonth = _ref.currentMonth,
+    clickMonth = _ref.clickMonth;
+  var _useContext = useContext(DatepickerContext),
+    i18n = _useContext.i18n,
+    suffix = _useContext.suffix;
+  var getMonthName = function getMonthName(monthNumber) {
+    var date = new Date(2022, monthNumber - 1, 1);
+    return date.toLocaleString(i18n || "en-US", {
+      month: "short"
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-months-grid" + (suffix ? " kz-calendar-months-grid--".concat(suffix) : "")
+  }, MONTHS.map(function (item) {
+    return /*#__PURE__*/React.createElement(RoundedButton, {
+      key: item,
+      padding: "py-3",
+      onClick: function onClick() {
+        return clickMonth(item);
+      },
+      active: currentMonth === item
+    }, getMonthName(item));
+  }));
+};
+
+var Week = function Week() {
+  var _useContext = useContext(DatepickerContext),
+    i18n = _useContext.i18n,
+    startWeekOn = _useContext.startWeekOn,
+    suffix = _useContext.suffix;
+  var startDateModifier = useMemo(function () {
+    switch (startWeekOn) {
+      case "mon":
+        return 1;
+      case "tue":
+        return 2;
+      case "wed":
+        return 3;
+      case "thu":
+        return 4;
+      case "fri":
+        return 5;
+      case "sat":
+        return 6;
+      case "sun":
+      default:
+        return 0;
+    }
+  }, [startWeekOn]);
+  var getDayName = function getDayName(dayIndex) {
+    // Nov 6, 2022 is a Sunday. 
+    var date = new Date(2022, 10, 6 + dayIndex + startDateModifier);
+    return ucFirst(shortString(date.toLocaleDateString(i18n || "en-US", {
+      weekday: "short"
+    })));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-week-grid" + (suffix ? " kz-calendar-week-grid--".concat(suffix) : "")
+  }, DAYS.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item,
+      className: "kz-calendar-week-day" + (suffix ? " kz-calendar-week-day--".concat(suffix) : "")
+    }, getDayName(item));
+  }));
+};
+
+var Years = function Years(_ref) {
+  var year = _ref.year,
+    currentYear = _ref.currentYear,
+    minYear = _ref.minYear,
+    maxYear = _ref.maxYear,
+    clickYear = _ref.clickYear;
+  var _useContext = useContext(DatepickerContext),
+    dateLooking = _useContext.dateLooking,
+    suffix = _useContext.suffix;
+  var startDate = 0;
+  var endDate = 0;
+  switch (dateLooking) {
+    case "backward":
+      startDate = year - 11;
+      endDate = year;
+      break;
+    case "middle":
+      startDate = year - 4;
+      endDate = year + 7;
+      break;
+    case "forward":
+    default:
+      startDate = year;
+      endDate = year + 11;
+      break;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-years-grid" + (suffix ? " kz-calendar-years-grid--".concat(suffix) : "")
+  }, generateArrayNumber(startDate, endDate).map(function (item, index) {
+    return /*#__PURE__*/React.createElement(RoundedButton, {
+      key: index,
+      padding: "py-3",
+      onClick: function onClick() {
+        return clickYear(item);
+      },
+      active: currentYear === item,
+      disabled: maxYear !== null && item > maxYear || minYear !== null && item < minYear
+    }, item);
+  }));
+};
+
+var Calendar = function Calendar(_ref) {
+  var date = _ref.date,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    onClickPrevious = _ref.onClickPrevious,
+    onClickNext = _ref.onClickNext,
+    changeMonth = _ref.changeMonth,
+    changeYear = _ref.changeYear;
+  var _useContext = useContext(DatepickerContext),
+    asSingle = _useContext.asSingle,
+    showFooter = _useContext.showFooter,
+    changeDatepickerValue = _useContext.changeDatepickerValue,
+    hideDatepicker = _useContext.hideDatepicker,
+    period = _useContext.period,
+    changePeriod = _useContext.changePeriod,
+    changeDayHover = _useContext.changeDayHover,
+    startWeekOn = _useContext.startWeekOn,
+    input = _useContext.input,
+    suffix = _useContext.suffix;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showMonths = _useState2[0],
+    setShowMonths = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showYears = _useState4[0],
+    setShowYears = _useState4[1];
+  var _useState5 = useState(date.getFullYear()),
+    _useState6 = _slicedToArray(_useState5, 2),
+    year = _useState6[0],
+    setYear = _useState6[1];
+  var previous = function previous() {
+    return getLastDaysInMonth(previousMonth(date), getNumberOfDay(getFirstDayInMonth(date).ddd, startWeekOn));
+  };
+  var current = function current() {
+    return getDaysInMonth(date);
+  };
+  var next = function next() {
+    return getFirstDaysInMonth(previousMonth(date), 42 - (previous().length + current().length));
+  };
+  var hideMonths = function hideMonths() {
+    return showMonths && setShowMonths(false);
+  };
+  var hideYears = function hideYears() {
+    return showYears && setShowYears(false);
+  };
+  var clickMonth = function clickMonth(month) {
+    setTimeout(function () {
+      changeMonth(month);
+      setShowMonths(!showMonths);
+    }, 250);
+  };
+  var clickYear = function clickYear(year) {
+    setTimeout(function () {
+      changeYear(year);
+      setShowYears(!showYears);
+    }, 250);
+  };
+  var clickDay = function clickDay(day) {
+    var month = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : date.getMonth() + 1;
+    var year = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : date.getFullYear();
+    var fullDay = "".concat(year, "-").concat(String(month).padStart(2, "0"), "-").concat(String(day).padStart(2, "0"));
+    var newStart;
+    var newEnd = null;
+    function chosePeriod(start, end) {
+      changeDatepickerValue({
+        startDate: start,
+        endDate: end
+      }, input === null || input === void 0 ? void 0 : input.current);
+      hideDatepicker();
+    }
+    if (period.start && period.end) {
+      changeDayHover(null);
+      changePeriod({
+        start: null,
+        end: null
+      });
+    }
+    if (!period.start && !period.end || period.start && period.end) {
+      if (!period.start && !period.end) {
+        changeDayHover(fullDay);
+      }
+      newStart = fullDay;
+      if (asSingle) {
+        newEnd = fullDay;
+        chosePeriod(fullDay, fullDay);
+      }
+    } else {
+      if (period.start && !period.end) {
+        var startDate = new Date(period.start);
+        var clickedDate = new Date(fullDay);
+        var condition = clickedDate.getTime() >= startDate.getTime();
+        newStart = condition ? period.start : fullDay;
+        newEnd = condition ? fullDay : period.start;
+      } else {
+        var endDate = new Date(period.end);
+        var _clickedDate = new Date(fullDay);
+        var _condition = _clickedDate.getTime() <= endDate.getTime();
+        newStart = _condition ? fullDay : period.start;
+        newEnd = _condition ? period.end : fullDay;
+      }
+      if (!showFooter && newStart && newEnd) {
+        chosePeriod(newStart, newEnd);
+      }
+    }
+    if (!(newEnd && newStart) || showFooter) {
+      changePeriod({
+        start: newStart,
+        end: newEnd
+      });
+    }
+  };
+  var clickPreviousDays = function clickPreviousDays(day) {
+    var newDate = previousMonth(date);
+    clickDay(day, newDate.getMonth() + 1, newDate.getFullYear());
+    onClickPrevious();
+  };
+  var clickNextDays = function clickNextDays(day) {
+    var newDate = nextMonth(date);
+    clickDay(day, newDate.getMonth() + 1, newDate.getFullYear());
+    onClickNext();
+  };
+  React.useEffect(function () {
+    setYear(date.getFullYear());
+  }, [date]);
+  var calendarData = useMemo(function () {
+    return {
+      date: date,
+      days: {
+        previous: previous(),
+        current: current(),
+        next: next()
+      }
+    };
+  }, [date, previous, current, next]);
+  var minYear = useMemo(function () {
+    return minDate ? new Date(minDate).getFullYear() : null;
+  }, [minDate]);
+  var maxYear = useMemo(function () {
+    return maxDate ? new Date(maxDate).getFullYear() : null;
+  }, [maxDate]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar" + (suffix ? " kz-calendar--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-header" + (suffix ? " kz-calendar-header--".concat(suffix) : "")
+  }, !showMonths && !showYears && /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-header-nav" + (suffix ? " kz-calendar-header-nav--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement(RoundedButton, {
+    roundedFull: true,
+    onClick: onClickPrevious
+  }, /*#__PURE__*/React.createElement(ChevronLeftIcon, null))), showYears && /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-header-nav" + (suffix ? " kz-calendar-header-nav--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement(RoundedButton, {
+    roundedFull: true,
+    onClick: function onClick() {
+      return setYear(year - 12);
+    }
+  }, /*#__PURE__*/React.createElement(DoubleChevronLeftIcon, null))), /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-header-title" + (suffix ? " kz-calendar-header-title--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-header-month" + (suffix ? " kz-calendar-header-month--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement(RoundedButton, {
+    onClick: function onClick() {
+      setShowMonths(!showMonths);
+      hideYears();
+    }
+  }, date.toLocaleDateString("en-US", {
+    month: "short"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-header-year" + (suffix ? " kz-calendar-header-year--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement(RoundedButton, {
+    onClick: function onClick() {
+      setShowYears(!showYears);
+      hideMonths();
+    }
+  }, date.getFullYear()))), showYears && /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-header-nav" + (suffix ? " kz-calendar-header-nav--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement(RoundedButton, {
+    roundedFull: true,
+    onClick: function onClick() {
+      return setYear(year + 12);
+    }
+  }, /*#__PURE__*/React.createElement(DoubleChevronRightIcon, null))), !showMonths && !showYears && /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-header-nav" + (suffix ? " kz-calendar-header-nav--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement(RoundedButton, {
+    roundedFull: true,
+    onClick: onClickNext
+  }, /*#__PURE__*/React.createElement(ChevronRightIcon, null)))), /*#__PURE__*/React.createElement("div", {
+    className: "kz-calendar-body" + (suffix ? " kz-calendar-body--".concat(suffix) : "")
+  }, showMonths && /*#__PURE__*/React.createElement(Months, {
+    currentMonth: date.getMonth() + 1,
+    clickMonth: clickMonth
+  }), showYears && /*#__PURE__*/React.createElement(Years, {
+    year: year,
+    minYear: minYear,
+    maxYear: maxYear,
+    currentYear: date.getFullYear(),
+    clickYear: clickYear
+  }), !showMonths && !showYears && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Week, null), /*#__PURE__*/React.createElement(Days, {
+    calendarData: calendarData,
+    onClickPreviousDays: clickPreviousDays,
+    onClickDay: clickDay,
+    onClickNextDays: clickNextDays
+  }))));
+};
+
+var Footer = function Footer() {
+  var _configs$footer, _configs$footer2;
+  var _useContext = useContext(DatepickerContext),
+    hideDatepicker = _useContext.hideDatepicker,
+    period = _useContext.period,
+    changeDatepickerValue = _useContext.changeDatepickerValue,
+    configs = _useContext.configs,
+    suffix = _useContext.suffix;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kz-datepicker-footer" + (suffix ? " kz-datepicker-footer--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "kz-datepicker-footer-buttons" + (suffix ? " kz-datepicker-footer-buttons--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement(SecondaryButton, {
+    onClick: hideDatepicker
+  }, configs !== null && configs !== void 0 && (_configs$footer = configs.footer) !== null && _configs$footer !== void 0 && _configs$footer.cancel ? configs.footer.cancel : "Cancel"), /*#__PURE__*/React.createElement(PrimaryButton, {
+    onClick: function onClick() {
+      if (period.start && period.end) {
+        changeDatepickerValue({
+          startDate: formatDate(period.start, DATE_FORMAT),
+          endDate: formatDate(period.end, DATE_FORMAT)
+        });
+        hideDatepicker();
+      }
+    },
+    disabled: !(period.start && period.end)
+  }, configs !== null && configs !== void 0 && (_configs$footer2 = configs.footer) !== null && _configs$footer2 !== void 0 && _configs$footer2.apply ? configs.footer.apply : "Apply")));
+};
+
+var ToggleButton = function ToggleButton(_ref) {
+  _ref.isEmpty;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "kz-datepicker-toggle-icon",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: 1.5,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
+  }));
+};
+var Input = function Input(_ref2) {
+  var _shortcutTextRef$curr;
+  var setContextRef = _ref2.setContextRef;
+  var _useContext = useContext(DatepickerContext),
+    period = _useContext.period,
+    dayHover = _useContext.dayHover,
+    changeDayHover = _useContext.changeDayHover,
+    calendarContainer = _useContext.calendarContainer,
+    arrowContainer = _useContext.arrowContainer,
+    inputText = _useContext.inputText,
+    changeInputText = _useContext.changeInputText,
+    hideDatepicker = _useContext.hideDatepicker,
+    changeDatepickerValue = _useContext.changeDatepickerValue,
+    asSingle = _useContext.asSingle,
+    placeholder = _useContext.placeholder,
+    separator = _useContext.separator,
+    shortcutText = _useContext.shortcutText,
+    disabled = _useContext.disabled,
+    readOnly = _useContext.readOnly,
+    displayFormat = _useContext.displayFormat,
+    inputId = _useContext.inputId,
+    inputName = _useContext.inputName,
+    popoverDirection = _useContext.popoverDirection,
+    suffix = _useContext.suffix,
+    placement = _useContext.placement;
+  var buttonRef = useRef(null);
+  var inputRef = useRef(null);
+  var shortcutTextRef = useRef(null);
+  var handleInputChange = function handleInputChange(e) {
+    var inputValue = e.target.value;
+    var dates = [];
+    if (asSingle) {
+      var date = parseDate(inputValue);
+      if (dateIsValid(date)) {
+        dates.push(formatDate(date, DATE_FORMAT));
+      }
+    } else {
+      var parsed = inputValue.split(separator);
+      var startDate = null;
+      var endDate = null;
+      if (parsed.length === 2) {
+        startDate = parseDate(parsed[0].trim());
+        endDate = parseDate(parsed[1].trim());
+      } else {
+        var middle = Math.floor(inputValue.length / 2);
+        startDate = parseDate(inputValue.slice(0, middle));
+        endDate = parseDate(inputValue.slice(middle));
+      }
+      if (dateIsValid(startDate) && dateIsValid(endDate) && startDate.getTime() <= endDate.getTime()) {
+        dates.push(formatDate(startDate, DATE_FORMAT));
+        dates.push(formatDate(endDate, DATE_FORMAT));
+      }
+    }
+    if (dates[0]) {
+      changeDatepickerValue({
+        startDate: dates[0],
+        endDate: dates[1] || dates[0]
+      }, e.target);
+      var hoverD = dates[1] ? parseDate(dates[1]) : parseDate(dates[0]);
+      if (dates[1]) hoverD.setDate(hoverD.getDate() - 1);
+      changeDayHover(formatDate(hoverD, DATE_FORMAT));
+    }
+    changeInputText(e.target.value);
+  };
+  var handleInputKeyDown = function handleInputKeyDown(e) {
+    if (e.key === "Enter") {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+      hideDatepicker();
+    }
+  };
+  useEffect(function () {
+    if (inputRef && typeof setContextRef === "function") {
+      setContextRef(inputRef);
+    }
+  }, [setContextRef, inputRef]);
+  useEffect(function () {
+    var button = buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current;
+    var shortcut = shortcutTextRef === null || shortcutTextRef === void 0 ? void 0 : shortcutTextRef.current;
+    function focusInput(e) {
+      var _inputRef$current2;
+      e.stopPropagation();
+      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
+    }
+    if (button) button.addEventListener("click", focusInput);
+    if (shortcut) shortcut.addEventListener("click", focusInput);
+    return function () {
+      if (button) button.removeEventListener("click", focusInput);
+      if (shortcut) shortcut.removeEventListener("click", focusInput);
+    };
+  }, [changeDatepickerValue, changeDayHover, changeInputText, dayHover, inputText, period.end, period.start]);
+  useEffect(function () {
+    var div = calendarContainer === null || calendarContainer === void 0 ? void 0 : calendarContainer.current;
+    var input = inputRef.current;
+    var arrow = arrowContainer === null || arrowContainer === void 0 ? void 0 : arrowContainer.current;
+    function showCalendarContainer() {
+      if (arrow && div && div.style.display === "none") {
+        div.style.display = "block";
+        var inputRect = input.getBoundingClientRect();
+        var activePlacement = placement;
+        if (placement === "auto") {
+          var spaceBelow = window.innerHeight - inputRect.bottom;
+          var spaceAbove = inputRect.top;
+          activePlacement = spaceBelow > 350 || spaceBelow >= spaceAbove ? "bottom" : "top";
+        }
+
+        // Reset inline styles
+        div.style.top = "";
+        div.style.bottom = "";
+        div.style.left = "";
+        div.style.right = "";
+        div.style.marginTop = "";
+        div.style.marginBottom = "";
+        div.style.marginLeft = "";
+        div.style.marginRight = "";
+        if (activePlacement === "top") {
+          div.style.bottom = "100%";
+          div.style.top = "auto";
+          div.style.marginBottom = "0.625rem";
+        } else if (activePlacement === "bottom") {
+          div.style.top = "100%";
+          div.style.bottom = "auto";
+        } else if (activePlacement === "left") {
+          div.style.right = "100%";
+          div.style.left = "auto";
+          div.style.top = "0";
+          div.style.marginRight = "0.625rem";
+        } else if (activePlacement === "right") {
+          div.style.left = "100%";
+          div.style.right = "auto";
+          div.style.top = "0";
+          div.style.marginLeft = "0.625rem";
+        }
+
+        // Timeout to allow DOM layout
+        setTimeout(function () {
+          div.classList.add("kz-datepicker-open");
+          if (suffix) div.classList.add("kz-datepicker-open--".concat(suffix));
+        }, 10);
+      }
+    }
+    if (div && input) {
+      input.addEventListener("focus", showCalendarContainer);
+    }
+    return function () {
+      if (input) {
+        input.removeEventListener("focus", showCalendarContainer);
+      }
+    };
+  }, [calendarContainer, arrowContainer, popoverDirection, placement]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kz-datepicker-input-wrapper" + (suffix ? " kz-datepicker-input-wrapper--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
+    type: "text",
+    className: "kz-datepicker-input" + (suffix ? " kz-datepicker-input--".concat(suffix) : ""),
+    disabled: disabled,
+    readOnly: readOnly,
+    placeholder: placeholder || "".concat(displayFormat).concat(asSingle ? "" : " ".concat(separator, " ").concat(displayFormat)),
+    value: inputText,
+    id: inputId,
+    name: inputName,
+    autoComplete: "off",
+    role: "presentation",
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown,
+    style: {
+      paddingLeft: shortcutText ? "".concat(((_shortcutTextRef$curr = shortcutTextRef.current) === null || _shortcutTextRef$curr === void 0 ? void 0 : _shortcutTextRef$curr.clientWidth) || 0, "px") : undefined
+    }
+  }), shortcutText && /*#__PURE__*/React.createElement("span", {
+    ref: shortcutTextRef,
+    className: "kz-datepicker-shortcut-text" + (suffix ? " kz-datepicker-shortcut-text--".concat(suffix) : "")
+  }, shortcutText), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    ref: buttonRef,
+    disabled: disabled,
+    className: "kz-datepicker-toggle-button" + (suffix ? " kz-datepicker-toggle-button--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement(ToggleButton, {
+    isEmpty: !(inputText !== null && inputText !== void 0 && inputText.length)
+  })));
+};
+
+var _today = new Date();
+var DEFAULT_SHORTCUTS = {
+  today: {
+    text: "Today",
+    period: {
+      start: formatDate(_today),
+      end: formatDate(_today)
+    }
+  },
+  yesterday: {
+    text: "Yesterday",
+    period: {
+      start: formatDate(new Date(new Date().setDate(_today.getDate() - 1))),
+      end: formatDate(new Date(new Date().setDate(_today.getDate() - 1)))
+    }
+  },
+  past: [{
+    daysNumber: 7,
+    text: "Last 7 days",
+    period: {
+      start: formatDate(new Date(new Date().setDate(_today.getDate() - 7))),
+      end: formatDate(_today)
+    }
+  }, {
+    daysNumber: 30,
+    text: "Last 30 days",
+    period: {
+      start: formatDate(new Date(new Date().setDate(_today.getDate() - 30))),
+      end: formatDate(_today)
+    }
+  }],
+  currentMonth: {
+    text: "This month",
+    period: {
+      start: formatDate(new Date(_today.getFullYear(), _today.getMonth(), 1)),
+      end: formatDate(new Date(_today.getFullYear(), _today.getMonth() + 1, 0))
+    }
+  },
+  pastMonth: {
+    text: "Last month",
+    period: {
+      start: formatDate(new Date(_today.getFullYear(), _today.getMonth() - 1, 1)),
+      end: formatDate(new Date(_today.getFullYear(), _today.getMonth(), 0))
+    }
+  }
+};
+
+var ItemTemplate = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children,
+    item = _ref.item;
+  var _useContext = useContext(DatepickerContext),
+    period = _useContext.period,
+    changePeriod = _useContext.changePeriod,
+    updateFirstDate = _useContext.updateFirstDate,
+    dayHover = _useContext.dayHover,
+    changeDayHover = _useContext.changeDayHover,
+    hideDatepicker = _useContext.hideDatepicker,
+    changeDatepickerValue = _useContext.changeDatepickerValue,
+    suffix = _useContext.suffix;
+  var getClassName = function getClassName() {
+    return "kz-datepicker-shortcut-item" + (suffix ? " kz-datepicker-shortcut-item--".concat(suffix) : "");
+  };
+  var chosePeriod = function chosePeriod(periodItem) {
+    if (dayHover) changeDayHover(null);
+    if (period.start || period.end) changePeriod({
+      start: null,
+      end: null
+    });
+    changePeriod(periodItem);
+    changeDatepickerValue({
+      startDate: periodItem.start,
+      endDate: periodItem.end
+    });
+    updateFirstDate(parseDate(periodItem.start));
+    hideDatepicker();
+  };
+  return /*#__PURE__*/React.createElement("li", {
+    className: getClassName(),
+    onClick: function onClick(e) {
+      chosePeriod(item.period);
+      if (item.onClick) item.onClick(item.text, e);
+    }
+  }, children);
+});
+var Shortcuts = function Shortcuts() {
+  var _useContext2 = useContext(DatepickerContext),
+    configs = _useContext2.configs,
+    suffix = _useContext2.suffix;
+  var callPastFunction = function callPastFunction(data, numberValue) {
+    return typeof data === "function" ? data(numberValue) : null;
+  };
+  var shortcutOptions = useMemo(function () {
+    if (!(configs !== null && configs !== void 0 && configs.shortcuts)) return Object.entries(DEFAULT_SHORTCUTS);
+    return Object.entries(configs.shortcuts).flatMap(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        customConfig = _ref3[1];
+      if (Object.prototype.hasOwnProperty.call(DEFAULT_SHORTCUTS, key)) {
+        return [[key, DEFAULT_SHORTCUTS[key]]];
+      }
+      var text = customConfig.text,
+        period = customConfig.period,
+        onClick = customConfig.onClick;
+      if (!text || !period) return [];
+      var start = parseDate(period.start);
+      var end = parseDate(period.end);
+      if (start && end && start.getTime() <= end.getTime()) {
+        return [[text, {
+          text: text,
+          period: {
+            start: formatDate(start, DATE_FORMAT),
+            end: formatDate(end, DATE_FORMAT)
+          },
+          onClick: onClick
+        }]];
+      }
+      return [];
+    });
+  }, [configs]);
+  var printItemText = function printItemText(item) {
+    var _item$text;
+    return (_item$text = item === null || item === void 0 ? void 0 : item.text) !== null && _item$text !== void 0 ? _item$text : null;
+  };
+  if (!(shortcutOptions !== null && shortcutOptions !== void 0 && shortcutOptions.length)) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kz-datepicker-shortcuts" + (suffix ? " kz-datepicker-shortcuts--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "kz-datepicker-shortcuts-list" + (suffix ? " kz-datepicker-shortcuts-list--".concat(suffix) : "")
+  }, shortcutOptions.map(function (_ref4, index) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+      key = _ref5[0],
+      item = _ref5[1];
+    return Array.isArray(item) ? item.map(function (subItem, subIndex) {
+      return /*#__PURE__*/React.createElement(ItemTemplate, {
+        key: "".concat(index, "-").concat(subIndex),
+        item: subItem
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, key === "past" && configs !== null && configs !== void 0 && configs.shortcuts && key in configs.shortcuts && subItem.daysNumber ? callPastFunction(configs.shortcuts[key], subItem.daysNumber) : subItem.text));
+    }) : /*#__PURE__*/React.createElement(ItemTemplate, {
+      key: index,
+      item: item
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, configs !== null && configs !== void 0 && configs.shortcuts && key in configs.shortcuts ? _typeof(configs.shortcuts[key]) === "object" ? printItemText(item) : configs.shortcuts[key] : printItemText(item)));
+  })));
+};
+
+/**
+ * Hook that alerts clicks outside of the passed ref
+ *
+ * @param {import("react").RefObject} ref
+ * @param {(e?: MouseEvent | TouchEvent) => void} handler
+ */
+function useOnClickOutside(ref, handler) {
+  useEffect(function () {
+    var listener = function listener(event) {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return function () {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}
+
+/**
+ * kz-react-datepicker
+ *
+ * @param {Object} props
+ * @param {import("./DatepickerContext").DateValueType|null} [props.value] - The selected date(s).
+ * @param {(value: import("./DatepickerContext").DateValueType, e?: HTMLInputElement | null) => void} props.onChange - onChange callback.
+ * @param {boolean} [props.useRange=true] - Whether to show two calendars for start and end dates.
+ * @param {boolean} [props.asSingle=false] - If true, only a single date is selected.
+ * @param {string} [props.placeholder] - Input placeholder.
+ * @param {boolean} [props.disabled=false] - Disables the input.
+ * @param {boolean} [props.readOnly=false] - Makes the input read-only.
+ * @param {string} [props.displayFormat] - The display format for the input, defaults to YYYY-MM-DD.
+ * @param {Date|string|null} [props.minDate=null] - Minimum selectable date.
+ * @param {Date|string|null} [props.maxDate=null] - Maximum selectable date.
+ * @param {string} [props.primaryColor="blue"] - Theme color.
+ * @param {string} [props.separator="~"] - Separator between start and end date in input.
+ * @param {string|null} [props.startFrom=null] - Date to open the calendar at.
+ * @param {string} [props.i18n] - i18n locale, e.g., 'en'.
+ * @param {boolean} [props.showFooter=false] - Show Action/Footer buttons.
+ * @param {boolean} [props.showShortcuts=false] - Show quick shortcuts.
+ * @param {string|null} [props.shortcutText] - Label for shortcut button input adornment.
+ * @param {Object} [props.configs] - Additional configurations.
+ * @param {((className: string) => string)|string|null} [props.inputClassName] - Custom input classes.
+ * @param {((className: string) => string)|string|null} [props.containerClassName] - Custom wrapper classes.
+ * @param {((className: string) => string)|string|null} [props.toggleClassName] - Toggle button classes.
+ * @param {(open: boolean) => import("react").ReactNode} [props.toggleIcon] - Custom toggle icon.
+ * @param {"forward"|"backward"|"middle"} [props.dateLooking="forward"] - Date looking direction for missing ranges.
+ * @param {Array<{start: Date|string, end: Date|string}>|null} [props.disabledDates=null] - Dates to disable.
+ * @param {string} [props.inputId] - ID for the input field.
+ * @param {string} [props.inputName] - Name for the input field.
+ * @param {string} [props.startWeekOn="sun"] - Day the week starts on.
+ * @param {Object} [props.classNames] - Custom classes for different sub-components.
+ * @param {string} [props.popoverDirection] - Popover direction.
+ * @param {string} [props.suffix] - Suffix for classnames.
+ * @param {"auto"|"light"|"dark"} [props.theme="auto"] - Color theme of the datepicker, defaults to system preferences (auto).
+ * @param {"bottom"|"top"|"left"|"right"|"auto"} [props.placement="bottom"] - Where the datepicker calendar opens relative to input.
+ */
+var Datepicker = function Datepicker(_ref) {
+  var _ref$primaryColor = _ref.primaryColor,
+    primaryColor = _ref$primaryColor === void 0 ? "blue" : _ref$primaryColor,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? null : _ref$value,
+    onChange = _ref.onChange,
+    _ref$useRange = _ref.useRange,
+    useRange = _ref$useRange === void 0 ? true : _ref$useRange,
+    _ref$showFooter = _ref.showFooter,
+    showFooter = _ref$showFooter === void 0 ? false : _ref$showFooter,
+    _ref$showShortcuts = _ref.showShortcuts,
+    showShortcuts = _ref$showShortcuts === void 0 ? false : _ref$showShortcuts,
+    _ref$configs = _ref.configs,
+    configs = _ref$configs === void 0 ? undefined : _ref$configs,
+    _ref$asSingle = _ref.asSingle,
+    asSingle = _ref$asSingle === void 0 ? false : _ref$asSingle,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? null : _ref$placeholder,
+    _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? "~" : _ref$separator,
+    _ref$startFrom = _ref.startFrom,
+    startFrom = _ref$startFrom === void 0 ? null : _ref$startFrom,
+    _ref$i18n = _ref.i18n,
+    i18n = _ref$i18n === void 0 ? LANGUAGE : _ref$i18n,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$inputClassName = _ref.inputClassName,
+    inputClassName = _ref$inputClassName === void 0 ? null : _ref$inputClassName,
+    _ref$containerClassNa = _ref.containerClassName,
+    containerClassName = _ref$containerClassNa === void 0 ? null : _ref$containerClassNa,
+    _ref$toggleClassName = _ref.toggleClassName,
+    toggleClassName = _ref$toggleClassName === void 0 ? null : _ref$toggleClassName,
+    _ref$toggleIcon = _ref.toggleIcon,
+    toggleIcon = _ref$toggleIcon === void 0 ? undefined : _ref$toggleIcon,
+    _ref$shortcutText = _ref.shortcutText,
+    shortcutText = _ref$shortcutText === void 0 ? null : _ref$shortcutText,
+    _ref$displayFormat = _ref.displayFormat,
+    displayFormat = _ref$displayFormat === void 0 ? DATE_FORMAT : _ref$displayFormat,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$minDate = _ref.minDate,
+    minDate = _ref$minDate === void 0 ? null : _ref$minDate,
+    _ref$maxDate = _ref.maxDate,
+    maxDate = _ref$maxDate === void 0 ? null : _ref$maxDate,
+    _ref$dateLooking = _ref.dateLooking,
+    dateLooking = _ref$dateLooking === void 0 ? "forward" : _ref$dateLooking,
+    _ref$disabledDates = _ref.disabledDates,
+    disabledDates = _ref$disabledDates === void 0 ? null : _ref$disabledDates,
+    inputId = _ref.inputId,
+    inputName = _ref.inputName,
+    _ref$startWeekOn = _ref.startWeekOn,
+    startWeekOn = _ref$startWeekOn === void 0 ? "sun" : _ref$startWeekOn,
+    _ref$classNames = _ref.classNames,
+    classNames = _ref$classNames === void 0 ? undefined : _ref$classNames,
+    _ref$popoverDirection = _ref.popoverDirection,
+    popoverDirection = _ref$popoverDirection === void 0 ? undefined : _ref$popoverDirection,
+    _ref$suffix = _ref.suffix,
+    suffix = _ref$suffix === void 0 ? "" : _ref$suffix,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? "auto" : _ref$theme,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "bottom" : _ref$placement;
+  var containerRef = useRef(null);
+  var calendarContainerRef = useRef(null);
+  var arrowRef = useRef(null);
+  var getInitialFirstDate = function getInitialFirstDate() {
+    if (value !== null && value !== void 0 && value.startDate && dateIsValid(parseDate(value.startDate))) {
+      return parseDate(value.startDate);
+    }
+    if (startFrom && dateIsValid(parseDate(startFrom))) {
+      return parseDate(startFrom);
+    }
+    return new Date();
+  };
+  var _useState = useState(getInitialFirstDate()),
+    _useState2 = _slicedToArray(_useState, 2),
+    firstDate = _useState2[0],
+    setFirstDate = _useState2[1];
+  var _useState3 = useState(nextMonth(getInitialFirstDate())),
+    _useState4 = _slicedToArray(_useState3, 2),
+    secondDate = _useState4[0],
+    setSecondDate = _useState4[1];
+  var _useState5 = useState(function () {
+      return typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    systemTheme = _useState6[0],
+    setSystemTheme = _useState6[1];
+  useEffect(function () {
+    if (theme === "auto" && typeof window !== "undefined" && window.matchMedia) {
+      var mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      var handleChange = function handleChange(e) {
+        return setSystemTheme(e.matches ? "dark" : "light");
+      };
+      mediaQuery.addEventListener("change", handleChange);
+      return function () {
+        return mediaQuery.removeEventListener("change", handleChange);
+      };
+    }
+  }, [theme]);
+  var activeTheme = theme === "auto" ? systemTheme : theme;
+  var _useState7 = useState({
+      start: null,
+      end: null
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    period = _useState8[0],
+    setPeriod = _useState8[1];
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    dayHover = _useState0[0],
+    setDayHover = _useState0[1];
+  var _useState1 = useState(""),
+    _useState10 = _slicedToArray(_useState1, 2),
+    inputText = _useState10[0],
+    setInputText = _useState10[1];
+  var _useState11 = useState(/*#__PURE__*/React.createRef()),
+    _useState12 = _slicedToArray(_useState11, 2),
+    inputRef = _useState12[0],
+    setInputRef = _useState12[1];
+  useOnClickOutside(containerRef, function () {
+    var container = containerRef.current;
+    var div = calendarContainerRef.current;
+    var openBaseClass = "kz-datepicker-open";
+    var openModifierClass = suffix ? "kz-datepicker-open--".concat(suffix) : "";
+    if (container && div && (div.classList.contains(openBaseClass) || openModifierClass && div.classList.contains(openModifierClass))) {
+      onChange(_objectSpread2({
+        endDate: null,
+        startDate: null
+      }, value));
+      hideDatepicker();
+    }
+  });
+  var hideDatepicker = useCallback(function () {
+    var div = calendarContainerRef.current;
+    var openBaseClass = "kz-datepicker-open";
+    var openModifierClass = suffix ? "kz-datepicker-open--".concat(suffix) : "";
+    var closeBaseClass = "kz-datepicker-close";
+    var closeModifierClass = suffix ? "kz-datepicker-close--".concat(suffix) : "";
+    if (div && (div.classList.contains(openBaseClass) || openModifierClass && div.classList.contains(openModifierClass))) {
+      div.classList.remove(openBaseClass);
+      if (openModifierClass) div.classList.remove(openModifierClass);
+      div.classList.add(closeBaseClass);
+      if (closeModifierClass) div.classList.add(closeModifierClass);
+      setTimeout(function () {
+        div.style.display = "none";
+        div.classList.remove(closeBaseClass);
+        if (closeModifierClass) div.classList.remove(closeModifierClass);
+      }, 300);
+    }
+  }, [suffix]);
+  var firstGotoDate = useCallback(function (date) {
+    var newDate = parseDate(formatDate(date));
+    var reformatDate = parseDate(formatDate(secondDate));
+    if (newDate.getTime() >= reformatDate.getTime()) {
+      setSecondDate(nextMonth(date));
+    }
+    setFirstDate(date);
+  }, [secondDate]);
+  var previousMonthFirst = useCallback(function () {
+    return setFirstDate(previousMonth(firstDate));
+  }, [firstDate]);
+  var nextMonthFirst = useCallback(function () {
+    return firstGotoDate(nextMonth(firstDate));
+  }, [firstDate, firstGotoDate]);
+  var changeFirstMonth = useCallback(function (month) {
+    firstGotoDate(new Date(firstDate.getFullYear(), month - 1, 1));
+  }, [firstDate, firstGotoDate]);
+  var changeFirstYear = useCallback(function (year) {
+    firstGotoDate(new Date(year, firstDate.getMonth(), 1));
+  }, [firstDate, firstGotoDate]);
+  var secondGotoDate = useCallback(function (date) {
+    var newDate = parseDate(formatDate(date, displayFormat));
+    var reformatDate = parseDate(formatDate(firstDate, displayFormat));
+    if (newDate.getTime() <= reformatDate.getTime()) {
+      setFirstDate(previousMonth(date));
+    }
+    setSecondDate(date);
+  }, [firstDate, displayFormat]);
+  var previousMonthSecond = useCallback(function () {
+    return secondGotoDate(previousMonth(secondDate));
+  }, [secondDate, secondGotoDate]);
+  var nextMonthSecond = useCallback(function () {
+    return setSecondDate(nextMonth(secondDate));
+  }, [secondDate]);
+  var changeSecondMonth = useCallback(function (month) {
+    secondGotoDate(new Date(secondDate.getFullYear(), month - 1, 1));
+  }, [secondDate, secondGotoDate]);
+  var changeSecondYear = useCallback(function (year) {
+    secondGotoDate(new Date(year, secondDate.getMonth(), 1));
+  }, [secondDate, secondGotoDate]);
+  useEffect(function () {
+    if (value && value.startDate && value.endDate) {
+      var startDate = parseDate(value.startDate);
+      var endDate = parseDate(value.endDate);
+      var validDate = dateIsValid(startDate) && dateIsValid(endDate);
+      var condition = validDate && startDate.getTime() <= endDate.getTime();
+      if (condition) {
+        setPeriod({
+          start: formatDate(startDate),
+          end: formatDate(endDate)
+        });
+        setInputText("".concat(formatDate(startDate, displayFormat)).concat(asSingle ? "" : " ".concat(separator, " ").concat(formatDate(endDate, displayFormat))));
+      }
+    }
+    if (value && value.startDate === null && value.endDate === null) {
+      setPeriod({
+        start: null,
+        end: null
+      });
+      setInputText("");
+    }
+  }, [asSingle, value, displayFormat, separator]);
+  useEffect(function () {
+    if (startFrom && dateIsValid(parseDate(startFrom))) {
+      var startDate = value === null || value === void 0 ? void 0 : value.startDate;
+      var endDate = value === null || value === void 0 ? void 0 : value.endDate;
+      if (startDate && dateIsValid(parseDate(startDate))) {
+        setFirstDate(parseDate(startDate));
+        if (!asSingle) {
+          if (endDate && dateIsValid(parseDate(endDate))) {
+            var parsedEnd = parseDate(endDate);
+            var startMonthEnd = new Date(parseDate(startDate).getFullYear(), parseDate(startDate).getMonth() + 1, 0, 23, 59, 59);
+            if (parsedEnd.getTime() > startMonthEnd.getTime()) {
+              setSecondDate(parsedEnd);
+            } else {
+              setSecondDate(nextMonth(parseDate(startDate)));
+            }
+          } else {
+            setSecondDate(nextMonth(parseDate(startDate)));
+          }
+        }
+      } else {
+        setFirstDate(parseDate(startFrom));
+        setSecondDate(nextMonth(parseDate(startFrom)));
+      }
+    }
+  }, [asSingle, startFrom, value]);
+  var safePrimaryColor = useMemo(function () {
+    return COLORS.includes(primaryColor) ? primaryColor : DEFAULT_COLOR;
+  }, [primaryColor]);
+  var contextValues = useMemo(function () {
+    return {
+      asSingle: asSingle,
+      primaryColor: safePrimaryColor,
+      configs: configs,
+      calendarContainer: calendarContainerRef,
+      arrowContainer: arrowRef,
+      hideDatepicker: hideDatepicker,
+      period: period,
+      changePeriod: setPeriod,
+      dayHover: dayHover,
+      changeDayHover: setDayHover,
+      inputText: inputText,
+      changeInputText: setInputText,
+      updateFirstDate: firstGotoDate,
+      changeDatepickerValue: onChange,
+      showFooter: showFooter,
+      placeholder: placeholder,
+      separator: separator,
+      shortcutText: shortcutText,
+      i18n: i18n,
+      value: value,
+      disabled: disabled,
+      inputClassName: inputClassName,
+      containerClassName: containerClassName,
+      toggleClassName: toggleClassName,
+      toggleIcon: toggleIcon,
+      readOnly: readOnly,
+      displayFormat: displayFormat,
+      minDate: minDate,
+      maxDate: maxDate,
+      dateLooking: dateLooking,
+      disabledDates: disabledDates,
+      inputId: inputId,
+      inputName: inputName,
+      startWeekOn: startWeekOn,
+      classNames: classNames,
+      onChange: onChange,
+      input: inputRef,
+      popoverDirection: popoverDirection,
+      suffix: suffix,
+      theme: activeTheme,
+      placement: placement
+    };
+  }, [asSingle, safePrimaryColor, configs, hideDatepicker, period, dayHover, inputText, onChange, showFooter, placeholder, separator, shortcutText, i18n, value, disabled, inputClassName, containerClassName, toggleClassName, toggleIcon, readOnly, displayFormat, minDate, maxDate, dateLooking, disabledDates, inputId, inputName, startWeekOn, classNames, inputRef, popoverDirection, firstGotoDate, suffix, activeTheme, placement]);
+  var containerClassNameOverload = useMemo(function () {
+    var defaultClassName = "kz-datepicker-container" + (suffix ? " kz-datepicker-container--".concat(suffix) : "");
+    if (activeTheme === "dark") {
+      defaultClassName += " dark";
+    }
+    return typeof containerClassName === "function" ? containerClassName(defaultClassName) : typeof containerClassName === "string" && containerClassName !== "" ? containerClassName + (activeTheme === "dark" && !containerClassName.includes("dark") ? " dark" : "") : defaultClassName;
+  }, [containerClassName, suffix, activeTheme]);
+  return /*#__PURE__*/React.createElement(DatepickerContext.Provider, {
+    value: contextValues
+  }, /*#__PURE__*/React.createElement("div", {
+    className: containerClassNameOverload,
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(Input, {
+    setContextRef: setInputRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "kz-datepicker-popup" + (suffix ? " kz-datepicker-popup--".concat(suffix) : ""),
+    ref: calendarContainerRef,
+    style: {
+      display: "none"
+    }
+  }, /*#__PURE__*/React.createElement(Arrow, {
+    ref: arrowRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "kz-datepicker-popup-inner" + (suffix ? " kz-datepicker-popup-inner--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "kz-datepicker-main-content" + (suffix ? " kz-datepicker-main-content--".concat(suffix) : "")
+  }, showShortcuts && /*#__PURE__*/React.createElement(Shortcuts, null), /*#__PURE__*/React.createElement("div", {
+    className: "kz-datepicker-calendars".concat(suffix ? " kz-datepicker-calendars--".concat(suffix) : "", " ").concat(showShortcuts ? "kz-has-shortcuts" + (suffix ? " kz-has-shortcuts--".concat(suffix) : "") : "")
+  }, /*#__PURE__*/React.createElement(Calendar, {
+    date: firstDate,
+    onClickPrevious: previousMonthFirst,
+    onClickNext: nextMonthFirst,
+    changeMonth: changeFirstMonth,
+    changeYear: changeFirstYear,
+    minDate: minDate,
+    maxDate: maxDate
+  }), useRange && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "kz-datepicker-divider-wrapper" + (suffix ? " kz-datepicker-divider-wrapper--".concat(suffix) : "")
+  }, /*#__PURE__*/React.createElement(VerticalDash, null)), /*#__PURE__*/React.createElement(Calendar, {
+    date: secondDate,
+    onClickPrevious: previousMonthSecond,
+    onClickNext: nextMonthSecond,
+    changeMonth: changeSecondMonth,
+    changeYear: changeSecondYear,
+    minDate: minDate,
+    maxDate: maxDate
+  })))), showFooter && /*#__PURE__*/React.createElement(Footer, null)))));
+};
+
+export { Datepicker as default };
+//# sourceMappingURL=index.esm.js.map