@stenajs-webui/calendar 17.5.0 → 17.8.0

package/dist/index.es.js

@@ -1,2079 +1,2880 @@
-import * as React from 'react';
-import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
-import { FlatButton, PrimaryButton, Icon, stenaArrowRight } from '@stenajs-webui/elements';
-import { Box, Text, Clickable, Row, Space, Spacing, Indent, Column, SeparatorLine, parseIntElseUndefined, useBoolean, useDelayedFalse } from '@stenajs-webui/core';
-import { isAfter, eachDayOfInterval, isSameDay, endOfMonth, startOfMonth, min, addDays, max, subDays, format, getISOWeek, getDate, startOfISOWeek, addWeeks, getMonth, getYear, getISODay, addHours, isBefore, parse, addMonths, addYears, subMonths, subYears, isValid } from 'date-fns';
-import { last, chunk, range, debounce } from 'lodash';
-import styled from '@emotion/styled';
-import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
-import { faAngleDoubleLeft } from '@fortawesome/free-solid-svg-icons/faAngleDoubleLeft';
-import { faAngleDoubleRight } from '@fortawesome/free-solid-svg-icons/faAngleDoubleRight';
-import { faCaretLeft } from '@fortawesome/free-solid-svg-icons/faCaretLeft';
-import { faCaretRight } from '@fortawesome/free-solid-svg-icons/faCaretRight';
-import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons/faCalendarAlt';
-import { TextInput, TextInputBox } from '@stenajs-webui/forms';
-import { useTippyInstance, Popover } from '@stenajs-webui/tooltip';
-import { faCalendarAlt as faCalendarAlt$1 } from '@fortawesome/free-solid-svg-icons/faCalendarAlt';
-import { cssColor } from '@stenajs-webui/theme';
-import { faLongArrowAltRight } from '@fortawesome/free-solid-svg-icons/faLongArrowAltRight';
-import { faClock } from '@fortawesome/free-solid-svg-icons/faClock';
-import { faClock as faClock$1 } from '@fortawesome/free-regular-svg-icons/faClock';
-import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
+(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode("._calendar_1w0de_1{--swui-calendar-day-width: 40px;--swui-calendar-day-height: 38px;--swui-calendar-day-border-radius: 4px;--swui-calendar-week-number-bg-color: transparent;--swui-calendar-week-number-text-color: var(--lhds-color-ui-500);--swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-text-color: var(--lhds-color-ui-500);--swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);--swui-calendar-wrapper-selected-border: var(--swui-primary-action-color);--swui-calendar-wrapper-selected-background: var(--swui-primary-action-color);--swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);--swui-calendar-wrapper-range-background: var(--lhds-color-blue-100);--swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);--swui-calendar-wrapper-today-background: var(--lhds-color-ui-200);--swui-calendar-text-selected-color: #fff;--swui-calendar-text-disabled-color: var(--swui-text-disabled-color);--swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color)}._calendar_1w0de_1 table{border-spacing:0 4px}._calendar_1w0de_1 span{line-height:100%}._calendar_1w0de_1 tr td:last-child{border-top-right-radius:var(--swui-calendar-day-border-radius);border-bottom-right-radius:var(--swui-calendar-day-border-radius)}._calendar_1w0de_1 tr td:nth-child(2){border-top-left-radius:var(--swui-calendar-day-border-radius);border-bottom-left-radius:var(--swui-calendar-day-border-radius)}._calendar_1w0de_1 td{padding:0;width:var(--swui-calendar-day-width);height:var(--swui-calendar-day-height)}._timePicker_1w05d_1{overflow:hidden;width:180px}._timePickerColumn_1w05d_6{overflow-y:hidden;flex:1}._timePickerColumn_1w05d_6:hover{overflow-y:scroll}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { FlatButton, stenaAngleLeft, stenaAngleRight, PrimaryButton, stenaCalendar, Icon, stenaClock, stenaAngleDown, stenaArrowRight } from "@stenajs-webui/elements";
+import { Box, Text, Clickable, Row, Space, Spacing, Indent, Column, SeparatorLine, parseIntElseUndefined, useBoolean, useDelayedFalse } from "@stenajs-webui/core";
+import { isAfter, eachDayOfInterval, isSameDay, endOfMonth, startOfMonth, min, addDays, max, subDays, format, getISOWeek, getDate, startOfISOWeek, addWeeks, getMonth, getYear, getISODay, addHours, isBefore, parse, addMonths, addYears, subMonths, subYears, isValid } from "date-fns";
+import { last, chunk, range, debounce } from "lodash";
+import * as React from "react";
+import { useMemo, useCallback, useState, useEffect, useRef } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { faAngleDoubleLeft } from "@fortawesome/free-solid-svg-icons/faAngleDoubleLeft";
+import { faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons/faAngleDoubleRight";
+import { faCaretLeft } from "@fortawesome/free-solid-svg-icons/faCaretLeft";
+import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
+import { TextInput, TextInputBox } from "@stenajs-webui/forms";
+import { useTippyInstance, Popover } from "@stenajs-webui/tooltip";
+import { cssColor } from "@stenajs-webui/theme";
+import { faLongArrowAltRight } from "@fortawesome/free-solid-svg-icons/faLongArrowAltRight";
+const DateFormats = {
+  yearAndMonth: "yyyy-MM",
+  fullDate: "yyyy-MM-dd",
+  fullMonthName: "LLLL",
+  fullDateAndTime: "yyyy-MM-dd HH:mm",
+  fullDateAndTimeSystem: "yyyy-MM-ddTHH:MM",
+  weekDayName: "EEEE",
+  weekDayNameShort: "EEE",
+  dateAndMonth: "d MMM",
+  monthAndDate: "MMM do"
+};
+const buildDayStateForDateRange = (statePerMonth = {}, start, end) => {
+  if (start && end && isAfter(end, start)) {
+    return eachDayOfInterval({ start, end }).reduce((result, date) => {
+      const isFirstInRange = isSameDay(date, start);
+      const isLastInRange = isSameDay(date, end);
+      const highlights = isFirstInRange ? ["selected", "selectedStart", "range"] : isLastInRange ? ["selected", "selectedEnd", "range"] : ["range"];
+      return addDayStateHighlights(result, date, highlights);
+    }, statePerMonth);
+  }
+  let state = statePerMonth;
+  if (start) {
+    state = addDayStateHighlights(state, start, ["selected", "singleSelected"]);
+  }
+  if (end) {
+    state = addDayStateHighlights(state, end, ["selected", "singleSelected"]);
+  }
+  return state;
+};
+const buildDayStateForSingleMonth = (statePerMonth = {}, start, end, dateInFocus) => buildDayStateForRange(statePerMonth, start, end, startOfMonth(dateInFocus), endOfMonth(dateInFocus));
+const buildDayStateForRange = (statePerMonth = {}, start, end, startLimit, endLimit) => {
+  if (start && end) {
+    return buildDayStateForDateRange(statePerMonth, max([start, subDays(startLimit, 1)]), min([end, addDays(endLimit, 1)]));
+  } else {
+    return buildDayStateForDateRange(statePerMonth, start, end);
+  }
+};
+const setDayStateValue = (state, date, values) => {
+  const monthString = format(date, DateFormats.yearAndMonth);
+  const weekNumber = getISOWeek(date);
+  const dayInMonth = getDate(date);
+  return {
+    ...state,
+    [monthString]: {
+      ...state && state[monthString],
+      [weekNumber]: {
+        ...state && state[monthString] && state[monthString][weekNumber],
+        [dayInMonth]: {
+          ...state && state[monthString] && state[monthString][weekNumber] && state[monthString][weekNumber][dayInMonth],
+          ...values
+        }
+      }
+    }
+  };
+};
+const setDayStateValueFunction = (state, date, setter) => {
+  const monthString = format(date, DateFormats.yearAndMonth);
+  const weekNumber = getISOWeek(date);
+  const dayInMonth = getDate(date);
+  return {
+    ...state,
+    [monthString]: {
+      ...state && state[monthString],
+      [weekNumber]: {
+        ...state && state[monthString] && state[monthString][weekNumber],
+        [dayInMonth]: {
+          ...state && state[monthString] && state[monthString][weekNumber] && state[monthString][weekNumber][dayInMonth],
+          ...setter(state && state[monthString] && state[monthString][weekNumber] && state[monthString][weekNumber][dayInMonth])
+        }
+      }
+    }
+  };
+};
+const addDayStateHighlights = (calendarState, date, highlights) => {
+  const month = date.getMonth() + 1;
+  const monthString = `${date.getFullYear()}-${month < 10 ? "0" : ""}${month}`;
+  const weekNumber = getISOWeek(date);
+  const dayInMonth = getDate(date);
+  const dayState = calendarState && calendarState[monthString] && calendarState[monthString][weekNumber] && calendarState[monthString][weekNumber][dayInMonth];
+  return {
+    ...calendarState,
+    [monthString]: {
+      ...calendarState && calendarState[monthString],
+      [weekNumber]: {
+        ...calendarState && calendarState[monthString] && calendarState[monthString][weekNumber],
+        [dayInMonth]: addDayStateHighlightsOnSingleDay(dayState, highlights)
+      }
+    }
+  };
+};
+const addDayStateHighlightsOnSingleDay = (dayState, highlights) => {
+  var _a;
+  return {
+    ...dayState,
+    highlights: [...(_a = dayState == null ? void 0 : dayState.highlights) != null ? _a : [], ...highlights]
+  };
+};
+const addWeekStateHighlights = (calendarState, week, highlights) => {
+  const date = week.days[0].date;
+  const month = date.getMonth() + 1;
+  const monthString = `${date.getFullYear()}-${month < 10 ? "0" : ""}${month}`;
+  const weekNumber = week.weekNumber;
+  let state = calendarState;
+  week.days.forEach((day) => {
+    state = addDayStateHighlights(state, day.date, highlights);
+  });
+  const weekState = state && state[monthString] ? state[monthString][weekNumber] : void 0;
+  const newHighlights = weekState && weekState.highlights ? [...weekState.highlights, ...highlights] : highlights;
+  const newWeekState = {
+    ...weekState,
+    highlights: newHighlights
+  };
+  return {
+    ...state,
+    [monthString]: {
+      ...calendarState && calendarState[monthString],
+      [weekNumber]: newWeekState
+    }
+  };
+};
+const addWeekRangeHighlights = (calendarState, week) => {
+  var _a;
+  if (!week.days.length) {
+    return { ...calendarState };
+  }
+  const startDate = week.days[0].date;
+  const endDate = (_a = last(week.days)) == null ? void 0 : _a.date;
+  return {
+    ...buildDayStateForDateRange(calendarState, startDate, endDate)
+  };
+};
+const useHighlightToday = (enabled, statePerMonth) => {
+  return useMemo(() => {
+    return enabled ? addDayStateHighlights(statePerMonth, new Date(), ["today"]) : statePerMonth;
+  }, [enabled, statePerMonth]);
+};
+var Month = /* @__PURE__ */ ((Month2) => {
+  Month2[Month2["JANUARY"] = 0] = "JANUARY";
+  Month2[Month2["FEBRUARY"] = 1] = "FEBRUARY";
+  Month2[Month2["MARCH"] = 2] = "MARCH";
+  Month2[Month2["APRIL"] = 3] = "APRIL";
+  Month2[Month2["MAY"] = 4] = "MAY";
+  Month2[Month2["JUNE"] = 5] = "JUNE";
+  Month2[Month2["JULY"] = 6] = "JULY";
+  Month2[Month2["AUGUST"] = 7] = "AUGUST";
+  Month2[Month2["SEPTEMBER"] = 8] = "SEPTEMBER";
+  Month2[Month2["OCTOBER"] = 9] = "OCTOBER";
+  Month2[Month2["NOVEMBER"] = 10] = "NOVEMBER";
+  Month2[Month2["DECEMBER"] = 11] = "DECEMBER";
+  return Month2;
+})(Month || {});
+var WeekDay = /* @__PURE__ */ ((WeekDay2) => {
+  WeekDay2[WeekDay2["SUNDAY"] = 0] = "SUNDAY";
+  WeekDay2[WeekDay2["MONDAY"] = 1] = "MONDAY";
+  WeekDay2[WeekDay2["TUESDAY"] = 2] = "TUESDAY";
+  WeekDay2[WeekDay2["WEDNESDAY"] = 3] = "WEDNESDAY";
+  WeekDay2[WeekDay2["THURSDAY"] = 4] = "THURSDAY";
+  WeekDay2[WeekDay2["FRIDAY"] = 5] = "FRIDAY";
+  WeekDay2[WeekDay2["SATURDAY"] = 6] = "SATURDAY";
+  return WeekDay2;
+})(WeekDay || {});
+const getMonthsInYear = (year, startMonth, numMonths) => {
+  const months = [];
+  for (let i = 0; i < numMonths; i++) {
+    months.push(getMonthInYear(year, startMonth + i));
+  }
+  return months;
+};
+const getMonthInYear = (year, month) => {
+  const yearToUse = year + Math.floor(month / 12);
+  const monthToUse = month % 12;
+  const firstDayOfMonth = new Date(yearToUse, monthToUse, 1);
+  return {
+    monthString: format(firstDayOfMonth, DateFormats.yearAndMonth),
+    name: format(firstDayOfMonth, DateFormats.fullMonthName),
+    year: yearToUse,
+    monthInYear: monthToUse,
+    weeks: getWeeksForMonth(yearToUse, monthToUse)
+  };
+};
+const getWeeksForMonth = (year, month, forceSixWeeks = true) => {
+  const firstDayOfMonth = new Date(year, month, 1);
+  const firstDayOfFirstWeek = startOfISOWeek(firstDayOfMonth);
+  const weeks = [];
+  for (let i = 0; i < 6; i++) {
+    const week = getWeekForDate(addWeeks(firstDayOfFirstWeek, i));
+    if (i > 0 && week.startMonth !== month && !forceSixWeeks) {
+      return weeks;
+    }
+    weeks.push(week);
+  }
+  return weeks;
+};
+const getWeekForDate = (firstDayOfWeek) => {
+  const isLastWeekOfMonth = getMonth(addDays(firstDayOfWeek, 7)) !== getMonth(firstDayOfWeek);
+  return {
+    weekNumber: getISOWeek(firstDayOfWeek),
+    startMonth: getMonth(firstDayOfWeek),
+    startYear: getYear(firstDayOfWeek),
+    endMonth: getMonth(addDays(firstDayOfWeek, 6)),
+    endYear: getYear(addDays(firstDayOfWeek, 6)),
+    days: getDaysForWeekForDate(firstDayOfWeek),
+    isLastWeekOfMonth
+  };
+};
+const createDay = (date) => {
+  const dayOfWeek = getISODay(date);
+  return {
+    date,
+    name: format(date, "EEE"),
+    dateString: format(addHours(date, 12), DateFormats.fullDate),
+    weekNumber: getISOWeek(date),
+    year: getYear(date),
+    month: getMonth(date),
+    dayOfMonth: getDate(date),
+    dayOfWeek,
+    isFirstDayOfWeek: dayOfWeek === 1,
+    isLastDayOfWeek: dayOfWeek === 7,
+    isFirstDayOfMonth: isSameDay(startOfMonth(date), date),
+    isLastDayOfMonth: isSameDay(endOfMonth(date), date)
+  };
+};
+const getDaysForWeekForDate = (firstDayOfWeek) => {
+  return eachDayOfInterval({
+    start: firstDayOfWeek,
+    end: addDays(firstDayOfWeek, 6)
+  }).map(createDay);
+};
+const getStartDateOfISOWeek = (weekNumber, year) => {
+  const simple = new Date(year, 0, 1 + (weekNumber - 1) * 7);
+  const dayOfWeek = simple.getDay();
+  const isoWeekStart = simple;
+  if (dayOfWeek <= 4) {
+    isoWeekStart.setDate(simple.getDate() - simple.getDay() + 1);
+  } else {
+    isoWeekStart.setDate(simple.getDate() + 8 - simple.getDay());
+  }
+  return isoWeekStart;
+};
+const calculateOverflowingMonth = (year, month) => {
+  if (month > 11) {
+    return { year: year + Math.floor(month / 12), month: month % 12 };
+  }
+  if (month < 0) {
+    return { year: year + Math.floor(month / 12), month: 12 + month % 12 };
+  }
+  return { year, month };
+};
+const dayHasHighlight = (dayState, defaultHighlights, highlight) => {
+  if (defaultHighlights && defaultHighlights.indexOf(highlight) >= 0) {
+    return true;
+  }
+  if (dayState && dayState.highlights && dayState.highlights.indexOf(highlight) >= 0) {
+    return true;
+  }
+  return false;
+};
+const dayHighlightSelect = (dayState, defaultHighlights, highlightsOrBoolean, returnValues, fallbackValue) => {
+  if (highlightsOrBoolean.length !== returnValues.length) {
+    throw new Error("Select highlight failed, number of values do not equal number of highlights.");
+  }
+  if (highlightsOrBoolean.length === 0) {
+    return fallbackValue;
+  }
+  for (let i = 0; i < highlightsOrBoolean.length; i++) {
+    if (typeof highlightsOrBoolean[i] === "boolean" && highlightsOrBoolean[i]) {
+      return returnValues[i];
+    }
+    if (typeof highlightsOrBoolean[i] === "string" && dayHasHighlight(dayState, defaultHighlights, highlightsOrBoolean[i])) {
+      return returnValues[i];
+    }
+  }
+  return fallbackValue;
+};
+const defaultWrapperStyleProvider = ({
+  selectedBackground,
+  todayBackground,
+  rangeBackground,
+  borderColor = "transparent"
+}) => (defaultHighlights, dayState, day, _, month) => {
+  let style = {};
+  const backgroundColor = dayHighlightSelect(dayState, defaultHighlights, ["selected", "range", "today", day.month === month.monthInYear], [selectedBackground, rangeBackground, todayBackground, "#fff"], "transparent");
+  return {
+    ...style,
+    backgroundColor,
+    borderTopLeftRadius: dayHighlightSelect(dayState, defaultHighlights, ["selectedStart", "singleSelected"], ["var(--swui-calendar-day-border-radius)", "var(--swui-calendar-day-border-radius)"], borderColor),
+    borderBottomLeftRadius: dayHighlightSelect(dayState, defaultHighlights, ["selectedStart", "singleSelected"], ["var(--swui-calendar-day-border-radius)", "var(--swui-calendar-day-border-radius)"], borderColor),
+    borderTopRightRadius: dayHighlightSelect(dayState, defaultHighlights, ["selectedEnd", "singleSelected"], ["var(--swui-calendar-day-border-radius)", "var(--swui-calendar-day-border-radius)"], borderColor),
+    borderBottomRightRadius: dayHighlightSelect(dayState, defaultHighlights, ["selectedEnd", "singleSelected"], ["var(--swui-calendar-day-border-radius)", "var(--swui-calendar-day-border-radius)"], borderColor),
+    boxSizing: "border-box"
+  };
+};
+const defaultTextPropsProvider = ({
+  selectedColor,
+  disabledColor,
+  inOtherMonthColor,
+  rangeTextColor
+}) => {
+  return (defaultHighlights, dayState, day, _, month) => {
+    const isOtherMonth = day.month !== month.monthInYear;
+    const color = dayHighlightSelect(dayState, defaultHighlights, [isOtherMonth, "selected", "range", "enabled", "disabled"], [inOtherMonthColor, selectedColor, rangeTextColor, void 0, disabledColor]);
+    return {
+      color
+    };
+  };
+};
+const defaultCalendarTheme = {
+  width: "var(--swui-calendar-day-width)",
+  height: "var(--swui-calendar-day-height)",
+  WeekNumber: {
+    backgroundColor: "var(--swui-calendar-week-number-bg-color)",
+    textColor: "var(--swui-calendar-week-number-text-color)",
+    clickableTextColor: "var(--swui-calendar-week-number-clickable-text-color)",
+    show: true
+  },
+  WeekDay: {
+    textColor: "var(--swui-calendar-week-day-text-color)",
+    clickableTextColor: "var(--swui-calendar-week-day-clickable-text-color)"
+  },
+  CalendarDay: {
+    tdStyle: defaultWrapperStyleProvider({
+      selectedBackground: "var(--swui-calendar-wrapper-selected-background)",
+      rangeBackground: "var(--swui-calendar-wrapper-range-background)",
+      todayBackground: "var(--swui-calendar-wrapper-today-background)"
+    }),
+    textProps: defaultTextPropsProvider({
+      selectedColor: "var(--swui-calendar-text-selected-color)",
+      disabledColor: "var(--swui-calendar-text-disabled-color)",
+      inOtherMonthColor: "var(--swui-calendar-text-in-other-month-color)"
+    })
+  },
+  CalendarMonth: {
+    headerTextColor: "var(--swui-calendar-week-day-text-color)"
+  }
+};
+const extranetCalendarTheme = {
+  ...defaultCalendarTheme,
+  width: "37px",
+  height: "37px"
+};
+const isDateInMinMaxRange = (date, min2, max2) => {
+  if (min2 && isBefore(date, min2)) {
+    return isSameDay(date, min2);
+  }
+  if (max2 && isAfter(date, max2)) {
+    return isSameDay(date, max2);
+  }
+  return true;
+};
+const DisabledDayWrapper = function DisabledDayWrapper2({
+  dayComponent: DayComponent,
+  minDate,
+  maxDate,
+  dayState,
+  day,
+  ...props
+}) {
+  const activeDayState = useMemo(() => !isDateInMinMaxRange(day.date, minDate, maxDate) ? addDayStateHighlightsOnSingleDay(dayState, ["disabled"]) : dayState, [day.date, dayState, maxDate, minDate]);
+  return /* @__PURE__ */ jsx(DayComponent, {
+    day,
+    ...props,
+    dayState: activeDayState
+  });
+};
+const WeekNumberCell = ({
+  onClickWeek,
+  theme,
+  week,
+  background,
+  backgroundColor,
+  prefix
+}) => {
+  const content = /* @__PURE__ */ jsxs(Box, {
+    width: theme.width,
+    height: theme.height,
+    justifyContent: "center",
+    alignItems: "center",
+    children: [background && /* @__PURE__ */ jsx(Box, {
+      position: "absolute",
+      children: background
+    }), /* @__PURE__ */ jsx(Box, {
+      position: "absolute",
+      children: /* @__PURE__ */ jsxs(Text, {
+        color: onClickWeek ? theme.WeekNumber.clickableTextColor : theme.WeekNumber.textColor,
+        children: [prefix, week.weekNumber]
+      })
+    })]
+  });
+  return /* @__PURE__ */ jsx(Box, {
+    background: backgroundColor || theme.WeekNumber.backgroundColor,
+    position: "relative",
+    children: onClickWeek ? /* @__PURE__ */ jsx(Clickable, {
+      borderRadius: "var(--swui-calendar-day-border-radius)",
+      onClick: (ev) => onClickWeek(week, ev),
+      disableFocusHighlight: !onClickWeek,
+      children: content
+    }) : content
+  });
+};
+function CalendarWeek({
+  week,
+  month,
+  dayComponent,
+  statePerWeekDay,
+  userDataPerWeekDay,
+  minDate,
+  maxDate,
+  onClickWeek,
+  onClickDay,
+  theme,
+  renderWeekNumber,
+  extraDayContent,
+  defaultHighlights
+}) {
+  return /* @__PURE__ */ jsxs("tr", {
+    children: [theme.WeekNumber.show && /* @__PURE__ */ jsx("td", {
+      children: renderWeekNumber ? renderWeekNumber(week, theme, onClickWeek) : /* @__PURE__ */ jsx(WeekNumberCell, {
+        week,
+        onClickWeek,
+        theme
+      })
+    }), week.days.map((day) => /* @__PURE__ */ jsx(DisabledDayWrapper, {
+      dayComponent,
+      day,
+      week,
+      month,
+      dayState: statePerWeekDay && statePerWeekDay[day.dayOfMonth],
+      userData: userDataPerWeekDay && userDataPerWeekDay[day.dayOfMonth],
+      onClickDay,
+      theme,
+      extraDayContent,
+      defaultHighlights,
+      minDate,
+      maxDate
+    }, day.dateString))]
+  }, week.weekNumber);
 }
-
-var DateFormats = {
-    yearAndMonth: "yyyy-MM",
-    fullDate: "yyyy-MM-dd",
-    fullMonthName: "LLLL",
-    fullDateAndTime: "yyyy-MM-dd HH:mm",
-    fullDateAndTimeSystem: "yyyy-MM-ddTHH:MM",
-    weekDayName: "EEEE",
-    weekDayNameShort: "EEE",
-    dateAndMonth: "d MMM",
-    monthAndDate: "MMM do", // Jan 2nd
-};
-
-var buildDayStateForDateRange = function (statePerMonth, start, end) {
-    if (statePerMonth === void 0) { statePerMonth = {}; }
-    if (start && end && isAfter(end, start)) {
-        return eachDayOfInterval({ start: start, end: end }).reduce(function (result, date) {
-            var isFirstInRange = isSameDay(date, start);
-            var isLastInRange = isSameDay(date, end);
-            var highlights = isFirstInRange
-                ? ["selected", "selectedStart", "range"]
-                : isLastInRange
-                    ? ["selected", "selectedEnd", "range"]
-                    : ["range"];
-            return addDayStateHighlights(result, date, highlights);
-        }, statePerMonth);
-    }
-    var state = statePerMonth;
-    if (start) {
-        state = addDayStateHighlights(state, start, ["selected", "singleSelected"]);
-    }
-    if (end) {
-        state = addDayStateHighlights(state, end, ["selected", "singleSelected"]);
-    }
-    return state;
-};
-var buildDayStateForSingleMonth = function (statePerMonth, start, end, dateInFocus) {
-    if (statePerMonth === void 0) { statePerMonth = {}; }
-    return buildDayStateForRange(statePerMonth, start, end, startOfMonth(dateInFocus), endOfMonth(dateInFocus));
-};
-var buildDayStateForRange = function (statePerMonth, start, end, startLimit, endLimit) {
-    if (statePerMonth === void 0) { statePerMonth = {}; }
-    if (start && end) {
-        return buildDayStateForDateRange(statePerMonth, max([start, subDays(startLimit, 1)]), min([end, addDays(endLimit, 1)]));
-    }
-    else {
-        return buildDayStateForDateRange(statePerMonth, start, end);
-    }
-};
-var setDayStateValue = function (state, date, values) {
-    var _a, _b, _c;
-    var monthString = format(date, DateFormats.yearAndMonth);
-    var weekNumber = getISOWeek(date);
-    var dayInMonth = getDate(date);
-    return __assign(__assign({}, state), (_a = {}, _a[monthString] = __assign(__assign({}, (state && state[monthString])), (_b = {}, _b[weekNumber] = __assign(__assign({}, (state && state[monthString] && state[monthString][weekNumber])), (_c = {}, _c[dayInMonth] = __assign(__assign({}, (state &&
-        state[monthString] &&
-        state[monthString][weekNumber] &&
-        state[monthString][weekNumber][dayInMonth])), values), _c)), _b)), _a));
-};
-var setDayStateValueFunction = function (state, date, setter) {
-    var _a, _b, _c;
-    var monthString = format(date, DateFormats.yearAndMonth);
-    var weekNumber = getISOWeek(date);
-    var dayInMonth = getDate(date);
-    return __assign(__assign({}, state), (_a = {}, _a[monthString] = __assign(__assign({}, (state && state[monthString])), (_b = {}, _b[weekNumber] = __assign(__assign({}, (state && state[monthString] && state[monthString][weekNumber])), (_c = {}, _c[dayInMonth] = __assign(__assign({}, (state &&
-        state[monthString] &&
-        state[monthString][weekNumber] &&
-        state[monthString][weekNumber][dayInMonth])), setter(state &&
-        state[monthString] &&
-        state[monthString][weekNumber] &&
-        state[monthString][weekNumber][dayInMonth])), _c)), _b)), _a));
-};
-var addDayStateHighlights = function (calendarState, date, highlights) {
-    var _a, _b, _c;
-    var month = date.getMonth() + 1;
-    var monthString = "".concat(date.getFullYear(), "-").concat(month < 10 ? "0" : "").concat(month);
-    var weekNumber = getISOWeek(date);
-    var dayInMonth = getDate(date);
-    var dayState = calendarState &&
-        calendarState[monthString] &&
-        calendarState[monthString][weekNumber] &&
-        calendarState[monthString][weekNumber][dayInMonth];
-    return __assign(__assign({}, calendarState), (_a = {}, _a[monthString] = __assign(__assign({}, (calendarState && calendarState[monthString])), (_b = {}, _b[weekNumber] = __assign(__assign({}, (calendarState &&
-        calendarState[monthString] &&
-        calendarState[monthString][weekNumber])), (_c = {}, _c[dayInMonth] = addDayStateHighlightsOnSingleDay(dayState, highlights), _c)), _b)), _a));
-};
-var addDayStateHighlightsOnSingleDay = function (dayState, highlights) {
-    var _a;
-    return __assign(__assign({}, dayState), { highlights: __spreadArray(__spreadArray([], ((_a = dayState === null || dayState === void 0 ? void 0 : dayState.highlights) !== null && _a !== void 0 ? _a : []), true), highlights, true) });
-};
-var addWeekStateHighlights = function (calendarState, week, highlights) {
-    var _a, _b;
-    var date = week.days[0].date;
-    var month = date.getMonth() + 1;
-    var monthString = "".concat(date.getFullYear(), "-").concat(month < 10 ? "0" : "").concat(month);
-    var weekNumber = week.weekNumber;
-    var state = calendarState;
-    week.days.forEach(function (day) {
-        state = addDayStateHighlights(state, day.date, highlights);
-    });
-    var weekState = state && state[monthString] ? state[monthString][weekNumber] : undefined;
-    var newHighlights = weekState && weekState.highlights
-        ? __spreadArray(__spreadArray([], weekState.highlights, true), highlights, true) : highlights;
-    var newWeekState = __assign(__assign({}, weekState), { highlights: newHighlights });
-    return __assign(__assign({}, state), (_a = {}, _a[monthString] = __assign(__assign({}, (calendarState && calendarState[monthString])), (_b = {}, _b[weekNumber] = newWeekState, _b)), _a));
-};
-var addWeekRangeHighlights = function (calendarState, week) {
-    var _a;
-    if (!week.days.length) {
-        return __assign({}, calendarState);
-    }
-    var startDate = week.days[0].date;
-    var endDate = (_a = last(week.days)) === null || _a === void 0 ? void 0 : _a.date;
-    return __assign({}, buildDayStateForDateRange(calendarState, startDate, endDate));
-};
-
-var useHighlightToday = function (enabled, statePerMonth) {
-    return useMemo(function () {
-        return enabled
-            ? addDayStateHighlights(statePerMonth, new Date(), ["today"])
-            : statePerMonth;
-    }, [enabled, statePerMonth]);
-};
-
-var Month;
-(function (Month) {
-    Month[Month["JANUARY"] = 0] = "JANUARY";
-    Month[Month["FEBRUARY"] = 1] = "FEBRUARY";
-    Month[Month["MARCH"] = 2] = "MARCH";
-    Month[Month["APRIL"] = 3] = "APRIL";
-    Month[Month["MAY"] = 4] = "MAY";
-    Month[Month["JUNE"] = 5] = "JUNE";
-    Month[Month["JULY"] = 6] = "JULY";
-    Month[Month["AUGUST"] = 7] = "AUGUST";
-    Month[Month["SEPTEMBER"] = 8] = "SEPTEMBER";
-    Month[Month["OCTOBER"] = 9] = "OCTOBER";
-    Month[Month["NOVEMBER"] = 10] = "NOVEMBER";
-    Month[Month["DECEMBER"] = 11] = "DECEMBER";
-})(Month || (Month = {}));
-var WeekDay;
-(function (WeekDay) {
-    WeekDay[WeekDay["SUNDAY"] = 0] = "SUNDAY";
-    WeekDay[WeekDay["MONDAY"] = 1] = "MONDAY";
-    WeekDay[WeekDay["TUESDAY"] = 2] = "TUESDAY";
-    WeekDay[WeekDay["WEDNESDAY"] = 3] = "WEDNESDAY";
-    WeekDay[WeekDay["THURSDAY"] = 4] = "THURSDAY";
-    WeekDay[WeekDay["FRIDAY"] = 5] = "FRIDAY";
-    WeekDay[WeekDay["SATURDAY"] = 6] = "SATURDAY";
-})(WeekDay || (WeekDay = {}));
-var getMonthsInYear = function (year, startMonth, numMonths) {
-    var months = [];
-    for (var i = 0; i < numMonths; i++) {
-        months.push(getMonthInYear(year, startMonth + i));
-    }
-    return months;
-};
-var getMonthInYear = function (year, month) {
-    var yearToUse = year + Math.floor(month / 12);
-    var monthToUse = month % 12;
-    var firstDayOfMonth = new Date(yearToUse, monthToUse, 1);
-    return {
-        monthString: format(firstDayOfMonth, DateFormats.yearAndMonth),
-        name: format(firstDayOfMonth, DateFormats.fullMonthName),
-        year: yearToUse,
-        monthInYear: monthToUse,
-        weeks: getWeeksForMonth(yearToUse, monthToUse),
-    };
-};
-var getWeeksForMonth = function (year, month, forceSixWeeks) {
-    if (forceSixWeeks === void 0) { forceSixWeeks = true; }
-    var firstDayOfMonth = new Date(year, month, 1);
-    var firstDayOfFirstWeek = startOfISOWeek(firstDayOfMonth);
-    var weeks = [];
-    for (var i = 0; i < 6; i++) {
-        var week = getWeekForDate(addWeeks(firstDayOfFirstWeek, i));
-        if (i > 0 && week.startMonth !== month && !forceSixWeeks) {
-            return weeks;
-        }
-        weeks.push(week);
-    }
-    return weeks;
-};
-var getWeekForDate = function (firstDayOfWeek) {
-    var isLastWeekOfMonth = getMonth(addDays(firstDayOfWeek, 7)) !== getMonth(firstDayOfWeek);
-    return {
-        weekNumber: getISOWeek(firstDayOfWeek),
-        startMonth: getMonth(firstDayOfWeek),
-        startYear: getYear(firstDayOfWeek),
-        endMonth: getMonth(addDays(firstDayOfWeek, 6)),
-        endYear: getYear(addDays(firstDayOfWeek, 6)),
-        days: getDaysForWeekForDate(firstDayOfWeek),
-        isLastWeekOfMonth: isLastWeekOfMonth,
-    };
-};
-var createDay = function (date) {
-    var dayOfWeek = getISODay(date);
-    return {
-        date: date,
-        name: format(date, "EEE"),
-        dateString: format(addHours(date, 12), DateFormats.fullDate),
-        weekNumber: getISOWeek(date),
-        year: getYear(date),
-        month: getMonth(date),
-        dayOfMonth: getDate(date),
-        dayOfWeek: dayOfWeek,
-        isFirstDayOfWeek: dayOfWeek === 1,
-        isLastDayOfWeek: dayOfWeek === 7,
-        isFirstDayOfMonth: isSameDay(startOfMonth(date), date),
-        isLastDayOfMonth: isSameDay(endOfMonth(date), date),
-    };
-};
-var getDaysForWeekForDate = function (firstDayOfWeek) {
-    return eachDayOfInterval({
-        start: firstDayOfWeek,
-        end: addDays(firstDayOfWeek, 6),
-    }).map(createDay);
-};
-var getStartDateOfISOWeek = function (weekNumber, year) {
-    var simple = new Date(year, 0, 1 + (weekNumber - 1) * 7);
-    var dayOfWeek = simple.getDay();
-    var isoWeekStart = simple;
-    if (dayOfWeek <= 4) {
-        isoWeekStart.setDate(simple.getDate() - simple.getDay() + 1);
-    }
-    else {
-        isoWeekStart.setDate(simple.getDate() + 8 - simple.getDay());
-    }
-    return isoWeekStart;
-};
-var calculateOverflowingMonth = function (year, month) {
-    if (month > Month.DECEMBER) {
-        return { year: year + Math.floor(month / 12), month: month % 12 };
-    }
-    if (month < Month.JANUARY) {
-        return { year: year + Math.floor(month / 12), month: 12 + (month % 12) };
-    }
-    return { year: year, month: month };
-};
-
-var dayHasHighlight = function (dayState, defaultHighlights, highlight) {
-    if (defaultHighlights && defaultHighlights.indexOf(highlight) >= 0) {
-        return true;
-    }
-    if (dayState &&
-        dayState.highlights &&
-        dayState.highlights.indexOf(highlight) >= 0) {
-        return true;
-    }
-    return false;
-};
-var dayHighlightSelect = function (dayState, defaultHighlights, highlightsOrBoolean, returnValues, fallbackValue) {
-    if (highlightsOrBoolean.length !== returnValues.length) {
-        throw new Error("Select highlight failed, number of values do not equal number of highlights.");
-    }
-    if (highlightsOrBoolean.length === 0) {
-        return fallbackValue;
-    }
-    for (var i = 0; i < highlightsOrBoolean.length; i++) {
-        if (typeof highlightsOrBoolean[i] === "boolean" && highlightsOrBoolean[i]) {
-            return returnValues[i];
-        }
-        if (typeof highlightsOrBoolean[i] === "string" &&
-            dayHasHighlight(dayState, defaultHighlights, highlightsOrBoolean[i])) {
-            return returnValues[i];
-        }
-    }
-    return fallbackValue;
-};
-
-var defaultWrapperStyleProvider = function (_a) {
-    var selectedBackground = _a.selectedBackground, todayBackground = _a.todayBackground, rangeBackground = _a.rangeBackground, _b = _a.borderColor, borderColor = _b === void 0 ? "transparent" : _b;
-    return function (defaultHighlights, dayState, day, _, month) {
-        var style = {};
-        var backgroundColor = dayHighlightSelect(dayState, defaultHighlights, ["selected", "range", "today", day.month === month.monthInYear], [selectedBackground, rangeBackground, todayBackground, "#fff"], "transparent");
-        return __assign(__assign({}, style), { backgroundColor: backgroundColor, borderTopLeftRadius: dayHighlightSelect(dayState, defaultHighlights, ["selectedStart", "singleSelected"], [
-                "var(--swui-calendar-day-border-radius)",
-                "var(--swui-calendar-day-border-radius)",
-            ], borderColor), borderBottomLeftRadius: dayHighlightSelect(dayState, defaultHighlights, ["selectedStart", "singleSelected"], [
-                "var(--swui-calendar-day-border-radius)",
-                "var(--swui-calendar-day-border-radius)",
-            ], borderColor), borderTopRightRadius: dayHighlightSelect(dayState, defaultHighlights, ["selectedEnd", "singleSelected"], [
-                "var(--swui-calendar-day-border-radius)",
-                "var(--swui-calendar-day-border-radius)",
-            ], borderColor), borderBottomRightRadius: dayHighlightSelect(dayState, defaultHighlights, ["selectedEnd", "singleSelected"], [
-                "var(--swui-calendar-day-border-radius)",
-                "var(--swui-calendar-day-border-radius)",
-            ], borderColor), boxSizing: "border-box" });
-    };
-};
-var defaultTextPropsProvider = function (_a) {
-    var selectedColor = _a.selectedColor, disabledColor = _a.disabledColor, inOtherMonthColor = _a.inOtherMonthColor, rangeTextColor = _a.rangeTextColor;
-    return function (defaultHighlights, dayState, day, _, month) {
-        var isOtherMonth = day.month !== month.monthInYear;
-        var color = dayHighlightSelect(dayState, defaultHighlights, [isOtherMonth, "selected", "range", "enabled", "disabled"], [
-            inOtherMonthColor,
-            selectedColor,
-            rangeTextColor,
-            undefined,
-            disabledColor,
-        ]);
-        return {
-            color: color,
-        };
-    };
-};
-var defaultCalendarTheme = {
-    width: "var(--swui-calendar-day-width)",
-    height: "var(--swui-calendar-day-height)",
-    WeekNumber: {
-        backgroundColor: "var(--swui-calendar-week-number-bg-color)",
-        textColor: "var(--swui-calendar-week-number-text-color)",
-        clickableTextColor: "var(--swui-calendar-week-number-clickable-text-color)",
-        show: true,
-    },
-    WeekDay: {
-        textColor: "var(--swui-calendar-week-day-text-color)",
-        clickableTextColor: "var(--swui-calendar-week-day-clickable-text-color)",
-    },
-    CalendarDay: {
-        tdStyle: defaultWrapperStyleProvider({
-            selectedBackground: "var(--swui-calendar-wrapper-selected-background)",
-            rangeBackground: "var(--swui-calendar-wrapper-range-background)",
-            todayBackground: "var(--swui-calendar-wrapper-today-background)",
-        }),
-        textProps: defaultTextPropsProvider({
-            selectedColor: "var(--swui-calendar-text-selected-color)",
-            disabledColor: "var(--swui-calendar-text-disabled-color)",
-            inOtherMonthColor: "var(--swui-calendar-text-in-other-month-color)",
-        }),
-    },
-    CalendarMonth: {
-        headerTextColor: "var(--swui-calendar-week-day-text-color)",
-    },
-};
-var extranetCalendarTheme = __assign(__assign({}, defaultCalendarTheme), { width: "37px", height: "37px" });
-
-var isDateInMinMaxRange = function (date, min, max) {
-    if (min && isBefore(date, min)) {
-        return isSameDay(date, min);
-    }
-    if (max && isAfter(date, max)) {
-        return isSameDay(date, max);
-    }
-    return true;
-};
-
-var DisabledDayWrapper = function DisabledDayWrapper(_a) {
-    var DayComponent = _a.dayComponent, minDate = _a.minDate, maxDate = _a.maxDate, dayState = _a.dayState, day = _a.day, props = __rest(_a, ["dayComponent", "minDate", "maxDate", "dayState", "day"]);
-    var activeDayState = useMemo(function () {
-        return !isDateInMinMaxRange(day.date, minDate, maxDate)
-            ? addDayStateHighlightsOnSingleDay(dayState, ["disabled"])
-            : dayState;
-    }, [day.date, dayState, maxDate, minDate]);
-    return React.createElement(DayComponent, __assign({ day: day }, props, { dayState: activeDayState }));
-};
-
-var WeekNumberCell = function (_a) {
-    var onClickWeek = _a.onClickWeek, theme = _a.theme, week = _a.week, background = _a.background, backgroundColor = _a.backgroundColor, prefix = _a.prefix;
-    var content = (React.createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
-        background && React.createElement(Box, { position: "absolute" }, background),
-        React.createElement(Box, { position: "absolute" },
-            React.createElement(Text, { color: onClickWeek
-                    ? theme.WeekNumber.clickableTextColor
-                    : theme.WeekNumber.textColor },
-                prefix,
-                week.weekNumber))));
-    return (React.createElement(Box, { background: backgroundColor || theme.WeekNumber.backgroundColor, position: "relative" }, onClickWeek ? (React.createElement(Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeek(week, ev); }, disableFocusHighlight: !onClickWeek }, content)) : (content)));
-};
-
-function CalendarWeek(_a) {
-    var week = _a.week, month = _a.month, dayComponent = _a.dayComponent, statePerWeekDay = _a.statePerWeekDay, userDataPerWeekDay = _a.userDataPerWeekDay, minDate = _a.minDate, maxDate = _a.maxDate, onClickWeek = _a.onClickWeek, onClickDay = _a.onClickDay, theme = _a.theme, renderWeekNumber = _a.renderWeekNumber, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
-    return (React.createElement("tr", { key: week.weekNumber },
-        theme.WeekNumber.show && (React.createElement("td", null, renderWeekNumber ? (renderWeekNumber(week, theme, onClickWeek)) : (React.createElement(WeekNumberCell, { week: week, onClickWeek: onClickWeek, theme: theme })))),
-        week.days.map(function (day) { return (React.createElement(DisabledDayWrapper, { dayComponent: dayComponent, key: day.dateString, day: day, week: week, month: month, dayState: statePerWeekDay && statePerWeekDay[day.dayOfMonth], userData: userDataPerWeekDay && userDataPerWeekDay[day.dayOfMonth], onClickDay: onClickDay, theme: theme, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights, minDate: minDate, maxDate: maxDate })); })));
+const WeekDayCell = ({
+  onClickWeekDay,
+  day,
+  theme
+}) => {
+  const content = /* @__PURE__ */ jsx(Box, {
+    width: theme.width,
+    height: theme.height,
+    justifyContent: "center",
+    alignItems: "center",
+    children: /* @__PURE__ */ jsx(Text, {
+      size: "small",
+      color: onClickWeekDay ? theme.WeekDay.clickableTextColor : theme.WeekDay.textColor,
+      children: day.name
+    })
+  });
+  if (onClickWeekDay) {
+    return /* @__PURE__ */ jsx(Clickable, {
+      borderRadius: "var(--swui-calendar-day-border-radius)",
+      onClick: (ev) => onClickWeekDay(day.dayOfWeek, ev),
+      disableFocusHighlight: !onClickWeekDay,
+      children: content
+    });
+  }
+  return content;
+};
+const CalendarDay = function CalendarDay2({
+  day,
+  week,
+  month,
+  dayState,
+  userData,
+  onClickDay,
+  theme,
+  extraDayContent: ExtraDayContent,
+  defaultHighlights
+}) {
+  const content = /* @__PURE__ */ jsx(Box, {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+    children: /* @__PURE__ */ jsx(Text, {
+      ...theme.CalendarDay.textProps && theme.CalendarDay.textProps(defaultHighlights, dayState, day, week, month, userData),
+      children: day.dayOfMonth
+    })
+  });
+  const WrapperTd = styled.td({
+    ...theme.CalendarDay.tdStyle && theme.CalendarDay.tdStyle(defaultHighlights, dayState, day, week, month, userData)
+  });
+  const InnerWrapperDiv = styled.div({
+    ...theme.CalendarDay.innerWrapperStyle && theme.CalendarDay.innerWrapperStyle(defaultHighlights, dayState, day, week, month, userData),
+    width: "100%",
+    height: "100%"
+  });
+  const CellWrapperDiv = styled.div({
+    ...theme.CalendarDay.cellWrapperStyle && theme.CalendarDay.cellWrapperStyle(defaultHighlights, dayState, day, week, month, userData),
+    width: "100%",
+    height: "100%",
+    position: "relative"
+  });
+  return /* @__PURE__ */ jsx(WrapperTd, {
+    children: /* @__PURE__ */ jsx(InnerWrapperDiv, {
+      children: /* @__PURE__ */ jsx(CellWrapperDiv, {
+        children: day.month === month.monthInYear && /* @__PURE__ */ jsxs(Fragment, {
+          children: [ExtraDayContent && /* @__PURE__ */ jsx(ExtraDayContent, {
+            week,
+            month,
+            day,
+            dayState,
+            theme,
+            userData
+          }), onClickDay && isClickable(defaultHighlights, dayState) ? /* @__PURE__ */ jsx(Clickable, {
+            onClick: (ev) => onClickDay(day, userData, ev),
+            style: {
+              width: "100%",
+              height: "100%"
+            },
+            borderRadius: "var(--swui-calendar-day-border-radius)",
+            children: content
+          }) : /* @__PURE__ */ jsx(Fragment, {
+            children: content
+          })]
+        })
+      })
+    })
+  });
+};
+const isClickable = (defaultHighlights, dayState) => !!dayHighlightSelect(dayState, defaultHighlights, ["enabled", "disabled"], [true, false], true);
+function CalendarMonth({
+  month,
+  dayComponent = CalendarDay,
+  statePerWeek,
+  userDataPerWeek,
+  minDate,
+  maxDate,
+  onClickDay,
+  onClickWeek,
+  onClickWeekDay,
+  onClickMonth,
+  onClickYear,
+  renderWeekNumber,
+  renderWeekDay,
+  headerLeftContent,
+  headerRightContent,
+  theme = defaultCalendarTheme,
+  extraDayContent,
+  defaultHighlights
+}) {
+  const showWeekNumber = theme.WeekNumber.show;
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsxs(Box, {
+      alignItems: "stretch",
+      children: [/* @__PURE__ */ jsxs(Row, {
+        justifyContent: "space-between",
+        alignItems: "center",
+        height: "32px",
+        children: [/* @__PURE__ */ jsx(Box, {
+          alignItems: "center",
+          children: headerLeftContent
+        }), /* @__PURE__ */ jsxs(Row, {
+          alignItems: "center",
+          children: [/* @__PURE__ */ jsx(Row, {
+            width: "104px",
+            justifyContent: "center",
+            children: onClickMonth ? /* @__PURE__ */ jsx(FlatButton, {
+              onClick: () => onClickMonth(month),
+              label: month.name
+            }) : /* @__PURE__ */ jsx(Text, {
+              children: month.name
+            })
+          }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(Row, {
+            width: "64px",
+            justifyContent: "center",
+            children: onClickYear ? /* @__PURE__ */ jsx(FlatButton, {
+              onClick: () => onClickYear(month.year),
+              label: String(month.year)
+            }) : /* @__PURE__ */ jsx(Text, {
+              children: month.year
+            })
+          })]
+        }), /* @__PURE__ */ jsx(Box, {
+          alignItems: "center",
+          children: headerRightContent
+        })]
+      }), /* @__PURE__ */ jsx("table", {
+        children: /* @__PURE__ */ jsxs("tbody", {
+          children: [/* @__PURE__ */ jsxs("tr", {
+            children: [showWeekNumber && /* @__PURE__ */ jsx("td", {
+              children: /* @__PURE__ */ jsx(Box, {
+                width: theme.width,
+                height: theme.height,
+                justifyContent: "center",
+                alignItems: "center",
+                children: /* @__PURE__ */ jsx(Text, {
+                  size: "small",
+                  color: theme.CalendarMonth.headerTextColor,
+                  children: "W"
+                })
+              })
+            }), month.weeks[0].days.map((day) => /* @__PURE__ */ jsx("td", {
+              children: renderWeekDay ? renderWeekDay(day.name, theme, onClickWeekDay) : /* @__PURE__ */ jsx(WeekDayCell, {
+                day,
+                onClickWeekDay,
+                theme
+              })
+            }, day.name))]
+          }), month.weeks.map((week) => /* @__PURE__ */ jsx(CalendarWeek, {
+            month,
+            week,
+            dayComponent,
+            statePerWeekDay: statePerWeek && statePerWeek[week.weekNumber],
+            userDataPerWeekDay: userDataPerWeek && userDataPerWeek[week.weekNumber],
+            onClickDay,
+            onClickWeek,
+            theme,
+            renderWeekNumber,
+            extraDayContent,
+            defaultHighlights,
+            minDate,
+            maxDate
+          }, week.weekNumber))]
+        })
+      })]
+    })
+  });
 }
-
-var WeekDayCell = function (_a) {
-    var onClickWeekDay = _a.onClickWeekDay, day = _a.day, theme = _a.theme;
-    var content = (React.createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
-        React.createElement(Text, { size: "small", color: onClickWeekDay
-                ? theme.WeekDay.clickableTextColor
-                : theme.WeekDay.textColor }, day.name)));
-    if (onClickWeekDay) {
-        return (React.createElement(Clickable, { borderRadius: "var(--swui-calendar-day-border-radius)", onClick: function (ev) { return onClickWeekDay(day.dayOfWeek, ev); }, disableFocusHighlight: !onClickWeekDay }, content));
-    }
-    return content;
-};
-
-var CalendarDay = function CalendarDay(_a) {
-    var day = _a.day, week = _a.week, month = _a.month, dayState = _a.dayState, userData = _a.userData, onClickDay = _a.onClickDay, theme = _a.theme, ExtraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
-    var content = (React.createElement(Box, { width: "100%", height: "100%", justifyContent: "center", alignItems: "center" },
-        React.createElement(Text, __assign({}, (theme.CalendarDay.textProps &&
-            theme.CalendarDay.textProps(defaultHighlights, dayState, day, week, month, userData))), day.dayOfMonth)));
-    var WrapperTd = styled.td(__assign({}, (theme.CalendarDay.tdStyle &&
-        theme.CalendarDay.tdStyle(defaultHighlights, dayState, day, week, month, userData))));
-    var InnerWrapperDiv = styled.div(__assign(__assign({}, (theme.CalendarDay.innerWrapperStyle &&
-        theme.CalendarDay.innerWrapperStyle(defaultHighlights, dayState, day, week, month, userData))), { width: "100%", height: "100%" }));
-    var CellWrapperDiv = styled.div(__assign(__assign({}, (theme.CalendarDay.cellWrapperStyle &&
-        theme.CalendarDay.cellWrapperStyle(defaultHighlights, dayState, day, week, month, userData))), { width: "100%", height: "100%", position: "relative" }));
-    return (React.createElement(WrapperTd, null,
-        React.createElement(InnerWrapperDiv, null,
-            React.createElement(CellWrapperDiv, null, day.month === month.monthInYear && (React.createElement(React.Fragment, null,
-                ExtraDayContent && (React.createElement(ExtraDayContent, { week: week, month: month, day: day, dayState: dayState, theme: theme, userData: userData })),
-                onClickDay && isClickable(defaultHighlights, dayState) ? (React.createElement(Clickable, { onClick: function (ev) { return onClickDay(day, userData, ev); }, style: { width: "100%", height: "100%" }, borderRadius: "var(--swui-calendar-day-border-radius)" }, content)) : (React.createElement(React.Fragment, null, content))))))));
-};
-var isClickable = function (defaultHighlights, dayState) {
-    return !!dayHighlightSelect(dayState, defaultHighlights, ["enabled", "disabled"], [true, false], true);
-};
-
-function CalendarMonth(_a) {
-    var month = _a.month, _b = _a.dayComponent, dayComponent = _b === void 0 ? CalendarDay : _b, statePerWeek = _a.statePerWeek, userDataPerWeek = _a.userDataPerWeek, minDate = _a.minDate, maxDate = _a.maxDate, onClickDay = _a.onClickDay, onClickWeek = _a.onClickWeek, onClickWeekDay = _a.onClickWeekDay, onClickMonth = _a.onClickMonth, onClickYear = _a.onClickYear, renderWeekNumber = _a.renderWeekNumber, renderWeekDay = _a.renderWeekDay, headerLeftContent = _a.headerLeftContent, headerRightContent = _a.headerRightContent, _c = _a.theme, theme = _c === void 0 ? defaultCalendarTheme : _c, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights;
-    var showWeekNumber = theme.WeekNumber.show;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { alignItems: "stretch" },
-            React.createElement(Row, { justifyContent: "space-between", alignItems: "center", height: "32px" },
-                React.createElement(Box, { alignItems: "center" }, headerLeftContent),
-                React.createElement(Row, { alignItems: "center" },
-                    React.createElement(Row, { width: "104px", justifyContent: "center" }, onClickMonth ? (React.createElement(FlatButton, { onClick: function () { return onClickMonth(month); }, label: month.name })) : (React.createElement(Text, null, month.name))),
-                    React.createElement(Space, null),
-                    React.createElement(Row, { width: "64px", justifyContent: "center" }, onClickYear ? (React.createElement(FlatButton, { onClick: function () { return onClickYear(month.year); }, label: String(month.year) })) : (React.createElement(Text, null, month.year)))),
-                React.createElement(Box, { alignItems: "center" }, headerRightContent)),
-            React.createElement("table", null,
-                React.createElement("tbody", null,
-                    React.createElement("tr", null,
-                        showWeekNumber && (React.createElement("td", null,
-                            React.createElement(Box, { width: theme.width, height: theme.height, justifyContent: "center", alignItems: "center" },
-                                React.createElement(Text, { size: "small", color: theme.CalendarMonth.headerTextColor }, "W")))),
-                        month.weeks[0].days.map(function (day) { return (React.createElement("td", { key: day.name }, renderWeekDay ? (renderWeekDay(day.name, theme, onClickWeekDay)) : (React.createElement(WeekDayCell, { day: day, onClickWeekDay: onClickWeekDay, theme: theme })))); })),
-                    month.weeks.map(function (week) { return (React.createElement(CalendarWeek, { key: week.weekNumber, month: month, week: week, dayComponent: dayComponent, statePerWeekDay: statePerWeek && statePerWeek[week.weekNumber], userDataPerWeekDay: userDataPerWeek && userDataPerWeek[week.weekNumber], onClickDay: onClickDay, onClickWeek: onClickWeek, theme: theme, renderWeekNumber: renderWeekNumber, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights, minDate: minDate, maxDate: maxDate })); }))))));
+const calendar = "_calendar_1w0de_1";
+var styles$1 = {
+  calendar
+};
+function CalendarPanel({
+  monthRows,
+  dayComponent = CalendarDay,
+  userDataPerMonth,
+  statePerMonth,
+  minDate,
+  maxDate,
+  onClickDay,
+  onClickWeekDay,
+  onClickWeek,
+  onClickMonth,
+  onClickYear,
+  renderWeekDay,
+  renderWeekNumber,
+  headerLeftContent,
+  headerRightContent,
+  extraDayContent,
+  defaultHighlights,
+  theme = defaultCalendarTheme
+}) {
+  const minDateObj = useMemo(() => minDate ? parse(minDate, "yyyy-MM-dd", new Date()) : void 0, [minDate]);
+  const maxDateObj = useMemo(() => maxDate ? parse(maxDate, "yyyy-MM-dd", new Date()) : void 0, [maxDate]);
+  return /* @__PURE__ */ jsx("div", {
+    className: styles$1.calendar,
+    children: monthRows.map((monthRow, rowIndex) => /* @__PURE__ */ jsx(Spacing, {
+      children: /* @__PURE__ */ jsx(Row, {
+        children: monthRow.map((month, index) => /* @__PURE__ */ jsxs(React.Fragment, {
+          children: [index > 0 && /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(CalendarMonth, {
+            month,
+            dayComponent,
+            userDataPerWeek: userDataPerMonth && userDataPerMonth[month.monthString],
+            statePerWeek: statePerMonth && statePerMonth[month.monthString],
+            onClickDay,
+            onClickWeekDay,
+            onClickWeek,
+            onClickMonth,
+            onClickYear,
+            theme,
+            renderWeekNumber,
+            renderWeekDay,
+            headerLeftContent,
+            headerRightContent,
+            extraDayContent,
+            defaultHighlights,
+            minDate: minDateObj,
+            maxDate: maxDateObj
+          })]
+        }, month.name))
+      })
+    }, rowIndex))
+  });
 }
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
+function Calendar(props) {
+  const initialDate = getInitialDate(props.year, props.month, props.date);
+  const {
+    year,
+    month
+  } = calculateOverflowingMonth(initialDate.year, initialDate.month);
+  const monthRows = getMonthRows(year, month, props.numMonths, props.monthsPerRow);
+  const statePerMonth = useHighlightToday(props.highlightToday, props.statePerMonth);
+  return /* @__PURE__ */ jsx(CalendarPanel, {
+    year,
+    month,
+    monthRows,
+    ...props,
+    statePerMonth
+  });
+}
+const getInitialDate = (year, month, date) => {
+  if (month && year) {
+    return {
+      month,
+      year
+    };
+  }
+  if (date) {
+    return {
+      month: getMonth(date),
+      year: getYear(date)
+    };
+  }
+  const now = new Date();
+  return {
+    month: getMonth(now),
+    year: getYear(now)
+  };
+};
+const getMonthRows = (year, month, numMonths, monthsPerRow) => {
+  if (numMonths == null) {
+    return [[getMonthInYear(year, month)]];
+  }
+  if (monthsPerRow == null) {
+    return [getMonthsInYear(year, month, numMonths)];
+  }
+  return chunk(getMonthsInYear(year, month, numMonths), monthsPerRow);
+};
+const useSelectedMonthStepperLogic = (dateInFocus, setDateInFocus, monthsPerRow, numMonths) => {
+  const nextMonth = useCallback(() => {
+    var _a;
+    const d = addMonths(dateInFocus, (_a = monthsPerRow != null ? monthsPerRow : numMonths) != null ? _a : 1);
+    setDateInFocus == null ? void 0 : setDateInFocus(d);
+  }, [setDateInFocus, dateInFocus, monthsPerRow, numMonths]);
+  const nextYear = useCallback(() => {
+    const d = addYears(dateInFocus, 1);
+    setDateInFocus == null ? void 0 : setDateInFocus(d);
+  }, [setDateInFocus, dateInFocus]);
+  const prevMonth = useCallback(() => {
+    var _a;
+    const d = subMonths(dateInFocus, (_a = monthsPerRow != null ? monthsPerRow : numMonths) != null ? _a : 1);
+    setDateInFocus == null ? void 0 : setDateInFocus(d);
+  }, [setDateInFocus, dateInFocus, monthsPerRow, numMonths]);
+  const prevYear = useCallback(() => {
+    const d = subYears(dateInFocus, 1);
+    setDateInFocus == null ? void 0 : setDateInFocus(d);
+  }, [setDateInFocus, dateInFocus]);
+  return {
+    nextMonth,
+    prevMonth,
+    nextYear,
+    prevYear
+  };
+};
+const WithMonthSwitcherBelow = ({
+  children,
+  prevMonth,
+  nextMonth,
+  prevYear,
+  nextYear
+}) => /* @__PURE__ */ jsxs("div", {
+  children: [children, /* @__PURE__ */ jsx(Indent, {
+    children: /* @__PURE__ */ jsxs(Row, {
+      children: [/* @__PURE__ */ jsx(FlatButton, {
+        onClick: prevYear,
+        leftIcon: faAngleDoubleLeft
+      }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(FlatButton, {
+        onClick: prevMonth,
+        leftIcon: stenaAngleLeft
+      }), /* @__PURE__ */ jsx(Indent, {
+        num: 2
+      }), /* @__PURE__ */ jsx(FlatButton, {
+        onClick: nextMonth,
+        leftIcon: stenaAngleRight
+      }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(FlatButton, {
+        onClick: nextYear,
+        leftIcon: faAngleDoubleRight
+      })]
+    })
+  }), /* @__PURE__ */ jsx(Space, {})]
+});
+const MonthPickerCell = ({
+  value,
+  onValueChange,
+  month
+}) => {
+  const label = useMemo(() => {
+    const now = new Date(2e3, month, 1);
+    return format(now, "MMM");
+  }, [month]);
+  return /* @__PURE__ */ jsx(Row, {
+    width: "64px",
+    justifyContent: "center",
+    spacing: 0.5,
+    indent: 0.5,
+    children: value === month ? /* @__PURE__ */ jsx(PrimaryButton, {
+      label,
+      onClick: () => onValueChange && onValueChange(month)
+    }) : /* @__PURE__ */ jsx(FlatButton, {
+      label,
+      onClick: () => onValueChange && onValueChange(month)
+    })
+  });
+};
+const monthMatrix = [[Month.JANUARY, Month.FEBRUARY, Month.MARCH], [Month.APRIL, Month.MAY, Month.JUNE], [Month.JULY, Month.AUGUST, Month.SEPTEMBER], [Month.OCTOBER, Month.NOVEMBER, Month.DECEMBER]];
+const MonthPicker = ({
+  value,
+  onValueChange
+}) => {
+  return /* @__PURE__ */ jsx(Column, {
+    children: monthMatrix.map((monthRow) => /* @__PURE__ */ jsx(Row, {
+      children: monthRow.map((month) => /* @__PURE__ */ jsx(MonthPickerCell, {
+        month,
+        onValueChange,
+        value
+      }, month))
+    }, monthRow[0]))
+  });
+};
+const createStandardDateRangePresets = (now) => [
+  {
+    label: "Past",
+    presets: [
+      { label: "Last 3 days", startDate: now, endDate: subDays(now, 2) },
+      { label: "Last 7 days", startDate: now, endDate: subDays(now, 6) },
+      { label: "Last 30 days", startDate: now, endDate: subDays(now, 29) },
+      { label: "Last 45 days", startDate: now, endDate: subDays(now, 44) }
+    ]
+  },
+  {
+    label: "Future",
+    presets: [
+      { label: "Next 3 days", startDate: now, endDate: addDays(now, 2) },
+      { label: "Next 7 days", startDate: now, endDate: addDays(now, 6) },
+      { label: "Next 30 days", startDate: now, endDate: addDays(now, 29) },
+      { label: "Next 45 days", startDate: now, endDate: addDays(now, 44) }
+    ]
+  }
+];
+const PresetPicker = ({
+  onClickPreset
+}) => {
+  var _a;
+  const [pageIndex, setPageIndex] = useState(0);
+  const pages = useMemo(() => createStandardDateRangePresets(new Date()), []);
+  const currentPage = (_a = pages[pageIndex]) != null ? _a : pages[0];
+  return /* @__PURE__ */ jsxs(Column, {
+    children: [/* @__PURE__ */ jsxs(Row, {
+      justifyContent: "space-between",
+      alignItems: "center",
+      width: "200px",
+      children: [/* @__PURE__ */ jsx(FlatButton, {
+        size: "small",
+        leftIcon: stenaAngleLeft,
+        disabled: pageIndex === 0,
+        onClick: () => setPageIndex(pageIndex - 1)
+      }), /* @__PURE__ */ jsx(Text, {
+        children: currentPage.label
+      }), /* @__PURE__ */ jsx(FlatButton, {
+        size: "small",
+        leftIcon: stenaAngleRight,
+        disabled: pageIndex === pages.length - 1,
+        onClick: () => setPageIndex(pageIndex + 1)
+      })]
+    }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(Column, {
+      alignItems: "center",
+      children: currentPage.presets.map((preset) => /* @__PURE__ */ jsxs(React.Fragment, {
+        children: [/* @__PURE__ */ jsx(PrimaryButton, {
+          label: preset.label,
+          onClick: () => onClickPreset(preset)
+        }), /* @__PURE__ */ jsx(Space, {})]
+      }, preset.label))
+    })]
+  });
+};
+const YearPickerCell = ({
+  value,
+  onValueChange,
+  year
+}) => {
+  const label = String(year);
+  return /* @__PURE__ */ jsx(Row, {
+    width: "64px",
+    justifyContent: "center",
+    spacing: 0.5,
+    indent: 0.5,
+    children: value === year ? /* @__PURE__ */ jsx(PrimaryButton, {
+      label,
+      onClick: () => onValueChange == null ? void 0 : onValueChange(year)
+    }) : /* @__PURE__ */ jsx(FlatButton, {
+      label,
+      onClick: () => onValueChange == null ? void 0 : onValueChange(year)
+    })
+  });
+};
+const YearPicker = ({
+  value,
+  onValueChange,
+  initialLastYear
+}) => {
+  const [lastYear, setLastYear] = useState(() => {
+    if (value) {
+      return value + 4;
     }
-  } else {
-    head.appendChild(style);
+    return initialLastYear != null ? initialLastYear : new Date().getFullYear() + 4;
+  });
+  const yearRows = useMemo(() => {
+    const startYear = lastYear - 11;
+    return chunk(range(startYear, lastYear + 1), 3);
+  }, [lastYear]);
+  useEffect(() => {
+    setLastYear((prev) => calculateLastYearInFocus(value, prev));
+  }, [value]);
+  return /* @__PURE__ */ jsxs(Row, {
+    children: [/* @__PURE__ */ jsx(Column, {
+      justifyContent: "center",
+      children: /* @__PURE__ */ jsx(FlatButton, {
+        leftIcon: faCaretLeft,
+        onClick: () => setLastYear(lastYear - 3)
+      })
+    }), /* @__PURE__ */ jsx(Column, {
+      children: yearRows.map((yearRow) => /* @__PURE__ */ jsx(Row, {
+        children: yearRow.map((year) => /* @__PURE__ */ jsx(YearPickerCell, {
+          year,
+          onValueChange,
+          value
+        }, year))
+      }, yearRow[0]))
+    }), /* @__PURE__ */ jsx(Column, {
+      justifyContent: "center",
+      children: /* @__PURE__ */ jsx(FlatButton, {
+        leftIcon: faCaretRight,
+        onClick: () => setLastYear(lastYear + 3)
+      })
+    })]
+  });
+};
+const calculateLastYearInFocus = (value, lastYear) => {
+  if (value == null) {
+    return lastYear;
   }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
+  if (value > lastYear) {
+    const yearDiff = value - lastYear;
+    const remaining = yearDiff % 3;
+    const yearsToAdd = yearDiff - remaining + 3;
+    return lastYear + yearsToAdd;
+  }
+  const startYear = lastYear - 11;
+  if (value < startYear) {
+    const yearDiff = startYear - value;
+    const remaining = yearDiff % 3;
+    const yearsToSubtract = yearDiff - remaining + 3;
+    return lastYear - yearsToSubtract;
+  }
+  return lastYear;
+};
+const CalendarWithMonthYearPickers = function CalendarWithMonthYearPickers2({
+  dateInFocus,
+  setDateInFocus,
+  currentPanel,
+  setCurrentPanel,
+  ...props
+}) {
+  const onChangeSelectedMonth = useCallback((selectedMonth) => {
+    const newDate = dateInFocus ? new Date(dateInFocus) : new Date();
+    newDate.setMonth(selectedMonth);
+    if (setDateInFocus) {
+      setDateInFocus(newDate);
+    }
+    setCurrentPanel("calendar");
+  }, [dateInFocus, setDateInFocus, setCurrentPanel]);
+  const onChangeSelectedYear = useCallback((selectedYear) => {
+    const newDate = dateInFocus ? new Date(dateInFocus) : new Date();
+    newDate.setFullYear(selectedYear);
+    if (setDateInFocus) {
+      setDateInFocus(newDate);
+    }
+    setCurrentPanel("calendar");
+  }, [dateInFocus, setDateInFocus, setCurrentPanel]);
+  const onClickYear = useCallback(() => {
+    setCurrentPanel("year");
+  }, [setCurrentPanel]);
+  const onClickMonth = useCallback(() => {
+    setCurrentPanel("month");
+  }, [setCurrentPanel]);
+  switch (currentPanel) {
+    case "calendar":
+      return /* @__PURE__ */ jsx(Fragment, {
+        children: /* @__PURE__ */ jsx(Calendar, {
+          ...props,
+          date: dateInFocus,
+          onClickYear,
+          onClickMonth
+        })
+      });
+    case "month":
+      return /* @__PURE__ */ jsx(MonthPicker, {
+        value: dateInFocus.getMonth(),
+        onValueChange: onChangeSelectedMonth
+      });
+    case "year":
+      return /* @__PURE__ */ jsx(YearPicker, {
+        value: dateInFocus.getFullYear(),
+        onValueChange: onChangeSelectedYear
+      });
+    case "presets":
+      return /* @__PURE__ */ jsx(PresetPicker, {
+        onClickPreset: () => {
+        }
+      });
+    default:
+      return /* @__PURE__ */ jsx(Box, {
+        children: /* @__PURE__ */ jsx(PrimaryButton, {
+          label: "Show calendar",
+          onClick: () => setCurrentPanel("calendar")
+        })
+      });
+  }
+};
+const noop = () => {
+};
+function CalendarWithMonthSwitcher({
+  monthSwitcherPlacement,
+  theme = defaultCalendarTheme,
+  dateInFocus,
+  setDateInFocus,
+  currentPanel,
+  setCurrentPanel,
+  onSelectPreset = noop,
+  hideYearPagination = false,
+  ...calendarProps
+}) {
+  const {
+    nextMonth,
+    prevMonth,
+    nextYear,
+    prevYear
+  } = useSelectedMonthStepperLogic(dateInFocus, setDateInFocus, calendarProps.monthsPerRow, calendarProps.numMonths);
+  const placement = fallbackIfNoPlacement(monthSwitcherPlacement, calendarProps.numMonths);
+  switch (placement) {
+    case "below": {
+      return /* @__PURE__ */ jsx(WithMonthSwitcherBelow, {
+        theme,
+        nextMonth,
+        prevMonth,
+        nextYear,
+        prevYear,
+        children: /* @__PURE__ */ jsx(Calendar, {
+          ...calendarProps,
+          theme,
+          date: dateInFocus
+        })
+      });
+    }
+    case "header": {
+      return /* @__PURE__ */ jsx(Column, {
+        children: /* @__PURE__ */ jsx(CalendarWithMonthYearPickers, {
+          ...calendarProps,
+          theme,
+          dateInFocus,
+          setDateInFocus,
+          currentPanel,
+          setCurrentPanel,
+          onSelectPreset,
+          headerLeftContent: /* @__PURE__ */ jsxs(Row, {
+            alignItems: "center",
+            children: [!hideYearPagination && /* @__PURE__ */ jsx(FlatButton, {
+              size: "small",
+              onClick: prevYear,
+              leftIcon: faAngleDoubleLeft
+            }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(FlatButton, {
+              size: "small",
+              onClick: prevMonth,
+              leftIcon: stenaAngleLeft
+            })]
+          }),
+          headerRightContent: /* @__PURE__ */ jsxs(Row, {
+            alignItems: "center",
+            children: [/* @__PURE__ */ jsx(FlatButton, {
+              size: "small",
+              onClick: nextMonth,
+              leftIcon: stenaAngleRight
+            }), /* @__PURE__ */ jsx(Space, {}), !hideYearPagination && /* @__PURE__ */ jsx(FlatButton, {
+              size: "small",
+              onClick: nextYear,
+              leftIcon: faAngleDoubleRight
+            })]
+          })
+        })
+      });
+    }
+    default: {
+      return /* @__PURE__ */ jsx(Calendar, {
+        ...calendarProps,
+        theme,
+        date: dateInFocus
+      });
+    }
   }
 }
-
-var css_248z$1 = ".Calendar-module_calendar__Ztvgm {\n  --swui-calendar-day-width: 40px;\n  --swui-calendar-day-height: 38px;\n  --swui-calendar-day-border-radius: 4px;\n\n  /* Week number */\n\n  --swui-calendar-week-number-bg-color: transparent;\n  --swui-calendar-week-number-text-color: var(--lhds-color-ui-500);\n  --swui-calendar-week-number-clickable-text-color: var(--lhds-color-ui-500);\n\n  /* Week day */\n\n  --swui-calendar-week-day-text-color: var(--lhds-color-ui-500);\n  --swui-calendar-week-day-clickable-text-color: var(--lhds-color-ui-500);\n\n  /* Wrapper */\n\n  --swui-calendar-wrapper-selected-border: var(--swui-primary-action-color);\n  --swui-calendar-wrapper-selected-background: var(--swui-primary-action-color);\n  --swui-calendar-wrapper-range-border: var(--lhds-color-blue-100);\n  --swui-calendar-wrapper-range-background: var(--lhds-color-blue-100);\n  --swui-calendar-wrapper-today-border: var(--lhds-color-ui-200);\n  --swui-calendar-wrapper-today-background: var(--lhds-color-ui-200);\n\n  /* Text */\n\n  --swui-calendar-text-selected-color: #fff;\n  --swui-calendar-text-disabled-color: var(--swui-text-disabled-color);\n  --swui-calendar-text-in-other-month-color: var(--swui-text-disabled-color);\n}\n\n  .Calendar-module_calendar__Ztvgm table {\n    border-spacing: 0 4px;\n  }\n\n  .Calendar-module_calendar__Ztvgm span {\n    line-height: 100%;\n  }\n\n  .Calendar-module_calendar__Ztvgm tr td:last-child {\n    border-top-right-radius: var(--swui-calendar-day-border-radius);\n    border-bottom-right-radius: var(--swui-calendar-day-border-radius);\n  }\n\n  .Calendar-module_calendar__Ztvgm tr td:nth-child(2) {\n    border-top-left-radius: var(--swui-calendar-day-border-radius);\n    border-bottom-left-radius: var(--swui-calendar-day-border-radius);\n  }\n\n  .Calendar-module_calendar__Ztvgm td {\n    padding: 0;\n    width: var(--swui-calendar-day-width);\n    height: var(--swui-calendar-day-height);\n  }\n";
-var styles$1 = {"calendar":"Calendar-module_calendar__Ztvgm"};
-styleInject(css_248z$1);
-
-function CalendarPanel(_a) {
-    var monthRows = _a.monthRows, _b = _a.dayComponent, dayComponent = _b === void 0 ? CalendarDay : _b, userDataPerMonth = _a.userDataPerMonth, statePerMonth = _a.statePerMonth, minDate = _a.minDate, maxDate = _a.maxDate, onClickDay = _a.onClickDay, onClickWeekDay = _a.onClickWeekDay, onClickWeek = _a.onClickWeek, onClickMonth = _a.onClickMonth, onClickYear = _a.onClickYear, renderWeekDay = _a.renderWeekDay, renderWeekNumber = _a.renderWeekNumber, headerLeftContent = _a.headerLeftContent, headerRightContent = _a.headerRightContent, extraDayContent = _a.extraDayContent, defaultHighlights = _a.defaultHighlights, _c = _a.theme, theme = _c === void 0 ? defaultCalendarTheme : _c;
-    var minDateObj = useMemo(function () { return (minDate ? parse(minDate, "yyyy-MM-dd", new Date()) : undefined); }, [minDate]);
-    var maxDateObj = useMemo(function () { return (maxDate ? parse(maxDate, "yyyy-MM-dd", new Date()) : undefined); }, [maxDate]);
-    return (React.createElement("div", { className: styles$1.calendar }, monthRows.map(function (monthRow, rowIndex) { return (React.createElement(Spacing, { key: rowIndex },
-        React.createElement(Row, null, monthRow.map(function (month, index) { return (React.createElement(React.Fragment, { key: month.name },
-            index > 0 && React.createElement(Space, null),
-            React.createElement(CalendarMonth, { month: month, dayComponent: dayComponent, userDataPerWeek: userDataPerMonth && userDataPerMonth[month.monthString], statePerWeek: statePerMonth && statePerMonth[month.monthString], onClickDay: onClickDay, onClickWeekDay: onClickWeekDay, onClickWeek: onClickWeek, onClickMonth: onClickMonth, onClickYear: onClickYear, theme: theme, renderWeekNumber: renderWeekNumber, renderWeekDay: renderWeekDay, headerLeftContent: headerLeftContent, headerRightContent: headerRightContent, extraDayContent: extraDayContent, defaultHighlights: defaultHighlights, minDate: minDateObj, maxDate: maxDateObj }))); })))); })));
-}
-function Calendar(props) {
-    var initialDate = getInitialDate(props.year, props.month, props.date);
-    var _a = calculateOverflowingMonth(initialDate.year, initialDate.month), year = _a.year, month = _a.month;
-    var monthRows = getMonthRows(year, month, props.numMonths, props.monthsPerRow);
-    var statePerMonth = useHighlightToday(props.highlightToday, props.statePerMonth);
-    return (React.createElement(CalendarPanel, __assign({ year: year, month: month, monthRows: monthRows }, props, { statePerMonth: statePerMonth })));
-}
-var getInitialDate = function (year, month, date) {
-    if (month && year) {
-        return {
-            month: month,
-            year: year,
-        };
-    }
-    if (date) {
-        return {
-            month: getMonth(date),
-            year: getYear(date),
-        };
-    }
-    var now = new Date();
-    return {
-        month: getMonth(now),
-        year: getYear(now),
-    };
-};
-var getMonthRows = function (year, month, numMonths, monthsPerRow) {
-    if (numMonths == null) {
-        return [[getMonthInYear(year, month)]];
-    }
-    if (monthsPerRow == null) {
-        return [getMonthsInYear(year, month, numMonths)];
-    }
-    return chunk(getMonthsInYear(year, month, numMonths), monthsPerRow);
-};
-
-var useSelectedMonthStepperLogic = function (dateInFocus, setDateInFocus, monthsPerRow, numMonths) {
-    var nextMonth = useCallback(function () {
-        var _a;
-        var d = addMonths(dateInFocus, (_a = monthsPerRow !== null && monthsPerRow !== void 0 ? monthsPerRow : numMonths) !== null && _a !== void 0 ? _a : 1);
-        setDateInFocus === null || setDateInFocus === void 0 ? void 0 : setDateInFocus(d);
-    }, [setDateInFocus, dateInFocus, monthsPerRow, numMonths]);
-    var nextYear = useCallback(function () {
-        var d = addYears(dateInFocus, 1);
-        setDateInFocus === null || setDateInFocus === void 0 ? void 0 : setDateInFocus(d);
-    }, [setDateInFocus, dateInFocus]);
-    var prevMonth = useCallback(function () {
-        var _a;
-        var d = subMonths(dateInFocus, (_a = monthsPerRow !== null && monthsPerRow !== void 0 ? monthsPerRow : numMonths) !== null && _a !== void 0 ? _a : 1);
-        setDateInFocus === null || setDateInFocus === void 0 ? void 0 : setDateInFocus(d);
-    }, [setDateInFocus, dateInFocus, monthsPerRow, numMonths]);
-    var prevYear = useCallback(function () {
-        var d = subYears(dateInFocus, 1);
-        setDateInFocus === null || setDateInFocus === void 0 ? void 0 : setDateInFocus(d);
-    }, [setDateInFocus, dateInFocus]);
-    return {
-        nextMonth: nextMonth,
-        prevMonth: prevMonth,
-        nextYear: nextYear,
-        prevYear: prevYear,
-    };
-};
-
-var WithMonthSwitcherBelow = function (_a) {
-    var children = _a.children, prevMonth = _a.prevMonth, nextMonth = _a.nextMonth, prevYear = _a.prevYear, nextYear = _a.nextYear;
-    return (React.createElement("div", null,
-        children,
-        React.createElement(Indent, null,
-            React.createElement(Row, null,
-                React.createElement(FlatButton, { onClick: prevYear, leftIcon: faAngleDoubleLeft }),
-                React.createElement(Space, null),
-                React.createElement(FlatButton, { onClick: prevMonth, leftIcon: faAngleLeft }),
-                React.createElement(Indent, { num: 2 }),
-                React.createElement(FlatButton, { onClick: nextMonth, leftIcon: faAngleRight }),
-                React.createElement(Space, null),
-                React.createElement(FlatButton, { onClick: nextYear, leftIcon: faAngleDoubleRight }))),
-        React.createElement(Space, null)));
-};
-
-var MonthPickerCell = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, month = _a.month;
-    var label = useMemo(function () {
-        var now = new Date(2000, month, 1);
-        return format(now, "MMM");
-    }, [month]);
-    return (React.createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === month ? (React.createElement(PrimaryButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } })) : (React.createElement(FlatButton, { label: label, onClick: function () { return onValueChange && onValueChange(month); } }))));
-};
-
-var monthMatrix = [
-    [Month.JANUARY, Month.FEBRUARY, Month.MARCH],
-    [Month.APRIL, Month.MAY, Month.JUNE],
-    [Month.JULY, Month.AUGUST, Month.SEPTEMBER],
-    [Month.OCTOBER, Month.NOVEMBER, Month.DECEMBER],
-];
-var MonthPicker = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange;
-    return (React.createElement(Column, null, monthMatrix.map(function (monthRow) { return (React.createElement(Row, { key: monthRow[0] }, monthRow.map(function (month) { return (React.createElement(MonthPickerCell, { key: month, month: month, onValueChange: onValueChange, value: value })); }))); })));
-};
-
-var createStandardDateRangePresets = function (now) { return [
-    {
-        label: "Past",
-        presets: [
-            { label: "Last 3 days", startDate: now, endDate: subDays(now, 2) },
-            { label: "Last 7 days", startDate: now, endDate: subDays(now, 6) },
-            { label: "Last 30 days", startDate: now, endDate: subDays(now, 29) },
-            { label: "Last 45 days", startDate: now, endDate: subDays(now, 44) },
-        ],
-    },
-    {
-        label: "Future",
-        presets: [
-            { label: "Next 3 days", startDate: now, endDate: addDays(now, 2) },
-            { label: "Next 7 days", startDate: now, endDate: addDays(now, 6) },
-            { label: "Next 30 days", startDate: now, endDate: addDays(now, 29) },
-            { label: "Next 45 days", startDate: now, endDate: addDays(now, 44) },
-        ],
-    },
-]; };
-
-var PresetPicker = function (_a) {
-    var _b;
-    var onClickPreset = _a.onClickPreset;
-    var _c = useState(0), pageIndex = _c[0], setPageIndex = _c[1];
-    var pages = useMemo(function () { return createStandardDateRangePresets(new Date()); }, []);
-    var currentPage = (_b = pages[pageIndex]) !== null && _b !== void 0 ? _b : pages[0];
-    return (React.createElement(Column, null,
-        React.createElement(Row, { justifyContent: "space-between", alignItems: "center", width: "200px" },
-            React.createElement(FlatButton, { size: "small", leftIcon: faAngleLeft, disabled: pageIndex === 0, onClick: function () { return setPageIndex(pageIndex - 1); } }),
-            React.createElement(Text, null, currentPage.label),
-            React.createElement(FlatButton, { size: "small", leftIcon: faAngleRight, disabled: pageIndex === pages.length - 1, onClick: function () { return setPageIndex(pageIndex + 1); } })),
-        React.createElement(Space, null),
-        React.createElement(Column, { alignItems: "center" }, currentPage.presets.map(function (preset) { return (React.createElement(React.Fragment, { key: preset.label },
-            React.createElement(PrimaryButton, { label: preset.label, onClick: function () { return onClickPreset(preset); } }),
-            React.createElement(Space, null))); }))));
-};
-
-var YearPickerCell = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, year = _a.year;
-    var label = String(year);
-    return (React.createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5 }, value === year ? (React.createElement(PrimaryButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } })) : (React.createElement(FlatButton, { label: label, onClick: function () { return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(year); } }))));
-};
-
-var YearPicker = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, initialLastYear = _a.initialLastYear;
-    var _b = useState(function () {
-        if (value) {
-            return value + 4;
-        }
-        return initialLastYear !== null && initialLastYear !== void 0 ? initialLastYear : new Date().getFullYear() + 4;
-    }), lastYear = _b[0], setLastYear = _b[1];
-    var yearRows = useMemo(function () {
-        var startYear = lastYear - 11;
-        return chunk(range(startYear, lastYear + 1), 3);
-    }, [lastYear]);
-    useEffect(function () {
-        setLastYear(function (prev) { return calculateLastYearInFocus(value, prev); });
-    }, [value]);
-    return (React.createElement(Row, null,
-        React.createElement(Column, { justifyContent: "center" },
-            React.createElement(FlatButton, { leftIcon: faCaretLeft, onClick: function () { return setLastYear(lastYear - 3); } })),
-        React.createElement(Column, null, yearRows.map(function (yearRow) { return (React.createElement(Row, { key: yearRow[0] }, yearRow.map(function (year) { return (React.createElement(YearPickerCell, { key: year, year: year, onValueChange: onValueChange, value: value })); }))); })),
-        React.createElement(Column, { justifyContent: "center" },
-            React.createElement(FlatButton, { leftIcon: faCaretRight, onClick: function () { return setLastYear(lastYear + 3); } }))));
-};
-var calculateLastYearInFocus = function (value, lastYear) {
-    if (value == null) {
-        return lastYear;
-    }
-    if (value > lastYear) {
-        var yearDiff = value - lastYear;
-        var remaining = yearDiff % 3;
-        var yearsToAdd = yearDiff - remaining + 3;
-        return lastYear + yearsToAdd;
-    }
-    var startYear = lastYear - 11;
-    if (value < startYear) {
-        var yearDiff = startYear - value;
-        var remaining = yearDiff % 3;
-        var yearsToSubtract = yearDiff - remaining + 3;
-        return lastYear - yearsToSubtract;
-    }
-    return lastYear;
-};
-
-var CalendarWithMonthYearPickers = function CalendarWithMonthYearPickers(_a) {
-    var dateInFocus = _a.dateInFocus, setDateInFocus = _a.setDateInFocus, currentPanel = _a.currentPanel, setCurrentPanel = _a.setCurrentPanel, props = __rest(_a, ["dateInFocus", "setDateInFocus", "currentPanel", "setCurrentPanel"]);
-    var onChangeSelectedMonth = useCallback(function (selectedMonth) {
-        var newDate = dateInFocus ? new Date(dateInFocus) : new Date();
-        newDate.setMonth(selectedMonth);
-        if (setDateInFocus) {
-            setDateInFocus(newDate);
-        }
-        setCurrentPanel("calendar");
-    }, [dateInFocus, setDateInFocus, setCurrentPanel]);
-    var onChangeSelectedYear = useCallback(function (selectedYear) {
-        var newDate = dateInFocus ? new Date(dateInFocus) : new Date();
-        newDate.setFullYear(selectedYear);
-        if (setDateInFocus) {
-            setDateInFocus(newDate);
-        }
-        setCurrentPanel("calendar");
-    }, [dateInFocus, setDateInFocus, setCurrentPanel]);
-    var onClickYear = useCallback(function () {
-        setCurrentPanel("year");
-    }, [setCurrentPanel]);
-    var onClickMonth = useCallback(function () {
-        setCurrentPanel("month");
-    }, [setCurrentPanel]);
-    switch (currentPanel) {
-        case "calendar":
-            return (React.createElement(React.Fragment, null,
-                React.createElement(Calendar, __assign({}, props, { date: dateInFocus, onClickYear: onClickYear, onClickMonth: onClickMonth }))));
-        case "month":
-            return (React.createElement(MonthPicker, { value: dateInFocus.getMonth(), onValueChange: onChangeSelectedMonth }));
-        case "year":
-            return (React.createElement(YearPicker, { value: dateInFocus.getFullYear(), onValueChange: onChangeSelectedYear }));
-        case "presets":
-            return React.createElement(PresetPicker, { onClickPreset: function () { } });
-        default:
-            return (React.createElement(Box, null,
-                React.createElement(PrimaryButton, { label: "Show calendar", onClick: function () { return setCurrentPanel("calendar"); } })));
-    }
-};
-
-var noop = function () { };
-function CalendarWithMonthSwitcher(_a) {
-    var monthSwitcherPlacement = _a.monthSwitcherPlacement, _b = _a.theme, theme = _b === void 0 ? defaultCalendarTheme : _b, dateInFocus = _a.dateInFocus, setDateInFocus = _a.setDateInFocus, currentPanel = _a.currentPanel, setCurrentPanel = _a.setCurrentPanel, _c = _a.onSelectPreset, onSelectPreset = _c === void 0 ? noop : _c, _d = _a.hideYearPagination, hideYearPagination = _d === void 0 ? false : _d, calendarProps = __rest(_a, ["monthSwitcherPlacement", "theme", "dateInFocus", "setDateInFocus", "currentPanel", "setCurrentPanel", "onSelectPreset", "hideYearPagination"]);
-    var _e = useSelectedMonthStepperLogic(dateInFocus, setDateInFocus, calendarProps.monthsPerRow, calendarProps.numMonths), nextMonth = _e.nextMonth, prevMonth = _e.prevMonth, nextYear = _e.nextYear, prevYear = _e.prevYear;
-    var placement = fallbackIfNoPlacement(monthSwitcherPlacement, calendarProps.numMonths);
-    switch (placement) {
-        case "below": {
-            return (React.createElement(WithMonthSwitcherBelow, { theme: theme, nextMonth: nextMonth, prevMonth: prevMonth, nextYear: nextYear, prevYear: prevYear },
-                React.createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus }))));
-        }
-        case "header": {
-            return (React.createElement(Column, null,
-                React.createElement(CalendarWithMonthYearPickers, __assign({}, calendarProps, { theme: theme, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, onSelectPreset: onSelectPreset, headerLeftContent: React.createElement(Row, { alignItems: "center" },
-                        !hideYearPagination && (React.createElement(FlatButton, { size: "small", onClick: prevYear, leftIcon: faAngleDoubleLeft })),
-                        React.createElement(Space, null),
-                        React.createElement(FlatButton, { size: "small", onClick: prevMonth, leftIcon: faAngleLeft })), headerRightContent: React.createElement(Row, { alignItems: "center" },
-                        React.createElement(FlatButton, { size: "small", onClick: nextMonth, leftIcon: faAngleRight }),
-                        React.createElement(Space, null),
-                        !hideYearPagination && (React.createElement(FlatButton, { size: "small", onClick: nextYear, leftIcon: faAngleDoubleRight }))) }))));
-        }
-        default: {
-            return (React.createElement(Calendar, __assign({}, calendarProps, { theme: theme, date: dateInFocus })));
-        }
-    }
-}
-var fallbackIfNoPlacement = function (monthSwitcherPlacement, numMonths) {
-    return monthSwitcherPlacement || (numMonths || 1) > 1 ? "below" : "header";
-};
-
-var dateRangeToStrings = function (dateRange) { return ({
-    startDate: dateRange.startDate
-        ? format(dateRange.startDate, "yyyy-MM-dd")
-        : undefined,
-    endDate: dateRange.endDate
-        ? format(dateRange.endDate, "yyyy-MM-dd")
-        : undefined,
-}); };
-var stringsToDateRange = function (_a) {
-    var startDate = _a.startDate, endDate = _a.endDate;
-    var now = new Date();
-    return {
-        startDate: startDate ? parse(startDate, "yyyy-MM-dd", now) : undefined,
-        endDate: endDate ? parse(endDate, "yyyy-MM-dd", now) : undefined,
-    };
-};
-
-var isDateRangeInvalid = function (_a) {
-    var startDate = _a.startDate, endDate = _a.endDate;
-    return Boolean(startDate &&
-        endDate &&
-        !isSameDay(startDate, endDate) &&
-        isAfter(startDate, endDate));
-};
-var toggleDatesIfEndIsEarlierThanStart = function (dateRange) {
-    if (isDateRangeInvalid(dateRange)) {
-        return {
-            startDate: dateRange.endDate,
-            endDate: dateRange.startDate,
-        };
-    }
-    return dateRange;
-};
-var toggleDateStringsIfEndIsEarlierThanStart = function (dateRange) {
-    if (dateRange.startDate && dateRange.endDate) {
-        return dateRangeToStrings(toggleDatesIfEndIsEarlierThanStart(stringsToDateRange(dateRange)));
-    }
-    return dateRange;
-};
-
-var useDateRangeOnClickDayHandler = function (value, onValueChange, focusedInput, setFocusedInput) {
-    return useCallback(function (day) {
-        var dateRange = {
-            startDate: focusedInput === "startDate" ? day.date : value === null || value === void 0 ? void 0 : value.startDate,
-            endDate: focusedInput === "endDate" ? day.date : value === null || value === void 0 ? void 0 : value.endDate,
-        };
-        if (!isDateRangeInvalid(dateRange)) {
-            setFocusedInput(focusedInput === "startDate" ? "endDate" : "startDate");
-        }
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(toggleDatesIfEndIsEarlierThanStart(dateRange));
-    }, [
-        focusedInput,
-        onValueChange,
-        setFocusedInput,
-        value === null || value === void 0 ? void 0 : value.endDate,
-        value === null || value === void 0 ? void 0 : value.startDate,
-    ]);
-};
-
-var useInternalPanelState = function (onChangePanel) {
-    var _a = useState("calendar"), currentPanel = _a[0], _setCurrentPanel = _a[1];
-    var setCurrentPanel = useCallback(function (currentPanel) {
-        _setCurrentPanel(currentPanel);
-        onChangePanel === null || onChangePanel === void 0 ? void 0 : onChangePanel(currentPanel);
-    }, [onChangePanel]);
-    return {
-        currentPanel: currentPanel,
-        setCurrentPanel: setCurrentPanel,
-    };
-};
-
-var useDateRangeSelection = function (_a) {
-    var focusedInput = _a.focusedInput, value = _a.value, onValueChange = _a.onValueChange, setFocusedInput = _a.setFocusedInput, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
-    var _b = useInternalPanelState(onChangePanel), currentPanel = _b.currentPanel, setCurrentPanel = _b.setCurrentPanel;
-    var _c = useState(function () { return new Date(); }), dateInFocus = _c[0], setDateInFocus = _c[1];
-    var onClickDay = useDateRangeOnClickDayHandler(value, onValueChange, focusedInput, setFocusedInput);
-    var statePerMonthWithSelection = useMemo(function () {
-        return buildDayStateForDateRange(statePerMonth, value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate);
-    }, [statePerMonth, value === null || value === void 0 ? void 0 : value.endDate, value === null || value === void 0 ? void 0 : value.startDate]);
-    return {
-        onClickDay: onClickDay,
-        statePerMonth: statePerMonthWithSelection,
-        currentPanel: currentPanel,
-        setCurrentPanel: setCurrentPanel,
-        setDateInFocus: setDateInFocus,
-        dateInFocus: dateInFocus,
-    };
-};
-
-function DateRangeCalendar(props) {
-    var dateRangeSelectionProps = useDateRangeSelection(props);
-    return (React.createElement(CalendarWithMonthSwitcher, __assign({}, props, dateRangeSelectionProps)));
+const fallbackIfNoPlacement = (monthSwitcherPlacement, numMonths) => {
+  return monthSwitcherPlacement || (numMonths || 1) > 1 ? "below" : "header";
+};
+const dateRangeToStrings = (dateRange) => ({
+  startDate: dateRange.startDate ? format(dateRange.startDate, "yyyy-MM-dd") : void 0,
+  endDate: dateRange.endDate ? format(dateRange.endDate, "yyyy-MM-dd") : void 0
+});
+const stringsToDateRange = ({
+  startDate,
+  endDate
+}) => {
+  const now = new Date();
+  return {
+    startDate: startDate ? parse(startDate, "yyyy-MM-dd", now) : void 0,
+    endDate: endDate ? parse(endDate, "yyyy-MM-dd", now) : void 0
+  };
+};
+const isDateRangeInvalid = ({
+  startDate,
+  endDate
+}) => Boolean(startDate && endDate && !isSameDay(startDate, endDate) && isAfter(startDate, endDate));
+const toggleDatesIfEndIsEarlierThanStart = (dateRange) => {
+  if (isDateRangeInvalid(dateRange)) {
+    return {
+      startDate: dateRange.endDate,
+      endDate: dateRange.startDate
+    };
+  }
+  return dateRange;
+};
+const toggleDateStringsIfEndIsEarlierThanStart = (dateRange) => {
+  if (dateRange.startDate && dateRange.endDate) {
+    return dateRangeToStrings(toggleDatesIfEndIsEarlierThanStart(stringsToDateRange(dateRange)));
+  }
+  return dateRange;
+};
+const useDateRangeOnClickDayHandler = (value, onValueChange, focusedInput, setFocusedInput) => {
+  return useCallback((day) => {
+    const dateRange = {
+      startDate: focusedInput === "startDate" ? day.date : value == null ? void 0 : value.startDate,
+      endDate: focusedInput === "endDate" ? day.date : value == null ? void 0 : value.endDate
+    };
+    if (!isDateRangeInvalid(dateRange)) {
+      setFocusedInput(focusedInput === "startDate" ? "endDate" : "startDate");
+    }
+    onValueChange == null ? void 0 : onValueChange(toggleDatesIfEndIsEarlierThanStart(dateRange));
+  }, [
+    focusedInput,
+    onValueChange,
+    setFocusedInput,
+    value == null ? void 0 : value.endDate,
+    value == null ? void 0 : value.startDate
+  ]);
+};
+const useInternalPanelState = (onChangePanel) => {
+  const [currentPanel, _setCurrentPanel] = useState("calendar");
+  const setCurrentPanel = useCallback((currentPanel2) => {
+    _setCurrentPanel(currentPanel2);
+    onChangePanel == null ? void 0 : onChangePanel(currentPanel2);
+  }, [onChangePanel]);
+  return {
+    currentPanel,
+    setCurrentPanel
+  };
+};
+const useDateRangeSelection = ({
+  focusedInput,
+  value,
+  onValueChange,
+  setFocusedInput,
+  statePerMonth,
+  onChangePanel
+}) => {
+  const { currentPanel, setCurrentPanel } = useInternalPanelState(onChangePanel);
+  const [dateInFocus, setDateInFocus] = useState(() => new Date());
+  const onClickDay = useDateRangeOnClickDayHandler(value, onValueChange, focusedInput, setFocusedInput);
+  const statePerMonthWithSelection = useMemo(() => buildDayStateForDateRange(statePerMonth, value == null ? void 0 : value.startDate, value == null ? void 0 : value.endDate), [statePerMonth, value == null ? void 0 : value.endDate, value == null ? void 0 : value.startDate]);
+  return {
+    onClickDay,
+    statePerMonth: statePerMonthWithSelection,
+    currentPanel,
+    setCurrentPanel,
+    setDateInFocus,
+    dateInFocus
+  };
+};
+function DateRangeCalendar(props) {
+  const dateRangeSelectionProps = useDateRangeSelection(props);
+  return /* @__PURE__ */ jsx(CalendarWithMonthSwitcher, {
+    ...props,
+    ...dateRangeSelectionProps
+  });
 }
-
-var useDateRangeCalendarState = function () {
-    var _a = useState(), startDate = _a[0], setStartDate = _a[1];
-    var _b = useState(), endDate = _b[0], setEndDate = _b[1];
-    var _c = useState("startDate"), focusedInput = _c[0], setFocusedInput = _c[1];
-    return {
-        startDate: startDate,
-        setStartDate: setStartDate,
-        endDate: endDate,
-        setEndDate: setEndDate,
-        focusedInput: focusedInput,
-        setFocusedInput: setFocusedInput,
-    };
-};
-
-var useSingleDateSelection = function (_a) {
-    var onChange = _a.onChange, value = _a.value, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
-    var _b = useInternalPanelState(onChangePanel), currentPanel = _b.currentPanel, setCurrentPanel = _b.setCurrentPanel;
-    var _c = useState(function () { return value !== null && value !== void 0 ? value : new Date(); }), dateInFocus = _c[0], setDateInFocus = _c[1];
-    var onClickDay = useCallback(function (day) {
-        if (onChange) {
-            onChange(day.date);
-        }
-    }, [onChange]);
-    var statePerMonthWithSelectedDate = useMemo(function () {
-        return value
-            ? addDayStateHighlights(statePerMonth, value, [
-                "selected",
-                "singleSelected",
-            ])
-            : statePerMonth;
-    }, [statePerMonth, value]);
-    return {
-        onClickDay: onClickDay,
-        statePerMonth: statePerMonthWithSelectedDate,
-        date: value,
-        currentPanel: currentPanel,
-        setCurrentPanel: setCurrentPanel,
-        dateInFocus: dateInFocus,
-        setDateInFocus: setDateInFocus,
-    };
-};
-
-function SingleDateCalendar(props) {
-    var singleDateSelectionProps = useSingleDateSelection(props);
-    return (React.createElement(CalendarWithMonthSwitcher, __assign({}, props, singleDateSelectionProps)));
+const useDateRangeCalendarState = () => {
+  const [startDate, setStartDate] = useState();
+  const [endDate, setEndDate] = useState();
+  const [focusedInput, setFocusedInput] = useState("startDate");
+  return {
+    startDate,
+    setStartDate,
+    endDate,
+    setEndDate,
+    focusedInput,
+    setFocusedInput
+  };
+};
+const useSingleDateSelection = ({
+  onChange,
+  value,
+  statePerMonth,
+  onChangePanel
+}) => {
+  const { currentPanel, setCurrentPanel } = useInternalPanelState(onChangePanel);
+  const [dateInFocus, setDateInFocus] = useState(() => value != null ? value : new Date());
+  const onClickDay = useCallback((day) => {
+    if (onChange) {
+      onChange(day.date);
+    }
+  }, [onChange]);
+  const statePerMonthWithSelectedDate = useMemo(() => value ? addDayStateHighlights(statePerMonth, value, [
+    "selected",
+    "singleSelected"
+  ]) : statePerMonth, [statePerMonth, value]);
+  return {
+    onClickDay,
+    statePerMonth: statePerMonthWithSelectedDate,
+    date: value,
+    currentPanel,
+    setCurrentPanel,
+    dateInFocus,
+    setDateInFocus
+  };
+};
+function SingleDateCalendar(props) {
+  const singleDateSelectionProps = useSingleDateSelection(props);
+  return /* @__PURE__ */ jsx(CalendarWithMonthSwitcher, {
+    ...props,
+    ...singleDateSelectionProps
+  });
 }
-
-var useMultiDateSelection = function (_a) {
-    var onChange = _a.onChange, value = _a.value, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
-    var _b = useInternalPanelState(onChangePanel), currentPanel = _b.currentPanel, setCurrentPanel = _b.setCurrentPanel;
-    var _c = useState(function () { return new Date(); }), dateInFocus = _c[0], setDateInFocus = _c[1];
-    var onClickDay = useCallback(function (day) {
-        if (!onChange) {
-            return;
-        }
-        var isSelected = value && value.find(function (d) { return isSameDay(d, day.date); });
-        if (value && isSelected) {
-            onChange(value.filter(function (v) { return !isSameDay(v, day.date); }));
-        }
-        else {
-            onChange(__spreadArray(__spreadArray([], (value || []), true), [day.date], false));
-        }
-    }, [onChange, value]);
-    var statePerMonthWithSelectedDate = useMemo(function () {
-        if (!value) {
-            return statePerMonth;
-        }
-        return value.reduce(function (stateSum, date) { return addDayStateHighlights(stateSum, date, ["selected"]); }, statePerMonth);
-    }, [statePerMonth, value]);
-    return {
-        onClickDay: onClickDay,
-        statePerMonth: statePerMonthWithSelectedDate,
-        currentPanel: currentPanel,
-        setCurrentPanel: setCurrentPanel,
-        dateInFocus: dateInFocus,
-        setDateInFocus: setDateInFocus,
-    };
-};
-
-function MultiDateCalendar(props) {
-    var selectionProps = useMultiDateSelection(props);
-    return React.createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
+const useMultiDateSelection = ({
+  onChange,
+  value,
+  statePerMonth,
+  onChangePanel
+}) => {
+  const { currentPanel, setCurrentPanel } = useInternalPanelState(onChangePanel);
+  const [dateInFocus, setDateInFocus] = useState(() => new Date());
+  const onClickDay = useCallback((day) => {
+    if (!onChange) {
+      return;
+    }
+    const isSelected = value && value.find((d) => isSameDay(d, day.date));
+    if (value && isSelected) {
+      onChange(value.filter((v) => !isSameDay(v, day.date)));
+    } else {
+      onChange([...value || [], day.date]);
+    }
+  }, [onChange, value]);
+  const statePerMonthWithSelectedDate = useMemo(() => {
+    if (!value) {
+      return statePerMonth;
+    }
+    return value.reduce((stateSum, date) => addDayStateHighlights(stateSum, date, ["selected"]), statePerMonth);
+  }, [statePerMonth, value]);
+  return {
+    onClickDay,
+    statePerMonth: statePerMonthWithSelectedDate,
+    currentPanel,
+    setCurrentPanel,
+    dateInFocus,
+    setDateInFocus
+  };
+};
+function MultiDateCalendar(props) {
+  const selectionProps = useMultiDateSelection(props);
+  return /* @__PURE__ */ jsx(CalendarWithMonthSwitcher, {
+    ...props,
+    ...selectionProps
+  });
 }
-
-var useSingleWeekSelection = function (_a) {
-    var onChange = _a.onChange, value = _a.value, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
-    var _b = useState(function () {
-        var week = getWeekDataFromWeekString(value);
-        if (!week) {
-            return new Date();
-        }
-        return week.days[0].date;
-    }), dateInFocus = _b[0], setDateInFocus = _b[1];
-    var _c = useInternalPanelState(onChangePanel), currentPanel = _c.currentPanel, setCurrentPanel = _c.setCurrentPanel;
-    var onClickDay = useCallback(function (day) {
-        if (onChange) {
-            onChange(getWeekStringFromWeekData(getWeekForDate(day.date)));
-        }
-    }, [onChange]);
-    var onClickWeek = useCallback(function (week) {
-        if (onChange) {
-            onChange(getWeekStringFromWeekData(week));
-        }
-    }, [onChange]);
-    var statePerMonthWithSelection = useMemo(function () {
-        var weekData = getWeekDataFromWeekString(value);
-        return weekData
-            ? addWeekRangeHighlights(statePerMonth, weekData)
-            : statePerMonth;
-    }, [value, statePerMonth]);
-    var date = useMemo(function () {
-        var week = getWeekDataFromWeekString(value);
-        if (!week) {
-            return new Date();
-        }
-        return week.days[0].date;
-    }, [value]);
-    return {
-        statePerMonth: statePerMonthWithSelection,
-        date: date,
-        dateInFocus: dateInFocus,
-        setDateInFocus: setDateInFocus,
-        onClickDay: onClickDay,
-        onClickWeek: onClickWeek,
-        currentPanel: currentPanel,
-        setCurrentPanel: setCurrentPanel,
-    };
-};
-var getWeekStringFromWeekData = function (week) {
-    if (!week) {
-        return undefined;
-    }
-    return "".concat(week.endYear, "-").concat(week.weekNumber);
-};
-var getWeekDataFromWeekString = function (week) {
-    if (!week) {
-        return undefined;
-    }
-    var parts = week.split("-");
-    var weekNumber = parseInt(parts[1], 10);
-    var year = parseInt(parts[0], 10);
-    return getWeekForDate(getStartDateOfISOWeek(weekNumber, year));
-};
-
-function SingleWeekCalendar(props) {
-    var singleWeekSelectionProps = useSingleWeekSelection(props);
-    return (React.createElement(CalendarWithMonthSwitcher, __assign({}, props, singleWeekSelectionProps)));
+const useSingleWeekSelection = ({
+  onChange,
+  value,
+  statePerMonth,
+  onChangePanel
+}) => {
+  const [dateInFocus, setDateInFocus] = useState(() => {
+    const week = getWeekDataFromWeekString(value);
+    if (!week) {
+      return new Date();
+    }
+    return week.days[0].date;
+  });
+  const { currentPanel, setCurrentPanel } = useInternalPanelState(onChangePanel);
+  const onClickDay = useCallback((day) => {
+    if (onChange) {
+      onChange(getWeekStringFromWeekData(getWeekForDate(day.date)));
+    }
+  }, [onChange]);
+  const onClickWeek = useCallback((week) => {
+    if (onChange) {
+      onChange(getWeekStringFromWeekData(week));
+    }
+  }, [onChange]);
+  const statePerMonthWithSelection = useMemo(() => {
+    const weekData = getWeekDataFromWeekString(value);
+    return weekData ? addWeekRangeHighlights(statePerMonth, weekData) : statePerMonth;
+  }, [value, statePerMonth]);
+  const date = useMemo(() => {
+    const week = getWeekDataFromWeekString(value);
+    if (!week) {
+      return new Date();
+    }
+    return week.days[0].date;
+  }, [value]);
+  return {
+    statePerMonth: statePerMonthWithSelection,
+    date,
+    dateInFocus,
+    setDateInFocus,
+    onClickDay,
+    onClickWeek,
+    currentPanel,
+    setCurrentPanel
+  };
+};
+const getWeekStringFromWeekData = (week) => {
+  if (!week) {
+    return void 0;
+  }
+  return `${week.endYear}-${week.weekNumber}`;
+};
+const getWeekDataFromWeekString = (week) => {
+  if (!week) {
+    return void 0;
+  }
+  const parts = week.split("-");
+  const weekNumber = parseInt(parts[1], 10);
+  const year = parseInt(parts[0], 10);
+  return getWeekForDate(getStartDateOfISOWeek(weekNumber, year));
+};
+function SingleWeekCalendar(props) {
+  const singleWeekSelectionProps = useSingleWeekSelection(props);
+  return /* @__PURE__ */ jsx(CalendarWithMonthSwitcher, {
+    ...props,
+    ...singleWeekSelectionProps
+  });
 }
-
-var removeDateIfExist = function (list, date) {
-    return list.filter(function (item) { return !isSameDay(item, date); });
-};
-var listContainsDate = function (list, date) {
-    return !!list.find(function (item) { return isSameDay(item, date); });
-};
-
-var useDateRangeExclusionSelection = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, statePerMonth = _a.statePerMonth, onChangePanel = _a.onChangePanel;
-    var _b = useState(), dateRange = _b[0], setDateRange = _b[1];
-    var _c = useState("startDate"), focusedInput = _c[0], setFocusedInput = _c[1];
-    var _d = useInternalPanelState(onChangePanel), currentPanel = _d.currentPanel, setCurrentPanel = _d.setCurrentPanel;
-    var _e = useState(function () { var _a; return (_a = (focusedInput && (value === null || value === void 0 ? void 0 : value[focusedInput]))) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _e[0], setDateInFocus = _e[1];
-    var onChangeHandler = useCallback(function (value) {
-        setDateRange(value);
-        var startDate = value.startDate, endDate = value.endDate;
-        if (onValueChange) {
-            if (startDate && endDate) {
-                var dates = eachDayOfInterval({ start: startDate, end: endDate });
-                onValueChange(dates);
-            }
-            else if (startDate) {
-                onValueChange([startDate]);
-            }
-            else if (endDate) {
-                onValueChange([endDate]);
-            }
-        }
-    }, [onValueChange]);
-    var onClickDayRange = useDateRangeOnClickDayHandler(dateRange, onChangeHandler, focusedInput, setFocusedInput);
-    var onClickDay = useCallback(function (day, userData, ev) {
-        if (onValueChange) {
-            if (ev.ctrlKey || ev.metaKey) {
-                if (!value) {
-                    onValueChange([day.date]);
-                }
-                else if (listContainsDate(value, day.date)) {
-                    onValueChange(removeDateIfExist(value, day.date));
-                }
-                else {
-                    onValueChange(__spreadArray(__spreadArray([], value, true), [day.date], false));
-                }
-            }
-            else {
-                onClickDayRange(day, userData, ev);
-            }
-        }
-    }, [onValueChange, onClickDayRange, value]);
-    var statePerMonthWithSelectedDate = useMemo(function () {
-        return addHighlighting(statePerMonth, value);
-    }, [statePerMonth, value]);
-    return {
-        onClickDay: onClickDay,
-        statePerMonth: statePerMonthWithSelectedDate,
-        currentPanel: currentPanel,
-        setCurrentPanel: setCurrentPanel,
-        dateInFocus: dateInFocus,
-        setDateInFocus: setDateInFocus,
-    };
-};
-var addHighlighting = function (statePerMonth, dateList) {
-    if (!dateList) {
-        return statePerMonth;
-    }
-    return dateList.reduce(function (statePerMonth, date) {
-        return addDayStateHighlights(statePerMonth, date, ["selected"]);
-    }, statePerMonth);
-};
-
-function DateRangeExclusionCalendar(props) {
-    var selectionProps = useDateRangeExclusionSelection(props);
-    return React.createElement(CalendarWithMonthSwitcher, __assign({}, props, selectionProps));
+const removeDateIfExist = (list, date) => list.filter((item) => !isSameDay(item, date));
+const listContainsDate = (list, date) => !!list.find((item) => isSameDay(item, date));
+const useDateRangeExclusionSelection = ({
+  value,
+  onValueChange,
+  statePerMonth,
+  onChangePanel
+}) => {
+  const [dateRange, setDateRange] = useState();
+  const [focusedInput, setFocusedInput] = useState("startDate");
+  const { currentPanel, setCurrentPanel } = useInternalPanelState(onChangePanel);
+  const [dateInFocus, setDateInFocus] = useState(() => {
+    var _a;
+    return (_a = focusedInput && (value == null ? void 0 : value[focusedInput])) != null ? _a : new Date();
+  });
+  const onChangeHandler = useCallback((value2) => {
+    setDateRange(value2);
+    const { startDate, endDate } = value2;
+    if (onValueChange) {
+      if (startDate && endDate) {
+        const dates = eachDayOfInterval({ start: startDate, end: endDate });
+        onValueChange(dates);
+      } else if (startDate) {
+        onValueChange([startDate]);
+      } else if (endDate) {
+        onValueChange([endDate]);
+      }
+    }
+  }, [onValueChange]);
+  const onClickDayRange = useDateRangeOnClickDayHandler(dateRange, onChangeHandler, focusedInput, setFocusedInput);
+  const onClickDay = useCallback((day, userData, ev) => {
+    if (onValueChange) {
+      if (ev.ctrlKey || ev.metaKey) {
+        if (!value) {
+          onValueChange([day.date]);
+        } else if (listContainsDate(value, day.date)) {
+          onValueChange(removeDateIfExist(value, day.date));
+        } else {
+          onValueChange([...value, day.date]);
+        }
+      } else {
+        onClickDayRange(day, userData, ev);
+      }
+    }
+  }, [onValueChange, onClickDayRange, value]);
+  const statePerMonthWithSelectedDate = useMemo(() => {
+    return addHighlighting(statePerMonth, value);
+  }, [statePerMonth, value]);
+  return {
+    onClickDay,
+    statePerMonth: statePerMonthWithSelectedDate,
+    currentPanel,
+    setCurrentPanel,
+    dateInFocus,
+    setDateInFocus
+  };
+};
+const addHighlighting = (statePerMonth, dateList) => {
+  if (!dateList) {
+    return statePerMonth;
+  }
+  return dateList.reduce((statePerMonth2, date) => {
+    return addDayStateHighlights(statePerMonth2, date, ["selected"]);
+  }, statePerMonth);
+};
+function DateRangeExclusionCalendar(props) {
+  const selectionProps = useDateRangeExclusionSelection(props);
+  return /* @__PURE__ */ jsx(CalendarWithMonthSwitcher, {
+    ...props,
+    ...selectionProps
+  });
 }
-
-var defaultPopoverPlacement = "bottom";
-
-var useCalendarPopoverUpdater = function () {
-    var _a = useTippyInstance(), tippyRef = _a[0], tippyInstanceRef = _a[1];
-    var onChangePanel = useCallback(function () {
-        var _a, _b;
-        (_b = (_a = tippyInstanceRef.current) === null || _a === void 0 ? void 0 : _a.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
-    }, [tippyInstanceRef]);
-    return {
-        onChangePanel: onChangePanel,
-        tippyRef: tippyRef,
-    };
-};
-
-var useDateInput = function (onChange, onClose, openOnMount) {
-    var _a = useState(openOnMount || false), showingCalendar = _a[0], setShowingCalendar = _a[1];
-    var showCalendar = useCallback(function () {
-        setShowingCalendar(true);
-        return true;
-    }, [setShowingCalendar]);
-    var hideCalendar = useCallback(function () {
-        setShowingCalendar(false);
-        if (onClose) {
-            onClose();
-        }
-    }, [setShowingCalendar, onClose]);
-    var onSelectDate = useCallback(function (date) {
-        if (onChange) {
-            onChange(date);
-        }
-        setTimeout(hideCalendar, 150);
-    }, [onChange, hideCalendar]);
-    return {
-        showCalendar: showCalendar,
-        hideCalendar: hideCalendar,
-        showingCalendar: showingCalendar,
-        onSelectDate: onSelectDate,
-    };
-};
-
-var defaultMaxDate = "2999-12-31";
-
-var DateInput = function (_a) {
-    var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "Enter date" : _c, value = _a.value, _d = _a.zIndex, zIndex = _d === void 0 ? 100 : _d, _e = _a.calendarTheme, calendarTheme = _e === void 0 ? defaultCalendarTheme : _e, calendarProps = _a.calendarProps, openOnMount = _a.openOnMount, onClose = _a.onClose, onChange = _a.onChange, portalTarget = _a.portalTarget, variant = _a.variant, width = _a.width, minDate = _a.minDate, _f = _a.maxDate, maxDate = _f === void 0 ? defaultMaxDate : _f, disabled = _a.disabled;
-    var _g = useDateInput(onChange, onClose, openOnMount), hideCalendar = _g.hideCalendar, showingCalendar = _g.showingCalendar, onSelectDate = _g.onSelectDate, showCalendar = _g.showCalendar;
-    var _h = useCalendarPopoverUpdater(), tippyRef = _h.tippyRef, onChangePanel = _h.onChangePanel;
-    return (React.createElement(Box, { width: width },
-        React.createElement(Popover, { arrow: false, lazy: true, visible: showingCalendar, onClickOutside: hideCalendar, placement: defaultPopoverPlacement, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", tippyRef: tippyRef, disabled: disabled, content: React.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onSelectDate, value: value, theme: calendarTheme, onChangePanel: onChangePanel, minDate: minDate, maxDate: maxDate })) },
-            React.createElement(TextInput, { type: "date", contentRight: React.createElement(Row, { alignItems: "center" },
-                    React.createElement(FlatButton, { size: "small", disabled: disabled, leftIcon: faCalendarAlt, onClick: showCalendar })), onFocus: showCalendar, onClickRight: showCalendar, value: value ? format(value, displayFormat) : "", placeholder: placeholder, size: 9, disabled: disabled, autoFocus: openOnMount, variant: variant, min: minDate, max: maxDate }))));
-};
-
-var useDateRangeInput = function (value, onValueChange) {
-    var startDateInputRef = useRef(null);
-    var endDateInputRef = useRef(null);
-    var _a = useState(false), showingCalendar = _a[0], setShowingCalendar = _a[1];
-    var _b = useState(undefined), focusedInput = _b[0], setFocusedInput = _b[1];
-    var showCalendarStartDate = useCallback(function () {
-        setFocusedInput("startDate");
-        setShowingCalendar(true);
-        return true;
-    }, [setFocusedInput, setShowingCalendar]);
-    var showCalendarEndDate = useCallback(function () {
-        setFocusedInput("endDate");
-        setShowingCalendar(true);
-        return true;
-    }, [setFocusedInput, setShowingCalendar]);
-    var hideCalendar = useCallback(function () {
-        setShowingCalendar(false);
-    }, [setShowingCalendar]);
-    var onClickDay = useCallback(function (day) {
-        if (focusedInput === "startDate") {
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                startDate: day.date,
-                endDate: value === null || value === void 0 ? void 0 : value.endDate,
-            });
-            if (!(value === null || value === void 0 ? void 0 : value.endDate)) {
-                setFocusedInput("endDate");
-                endDateInputRef.current && endDateInputRef.current.focus();
-            }
-            else {
-                setTimeout(hideCalendar, 150);
-            }
-        }
-        else if (focusedInput === "endDate") {
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                startDate: value === null || value === void 0 ? void 0 : value.startDate,
-                endDate: day.date,
-            });
-            if (!(value === null || value === void 0 ? void 0 : value.startDate)) {
-                setFocusedInput("startDate");
-                startDateInputRef.current && startDateInputRef.current.focus();
-            }
-            else {
-                setTimeout(hideCalendar, 150);
-            }
-        }
-    }, [focusedInput, onValueChange, setFocusedInput, hideCalendar, value]);
-    var startDateIsAfterEnd = useMemo(function () {
-        return (value === null || value === void 0 ? void 0 : value.startDate) &&
-            (value === null || value === void 0 ? void 0 : value.endDate) &&
-            isAfter(value.startDate, value.endDate);
-    }, [value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate]);
-    return {
-        showingCalendar: showingCalendar,
-        hideCalendar: hideCalendar,
-        showCalendarEndDate: showCalendarEndDate,
-        showCalendarStartDate: showCalendarStartDate,
-        focusedInput: focusedInput,
-        setFocusedInput: setFocusedInput,
-        startDateInputRef: startDateInputRef,
-        endDateInputRef: endDateInputRef,
-        onClickDay: onClickDay,
-        startDateIsAfterEnd: startDateIsAfterEnd,
-    };
-};
-
-/**
- * @deprecated Please use DateRangeDualTextInput instead.
- */
-var DateRangeInput = function (_a) {
-    var _b = _a.displayFormat, displayFormat = _b === void 0 ? DateFormats.fullDate : _b, _c = _a.placeholderStartDate, placeholderStartDate = _c === void 0 ? "Start date" : _c, _d = _a.placeholderEndDate, placeholderEndDate = _d === void 0 ? "End date" : _d, portalTarget = _a.portalTarget, value = _a.value, onValueChange = _a.onValueChange, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, width = _a.width, _f = _a.calendarTheme, calendarTheme = _f === void 0 ? defaultCalendarTheme : _f, calendarProps = _a.calendarProps, minDate = _a.minDate, _g = _a.maxDate, maxDate = _g === void 0 ? defaultMaxDate : _g, disabled = _a.disabled;
-    var _h = useState(function () { var _a; return (_a = (focusedInput && (value === null || value === void 0 ? void 0 : value[focusedInput]))) !== null && _a !== void 0 ? _a : new Date(); }), dateInFocus = _h[0], setDateInFocus = _h[1];
-    var _j = useState("calendar"), currentPanel = _j[0], setCurrentPanel = _j[1];
-    var _k = useDateRangeInput(value, onValueChange), hideCalendar = _k.hideCalendar, showCalendarEndDate = _k.showCalendarEndDate, showCalendarStartDate = _k.showCalendarStartDate, showingCalendar = _k.showingCalendar, focusedInput = _k.focusedInput, startDateInputRef = _k.startDateInputRef, endDateInputRef = _k.endDateInputRef, onClickDay = _k.onClickDay, startDateIsAfterEnd = _k.startDateIsAfterEnd;
-    var statePerMonth = useMemo(function () {
-        return buildDayStateForDateRange(undefined, value === null || value === void 0 ? void 0 : value.startDate, value === null || value === void 0 ? void 0 : value.endDate);
-    }, [value]);
-    return (React.createElement(Popover, { arrow: false, lazy: true, disabled: disabled, visible: showingCalendar, zIndex: zIndex, placement: defaultPopoverPlacement, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", onClickOutside: hideCalendar, content: React.createElement(CalendarWithMonthSwitcher, __assign({}, calendarProps, { dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, statePerMonth: statePerMonth, theme: calendarTheme, onClickDay: onClickDay, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) },
-        React.createElement(Row, { alignItems: "center" },
-            React.createElement(TextInput, { iconLeft: faCalendarAlt$1, onFocus: showCalendarStartDate, value: (value === null || value === void 0 ? void 0 : value.startDate) ? format(value.startDate, displayFormat) : "", placeholder: placeholderStartDate, width: width, disabled: disabled, inputRef: startDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }),
-            React.createElement(Space, null),
-            React.createElement(Icon, { icon: faLongArrowAltRight, color: cssColor("--lhds-color-ui-500"), size: 14 }),
-            React.createElement(Space, null),
-            React.createElement(TextInput, { iconLeft: faCalendarAlt$1, onFocus: showCalendarEndDate, value: (value === null || value === void 0 ? void 0 : value.endDate) ? format(value.endDate, displayFormat) : "", placeholder: placeholderEndDate, width: width, disabled: disabled, inputRef: endDateInputRef, size: 9, variant: startDateIsAfterEnd ? "error" : undefined }))));
-};
-
-var DateTextInput = function (_a) {
-    var calendarProps = _a.calendarProps, _b = _a.closeOnCalendarSelectDate, closeOnCalendarSelectDate = _b === void 0 ? true : _b, _c = _a.dateFormat, dateFormat = _c === void 0 ? DateFormats.fullDate : _c; _a.disableCalender; var onValueChange = _a.onValueChange, _e = _a.placeholder, placeholder = _e === void 0 ? "yyyy-mm-dd" : _e, portalTarget = _a.portalTarget, value = _a.value, _f = _a.width, width = _f === void 0 ? "130px" : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 100 : _g, _h = _a.calendarTheme, calendarTheme = _h === void 0 ? defaultCalendarTheme : _h, _j = _a.hideCalenderIcon, hideCalenderIcon = _j === void 0 ? false : _j, minDate = _a.minDate, _k = _a.maxDate, maxDate = _k === void 0 ? defaultMaxDate : _k, variant = _a.variant, props = __rest(_a, ["calendarProps", "closeOnCalendarSelectDate", "dateFormat", "disableCalender", "onValueChange", "placeholder", "portalTarget", "value", "width", "zIndex", "calendarTheme", "hideCalenderIcon", "minDate", "maxDate", "variant"]);
-    var _l = useState(false), open = _l[0], setOpen = _l[1];
-    var _m = useCalendarPopoverUpdater(), tippyRef = _m.tippyRef, onChangePanel = _m.onChangePanel;
-    var toggleCalendar = useCallback(function () {
-        setOpen(!open);
-    }, [setOpen, open]);
-    var hideCalendar = useCallback(function () {
-        setOpen(false);
-    }, [setOpen]);
-    var onValueChangeHandler = useCallback(function (value) {
-        if (onValueChange) {
-            onValueChange(value);
-        }
-    }, [onValueChange]);
-    var onCalendarSelectDate = useCallback(function (date) {
-        if (date) {
-            onValueChangeHandler(format(date, dateFormat));
-            if (closeOnCalendarSelectDate) {
-                setTimeout(function () { return setOpen(!open); }, 200);
-            }
-        }
-    }, [onValueChangeHandler, dateFormat, closeOnCalendarSelectDate, setOpen, open]);
-    var inValidInput = !!value && !/^[-/\\.0-9]+$/.test(value);
-    var dateIsValid = !!value && isValid(parse(value, dateFormat, new Date()));
-    var userInputCorrectLength = !!value && value.length >= dateFormat.length;
-    var invalid = (userInputCorrectLength && !dateIsValid) || inValidInput;
-    return (React.createElement(Box, { width: width },
-        React.createElement(Popover, { arrow: false, lazy: true, visible: open, zIndex: zIndex, appendTo: portalTarget !== null && portalTarget !== void 0 ? portalTarget : "parent", placement: defaultPopoverPlacement, onClickOutside: hideCalendar, tippyRef: tippyRef, content: React.createElement(SingleDateCalendar, __assign({}, calendarProps, { onChange: onCalendarSelectDate, onChangePanel: onChangePanel, value: value && dateIsValid
-                    ? parse(value, dateFormat, new Date())
-                    : undefined, minDate: minDate, maxDate: maxDate, theme: calendarTheme })) },
-            React.createElement(TextInput, __assign({}, props, { variant: invalid ? "error" : variant, disableContentPaddingRight: true, contentRight: !hideCalenderIcon ? (React.createElement(Row, { alignItems: "center", indent: 0.5 },
-                    React.createElement(FlatButton, { size: "small", disabled: props.disabled, leftIcon: faCalendarAlt$1, onClick: toggleCalendar }))) : undefined, onValueChange: onValueChangeHandler, placeholder: placeholder, value: value || "", min: minDate, max: maxDate, size: 10 })))));
-};
-
-var formatHours = function (hours) {
-    if (hours === "") {
-        return "00";
-    }
-    var h = parseInt(hours, 10);
-    if (isNaN(h)) {
-        throw new Error("Hours is not a number");
-    }
-    if (h < 0 || h > 23) {
-        throw new Error("Hours is an invalid number");
-    }
-    switch (hours.length) {
-        case 1:
-            return "0".concat(h);
-        case 2:
-            return hours;
-        default:
-            throw new Error("Invalid hour string");
-    }
-};
-var formatMinutes = function (minutes) {
-    if (minutes === "") {
-        return "00";
-    }
-    var m = parseInt(minutes, 10);
-    if (isNaN(m)) {
-        throw new Error("Minutes is not a number");
-    }
-    if (m < 0 || m > 59) {
-        throw new Error("Minutes is an invalid number");
-    }
-    switch (minutes.length) {
-        case 1:
-            return "0".concat(m);
-        case 2:
-            return minutes;
-        default:
-            throw new Error("Invalid minute string");
-    }
-};
-var formatTimeString = function (time) {
-    if (!validUserInput(time)) {
-        return { time: time, success: false };
-    }
-    var arr = time && time.split(/-|:|,|;|[/]|[.]| /); // consider all these chars as user input separator
-    if (arr && arr.length === 2) {
-        try {
-            var hours = formatHours(arr[0]);
-            var minutes = formatMinutes(arr[1]);
-            return { time: "".concat(hours, ":").concat(minutes), success: true };
-        }
-        catch (_a) {
-            return { time: time, success: false };
-        }
-    }
-    else if (arr && arr.length === 1) {
-        var hours = 0;
-        var minutes = 0;
-        switch (time.length) {
-            case 1:
-                return { time: "0".concat(time, ":00"), success: true };
-            case 2:
-                var timeNumber = parseInt(arr[0], 10);
-                if (timeNumber >= 0 && timeNumber < 24) {
-                    return { time: "".concat(time, ":00"), success: true };
-                }
-                else if (timeNumber >= 24 && timeNumber < 59) {
-                    return { time: "00:".concat(time), success: true };
-                }
-                return { time: time, success: false };
-            case 3:
-                minutes = parseInt(time.substr(1, 2), 10);
-                if (minutes >= 0 && minutes <= 59) {
-                    return {
-                        time: "0".concat(time.substr(0, 1), ":").concat(time.substr(1, 2)),
-                        success: true,
-                    };
-                }
-                return { time: time, success: false };
-            case 4:
-                hours = parseInt(time.substr(0, 2), 10);
-                minutes = parseInt(time.substr(2, 2), 10);
-                if (hours < 0 || hours > 23) {
-                    return { time: time, success: false };
-                }
-                if (minutes < 0 || minutes > 59) {
-                    return { time: time, success: false };
-                }
-                return {
-                    time: "".concat(time.substr(0, 2), ":").concat(time.substr(2, 2)),
-                    success: true,
-                };
-            default:
-                return { time: time, success: false };
-        }
-    }
-    return { time: time, success: false };
-};
-var validUserInput = function (input) {
-    if (input) {
-        return /^[-:.,/; 0-9]+$/.test(input);
-    }
-    return true;
-};
-
-/**
- * @deprecated
- */
-var TimeTextInput = function (_a) {
-    var onValueChange = _a.onValueChange, _b = _a.showPlaceholder, showPlaceholder = _b === void 0 ? true : _b, _c = _a.useIcon, useIcon = _c === void 0 ? true : _c, value = _a.value, _d = _a.width, width = _d === void 0 ? "85px" : _d, variant = _a.variant, props = __rest(_a, ["onValueChange", "showPlaceholder", "useIcon", "value", "width", "variant"]);
-    var _e = useState(function () { return validUserInput(value); }), valid = _e[0], setValid = _e[1];
-    var timeFormat = "hh:mm";
-    var onBlur = useCallback(function () {
-        if (value) {
-            var formattedResult = formatTimeString(value);
-            setValid(formattedResult.success);
-            if (formattedResult.success) {
-                if (onValueChange) {
-                    onValueChange(formattedResult.time);
-                }
-            }
-        }
-    }, [value, onValueChange, setValid]);
-    var onChangeHandler = useCallback(function (ev) {
-        var time = ev.target.value;
-        var validInput = validUserInput(time);
-        setValid(validInput && time.length <= timeFormat.length);
-        if (onValueChange) {
-            onValueChange(time);
-        }
-    }, [onValueChange, setValid]);
-    return (React.createElement(TextInput, __assign({}, props, { type: "time", variant: !valid ? "error" : variant, iconLeft: useIcon ? faClock : undefined, value: value, placeholder: showPlaceholder ? timeFormat : undefined, onChange: onChangeHandler, onBlur: onBlur, width: width })));
-};
-
-var DualTextInput = function (_a) {
-    var autoFocusLeft = _a.autoFocusLeft, autoFocusRight = _a.autoFocusRight, onEsc = _a.onEsc, onEnter = _a.onEnter, onValueChangeLeft = _a.onValueChangeLeft, onValueChangeRight = _a.onValueChangeRight, separatorIcon = _a.separatorIcon, placeholderLeft = _a.placeholderLeft, placeholderRight = _a.placeholderRight, typeLeft = _a.typeLeft, typeRight = _a.typeRight, onChangeLeft = _a.onChangeLeft, onChangeRight = _a.onChangeRight, valueLeft = _a.valueLeft, valueRight = _a.valueRight, minLeft = _a.minLeft, maxLeft = _a.maxLeft, minRight = _a.minRight, maxRight = _a.maxRight, onClickLeft = _a.onClickLeft, onClickRight = _a.onClickRight, onClickCalendar = _a.onClickCalendar, onClickArrowDown = _a.onClickArrowDown, onBlurLeft = _a.onBlurLeft, onBlurRight = _a.onBlurRight, onFocusLeft = _a.onFocusLeft, onFocusRight = _a.onFocusRight, inputRefLeft = _a.inputRefLeft, inputRefRight = _a.inputRefRight, variant = _a.variant, variantLeft = _a.variantLeft, variantRight = _a.variantRight, onBlur = _a.onBlur, showPresets = _a.showPresets, widthLeft = _a.widthLeft, widthRight = _a.widthRight, disabled = _a.disabled;
-    var focusCounter = useRef(0);
-    var tryTriggerOnBlur = useMemo(function () {
-        return debounce(function (focusCounter) {
-            if (focusCounter === 0) {
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-            }
-        }, 10);
-    }, [onBlur]);
-    var focusLeftHandler = useCallback(function (ev) {
-        focusCounter.current++;
-        tryTriggerOnBlur(focusCounter.current);
-        if (onFocusLeft) {
-            onFocusLeft(ev);
-        }
-    }, [onFocusLeft, focusCounter, tryTriggerOnBlur]);
-    var focusRightHandler = useCallback(function (ev) {
-        focusCounter.current++;
-        tryTriggerOnBlur(focusCounter.current);
-        if (onFocusRight) {
-            onFocusRight(ev);
-        }
-    }, [onFocusRight, focusCounter, tryTriggerOnBlur]);
-    var blurLeftHandler = useCallback(function (ev) {
-        focusCounter.current--;
-        tryTriggerOnBlur(focusCounter.current);
-        if (onBlurLeft) {
-            onBlurLeft(ev);
-        }
-    }, [onBlurLeft, focusCounter, tryTriggerOnBlur]);
-    var blurRightHandler = useCallback(function (ev) {
-        focusCounter.current--;
-        tryTriggerOnBlur(focusCounter.current);
-        if (onBlurRight) {
-            onBlurRight(ev);
-        }
-    }, [onBlurRight, focusCounter, tryTriggerOnBlur]);
-    return (React.createElement(Box, null,
-        React.createElement(TextInputBox, { disableContentPaddingRight: true, disabled: disabled, variant: variant, contentRight: React.createElement(Row, { alignItems: "center" },
-                React.createElement(Indent, { num: 0.5 },
-                    React.createElement(FlatButton, { leftIcon: faCalendarAlt, onClick: onClickCalendar, disabled: disabled, size: "small" })),
-                showPresets ? (React.createElement(React.Fragment, null,
-                    React.createElement(Row, { height: "22px" },
-                        React.createElement(SeparatorLine, { vertical: true })),
-                    React.createElement(Indent, { num: 0.5 },
-                        React.createElement(FlatButton, { leftIcon: faAngleDown, onClick: onClickArrowDown, disabled: disabled, size: "small" })))) : null) },
-            React.createElement(Box, { width: widthLeft },
-                React.createElement(TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickLeft, disabled: disabled, hideBorder: true, placeholder: placeholderLeft, value: valueLeft, onValueChange: onValueChangeLeft, onChange: onChangeLeft, onBlur: blurLeftHandler, onFocus: focusLeftHandler, inputRef: inputRefLeft, variant: variantLeft, type: typeLeft, autoFocus: autoFocusLeft, min: minLeft, max: maxLeft })),
-            React.createElement(Row, { indent: 0.5, alignItems: "center", justifyContent: "center" },
-                React.createElement(Icon, { icon: separatorIcon, size: 12, color: cssColor("--lhds-color-ui-500") })),
-            React.createElement(Box, { width: widthRight },
-                React.createElement(TextInput, { onEsc: onEsc, onEnter: onEnter, onClick: onClickRight, disabled: disabled, hideBorder: true, placeholder: placeholderRight, value: valueRight, onValueChange: onValueChangeRight, onChange: onChangeRight, onBlur: blurRightHandler, onFocus: focusRightHandler, inputRef: inputRefRight, variant: variantRight, type: typeRight, autoFocus: autoFocusRight, min: minRight, max: maxRight })))));
-};
-
-var transformTimeStringToNumber = function (time) {
-    if (time == null) {
-        throw new Error("Time is not set.");
-    }
-    if (time === "") {
-        throw new Error("Time is empty.");
-    }
-    var parts = time.split(":");
-    if (parts.length !== 2) {
-        throw new Error("Invalid time.");
-    }
-    if (parts[1].length !== 2) {
-        throw new Error("Invalid time.");
-    }
-    if (parts[0].length < 1 || parts[0].length > 2) {
-        throw new Error("Invalid time.");
-    }
-    var hours = parseInt(parts[0], 10);
-    var minutes = parseInt(parts[1], 10);
-    if (isNaN(hours)) {
-        throw new Error("Invalid time.");
-    }
-    if (isNaN(minutes)) {
-        throw new Error("Invalid time.");
-    }
-    if (hours < 0 || hours > 23) {
-        throw new Error("Invalid time.");
-    }
-    if (minutes < 0 || minutes > 59) {
-        throw new Error("Invalid time.");
-    }
-    return hours * 100 + minutes;
-};
-var isValidTimeString = function (time) {
-    try {
-        transformTimeStringToNumber(time);
-        return true;
-    }
-    catch (e) {
-        return false;
-    }
-};
-var getHoursAndMinutesFromTimeString = function (value) {
-    if (value && isValidTimeString(value)) {
-        var p = value.split(":");
-        return {
-            hour: parseIntElseUndefined(p[0]),
-            minute: parseIntElseUndefined(p[1]),
-        };
-    }
-    return {
-        hour: undefined,
-        minute: undefined,
-    };
-};
-var transformTimeInDateToTimeString = function (date) {
-    return "".concat(formatHours(String(date.getHours())), ":").concat(formatMinutes(String(date.getMinutes())));
-};
-
-var css_248z = ".TimePicker-module_timePicker__1ElGu {\n  overflow: hidden;\n  width: 180px;\n}\n\n.TimePicker-module_timePickerColumn__2vfuE {\n  overflow-y: hidden;\n  flex: 1;\n}\n\n.TimePicker-module_timePickerColumn__2vfuE:hover {\n    overflow-y: scroll;\n  }\n";
-var styles = {"timePicker":"TimePicker-module_timePicker__1ElGu","timePickerColumn":"TimePicker-module_timePickerColumn__2vfuE"};
-styleInject(css_248z);
-
-var TimePickerCell = function (_a) {
-    var onClick = _a.onClick, item = _a.item, selected = _a.selected, columnRef = _a.columnRef, canScrollRef = _a.canScrollRef;
-    var ref = useRef(null);
-    useEffect(function scrollToSelectedItem() {
-        if (selected &&
-            columnRef.current &&
-            ref.current &&
-            canScrollRef.current) {
-            var targetScroll = ref.current.scrollHeight * Math.max(item - 2, 0);
-            columnRef.current.scrollTo(0, targetScroll);
-            canScrollRef.current = false;
-        }
-    }, [columnRef, item, selected, canScrollRef]);
-    return (React.createElement(Row, { width: "64px", justifyContent: "center", spacing: 0.5, indent: 0.5, ref: ref }, selected ? (React.createElement(PrimaryButton, { label: String(item), onClick: function () { return onClick && onClick(item); } })) : (React.createElement(FlatButton, { label: String(item), onClick: function () { return onClick && onClick(item); } }))));
-};
-
-var TimePickerColumn = function (_a) {
-    var onClick = _a.onClick, items = _a.items, selectedItem = _a.selectedItem, canScrollRef = _a.canScrollRef;
-    var columnRef = useRef(null);
-    return (React.createElement(Column, { className: styles.timePickerColumn, ref: columnRef }, items.map(function (item) { return (React.createElement(TimePickerCell, { key: item, item: item, onClick: onClick, selected: item === selectedItem, columnRef: columnRef, canScrollRef: canScrollRef })); })));
-};
-
-var hours = range(0, 24);
-var minutes = range(0, 60);
-var TimePicker = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange;
-    var canScrollRef = useRef(true);
-    var _b = useState(undefined), hour = _b[0], setHour = _b[1];
-    var _c = useState(undefined), minute = _c[0], setMinute = _c[1];
-    useEffect(function () {
-        if (value) {
-            var _a = getHoursAndMinutesFromTimeString(value), minute_1 = _a.minute, hour_1 = _a.hour;
-            setHour(hour_1);
-            setMinute(minute_1);
-        }
-    }, [value]);
-    var onClickHour = useCallback(function (h) {
-        setHour(h);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("".concat(formatHours(String(h !== null && h !== void 0 ? h : 0)), ":").concat(formatMinutes(String(minute !== null && minute !== void 0 ? minute : 0))));
-    }, [minute, onValueChange]);
-    var onClickMinutes = useCallback(function (m) {
-        setMinute(m);
-        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange("".concat(formatHours(String(hour !== null && hour !== void 0 ? hour : 0)), ":").concat(formatMinutes(String(m !== null && m !== void 0 ? m : 0))));
-    }, [hour, onValueChange]);
-    return (React.createElement(Row, { className: styles.timePicker },
-        React.createElement(TimePickerColumn, { items: hours, onClick: onClickHour, selectedItem: hour, canScrollRef: canScrollRef }),
-        React.createElement(Indent, null),
-        React.createElement(TimePickerColumn, { items: minutes, onClick: onClickMinutes, selectedItem: minute, canScrollRef: canScrollRef })));
-};
-
-var useDateRangeEffects$1 = function (date, setDateInFocus, dateInputRef) {
-    useEffect(function moveFocusedDateWhenDateChanges() {
-        if (date) {
-            setDateInFocus(date);
-        }
-    }, [date, setDateInFocus]);
-    useEffect(function updateDateFieldWhenValueChanges() {
-        if (dateInputRef.current) {
-            if (date) {
-                dateInputRef.current.valueAsDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
-            }
-            else {
-                dateInputRef.current.valueAsDate = null;
-            }
-        }
-    }, [date, dateInputRef]);
-};
-
-var useDateRangeHandlers$1 = function (date, onValueChange, _a, dateInputRef) {
-    var setDateInFocus = _a.setDateInFocus, showCalendarInternal = _a.showCalendarInternal, hideCalendarInternal = _a.hideCalendarInternal, setFirstFocusedInput = _a.setFirstFocusedInput, setCurrentPanel = _a.setCurrentPanel, localTime = _a.localTime, setLocalTime = _a.setLocalTime, localDate = _a.localDate, setLocalDate = _a.setLocalDate;
-    var onChangeDate = useCallback(function (incomingDate) {
-        if (!incomingDate) {
-            return;
-        }
-        var newDate = new Date(incomingDate);
-        if (date) {
-            // Full date is available
-            newDate.setHours(date.getHours());
-            newDate.setMinutes(date.getMinutes());
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newDate);
-            setLocalDate(undefined);
-        }
-        else if (localTime) {
-            // Only time has been selected
-            var _a = getHoursAndMinutesFromTimeString(localTime), minute = _a.minute, hour = _a.hour;
-            newDate.setHours(hour !== null && hour !== void 0 ? hour : 0);
-            newDate.setMinutes(minute !== null && minute !== void 0 ? minute : 0);
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newDate);
-            setLocalDate(undefined);
-        }
-        else {
-            // Nothing has been selected
-            setLocalDate(newDate);
-        }
-        setDateInFocus(newDate);
-        if (dateInputRef.current) {
-            dateInputRef.current.valueAsDate = newDate;
-        }
-    }, [date, dateInputRef, localTime, onValueChange, setDateInFocus, setLocalDate]);
-    var onChangeTime = useCallback(function (time) {
-        if (!time) {
-            return;
-        }
-        if (date) {
-            // Full date is available
-            var newTime = getHoursAndMinutesFromTimeString(time);
-            var newDate = new Date(date);
-            newDate.setHours(newTime.hour || 0);
-            newDate.setMinutes(newTime.minute || 0);
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newDate);
-            setLocalTime(undefined);
-        }
-        else if (localDate) {
-            // Only date has already been selected
-            var newTime = getHoursAndMinutesFromTimeString(time);
-            var newDate = new Date(localDate);
-            newDate.setHours(newTime.hour || 0);
-            newDate.setMinutes(newTime.minute || 0);
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newDate);
-            setLocalTime(undefined);
-        }
-        else {
-            // Nothing has been selected
-            setLocalTime(time);
-        }
-    }, [onValueChange, date, localDate, setLocalTime]);
-    var inputLeftChangeHandler = useCallback(function (ev) {
-        if (ev.target.value[0] !== "0") {
-            onChangeDate(ev.target.valueAsDate);
-        }
-    }, [onChangeDate]);
-    var inputRightChangeHandler = useCallback(function (ev) { return onChangeTime(ev.target.value); }, [onChangeTime]);
-    var showCalendar = useCallback(function () {
-        if (date) {
-            setDateInFocus(date);
-        }
-        else {
-            setDateInFocus(new Date());
-        }
-        setCurrentPanel("calendar");
-        showCalendarInternal();
-    }, [date, setCurrentPanel, showCalendarInternal, setDateInFocus]);
-    var hideCalendar = useCallback(function () {
-        setFirstFocusedInput(undefined);
-        hideCalendarInternal();
-    }, [setFirstFocusedInput, hideCalendarInternal]);
-    return {
-        inputLeftChangeHandler: inputLeftChangeHandler,
-        inputRightChangeHandler: inputRightChangeHandler,
-        hideCalendar: hideCalendar,
-        showCalendar: showCalendar,
-        onChangeTime: onChangeTime,
-        onChangeDate: onChangeDate,
-    };
-};
-
-var useInputStates$1 = function (date) {
-    var _a = useState(undefined), localDate = _a[0], setLocalDate = _a[1];
-    var _b = useState(undefined), localTime = _b[0], setLocalTime = _b[1];
-    var _c = useBoolean(false), isCalendarVisible = _c[0], showCalendarInternal = _c[1], hideCalendarInternal = _c[2];
-    var _d = useBoolean(false), isTimePickerVisible = _d[0], showTimePicker = _d[1], hideTimePicker = _d[2];
-    var _e = useState(undefined), firstFocusedInput = _e[0], setFirstFocusedInput = _e[1];
-    var _f = useState(function () { return date !== null && date !== void 0 ? date : new Date(); }), dateInFocus = _f[0], setDateInFocus = _f[1];
-    var _g = useState("calendar"), currentPanel = _g[0], setCurrentPanel = _g[1];
-    return {
-        isCalendarVisible: isCalendarVisible,
-        showCalendarInternal: showCalendarInternal,
-        hideCalendarInternal: hideCalendarInternal,
-        firstFocusedInput: firstFocusedInput,
-        setFirstFocusedInput: setFirstFocusedInput,
-        dateInFocus: dateInFocus,
-        setDateInFocus: setDateInFocus,
-        currentPanel: currentPanel,
-        setCurrentPanel: setCurrentPanel,
-        isTimePickerVisible: isTimePickerVisible,
-        showTimePicker: showTimePicker,
-        hideTimePicker: hideTimePicker,
-        localDate: localDate,
-        setLocalDate: setLocalDate,
-        localTime: localTime,
-        setLocalTime: setLocalTime,
-    };
-};
-
-var useUserInputHandlers$1 = function (onChangeDate, dateInputRef, showCalendar, hideCalendar, _a) {
-    var isCalendarVisible = _a.isCalendarVisible, setCurrentPanel = _a.setCurrentPanel, showTimePicker = _a.showTimePicker, hideTimePicker = _a.hideTimePicker;
-    var onFocusLeft = useCallback(function () {
-        if (!isCalendarVisible) {
-            showCalendar();
-        }
-        setCurrentPanel("calendar");
-        hideTimePicker();
-    }, [hideTimePicker, isCalendarVisible, setCurrentPanel, showCalendar]);
-    var onFocusRight = useCallback(function () {
-        hideCalendar();
-        showTimePicker();
-    }, [hideCalendar, showTimePicker]);
-    var onClickDay = useCallback(function (day) {
-        onChangeDate(day.date);
-        hideCalendar();
-        showTimePicker();
-    }, [onChangeDate, hideCalendar, showTimePicker]);
-    var onClickArrowButton = useCallback(function () {
-        setCurrentPanel("presets");
-        showCalendar();
-    }, [setCurrentPanel, showCalendar]);
-    var onClickCalendarButton = useCallback(function () {
-        var _a;
-        if (isCalendarVisible) {
-            hideCalendar();
-        }
-        else {
-            (_a = dateInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            setCurrentPanel("calendar");
-            showCalendar();
-        }
-    }, [
-        isCalendarVisible,
-        hideCalendar,
-        dateInputRef,
-        setCurrentPanel,
-        showCalendar,
-    ]);
-    var onKeyDownHandler = useCallback(function (ev) {
-        if (ev.key === "Escape") {
-            hideCalendar();
-        }
-    }, [hideCalendar]);
-    return {
-        onFocusLeft: onFocusLeft,
-        onFocusRight: onFocusRight,
-        onClickDay: onClickDay,
-        onClickArrowButton: onClickArrowButton,
-        onClickCalendarButton: onClickCalendarButton,
-        onKeyDownHandler: onKeyDownHandler,
-    };
-};
-
-var DateTimeInput = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, onEnter = _a.onEnter, onEsc = _a.onEsc, onBlur = _a.onBlur, autoFocus = _a.autoFocus, minDate = _a.minDate, _b = _a.widthLeft, widthLeft = _b === void 0 ? 128 : _b, _c = _a.widthRight, widthRight = _c === void 0 ? 80 : _c, _d = _a.maxDate, maxDate = _d === void 0 ? defaultMaxDate : _d, variant = _a.variant, disabled = _a.disabled;
-    var dateInputRef = useRef(null);
-    var timeInputRef = useRef(null);
-    var states = useInputStates$1(value);
-    var setCurrentPanel = states.setCurrentPanel, currentPanel = states.currentPanel, isCalendarVisible = states.isCalendarVisible, dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isTimePickerVisible = states.isTimePickerVisible, hideTimePicker = states.hideTimePicker, localTime = states.localTime, localDate = states.localDate;
-    var _e = useDateRangeHandlers$1(value, onValueChange, states, dateInputRef), showCalendar = _e.showCalendar, hideCalendar = _e.hideCalendar, inputLeftChangeHandler = _e.inputLeftChangeHandler, inputRightChangeHandler = _e.inputRightChangeHandler, onChangeTime = _e.onChangeTime, onChangeDate = _e.onChangeDate;
-    var _f = useUserInputHandlers$1(onChangeDate, dateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _f.onKeyDownHandler, onFocusRight = _f.onFocusRight, onFocusLeft = _f.onFocusLeft, onClickDay = _f.onClickDay, onClickCalendarButton = _f.onClickCalendarButton, onClickArrowButton = _f.onClickArrowButton;
-    useDateRangeEffects$1(value, setDateInFocus, dateInputRef);
-    var statePerMonth = useMemo(function () {
-        var dateToHighlight = value || localDate;
-        if (!dateToHighlight) {
-            return {};
-        }
-        return addDayStateHighlights(undefined, dateToHighlight, [
-            "singleSelected",
-            "selected",
-        ]);
-    }, [localDate, value]);
-    var hideAll = useCallback(function () {
-        hideCalendar();
-        hideTimePicker();
-    }, [hideCalendar, hideTimePicker]);
-    var timeValue = useMemo(function () { return (value ? transformTimeInDateToTimeString(value) : localTime); }, [value, localTime]);
-    var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
-    var delayedIsTimePickerVisible = useDelayedFalse(isTimePickerVisible, 300);
-    return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
-        React.createElement(Popover, { arrow: false, lazy: true, disabled: disabled, placement: defaultPopoverPlacement, visible: isCalendarVisible || isTimePickerVisible, onClickOutside: hideAll, content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && (React.createElement(Column, null, delayedIsCalendarVisible ? (React.createElement(CalendarWithMonthSwitcher, { statePerMonth: statePerMonth, onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate })) : delayedIsTimePickerVisible ? (React.createElement(Column, null,
-                React.createElement(Column, { overflow: "hidden", height: "250px" },
-                    React.createElement(TimePicker, { value: timeValue !== null && timeValue !== void 0 ? timeValue : "", onValueChange: onChangeTime })),
-                React.createElement(Space, null),
-                React.createElement(Row, { justifyContent: "flex-end" },
-                    React.createElement(PrimaryButton, { label: "Done", onClick: hideTimePicker })))) : null)) },
-            React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, disabled: disabled, separatorIcon: faClock$1, typeLeft: "date", typeRight: "time", placeholderLeft: "yyyy-mm-dd", placeholderRight: "hh:mm", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: dateInputRef, inputRefRight: timeInputRef, valueRight: timeValue !== null && timeValue !== void 0 ? timeValue : "", widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, variant: variant }))));
-};
-
-var useDateRangeEffects = function (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) {
-    useEffect(function moveFocusedDateWhenStartDateChanges() {
-        if (startDate) {
-            setDateInFocus(startDate);
-        }
-    }, [startDate, setDateInFocus]);
-    useEffect(function moveFocusedDateWhenEndDateChanges() {
-        if (endDate) {
-            setDateInFocus(endDate);
-        }
-    }, [endDate, setDateInFocus]);
-    useEffect(function updateStartDateFieldWhenValueChanges() {
-        if (startDateInputRef.current) {
-            if (startDate) {
-                startDateInputRef.current.valueAsDate = new Date(Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()));
-            }
-            else {
-                startDateInputRef.current.valueAsDate = null;
-            }
-        }
-    }, [startDate, startDateInputRef]);
-    useEffect(function updateEndDateFieldWhenValueChanges() {
-        if (endDateInputRef.current) {
-            if (endDate) {
-                endDateInputRef.current.valueAsDate = new Date(Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate()));
-            }
-            else {
-                endDateInputRef.current.valueAsDate = null;
-            }
-        }
-    }, [endDate, endDateInputRef]);
-};
-
-var useDateRangeHandlers = function (startDate, endDate, onValueChange, _a) {
-    var setDateInFocus = _a.setDateInFocus, showCalendarInternal = _a.showCalendarInternal, hideCalendarInternal = _a.hideCalendarInternal, setFirstFocusedInput = _a.setFirstFocusedInput, setCurrentPanel = _a.setCurrentPanel;
-    var inputLeftChangeHandler = useCallback(function (ev) {
-        var _a;
-        if (ev.target.value[0] !== "0") {
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                startDate: (_a = ev.target.valueAsDate) !== null && _a !== void 0 ? _a : undefined,
-                endDate: endDate,
-            });
-        }
-    }, [onValueChange, endDate]);
-    var inputRightChangeHandler = useCallback(function (ev) {
-        var _a;
-        if (ev.target.value[0] !== "0") {
-            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                startDate: startDate,
-                endDate: (_a = ev.target.valueAsDate) !== null && _a !== void 0 ? _a : undefined,
-            });
-        }
-    }, [onValueChange, startDate]);
-    var showCalendar = useCallback(function () {
-        if (startDate) {
-            setDateInFocus(startDate);
-        }
-        else if (endDate) {
-            setDateInFocus(endDate);
-        }
-        else {
-            setDateInFocus(new Date());
-        }
-        setCurrentPanel("calendar");
-        showCalendarInternal();
-    }, [
-        startDate,
-        endDate,
-        setCurrentPanel,
-        showCalendarInternal,
-        setDateInFocus,
-    ]);
-    var hideCalendar = useCallback(function () {
-        setFirstFocusedInput(undefined);
-        hideCalendarInternal();
-    }, [setFirstFocusedInput, hideCalendarInternal]);
-    return {
-        inputLeftChangeHandler: inputLeftChangeHandler,
-        inputRightChangeHandler: inputRightChangeHandler,
-        hideCalendar: hideCalendar,
-        setDateInFocus: setDateInFocus,
-        setCurrentPanel: setCurrentPanel,
-        showCalendar: showCalendar,
-    };
-};
-
-var useInputStates = function (startDate, endDate) {
-    var _a = useBoolean(false), isCalendarVisible = _a[0], showCalendarInternal = _a[1], hideCalendarInternal = _a[2];
-    var _b = useState(undefined), firstFocusedInput = _b[0], setFirstFocusedInput = _b[1];
-    var _c = useState("startDate"), focusedInput = _c[0], setFocusedInput = _c[1];
-    var _d = useState(function () {
-        var fromValue = focusedInput === "startDate"
-            ? startDate
-            : focusedInput === "endDate"
-                ? endDate
-                : undefined;
-        return fromValue !== null && fromValue !== void 0 ? fromValue : new Date();
-    }), dateInFocus = _d[0], setDateInFocus = _d[1];
-    var _e = useState("calendar"), currentPanel = _e[0], setCurrentPanel = _e[1];
-    return {
-        isCalendarVisible: isCalendarVisible,
-        showCalendarInternal: showCalendarInternal,
-        hideCalendarInternal: hideCalendarInternal,
-        firstFocusedInput: firstFocusedInput,
-        setFirstFocusedInput: setFirstFocusedInput,
-        focusedInput: focusedInput,
-        setFocusedInput: setFocusedInput,
-        dateInFocus: dateInFocus,
-        setDateInFocus: setDateInFocus,
-        currentPanel: currentPanel,
-        setCurrentPanel: setCurrentPanel,
-    };
-};
-
-var useUserInputHandlers = function (startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, _a) {
-    var firstFocusedInput = _a.firstFocusedInput, setFirstFocusedInput = _a.setFirstFocusedInput, isCalendarVisible = _a.isCalendarVisible, setFocusedInput = _a.setFocusedInput, focusedInput = _a.focusedInput, setCurrentPanel = _a.setCurrentPanel;
-    var onFocusLeft = useCallback(function () {
-        if (firstFocusedInput == null) {
-            setFirstFocusedInput("startDate");
-        }
-        setFocusedInput("startDate");
-        if (!isCalendarVisible) {
-            showCalendar();
-        }
-    }, [
-        isCalendarVisible,
-        setFocusedInput,
-        showCalendar,
-        setFirstFocusedInput,
-        firstFocusedInput,
-    ]);
-    var onFocusRight = useCallback(function () {
-        if (firstFocusedInput == null) {
-            setFirstFocusedInput("endDate");
-        }
-        setFocusedInput("endDate");
-        if (!isCalendarVisible) {
-            showCalendar();
-        }
-    }, [
-        isCalendarVisible,
-        setFocusedInput,
-        showCalendar,
-        setFirstFocusedInput,
-        firstFocusedInput,
-    ]);
-    var onClickDay = useCallback(function (day) {
-        var _a, _b, _c, _d;
-        if (focusedInput === "startDate") {
-            if (endDate != null && isAfter(day.date, endDate)) {
-                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                    startDate: day.date,
-                    endDate: undefined,
-                });
-                setFocusedInput("endDate");
-                (_a = endDateInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            else {
-                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                    startDate: day.date,
-                    endDate: endDate,
-                });
-                if (firstFocusedInput === "startDate") {
-                    setFocusedInput("endDate");
-                    (_b = endDateInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                }
-                else {
-                    setTimeout(hideCalendar, 50);
-                }
-            }
-        }
-        else if (focusedInput === "endDate") {
-            if (!startDate) {
-                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                    startDate: startDate,
-                    endDate: day.date,
-                });
-                setFocusedInput("startDate");
-                (_c = startDateInputRef.current) === null || _c === void 0 ? void 0 : _c.focus();
-            }
-            else if (isAfter(startDate, day.date)) {
-                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                    startDate: day.date,
-                    endDate: undefined,
-                });
-                setFocusedInput("endDate");
-                (_d = endDateInputRef.current) === null || _d === void 0 ? void 0 : _d.focus();
-            }
-            else {
-                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange({
-                    startDate: startDate,
-                    endDate: day.date,
-                });
-                setTimeout(hideCalendar, 50);
-            }
-        }
-    }, [
-        focusedInput,
-        onValueChange,
-        endDate,
-        firstFocusedInput,
-        setFocusedInput,
-        endDateInputRef,
-        hideCalendar,
-        startDate,
-        startDateInputRef,
-    ]);
-    var onClickArrowButton = useCallback(function () {
-        setCurrentPanel("presets");
-        showCalendar();
-    }, [setCurrentPanel, showCalendar]);
-    var onClickCalendarButton = useCallback(function () {
-        var _a;
-        if (isCalendarVisible) {
-            hideCalendar();
-        }
-        else {
-            setFocusedInput("startDate");
-            setFirstFocusedInput("startDate");
-            (_a = startDateInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            setCurrentPanel("calendar");
-            showCalendar();
-        }
-    }, [
-        isCalendarVisible,
-        hideCalendar,
-        setFocusedInput,
-        setFirstFocusedInput,
-        startDateInputRef,
-        setCurrentPanel,
-        showCalendar,
-    ]);
-    var onKeyDownHandler = useCallback(function (ev) {
-        if (ev.key === "Escape") {
-            hideCalendar();
-        }
-    }, [hideCalendar]);
-    return {
-        onFocusLeft: onFocusLeft,
-        onFocusRight: onFocusRight,
-        onClickDay: onClickDay,
-        onClickArrowButton: onClickArrowButton,
-        onClickCalendarButton: onClickCalendarButton,
-        onKeyDownHandler: onKeyDownHandler,
-    };
-};
-
-var DateRangeDualTextInput = function (_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, autoFocus = _a.autoFocus, onBlur = _a.onBlur, onEnter = _a.onEnter, onEsc = _a.onEsc, minDate = _a.minDate, _b = _a.maxDate, maxDate = _b === void 0 ? defaultMaxDate : _b, calendarProps = _a.calendarProps, _c = _a.widthLeft, widthLeft = _c === void 0 ? 128 : _c, _d = _a.widthRight, widthRight = _d === void 0 ? 128 : _d, variant = _a.variant, disabled = _a.disabled;
-    var _e = value || {}, startDate = _e.startDate, endDate = _e.endDate;
-    var startDateInputRef = useRef(null);
-    var endDateInputRef = useRef(null);
-    var states = useInputStates(startDate, endDate);
-    var dateInFocus = states.dateInFocus, setDateInFocus = states.setDateInFocus, isCalendarVisible = states.isCalendarVisible, currentPanel = states.currentPanel, setCurrentPanel = states.setCurrentPanel;
-    var _f = useDateRangeHandlers(startDate, endDate, onValueChange, states), showCalendar = _f.showCalendar, hideCalendar = _f.hideCalendar, inputLeftChangeHandler = _f.inputLeftChangeHandler, inputRightChangeHandler = _f.inputRightChangeHandler;
-    var _g = useUserInputHandlers(startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, states), onKeyDownHandler = _g.onKeyDownHandler, onFocusRight = _g.onFocusRight, onFocusLeft = _g.onFocusLeft, onClickDay = _g.onClickDay, onClickCalendarButton = _g.onClickCalendarButton, onClickArrowButton = _g.onClickArrowButton;
-    useDateRangeEffects(startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef);
-    var startDateIsAfterEnd = useMemo(function () { return startDate && endDate && isAfter(startDate, endDate); }, [startDate, endDate]);
-    var statePerMonth = useMemo(function () {
-        return buildDayStateForSingleMonth(calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus);
-    }, [calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus]);
-    var delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
-    return (React.createElement(Box, { onKeyDown: onKeyDownHandler },
-        React.createElement(Popover, { arrow: false, lazy: true, disabled: disabled, placement: defaultPopoverPlacement, onClickOutside: hideCalendar, visible: isCalendarVisible, content: delayedIsCalendarVisible && (React.createElement(CalendarWithMonthSwitcher, __assign({ onClickDay: onClickDay, dateInFocus: dateInFocus, setDateInFocus: setDateInFocus, currentPanel: currentPanel, setCurrentPanel: setCurrentPanel, minDate: minDate, maxDate: maxDate }, calendarProps, { statePerMonth: statePerMonth }))) },
-            React.createElement(DualTextInput, { autoFocusLeft: autoFocus, onEsc: onEsc, onEnter: onEnter, onBlur: onBlur, disabled: disabled, separatorIcon: stenaArrowRight, typeLeft: "date", typeRight: "date", placeholderLeft: "Start date", placeholderRight: "End date", onChangeLeft: inputLeftChangeHandler, onChangeRight: inputRightChangeHandler, onClickArrowDown: onClickArrowButton, onClickCalendar: onClickCalendarButton, onFocusLeft: onFocusLeft, onFocusRight: onFocusRight, onClickLeft: onFocusLeft, onClickRight: onFocusRight, inputRefLeft: startDateInputRef, inputRefRight: endDateInputRef, variant: startDateIsAfterEnd ? "error" : variant, widthLeft: widthLeft, widthRight: widthRight, minLeft: minDate, maxLeft: maxDate, minRight: minDate, maxRight: maxDate }))));
-};
-
+const defaultPopoverPlacement = "bottom";
+const useCalendarPopoverUpdater = () => {
+  const [tippyRef, tippyInstanceRef] = useTippyInstance();
+  const onChangePanel = useCallback(() => {
+    var _a, _b;
+    (_b = (_a = tippyInstanceRef.current) == null ? void 0 : _a.popperInstance) == null ? void 0 : _b.update();
+  }, [tippyInstanceRef]);
+  return {
+    onChangePanel,
+    tippyRef
+  };
+};
+const useDateInput = (onChange, onClose, openOnMount) => {
+  const [showingCalendar, setShowingCalendar] = useState(openOnMount || false);
+  const showCalendar = useCallback(() => {
+    setShowingCalendar(true);
+    return true;
+  }, [setShowingCalendar]);
+  const hideCalendar = useCallback(() => {
+    setShowingCalendar(false);
+    if (onClose) {
+      onClose();
+    }
+  }, [setShowingCalendar, onClose]);
+  const onSelectDate = useCallback((date) => {
+    if (onChange) {
+      onChange(date);
+    }
+    setTimeout(hideCalendar, 150);
+  }, [onChange, hideCalendar]);
+  return {
+    showCalendar,
+    hideCalendar,
+    showingCalendar,
+    onSelectDate
+  };
+};
+const defaultMaxDate = "2999-12-31";
+const DateInput = ({
+  displayFormat = DateFormats.fullDate,
+  placeholder = "Enter date",
+  value,
+  zIndex = 100,
+  calendarTheme = defaultCalendarTheme,
+  calendarProps,
+  openOnMount,
+  onClose,
+  onChange,
+  portalTarget,
+  variant,
+  width,
+  minDate,
+  maxDate = defaultMaxDate,
+  disabled
+}) => {
+  const {
+    hideCalendar,
+    showingCalendar,
+    onSelectDate,
+    showCalendar
+  } = useDateInput(onChange, onClose, openOnMount);
+  const {
+    tippyRef,
+    onChangePanel
+  } = useCalendarPopoverUpdater();
+  return /* @__PURE__ */ jsx(Box, {
+    width,
+    children: /* @__PURE__ */ jsx(Popover, {
+      arrow: false,
+      lazy: true,
+      visible: showingCalendar,
+      onClickOutside: hideCalendar,
+      placement: defaultPopoverPlacement,
+      zIndex,
+      appendTo: portalTarget != null ? portalTarget : "parent",
+      tippyRef,
+      disabled,
+      content: /* @__PURE__ */ jsx(SingleDateCalendar, {
+        ...calendarProps,
+        onChange: onSelectDate,
+        value,
+        theme: calendarTheme,
+        onChangePanel,
+        minDate,
+        maxDate
+      }),
+      children: /* @__PURE__ */ jsx(TextInput, {
+        type: "date",
+        contentRight: /* @__PURE__ */ jsx(Row, {
+          alignItems: "center",
+          children: /* @__PURE__ */ jsx(FlatButton, {
+            size: "small",
+            disabled,
+            leftIcon: stenaCalendar,
+            onClick: showCalendar
+          })
+        }),
+        onFocus: showCalendar,
+        onClickRight: showCalendar,
+        value: value ? format(value, displayFormat) : "",
+        placeholder,
+        size: 9,
+        disabled,
+        autoFocus: openOnMount,
+        variant,
+        min: minDate,
+        max: maxDate
+      })
+    })
+  });
+};
+const useDateRangeInput = (value, onValueChange) => {
+  const startDateInputRef = useRef(null);
+  const endDateInputRef = useRef(null);
+  const [showingCalendar, setShowingCalendar] = useState(false);
+  const [focusedInput, setFocusedInput] = useState(void 0);
+  const showCalendarStartDate = useCallback(() => {
+    setFocusedInput("startDate");
+    setShowingCalendar(true);
+    return true;
+  }, [setFocusedInput, setShowingCalendar]);
+  const showCalendarEndDate = useCallback(() => {
+    setFocusedInput("endDate");
+    setShowingCalendar(true);
+    return true;
+  }, [setFocusedInput, setShowingCalendar]);
+  const hideCalendar = useCallback(() => {
+    setShowingCalendar(false);
+  }, [setShowingCalendar]);
+  const onClickDay = useCallback((day) => {
+    if (focusedInput === "startDate") {
+      onValueChange == null ? void 0 : onValueChange({
+        startDate: day.date,
+        endDate: value == null ? void 0 : value.endDate
+      });
+      if (!(value == null ? void 0 : value.endDate)) {
+        setFocusedInput("endDate");
+        endDateInputRef.current && endDateInputRef.current.focus();
+      } else {
+        setTimeout(hideCalendar, 150);
+      }
+    } else if (focusedInput === "endDate") {
+      onValueChange == null ? void 0 : onValueChange({
+        startDate: value == null ? void 0 : value.startDate,
+        endDate: day.date
+      });
+      if (!(value == null ? void 0 : value.startDate)) {
+        setFocusedInput("startDate");
+        startDateInputRef.current && startDateInputRef.current.focus();
+      } else {
+        setTimeout(hideCalendar, 150);
+      }
+    }
+  }, [focusedInput, onValueChange, setFocusedInput, hideCalendar, value]);
+  const startDateIsAfterEnd = useMemo(() => (value == null ? void 0 : value.startDate) && (value == null ? void 0 : value.endDate) && isAfter(value.startDate, value.endDate), [value == null ? void 0 : value.startDate, value == null ? void 0 : value.endDate]);
+  return {
+    showingCalendar,
+    hideCalendar,
+    showCalendarEndDate,
+    showCalendarStartDate,
+    focusedInput,
+    setFocusedInput,
+    startDateInputRef,
+    endDateInputRef,
+    onClickDay,
+    startDateIsAfterEnd
+  };
+};
+const DateRangeInput = ({
+  displayFormat = DateFormats.fullDate,
+  placeholderStartDate = "Start date",
+  placeholderEndDate = "End date",
+  portalTarget,
+  value,
+  onValueChange,
+  zIndex = 100,
+  width,
+  calendarTheme = defaultCalendarTheme,
+  calendarProps,
+  minDate,
+  maxDate = defaultMaxDate,
+  disabled
+}) => {
+  const [dateInFocus, setDateInFocus] = useState(() => {
+    var _a;
+    return (_a = focusedInput && (value == null ? void 0 : value[focusedInput])) != null ? _a : new Date();
+  });
+  const [currentPanel, setCurrentPanel] = useState("calendar");
+  const {
+    hideCalendar,
+    showCalendarEndDate,
+    showCalendarStartDate,
+    showingCalendar,
+    focusedInput,
+    startDateInputRef,
+    endDateInputRef,
+    onClickDay,
+    startDateIsAfterEnd
+  } = useDateRangeInput(value, onValueChange);
+  const statePerMonth = useMemo(() => buildDayStateForDateRange(void 0, value == null ? void 0 : value.startDate, value == null ? void 0 : value.endDate), [value]);
+  return /* @__PURE__ */ jsx(Popover, {
+    arrow: false,
+    lazy: true,
+    disabled,
+    visible: showingCalendar,
+    zIndex,
+    placement: defaultPopoverPlacement,
+    appendTo: portalTarget != null ? portalTarget : "parent",
+    onClickOutside: hideCalendar,
+    content: /* @__PURE__ */ jsx(CalendarWithMonthSwitcher, {
+      ...calendarProps,
+      dateInFocus,
+      setDateInFocus,
+      statePerMonth,
+      theme: calendarTheme,
+      onClickDay,
+      currentPanel,
+      setCurrentPanel,
+      minDate,
+      maxDate
+    }),
+    children: /* @__PURE__ */ jsxs(Row, {
+      alignItems: "center",
+      children: [/* @__PURE__ */ jsx(TextInput, {
+        iconLeft: stenaCalendar,
+        onFocus: showCalendarStartDate,
+        value: (value == null ? void 0 : value.startDate) ? format(value.startDate, displayFormat) : "",
+        placeholder: placeholderStartDate,
+        width,
+        disabled,
+        inputRef: startDateInputRef,
+        size: 9,
+        variant: startDateIsAfterEnd ? "error" : void 0
+      }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(Icon, {
+        icon: faLongArrowAltRight,
+        color: cssColor("--lhds-color-ui-500"),
+        size: 14
+      }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(TextInput, {
+        iconLeft: stenaCalendar,
+        onFocus: showCalendarEndDate,
+        value: (value == null ? void 0 : value.endDate) ? format(value.endDate, displayFormat) : "",
+        placeholder: placeholderEndDate,
+        width,
+        disabled,
+        inputRef: endDateInputRef,
+        size: 9,
+        variant: startDateIsAfterEnd ? "error" : void 0
+      })]
+    })
+  });
+};
+const DateTextInput = ({
+  calendarProps,
+  closeOnCalendarSelectDate = true,
+  dateFormat = DateFormats.fullDate,
+  disableCalender = false,
+  onValueChange,
+  placeholder = "yyyy-mm-dd",
+  portalTarget,
+  value,
+  width = "130px",
+  zIndex = 100,
+  calendarTheme = defaultCalendarTheme,
+  hideCalenderIcon = false,
+  minDate,
+  maxDate = defaultMaxDate,
+  variant,
+  ...props
+}) => {
+  const [open, setOpen] = useState(false);
+  const {
+    tippyRef,
+    onChangePanel
+  } = useCalendarPopoverUpdater();
+  const toggleCalendar = useCallback(() => {
+    setOpen(!open);
+  }, [setOpen, open]);
+  const hideCalendar = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const onValueChangeHandler = useCallback((value2) => {
+    if (onValueChange) {
+      onValueChange(value2);
+    }
+  }, [onValueChange]);
+  const onCalendarSelectDate = useCallback((date) => {
+    if (date) {
+      onValueChangeHandler(format(date, dateFormat));
+      if (closeOnCalendarSelectDate) {
+        setTimeout(() => setOpen(!open), 200);
+      }
+    }
+  }, [onValueChangeHandler, dateFormat, closeOnCalendarSelectDate, setOpen, open]);
+  const inValidInput = !!value && !/^[-/\\.0-9]+$/.test(value);
+  const dateIsValid = !!value && isValid(parse(value, dateFormat, new Date()));
+  const userInputCorrectLength = !!value && value.length >= dateFormat.length;
+  const invalid = userInputCorrectLength && !dateIsValid || inValidInput;
+  return /* @__PURE__ */ jsx(Box, {
+    width,
+    children: /* @__PURE__ */ jsx(Popover, {
+      arrow: false,
+      lazy: true,
+      visible: open,
+      zIndex,
+      appendTo: portalTarget != null ? portalTarget : "parent",
+      placement: defaultPopoverPlacement,
+      onClickOutside: hideCalendar,
+      tippyRef,
+      content: /* @__PURE__ */ jsx(SingleDateCalendar, {
+        ...calendarProps,
+        onChange: onCalendarSelectDate,
+        onChangePanel,
+        value: value && dateIsValid ? parse(value, dateFormat, new Date()) : void 0,
+        minDate,
+        maxDate,
+        theme: calendarTheme
+      }),
+      children: /* @__PURE__ */ jsx(TextInput, {
+        ...props,
+        variant: invalid ? "error" : variant,
+        disableContentPaddingRight: true,
+        contentRight: !hideCalenderIcon ? /* @__PURE__ */ jsx(Row, {
+          alignItems: "center",
+          indent: 0.5,
+          children: /* @__PURE__ */ jsx(FlatButton, {
+            size: "small",
+            disabled: props.disabled,
+            leftIcon: stenaCalendar,
+            onClick: toggleCalendar
+          })
+        }) : void 0,
+        onValueChange: onValueChangeHandler,
+        placeholder,
+        value: value || "",
+        min: minDate,
+        max: maxDate,
+        size: 10
+      })
+    })
+  });
+};
+const formatHours = (hours2) => {
+  if (hours2 === "") {
+    return "00";
+  }
+  const h = parseInt(hours2, 10);
+  if (isNaN(h)) {
+    throw new Error("Hours is not a number");
+  }
+  if (h < 0 || h > 23) {
+    throw new Error("Hours is an invalid number");
+  }
+  switch (hours2.length) {
+    case 1:
+      return `0${h}`;
+    case 2:
+      return hours2;
+    default:
+      throw new Error("Invalid hour string");
+  }
+};
+const formatMinutes = (minutes2) => {
+  if (minutes2 === "") {
+    return "00";
+  }
+  const m = parseInt(minutes2, 10);
+  if (isNaN(m)) {
+    throw new Error("Minutes is not a number");
+  }
+  if (m < 0 || m > 59) {
+    throw new Error("Minutes is an invalid number");
+  }
+  switch (minutes2.length) {
+    case 1:
+      return `0${m}`;
+    case 2:
+      return minutes2;
+    default:
+      throw new Error("Invalid minute string");
+  }
+};
+const formatTimeString = (time) => {
+  if (!validUserInput(time)) {
+    return { time, success: false };
+  }
+  const arr = time && time.split(/-|:|,|;|[/]|[.]| /);
+  if (arr && arr.length === 2) {
+    try {
+      const hours2 = formatHours(arr[0]);
+      const minutes2 = formatMinutes(arr[1]);
+      return { time: `${hours2}:${minutes2}`, success: true };
+    } catch {
+      return { time, success: false };
+    }
+  } else if (arr && arr.length === 1) {
+    let hours2 = 0;
+    let minutes2 = 0;
+    switch (time.length) {
+      case 1:
+        return { time: `0${time}:00`, success: true };
+      case 2:
+        const timeNumber = parseInt(arr[0], 10);
+        if (timeNumber >= 0 && timeNumber < 24) {
+          return { time: `${time}:00`, success: true };
+        } else if (timeNumber >= 24 && timeNumber < 59) {
+          return { time: `00:${time}`, success: true };
+        }
+        return { time, success: false };
+      case 3:
+        minutes2 = parseInt(time.substr(1, 2), 10);
+        if (minutes2 >= 0 && minutes2 <= 59) {
+          return {
+            time: `0${time.substr(0, 1)}:${time.substr(1, 2)}`,
+            success: true
+          };
+        }
+        return { time, success: false };
+      case 4:
+        hours2 = parseInt(time.substr(0, 2), 10);
+        minutes2 = parseInt(time.substr(2, 2), 10);
+        if (hours2 < 0 || hours2 > 23) {
+          return { time, success: false };
+        }
+        if (minutes2 < 0 || minutes2 > 59) {
+          return { time, success: false };
+        }
+        return {
+          time: `${time.substr(0, 2)}:${time.substr(2, 2)}`,
+          success: true
+        };
+      default:
+        return { time, success: false };
+    }
+  }
+  return { time, success: false };
+};
+const validUserInput = (input) => {
+  if (input) {
+    return /^[-:.,/; 0-9]+$/.test(input);
+  }
+  return true;
+};
+const TimeTextInput = ({
+  onValueChange,
+  showPlaceholder = true,
+  useIcon = true,
+  value,
+  width = "85px",
+  variant,
+  ...props
+}) => {
+  const [valid, setValid] = useState(() => validUserInput(value));
+  const timeFormat = "hh:mm";
+  const onBlur = useCallback(() => {
+    if (value) {
+      const formattedResult = formatTimeString(value);
+      setValid(formattedResult.success);
+      if (formattedResult.success) {
+        if (onValueChange) {
+          onValueChange(formattedResult.time);
+        }
+      }
+    }
+  }, [value, onValueChange, setValid]);
+  const onChangeHandler = useCallback((ev) => {
+    const time = ev.target.value;
+    const validInput = validUserInput(time);
+    setValid(validInput && time.length <= timeFormat.length);
+    if (onValueChange) {
+      onValueChange(time);
+    }
+  }, [onValueChange, setValid]);
+  return /* @__PURE__ */ jsx(TextInput, {
+    ...props,
+    type: "time",
+    variant: !valid ? "error" : variant,
+    iconLeft: useIcon ? stenaClock : void 0,
+    value,
+    placeholder: showPlaceholder ? timeFormat : void 0,
+    onChange: onChangeHandler,
+    onBlur,
+    width
+  });
+};
+const DualTextInput = ({
+  autoFocusLeft,
+  autoFocusRight,
+  onEsc,
+  onEnter,
+  onValueChangeLeft,
+  onValueChangeRight,
+  separatorIcon,
+  placeholderLeft,
+  placeholderRight,
+  typeLeft,
+  typeRight,
+  onChangeLeft,
+  onChangeRight,
+  valueLeft,
+  valueRight,
+  minLeft,
+  maxLeft,
+  minRight,
+  maxRight,
+  onClickLeft,
+  onClickRight,
+  onClickCalendar,
+  onClickArrowDown,
+  onBlurLeft,
+  onBlurRight,
+  onFocusLeft,
+  onFocusRight,
+  inputRefLeft,
+  inputRefRight,
+  variant,
+  variantLeft,
+  variantRight,
+  onBlur,
+  showPresets,
+  widthLeft,
+  widthRight,
+  disabled
+}) => {
+  const focusCounter = useRef(0);
+  const tryTriggerOnBlur = useMemo(() => debounce((focusCounter2) => {
+    if (focusCounter2 === 0) {
+      onBlur == null ? void 0 : onBlur();
+    }
+  }, 10), [onBlur]);
+  const focusLeftHandler = useCallback((ev) => {
+    focusCounter.current++;
+    tryTriggerOnBlur(focusCounter.current);
+    if (onFocusLeft) {
+      onFocusLeft(ev);
+    }
+  }, [onFocusLeft, focusCounter, tryTriggerOnBlur]);
+  const focusRightHandler = useCallback((ev) => {
+    focusCounter.current++;
+    tryTriggerOnBlur(focusCounter.current);
+    if (onFocusRight) {
+      onFocusRight(ev);
+    }
+  }, [onFocusRight, focusCounter, tryTriggerOnBlur]);
+  const blurLeftHandler = useCallback((ev) => {
+    focusCounter.current--;
+    tryTriggerOnBlur(focusCounter.current);
+    if (onBlurLeft) {
+      onBlurLeft(ev);
+    }
+  }, [onBlurLeft, focusCounter, tryTriggerOnBlur]);
+  const blurRightHandler = useCallback((ev) => {
+    focusCounter.current--;
+    tryTriggerOnBlur(focusCounter.current);
+    if (onBlurRight) {
+      onBlurRight(ev);
+    }
+  }, [onBlurRight, focusCounter, tryTriggerOnBlur]);
+  return /* @__PURE__ */ jsx(Box, {
+    children: /* @__PURE__ */ jsxs(TextInputBox, {
+      disableContentPaddingRight: true,
+      disabled,
+      variant,
+      contentRight: /* @__PURE__ */ jsxs(Row, {
+        alignItems: "center",
+        children: [/* @__PURE__ */ jsx(Indent, {
+          num: 0.5,
+          children: /* @__PURE__ */ jsx(FlatButton, {
+            leftIcon: stenaCalendar,
+            onClick: onClickCalendar,
+            disabled,
+            size: "small"
+          })
+        }), showPresets ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(Row, {
+            height: "22px",
+            children: /* @__PURE__ */ jsx(SeparatorLine, {
+              vertical: true
+            })
+          }), /* @__PURE__ */ jsx(Indent, {
+            num: 0.5,
+            children: /* @__PURE__ */ jsx(FlatButton, {
+              leftIcon: stenaAngleDown,
+              onClick: onClickArrowDown,
+              disabled,
+              size: "small"
+            })
+          })]
+        }) : null]
+      }),
+      children: [/* @__PURE__ */ jsx(Box, {
+        width: widthLeft,
+        children: /* @__PURE__ */ jsx(TextInput, {
+          onEsc,
+          onEnter,
+          onClick: onClickLeft,
+          disabled,
+          hideBorder: true,
+          placeholder: placeholderLeft,
+          value: valueLeft,
+          onValueChange: onValueChangeLeft,
+          onChange: onChangeLeft,
+          onBlur: blurLeftHandler,
+          onFocus: focusLeftHandler,
+          inputRef: inputRefLeft,
+          variant: variantLeft,
+          type: typeLeft,
+          autoFocus: autoFocusLeft,
+          min: minLeft,
+          max: maxLeft
+        })
+      }), /* @__PURE__ */ jsx(Row, {
+        indent: 0.5,
+        alignItems: "center",
+        justifyContent: "center",
+        children: /* @__PURE__ */ jsx(Icon, {
+          icon: separatorIcon,
+          size: 12,
+          color: cssColor("--lhds-color-ui-500")
+        })
+      }), /* @__PURE__ */ jsx(Box, {
+        width: widthRight,
+        children: /* @__PURE__ */ jsx(TextInput, {
+          onEsc,
+          onEnter,
+          onClick: onClickRight,
+          disabled,
+          hideBorder: true,
+          placeholder: placeholderRight,
+          value: valueRight,
+          onValueChange: onValueChangeRight,
+          onChange: onChangeRight,
+          onBlur: blurRightHandler,
+          onFocus: focusRightHandler,
+          inputRef: inputRefRight,
+          variant: variantRight,
+          type: typeRight,
+          autoFocus: autoFocusRight,
+          min: minRight,
+          max: maxRight
+        })
+      })]
+    })
+  });
+};
+const transformTimeStringToNumber = (time) => {
+  if (time == null) {
+    throw new Error("Time is not set.");
+  }
+  if (time === "") {
+    throw new Error("Time is empty.");
+  }
+  const parts = time.split(":");
+  if (parts.length !== 2) {
+    throw new Error("Invalid time.");
+  }
+  if (parts[1].length !== 2) {
+    throw new Error("Invalid time.");
+  }
+  if (parts[0].length < 1 || parts[0].length > 2) {
+    throw new Error("Invalid time.");
+  }
+  const hours2 = parseInt(parts[0], 10);
+  const minutes2 = parseInt(parts[1], 10);
+  if (isNaN(hours2)) {
+    throw new Error("Invalid time.");
+  }
+  if (isNaN(minutes2)) {
+    throw new Error("Invalid time.");
+  }
+  if (hours2 < 0 || hours2 > 23) {
+    throw new Error("Invalid time.");
+  }
+  if (minutes2 < 0 || minutes2 > 59) {
+    throw new Error("Invalid time.");
+  }
+  return hours2 * 100 + minutes2;
+};
+const isValidTimeString = (time) => {
+  try {
+    transformTimeStringToNumber(time);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+const getHoursAndMinutesFromTimeString = (value) => {
+  if (value && isValidTimeString(value)) {
+    const p = value.split(":");
+    return {
+      hour: parseIntElseUndefined(p[0]),
+      minute: parseIntElseUndefined(p[1])
+    };
+  }
+  return {
+    hour: void 0,
+    minute: void 0
+  };
+};
+const transformTimeInDateToTimeString = (date) => `${formatHours(String(date.getHours()))}:${formatMinutes(String(date.getMinutes()))}`;
+const timePicker = "_timePicker_1w05d_1";
+const timePickerColumn = "_timePickerColumn_1w05d_6";
+var styles = {
+  timePicker,
+  timePickerColumn
+};
+const TimePickerCell = ({
+  onClick,
+  item,
+  selected,
+  columnRef,
+  canScrollRef
+}) => {
+  const ref = useRef(null);
+  useEffect(function scrollToSelectedItem() {
+    if (selected && columnRef.current && ref.current && canScrollRef.current) {
+      const targetScroll = ref.current.scrollHeight * Math.max(item - 2, 0);
+      columnRef.current.scrollTo(0, targetScroll);
+      canScrollRef.current = false;
+    }
+  }, [columnRef, item, selected, canScrollRef]);
+  return /* @__PURE__ */ jsx(Row, {
+    width: "64px",
+    justifyContent: "center",
+    spacing: 0.5,
+    indent: 0.5,
+    ref,
+    children: selected ? /* @__PURE__ */ jsx(PrimaryButton, {
+      label: String(item),
+      onClick: () => onClick && onClick(item)
+    }) : /* @__PURE__ */ jsx(FlatButton, {
+      label: String(item),
+      onClick: () => onClick && onClick(item)
+    })
+  });
+};
+const TimePickerColumn = ({
+  onClick,
+  items,
+  selectedItem,
+  canScrollRef
+}) => {
+  const columnRef = useRef(null);
+  return /* @__PURE__ */ jsx(Column, {
+    className: styles.timePickerColumn,
+    ref: columnRef,
+    children: items.map((item) => /* @__PURE__ */ jsx(TimePickerCell, {
+      item,
+      onClick,
+      selected: item === selectedItem,
+      columnRef,
+      canScrollRef
+    }, item))
+  });
+};
+const hours = range(0, 24);
+const minutes = range(0, 60);
+const TimePicker = ({
+  value,
+  onValueChange
+}) => {
+  const canScrollRef = useRef(true);
+  const [hour, setHour] = useState(void 0);
+  const [minute, setMinute] = useState(void 0);
+  useEffect(() => {
+    if (value) {
+      const {
+        minute: minute2,
+        hour: hour2
+      } = getHoursAndMinutesFromTimeString(value);
+      setHour(hour2);
+      setMinute(minute2);
+    }
+  }, [value]);
+  const onClickHour = useCallback((h) => {
+    setHour(h);
+    onValueChange == null ? void 0 : onValueChange(`${formatHours(String(h != null ? h : 0))}:${formatMinutes(String(minute != null ? minute : 0))}`);
+  }, [minute, onValueChange]);
+  const onClickMinutes = useCallback((m) => {
+    setMinute(m);
+    onValueChange == null ? void 0 : onValueChange(`${formatHours(String(hour != null ? hour : 0))}:${formatMinutes(String(m != null ? m : 0))}`);
+  }, [hour, onValueChange]);
+  return /* @__PURE__ */ jsxs(Row, {
+    className: styles.timePicker,
+    children: [/* @__PURE__ */ jsx(TimePickerColumn, {
+      items: hours,
+      onClick: onClickHour,
+      selectedItem: hour,
+      canScrollRef
+    }), /* @__PURE__ */ jsx(Indent, {}), /* @__PURE__ */ jsx(TimePickerColumn, {
+      items: minutes,
+      onClick: onClickMinutes,
+      selectedItem: minute,
+      canScrollRef
+    })]
+  });
+};
+const useDateRangeEffects$1 = (date, setDateInFocus, dateInputRef) => {
+  useEffect(function moveFocusedDateWhenDateChanges() {
+    if (date) {
+      setDateInFocus(date);
+    }
+  }, [date, setDateInFocus]);
+  useEffect(function updateDateFieldWhenValueChanges() {
+    if (dateInputRef.current) {
+      if (date) {
+        dateInputRef.current.valueAsDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+      } else {
+        dateInputRef.current.valueAsDate = null;
+      }
+    }
+  }, [date, dateInputRef]);
+};
+const useDateRangeHandlers$1 = (date, onValueChange, {
+  setDateInFocus,
+  showCalendarInternal,
+  hideCalendarInternal,
+  setFirstFocusedInput,
+  setCurrentPanel,
+  localTime,
+  setLocalTime,
+  localDate,
+  setLocalDate
+}, dateInputRef) => {
+  const onChangeDate = useCallback((incomingDate) => {
+    if (!incomingDate) {
+      return;
+    }
+    const newDate = new Date(incomingDate);
+    if (date) {
+      newDate.setHours(date.getHours());
+      newDate.setMinutes(date.getMinutes());
+      onValueChange == null ? void 0 : onValueChange(newDate);
+      setLocalDate(void 0);
+    } else if (localTime) {
+      const { minute, hour } = getHoursAndMinutesFromTimeString(localTime);
+      newDate.setHours(hour != null ? hour : 0);
+      newDate.setMinutes(minute != null ? minute : 0);
+      onValueChange == null ? void 0 : onValueChange(newDate);
+      setLocalDate(void 0);
+    } else {
+      setLocalDate(newDate);
+    }
+    setDateInFocus(newDate);
+    if (dateInputRef.current) {
+      dateInputRef.current.valueAsDate = newDate;
+    }
+  }, [date, dateInputRef, localTime, onValueChange, setDateInFocus, setLocalDate]);
+  const onChangeTime = useCallback((time) => {
+    if (!time) {
+      return;
+    }
+    if (date) {
+      const newTime = getHoursAndMinutesFromTimeString(time);
+      const newDate = new Date(date);
+      newDate.setHours(newTime.hour || 0);
+      newDate.setMinutes(newTime.minute || 0);
+      onValueChange == null ? void 0 : onValueChange(newDate);
+      setLocalTime(void 0);
+    } else if (localDate) {
+      const newTime = getHoursAndMinutesFromTimeString(time);
+      const newDate = new Date(localDate);
+      newDate.setHours(newTime.hour || 0);
+      newDate.setMinutes(newTime.minute || 0);
+      onValueChange == null ? void 0 : onValueChange(newDate);
+      setLocalTime(void 0);
+    } else {
+      setLocalTime(time);
+    }
+  }, [onValueChange, date, localDate, setLocalTime]);
+  const inputLeftChangeHandler = useCallback((ev) => {
+    if (ev.target.value[0] !== "0") {
+      onChangeDate(ev.target.valueAsDate);
+    }
+  }, [onChangeDate]);
+  const inputRightChangeHandler = useCallback((ev) => onChangeTime(ev.target.value), [onChangeTime]);
+  const showCalendar = useCallback(() => {
+    if (date) {
+      setDateInFocus(date);
+    } else {
+      setDateInFocus(new Date());
+    }
+    setCurrentPanel("calendar");
+    showCalendarInternal();
+  }, [date, setCurrentPanel, showCalendarInternal, setDateInFocus]);
+  const hideCalendar = useCallback(() => {
+    setFirstFocusedInput(void 0);
+    hideCalendarInternal();
+  }, [setFirstFocusedInput, hideCalendarInternal]);
+  return {
+    inputLeftChangeHandler,
+    inputRightChangeHandler,
+    hideCalendar,
+    showCalendar,
+    onChangeTime,
+    onChangeDate
+  };
+};
+const useInputStates$1 = (date) => {
+  const [localDate, setLocalDate] = useState(void 0);
+  const [localTime, setLocalTime] = useState(void 0);
+  const [isCalendarVisible, showCalendarInternal, hideCalendarInternal] = useBoolean(false);
+  const [isTimePickerVisible, showTimePicker, hideTimePicker] = useBoolean(false);
+  const [firstFocusedInput, setFirstFocusedInput] = useState(void 0);
+  const [dateInFocus, setDateInFocus] = useState(() => date != null ? date : new Date());
+  const [currentPanel, setCurrentPanel] = useState("calendar");
+  return {
+    isCalendarVisible,
+    showCalendarInternal,
+    hideCalendarInternal,
+    firstFocusedInput,
+    setFirstFocusedInput,
+    dateInFocus,
+    setDateInFocus,
+    currentPanel,
+    setCurrentPanel,
+    isTimePickerVisible,
+    showTimePicker,
+    hideTimePicker,
+    localDate,
+    setLocalDate,
+    localTime,
+    setLocalTime
+  };
+};
+const useUserInputHandlers$1 = (onChangeDate, dateInputRef, showCalendar, hideCalendar, {
+  isCalendarVisible,
+  setCurrentPanel,
+  showTimePicker,
+  hideTimePicker
+}) => {
+  const onFocusLeft = useCallback(() => {
+    if (!isCalendarVisible) {
+      showCalendar();
+    }
+    setCurrentPanel("calendar");
+    hideTimePicker();
+  }, [hideTimePicker, isCalendarVisible, setCurrentPanel, showCalendar]);
+  const onFocusRight = useCallback(() => {
+    hideCalendar();
+    showTimePicker();
+  }, [hideCalendar, showTimePicker]);
+  const onClickDay = useCallback((day) => {
+    onChangeDate(day.date);
+    hideCalendar();
+    showTimePicker();
+  }, [onChangeDate, hideCalendar, showTimePicker]);
+  const onClickArrowButton = useCallback(() => {
+    setCurrentPanel("presets");
+    showCalendar();
+  }, [setCurrentPanel, showCalendar]);
+  const onClickCalendarButton = useCallback(() => {
+    var _a;
+    if (isCalendarVisible) {
+      hideCalendar();
+    } else {
+      (_a = dateInputRef.current) == null ? void 0 : _a.focus();
+      setCurrentPanel("calendar");
+      showCalendar();
+    }
+  }, [
+    isCalendarVisible,
+    hideCalendar,
+    dateInputRef,
+    setCurrentPanel,
+    showCalendar
+  ]);
+  const onKeyDownHandler = useCallback((ev) => {
+    if (ev.key === "Escape") {
+      hideCalendar();
+    }
+  }, [hideCalendar]);
+  return {
+    onFocusLeft,
+    onFocusRight,
+    onClickDay,
+    onClickArrowButton,
+    onClickCalendarButton,
+    onKeyDownHandler
+  };
+};
+const DateTimeInput = ({
+  value,
+  onValueChange,
+  onEnter,
+  onEsc,
+  onBlur,
+  autoFocus,
+  minDate,
+  widthLeft = 128,
+  widthRight = 80,
+  maxDate = defaultMaxDate,
+  variant,
+  disabled
+}) => {
+  const dateInputRef = useRef(null);
+  const timeInputRef = useRef(null);
+  const states = useInputStates$1(value);
+  const {
+    setCurrentPanel,
+    currentPanel,
+    isCalendarVisible,
+    dateInFocus,
+    setDateInFocus,
+    isTimePickerVisible,
+    hideTimePicker,
+    localTime,
+    localDate
+  } = states;
+  const {
+    showCalendar,
+    hideCalendar,
+    inputLeftChangeHandler,
+    inputRightChangeHandler,
+    onChangeTime,
+    onChangeDate
+  } = useDateRangeHandlers$1(value, onValueChange, states, dateInputRef);
+  const {
+    onKeyDownHandler,
+    onFocusRight,
+    onFocusLeft,
+    onClickDay,
+    onClickCalendarButton,
+    onClickArrowButton
+  } = useUserInputHandlers$1(onChangeDate, dateInputRef, showCalendar, hideCalendar, states);
+  useDateRangeEffects$1(value, setDateInFocus, dateInputRef);
+  const statePerMonth = useMemo(() => {
+    const dateToHighlight = value || localDate;
+    if (!dateToHighlight) {
+      return {};
+    }
+    return addDayStateHighlights(void 0, dateToHighlight, ["singleSelected", "selected"]);
+  }, [localDate, value]);
+  const hideAll = useCallback(() => {
+    hideCalendar();
+    hideTimePicker();
+  }, [hideCalendar, hideTimePicker]);
+  const timeValue = useMemo(() => value ? transformTimeInDateToTimeString(value) : localTime, [value, localTime]);
+  const delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
+  const delayedIsTimePickerVisible = useDelayedFalse(isTimePickerVisible, 300);
+  return /* @__PURE__ */ jsx(Box, {
+    onKeyDown: onKeyDownHandler,
+    children: /* @__PURE__ */ jsx(Popover, {
+      arrow: false,
+      lazy: true,
+      disabled,
+      placement: defaultPopoverPlacement,
+      visible: isCalendarVisible || isTimePickerVisible,
+      onClickOutside: hideAll,
+      content: (delayedIsCalendarVisible || delayedIsTimePickerVisible) && /* @__PURE__ */ jsx(Column, {
+        children: delayedIsCalendarVisible ? /* @__PURE__ */ jsx(CalendarWithMonthSwitcher, {
+          statePerMonth,
+          onClickDay,
+          dateInFocus,
+          setDateInFocus,
+          currentPanel,
+          setCurrentPanel,
+          minDate,
+          maxDate
+        }) : delayedIsTimePickerVisible ? /* @__PURE__ */ jsxs(Column, {
+          children: [/* @__PURE__ */ jsx(Column, {
+            overflow: "hidden",
+            height: "250px",
+            children: /* @__PURE__ */ jsx(TimePicker, {
+              value: timeValue != null ? timeValue : "",
+              onValueChange: onChangeTime
+            })
+          }), /* @__PURE__ */ jsx(Space, {}), /* @__PURE__ */ jsx(Row, {
+            justifyContent: "flex-end",
+            children: /* @__PURE__ */ jsx(PrimaryButton, {
+              label: "Done",
+              onClick: hideTimePicker
+            })
+          })]
+        }) : null
+      }),
+      children: /* @__PURE__ */ jsx(DualTextInput, {
+        autoFocusLeft: autoFocus,
+        onEsc,
+        onEnter,
+        onBlur,
+        disabled,
+        separatorIcon: stenaClock,
+        typeLeft: "date",
+        typeRight: "time",
+        placeholderLeft: "yyyy-mm-dd",
+        placeholderRight: "hh:mm",
+        onChangeLeft: inputLeftChangeHandler,
+        onChangeRight: inputRightChangeHandler,
+        onClickArrowDown: onClickArrowButton,
+        onClickCalendar: onClickCalendarButton,
+        onFocusLeft,
+        onFocusRight,
+        onClickLeft: onFocusLeft,
+        onClickRight: onFocusRight,
+        inputRefLeft: dateInputRef,
+        inputRefRight: timeInputRef,
+        valueRight: timeValue != null ? timeValue : "",
+        widthLeft,
+        widthRight,
+        minLeft: minDate,
+        maxLeft: maxDate,
+        variant
+      })
+    })
+  });
+};
+const useDateRangeEffects = (startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef) => {
+  useEffect(function moveFocusedDateWhenStartDateChanges() {
+    if (startDate) {
+      setDateInFocus(startDate);
+    }
+  }, [startDate, setDateInFocus]);
+  useEffect(function moveFocusedDateWhenEndDateChanges() {
+    if (endDate) {
+      setDateInFocus(endDate);
+    }
+  }, [endDate, setDateInFocus]);
+  useEffect(function updateStartDateFieldWhenValueChanges() {
+    if (startDateInputRef.current) {
+      if (startDate) {
+        startDateInputRef.current.valueAsDate = new Date(Date.UTC(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()));
+      } else {
+        startDateInputRef.current.valueAsDate = null;
+      }
+    }
+  }, [startDate, startDateInputRef]);
+  useEffect(function updateEndDateFieldWhenValueChanges() {
+    if (endDateInputRef.current) {
+      if (endDate) {
+        endDateInputRef.current.valueAsDate = new Date(Date.UTC(endDate.getFullYear(), endDate.getMonth(), endDate.getDate()));
+      } else {
+        endDateInputRef.current.valueAsDate = null;
+      }
+    }
+  }, [endDate, endDateInputRef]);
+};
+const useDateRangeHandlers = (startDate, endDate, onValueChange, {
+  setDateInFocus,
+  showCalendarInternal,
+  hideCalendarInternal,
+  setFirstFocusedInput,
+  setCurrentPanel
+}) => {
+  const inputLeftChangeHandler = useCallback((ev) => {
+    var _a;
+    if (ev.target.value[0] !== "0") {
+      onValueChange == null ? void 0 : onValueChange({
+        startDate: (_a = ev.target.valueAsDate) != null ? _a : void 0,
+        endDate
+      });
+    }
+  }, [onValueChange, endDate]);
+  const inputRightChangeHandler = useCallback((ev) => {
+    var _a;
+    if (ev.target.value[0] !== "0") {
+      onValueChange == null ? void 0 : onValueChange({
+        startDate,
+        endDate: (_a = ev.target.valueAsDate) != null ? _a : void 0
+      });
+    }
+  }, [onValueChange, startDate]);
+  const showCalendar = useCallback(() => {
+    if (startDate) {
+      setDateInFocus(startDate);
+    } else if (endDate) {
+      setDateInFocus(endDate);
+    } else {
+      setDateInFocus(new Date());
+    }
+    setCurrentPanel("calendar");
+    showCalendarInternal();
+  }, [
+    startDate,
+    endDate,
+    setCurrentPanel,
+    showCalendarInternal,
+    setDateInFocus
+  ]);
+  const hideCalendar = useCallback(() => {
+    setFirstFocusedInput(void 0);
+    hideCalendarInternal();
+  }, [setFirstFocusedInput, hideCalendarInternal]);
+  return {
+    inputLeftChangeHandler,
+    inputRightChangeHandler,
+    hideCalendar,
+    setDateInFocus,
+    setCurrentPanel,
+    showCalendar
+  };
+};
+const useInputStates = (startDate, endDate) => {
+  const [isCalendarVisible, showCalendarInternal, hideCalendarInternal] = useBoolean(false);
+  const [firstFocusedInput, setFirstFocusedInput] = useState(void 0);
+  const [focusedInput, setFocusedInput] = useState("startDate");
+  const [dateInFocus, setDateInFocus] = useState(() => {
+    const fromValue = focusedInput === "startDate" ? startDate : focusedInput === "endDate" ? endDate : void 0;
+    return fromValue != null ? fromValue : new Date();
+  });
+  const [currentPanel, setCurrentPanel] = useState("calendar");
+  return {
+    isCalendarVisible,
+    showCalendarInternal,
+    hideCalendarInternal,
+    firstFocusedInput,
+    setFirstFocusedInput,
+    focusedInput,
+    setFocusedInput,
+    dateInFocus,
+    setDateInFocus,
+    currentPanel,
+    setCurrentPanel
+  };
+};
+const useUserInputHandlers = (startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, {
+  firstFocusedInput,
+  setFirstFocusedInput,
+  isCalendarVisible,
+  setFocusedInput,
+  focusedInput,
+  setCurrentPanel
+}) => {
+  const onFocusLeft = useCallback(() => {
+    if (firstFocusedInput == null) {
+      setFirstFocusedInput("startDate");
+    }
+    setFocusedInput("startDate");
+    if (!isCalendarVisible) {
+      showCalendar();
+    }
+  }, [
+    isCalendarVisible,
+    setFocusedInput,
+    showCalendar,
+    setFirstFocusedInput,
+    firstFocusedInput
+  ]);
+  const onFocusRight = useCallback(() => {
+    if (firstFocusedInput == null) {
+      setFirstFocusedInput("endDate");
+    }
+    setFocusedInput("endDate");
+    if (!isCalendarVisible) {
+      showCalendar();
+    }
+  }, [
+    isCalendarVisible,
+    setFocusedInput,
+    showCalendar,
+    setFirstFocusedInput,
+    firstFocusedInput
+  ]);
+  const onClickDay = useCallback((day) => {
+    var _a, _b, _c, _d;
+    if (focusedInput === "startDate") {
+      if (endDate != null && isAfter(day.date, endDate)) {
+        onValueChange == null ? void 0 : onValueChange({
+          startDate: day.date,
+          endDate: void 0
+        });
+        setFocusedInput("endDate");
+        (_a = endDateInputRef.current) == null ? void 0 : _a.focus();
+      } else {
+        onValueChange == null ? void 0 : onValueChange({
+          startDate: day.date,
+          endDate
+        });
+        if (firstFocusedInput === "startDate") {
+          setFocusedInput("endDate");
+          (_b = endDateInputRef.current) == null ? void 0 : _b.focus();
+        } else {
+          setTimeout(hideCalendar, 50);
+        }
+      }
+    } else if (focusedInput === "endDate") {
+      if (!startDate) {
+        onValueChange == null ? void 0 : onValueChange({
+          startDate,
+          endDate: day.date
+        });
+        setFocusedInput("startDate");
+        (_c = startDateInputRef.current) == null ? void 0 : _c.focus();
+      } else if (isAfter(startDate, day.date)) {
+        onValueChange == null ? void 0 : onValueChange({
+          startDate: day.date,
+          endDate: void 0
+        });
+        setFocusedInput("endDate");
+        (_d = endDateInputRef.current) == null ? void 0 : _d.focus();
+      } else {
+        onValueChange == null ? void 0 : onValueChange({
+          startDate,
+          endDate: day.date
+        });
+        setTimeout(hideCalendar, 50);
+      }
+    }
+  }, [
+    focusedInput,
+    onValueChange,
+    endDate,
+    firstFocusedInput,
+    setFocusedInput,
+    endDateInputRef,
+    hideCalendar,
+    startDate,
+    startDateInputRef
+  ]);
+  const onClickArrowButton = useCallback(() => {
+    setCurrentPanel("presets");
+    showCalendar();
+  }, [setCurrentPanel, showCalendar]);
+  const onClickCalendarButton = useCallback(() => {
+    var _a;
+    if (isCalendarVisible) {
+      hideCalendar();
+    } else {
+      setFocusedInput("startDate");
+      setFirstFocusedInput("startDate");
+      (_a = startDateInputRef.current) == null ? void 0 : _a.focus();
+      setCurrentPanel("calendar");
+      showCalendar();
+    }
+  }, [
+    isCalendarVisible,
+    hideCalendar,
+    setFocusedInput,
+    setFirstFocusedInput,
+    startDateInputRef,
+    setCurrentPanel,
+    showCalendar
+  ]);
+  const onKeyDownHandler = useCallback((ev) => {
+    if (ev.key === "Escape") {
+      hideCalendar();
+    }
+  }, [hideCalendar]);
+  return {
+    onFocusLeft,
+    onFocusRight,
+    onClickDay,
+    onClickArrowButton,
+    onClickCalendarButton,
+    onKeyDownHandler
+  };
+};
+const DateRangeDualTextInput = ({
+  value,
+  onValueChange,
+  autoFocus,
+  onBlur,
+  onEnter,
+  onEsc,
+  minDate,
+  maxDate = defaultMaxDate,
+  calendarProps,
+  widthLeft = 128,
+  widthRight = 128,
+  variant,
+  disabled
+}) => {
+  const {
+    startDate,
+    endDate
+  } = value || {};
+  const startDateInputRef = useRef(null);
+  const endDateInputRef = useRef(null);
+  const states = useInputStates(startDate, endDate);
+  const {
+    dateInFocus,
+    setDateInFocus,
+    isCalendarVisible,
+    currentPanel,
+    setCurrentPanel
+  } = states;
+  const {
+    showCalendar,
+    hideCalendar,
+    inputLeftChangeHandler,
+    inputRightChangeHandler
+  } = useDateRangeHandlers(startDate, endDate, onValueChange, states);
+  const {
+    onKeyDownHandler,
+    onFocusRight,
+    onFocusLeft,
+    onClickDay,
+    onClickCalendarButton,
+    onClickArrowButton
+  } = useUserInputHandlers(startDate, endDate, onValueChange, startDateInputRef, endDateInputRef, showCalendar, hideCalendar, states);
+  useDateRangeEffects(startDate, endDate, setDateInFocus, startDateInputRef, endDateInputRef);
+  const startDateIsAfterEnd = useMemo(() => startDate && endDate && isAfter(startDate, endDate), [startDate, endDate]);
+  const statePerMonth = useMemo(() => buildDayStateForSingleMonth(calendarProps == null ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus), [calendarProps == null ? void 0 : calendarProps.statePerMonth, startDate, endDate, dateInFocus]);
+  const delayedIsCalendarVisible = useDelayedFalse(isCalendarVisible, 300);
+  return /* @__PURE__ */ jsx(Box, {
+    onKeyDown: onKeyDownHandler,
+    children: /* @__PURE__ */ jsx(Popover, {
+      arrow: false,
+      lazy: true,
+      disabled,
+      placement: defaultPopoverPlacement,
+      onClickOutside: hideCalendar,
+      visible: isCalendarVisible,
+      content: delayedIsCalendarVisible && /* @__PURE__ */ jsx(CalendarWithMonthSwitcher, {
+        onClickDay,
+        dateInFocus,
+        setDateInFocus,
+        currentPanel,
+        setCurrentPanel,
+        minDate,
+        maxDate,
+        ...calendarProps,
+        statePerMonth
+      }),
+      children: /* @__PURE__ */ jsx(DualTextInput, {
+        autoFocusLeft: autoFocus,
+        onEsc,
+        onEnter,
+        onBlur,
+        disabled,
+        separatorIcon: stenaArrowRight,
+        typeLeft: "date",
+        typeRight: "date",
+        placeholderLeft: "Start date",
+        placeholderRight: "End date",
+        onChangeLeft: inputLeftChangeHandler,
+        onChangeRight: inputRightChangeHandler,
+        onClickArrowDown: onClickArrowButton,
+        onClickCalendar: onClickCalendarButton,
+        onFocusLeft,
+        onFocusRight,
+        onClickLeft: onFocusLeft,
+        onClickRight: onFocusRight,
+        inputRefLeft: startDateInputRef,
+        inputRefRight: endDateInputRef,
+        variant: startDateIsAfterEnd ? "error" : variant,
+        widthLeft,
+        widthRight,
+        minLeft: minDate,
+        maxLeft: maxDate,
+        minRight: minDate,
+        maxRight: maxDate
+      })
+    })
+  });
+};
 export { Calendar, CalendarDay, DateInput, DateRangeCalendar, DateRangeDualTextInput, DateRangeExclusionCalendar, DateRangeInput, DateTextInput, DateTimeInput, Month, MonthPicker, MultiDateCalendar, PresetPicker, SingleDateCalendar, SingleWeekCalendar, TimeTextInput, WeekDay, WeekDayCell, WeekNumberCell, YearPicker, addDayStateHighlights, addDayStateHighlightsOnSingleDay, addWeekRangeHighlights, addWeekStateHighlights, buildDayStateForDateRange, buildDayStateForRange, buildDayStateForSingleMonth, calculateOverflowingMonth, createDay, dateRangeToStrings, dayHasHighlight, dayHighlightSelect, defaultCalendarTheme, defaultTextPropsProvider, defaultWrapperStyleProvider, extranetCalendarTheme, getDaysForWeekForDate, getMonthInYear, getMonthsInYear, getStartDateOfISOWeek, getWeekForDate, getWeeksForMonth, isDateRangeInvalid, setDayStateValue, setDayStateValueFunction, stringsToDateRange, toggleDateStringsIfEndIsEarlierThanStart, toggleDatesIfEndIsEarlierThanStart, useDateRangeCalendarState, useDateRangeExclusionSelection, useDateRangeSelection, useMultiDateSelection, useSingleDateSelection, useSingleWeekSelection };
 //# sourceMappingURL=index.es.js.map