@semcore/date-picker 4.56.0 → 16.0.0-prerelease.10

package/lib/esm/components/DateRangeComparatorAbstract.mjs

@@ -1,213 +1,304 @@
-import U from "@babel/runtime/helpers/esm/objectSpread2";
-import q from "@babel/runtime/helpers/esm/slicedToArray";
-import J from "@babel/runtime/helpers/esm/classCallCheck";
-import Q from "@babel/runtime/helpers/esm/createClass";
-import D from "@babel/runtime/helpers/esm/assertThisInitialized";
-import W from "@babel/runtime/helpers/esm/inherits";
-import X from "@babel/runtime/helpers/esm/createSuper";
-import y from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as Z } from "@semcore/utils/lib/core/index";
-import { sstyled as R, assignProps as E, Component as ee } from "@semcore/core";
-import S from "react";
-import x from "dayjs";
-import O from "@semcore/button";
-import { Flex as A } from "@semcore/flex-box";
-import Y from "@semcore/dropdown";
-import ae from "@semcore/utils/lib/enhances/i18nEnhance";
-import { localizedMessages as B } from "../translations/__intergalactic-dynamic-locales.mjs";
-import F from "../utils/shortDateRangeFormat.mjs";
-import re from "@semcore/checkbox";
-import { LinkTrigger as te } from "@semcore/base-trigger";
-import { includesDate as ne } from "../utils/includesDate.mjs";
-import { formatMMYY as oe, formatDDMMYY as ie } from "../utils/formatDate.mjs";
-var le = (
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled, assignProps, Component } from "@semcore/core";
+import React from "react";
+import dayjs from "dayjs";
+import Button from "@semcore/button";
+import { Flex } from "@semcore/flex-box";
+import Dropdown from "@semcore/dropdown";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { localizedMessages } from "../translations/__intergalactic-dynamic-locales.mjs";
+import shortDateRangeFormat from "../utils/shortDateRangeFormat.mjs";
+import Checkbox from "@semcore/checkbox";
+import { LinkTrigger } from "@semcore/base-trigger";
+import { includesDate } from "../utils/includesDate.mjs";
+import { formatMMYY, formatDDMMYY } from "../utils/formatDate.mjs";
+var style = (
   /*__reshadow_css_start__*/
-  (Z.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPopper_1mx7u_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_1mx7u_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_1mx7u_gg_:active,.___SPopper_1mx7u_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_1mx7u_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_1mx7u_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_1mx7u_gg_,.___STitle_1mx7u_gg_{display:flex;align-items:center}.___STitle_1mx7u_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_1mx7u_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_1mx7u_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_1mx7u_gg_ .___SInner_1mx7u_gg_{justify-content:flex-start}.___SInputMask_1mx7u_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal;padding-right:var(--intergalactic-spacing-2x, 8px);transition:width calc(var(--intergalactic-duration-medium, 300)*1ms) ease,min-width calc(var(--intergalactic-duration-medium, 300)*1ms) ease}.___SInputMask_1mx7u_gg_.__animationsDisabled_1mx7u_gg_{transition:none}.___SInputMask_1mx7u_gg_ .___SValue_1mx7u_gg_{letter-spacing:0}.___SIndicator_1mx7u_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_1mx7u_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_1mx7u_gg_._range_value_1mx7u_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_1mx7u_gg_._range_compare_1mx7u_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_1mx7u_gg_.__disabled_1mx7u_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_1mx7u_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_1mx7u_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_1mx7u_gg_ .___SMask_1mx7u_gg_,.___SDateRange_1mx7u_gg_ .___SValue_1mx7u_gg_,.___SSingleDateInput_1mx7u_gg_ .___SMask_1mx7u_gg_,.___SSingleDateInput_1mx7u_gg_ .___SValue_1mx7u_gg_{opacity:0}.___SSingleDateInput_1mx7u_gg_:focus-within .___SHumanizedDate_1mx7u_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_1mx7u_gg_:focus-within .___SMask_1mx7u_gg_,.___SSingleDateInput_1mx7u_gg_:focus-within .___SValue_1mx7u_gg_{opacity:1}.___SDateRange_1mx7u_gg_:focus-within .___SHumanizedDate_1mx7u_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_1mx7u_gg_:focus-within .___SMask_1mx7u_gg_,.___SDateRange_1mx7u_gg_:focus-within .___SValue_1mx7u_gg_{opacity:1}.___SInputMask_1mx7u_gg_.__noHumanizedDate_1mx7u_gg_ .___SMask_1mx7u_gg_,.___SInputMask_1mx7u_gg_.__noHumanizedDate_1mx7u_gg_ .___SValue_1mx7u_gg_{opacity:1}.___SDateRange_1mx7u_gg_ .___SInputMask_1mx7u_gg_:focus-within .___SMask_1mx7u_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_1mx7u_gg_:focus-within .___SRangeSep_1mx7u_gg_,.___SRangeSep_1mx7u_gg_.__fulfilled_1mx7u_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_1mx7u_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_1mx7u_gg_,.___SRangeComparatorHeader_1mx7u_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_1mx7u_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_1mx7u_gg_,.___SPeriodsList_1mx7u_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_1mx7u_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_1mx7u_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_1mx7u_gg_{transition:none}}",
-    "1mx7u_gg_"
+    ".___SPopper_1plgq_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_1plgq_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_1plgq_gg_:active,.___SPopper_1plgq_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_1plgq_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SPopper_1plgq_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SHeader_1plgq_gg_,.___STitle_1plgq_gg_{display:flex;align-items:center}.___STitle_1plgq_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_1plgq_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_1plgq_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_1plgq_gg_ .___SInner_1plgq_gg_{justify-content:flex-start}.___SInputMask_1plgq_gg_{color:var(--intergalactic-text-primary, #191b23);line-height:normal;padding-right:var(--intergalactic-spacing-2x, 8px);transition:width calc(var(--intergalactic-duration-medium, 300)*1ms) ease,min-width calc(var(--intergalactic-duration-medium, 300)*1ms) ease}.___SInputMask_1plgq_gg_.__animationsDisabled_1plgq_gg_{transition:none}.___SInputMask_1plgq_gg_ .___SValue_1plgq_gg_{letter-spacing:0}.___SIndicator_1plgq_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_1plgq_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_1plgq_gg_._range_value_1plgq_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_1plgq_gg_._range_compare_1plgq_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_1plgq_gg_.__disabled_1plgq_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_1plgq_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_1plgq_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_1plgq_gg_ .___SMask_1plgq_gg_,.___SDateRange_1plgq_gg_ .___SValue_1plgq_gg_,.___SSingleDateInput_1plgq_gg_ .___SMask_1plgq_gg_,.___SSingleDateInput_1plgq_gg_ .___SValue_1plgq_gg_{opacity:0}.___SSingleDateInput_1plgq_gg_:focus-within .___SHumanizedDate_1plgq_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_1plgq_gg_:focus-within .___SMask_1plgq_gg_,.___SSingleDateInput_1plgq_gg_:focus-within .___SValue_1plgq_gg_{opacity:1}.___SDateRange_1plgq_gg_:focus-within .___SHumanizedDate_1plgq_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_1plgq_gg_:focus-within .___SMask_1plgq_gg_,.___SDateRange_1plgq_gg_:focus-within .___SValue_1plgq_gg_{opacity:1}.___SInputMask_1plgq_gg_.__noHumanizedDate_1plgq_gg_ .___SMask_1plgq_gg_,.___SInputMask_1plgq_gg_.__noHumanizedDate_1plgq_gg_ .___SValue_1plgq_gg_{opacity:1}.___SDateRange_1plgq_gg_ .___SInputMask_1plgq_gg_:focus-within .___SMask_1plgq_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_1plgq_gg_:focus-within .___SRangeSep_1plgq_gg_,.___SRangeSep_1plgq_gg_.__fulfilled_1plgq_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_1plgq_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_1plgq_gg_,.___SRangeComparatorHeader_1plgq_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_1plgq_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_1plgq_gg_,.___SPeriodsList_1plgq_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_1plgq_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_1plgq_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_1plgq_gg_{transition:none}}",
+    "1plgq_gg_"
   ), {
-    __SHeader: "___SHeader_1mx7u_gg_",
-    __STitle: "___STitle_1mx7u_gg_",
-    __SToday: "___SToday_1mx7u_gg_",
-    __SPeriod: "___SPeriod_1mx7u_gg_",
-    __SButton: "___SButton_1mx7u_gg_",
-    __SInner: "___SInner_1mx7u_gg_",
-    __SInputMask: "___SInputMask_1mx7u_gg_",
-    _animationsDisabled: "__animationsDisabled_1mx7u_gg_",
-    __SValue: "___SValue_1mx7u_gg_",
-    __SIndicator: "___SIndicator_1mx7u_gg_",
-    __SRangeIndicator: "___SRangeIndicator_1mx7u_gg_",
-    _range_value: "_range_value_1mx7u_gg_",
-    _range_compare: "_range_compare_1mx7u_gg_",
-    _disabled: "__disabled_1mx7u_gg_",
-    __SHumanizedDate: "___SHumanizedDate_1mx7u_gg_",
-    __SMask: "___SMask_1mx7u_gg_",
-    __SSingleDateInput: "___SSingleDateInput_1mx7u_gg_",
-    __SDateRange: "___SDateRange_1mx7u_gg_",
-    _noHumanizedDate: "__noHumanizedDate_1mx7u_gg_",
-    __SRangeSep: "___SRangeSep_1mx7u_gg_",
-    _fulfilled: "__fulfilled_1mx7u_gg_",
-    __SRangeComparatorHeader: "___SRangeComparatorHeader_1mx7u_gg_",
-    __SRangeCalendar: "___SRangeCalendar_1mx7u_gg_",
-    __SFooter: "___SFooter_1mx7u_gg_",
-    __SPeriodsList: "___SPeriodsList_1mx7u_gg_",
-    __STooltip: "___STooltip_1mx7u_gg_",
-    __SCompareToggle: "___SCompareToggle_1mx7u_gg_",
-    __SPopper: "___SPopper_1mx7u_gg_"
+    "__SHeader": "___SHeader_1plgq_gg_",
+    "__STitle": "___STitle_1plgq_gg_",
+    "__SToday": "___SToday_1plgq_gg_",
+    "__SPeriod": "___SPeriod_1plgq_gg_",
+    "__SButton": "___SButton_1plgq_gg_",
+    "__SInner": "___SInner_1plgq_gg_",
+    "__SInputMask": "___SInputMask_1plgq_gg_",
+    "_animationsDisabled": "__animationsDisabled_1plgq_gg_",
+    "__SValue": "___SValue_1plgq_gg_",
+    "__SIndicator": "___SIndicator_1plgq_gg_",
+    "__SRangeIndicator": "___SRangeIndicator_1plgq_gg_",
+    "_range_value": "_range_value_1plgq_gg_",
+    "_range_compare": "_range_compare_1plgq_gg_",
+    "_disabled": "__disabled_1plgq_gg_",
+    "__SHumanizedDate": "___SHumanizedDate_1plgq_gg_",
+    "__SMask": "___SMask_1plgq_gg_",
+    "__SSingleDateInput": "___SSingleDateInput_1plgq_gg_",
+    "__SDateRange": "___SDateRange_1plgq_gg_",
+    "_noHumanizedDate": "__noHumanizedDate_1plgq_gg_",
+    "__SRangeSep": "___SRangeSep_1plgq_gg_",
+    "_fulfilled": "__fulfilled_1plgq_gg_",
+    "__SRangeComparatorHeader": "___SRangeComparatorHeader_1plgq_gg_",
+    "__SRangeCalendar": "___SRangeCalendar_1plgq_gg_",
+    "__SFooter": "___SFooter_1plgq_gg_",
+    "__SPeriodsList": "___SPeriodsList_1plgq_gg_",
+    "__STooltip": "___STooltip_1plgq_gg_",
+    "__SCompareToggle": "___SCompareToggle_1plgq_gg_",
+    "__SPopper": "___SPopper_1plgq_gg_"
   })
-), _e = ["INPUT"], ge = ["ArrowDown", "Enter", " "], se = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)), M = function() {
-  for (var s = arguments.length, u = new Array(s), e = 0; e < s; e++)
-    u[e] = arguments[e];
-  var a = u.flat().filter(Boolean).filter(function(t) {
-    return !Number.isNaN(new Date(t).getTime());
+);
+var INTERACTION_TAGS = ["INPUT"];
+var INTERACTION_KEYS = ["ArrowDown", "Enter", " "];
+var defaultDisplayedPeriod = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
+var getLatestDate = function getLatestDate2() {
+  for (var _len = arguments.length, dateRanges = new Array(_len), _key = 0; _key < _len; _key++) {
+    dateRanges[_key] = arguments[_key];
+  }
+  var allDates = dateRanges.flat().filter(Boolean).filter(function(date) {
+    return !Number.isNaN(new Date(date).getTime());
   });
-  if (!a.length) return null;
-  a.sort(function(t, n) {
-    return new Date(n).getTime() - new Date(t).getTime();
+  if (!allDates.length) return null;
+  allDates.sort(function(a, b) {
+    return new Date(b).getTime() - new Date(a).getTime();
   });
-  var r = a[0];
-  return r;
-}, T = /* @__PURE__ */ function(d) {
-  W(u, d);
-  var s = X(u);
-  function u() {
-    var e;
-    J(this, u);
-    for (var a = arguments.length, r = new Array(a), t = 0; t < a; t++)
-      r[t] = arguments[t];
-    return e = s.call.apply(s, [this].concat(r)), y(D(e), "popperRef", /* @__PURE__ */ S.createRef()), y(D(e), "unitRefs", {}), y(D(e), "navigateView", function(n) {
-      var o = e.asProps.displayedPeriod, _ = n >= 1 ? "add" : "subtract", i = x(o)[_](1, e.navigateStep).toDate();
-      e.handlers.displayedPeriod(i);
-    }), y(D(e), "bindHandlerNavigateClick", function(n) {
+  var latestDate = allDates[0];
+  return latestDate;
+};
+var DateRangeComparatorAbstract = /* @__PURE__ */ function(_Component) {
+  _inherits(DateRangeComparatorAbstract2, _Component);
+  var _super = _createSuper(DateRangeComparatorAbstract2);
+  function DateRangeComparatorAbstract2() {
+    var _this;
+    _classCallCheck(this, DateRangeComparatorAbstract2);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "popperRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "unitRefs", {});
+    _defineProperty(_assertThisInitialized(_this), "navigateView", function(direction) {
+      var displayedPeriod = _this.asProps.displayedPeriod;
+      var action = direction >= 1 ? "add" : "subtract";
+      var date = dayjs(displayedPeriod)[action](1, _this.navigateStep).toDate();
+      _this.handlers.displayedPeriod(date);
+    });
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerNavigateClick", function(direction) {
       return function() {
-        return e.navigateView(n);
+        return _this.navigateView(direction);
       };
-    }), y(D(e), "handleApplyClick", function() {
-      var n = e.asProps, o = n.value, _ = n.preselectedValue, i = n.preselectedCompare;
-      return e.handleApply(_ ?? (o == null ? void 0 : o.value), i ?? (o == null ? void 0 : o.compare));
-    }), y(D(e), "handleApply", function(n, o) {
-      e.handlers.value({
-        value: n,
-        compare: o
-      }), e.handlers.visible(!1);
-    }), y(D(e), "handleKeydownDown", function(n) {
-      return function(o) {
-        var _ = e.asProps, i = _.displayedPeriod, p = _.preselectedValue, v = _.visible, c = _.focusedRange, m = o.key, g = c === "compare" ? e.asProps.compareHighlighted : e.asProps.highlighted;
-        n === "trigger" && ge.includes(m) && (o.preventDefault(), o.stopPropagation(), e.handlers.visible(!v), setTimeout(function() {
-          var w = e.popperRef.current;
-          w && w.focus();
-        }, 0));
-        var l = e.keyDiff[m], h = function($) {
-          var z = q($, 2), j = z[0], G = z[1], C = G || j, H = i == null ? void 0 : i.getDate(), V = C == null ? void 0 : C.getDate();
-          e.navigateStep === "month" && (H = i == null ? void 0 : i.getMonth(), V = C == null ? void 0 : C.getMonth()), e.navigateStep === "year" && (H = i == null ? void 0 : i.getYear(), V = C == null ? void 0 : C.getYear());
-          var N = V - H;
-          return N < 0 || N > 1 ? C : i;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleApplyClick", function() {
+      var _this$asProps = _this.asProps, value = _this$asProps.value, preselectedValue = _this$asProps.preselectedValue, preselectedCompare = _this$asProps.preselectedCompare;
+      return _this.handleApply(preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : value === null || value === void 0 ? void 0 : value.value, preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : value === null || value === void 0 ? void 0 : value.compare);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleApply", function(value, compare) {
+      _this.handlers.value({
+        value,
+        compare
+      });
+      _this.handlers.visible(false);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeydownDown", function(place) {
+      return function(e) {
+        var _this$asProps2 = _this.asProps, displayedPeriod = _this$asProps2.displayedPeriod, preselectedValue = _this$asProps2.preselectedValue, visible = _this$asProps2.visible, focusedRange = _this$asProps2.focusedRange;
+        var key = e.key;
+        var highlighted = focusedRange === "compare" ? _this.asProps.compareHighlighted : _this.asProps.highlighted;
+        if (place === "trigger" && INTERACTION_KEYS.includes(key)) {
+          e.preventDefault();
+          e.stopPropagation();
+          _this.handlers.visible(!visible);
+          setTimeout(function() {
+            var popper = _this.popperRef.current;
+            if (popper) {
+              popper.focus();
+            }
+          }, 0);
+        }
+        var day = _this.keyDiff[key];
+        var setNextDisplayedPeriod = function setNextDisplayedPeriod2(next_highlighted2) {
+          var _next_highlighted = _slicedToArray(next_highlighted2, 2), startPeriod = _next_highlighted[0], endPeriod = _next_highlighted[1];
+          var highlightedPeriod = endPeriod || startPeriod;
+          var displayedPeriodNormalized = displayedPeriod === null || displayedPeriod === void 0 ? void 0 : displayedPeriod.getDate();
+          var highlightedPeriodNormalized = highlightedPeriod === null || highlightedPeriod === void 0 ? void 0 : highlightedPeriod.getDate();
+          if (_this.navigateStep === "month") {
+            displayedPeriodNormalized = displayedPeriod === null || displayedPeriod === void 0 ? void 0 : displayedPeriod.getMonth();
+            highlightedPeriodNormalized = highlightedPeriod === null || highlightedPeriod === void 0 ? void 0 : highlightedPeriod.getMonth();
+          }
+          if (_this.navigateStep === "year") {
+            displayedPeriodNormalized = displayedPeriod === null || displayedPeriod === void 0 ? void 0 : displayedPeriod.getYear();
+            highlightedPeriodNormalized = highlightedPeriod === null || highlightedPeriod === void 0 ? void 0 : highlightedPeriod.getYear();
+          }
+          var offset = highlightedPeriodNormalized - displayedPeriodNormalized;
+          if (offset < 0 || offset > 1) {
+            return highlightedPeriod;
+          }
+          return displayedPeriod;
         };
-        if (n === "popper" && o.key === " " && g.length) {
-          var f = g[1] || g[0];
-          e.isDisabled(f) || e.handleChange(f), o.preventDefault();
+        if (place === "popper" && e.key === " " && highlighted.length) {
+          var highlightedDate = highlighted[1] || highlighted[0];
+          if (!_this.isDisabled(highlightedDate)) {
+            _this.handleChange(highlightedDate);
+          }
+          e.preventDefault();
         }
-        if (n === "popper" && o.key === "Enter" && (o.metaKey || o.ctrlKey))
-          return e.handleApplyClick();
-        var P = void 0;
-        if (l) {
-          if (_e.includes(o.target.tagName)) return;
-          if (g.length) {
-            var b;
-            (p == null ? void 0 : p.length) === 1 ? (b = [p[0], x(g[1] || g[0]).add(l, e.keyStep).toDate()], P = b[1]) : (b = [x(g[0]).add(l, e.keyStep).toDate()], P = b[0]), c === "compare" ? e.handlers.compareHighlighted(b) : e.handlers.highlighted(b), e.handlers.displayedPeriod(h(b));
+        if (place === "popper" && e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+          return _this.handleApplyClick();
+        }
+        var changedDate = void 0;
+        if (day) {
+          if (INTERACTION_TAGS.includes(e.target.tagName)) return;
+          if (highlighted.length) {
+            var next_highlighted;
+            if ((preselectedValue === null || preselectedValue === void 0 ? void 0 : preselectedValue.length) === 1) {
+              next_highlighted = [preselectedValue[0], dayjs(highlighted[1] || highlighted[0]).add(day, _this.keyStep).toDate()];
+              changedDate = next_highlighted[1];
+            } else {
+              next_highlighted = [dayjs(highlighted[0]).add(day, _this.keyStep).toDate()];
+              changedDate = next_highlighted[0];
+            }
+            if (focusedRange === "compare") {
+              _this.handlers.compareHighlighted(next_highlighted);
+            } else {
+              _this.handlers.highlighted(next_highlighted);
+            }
+            _this.handlers.displayedPeriod(setNextDisplayedPeriod(next_highlighted));
           } else {
-            var I = [i || x().toDate()];
-            c === "compare" ? e.handlers.compareHighlighted(I) : e.handlers.highlighted(I), P = I[0];
+            var _highlighted = [displayedPeriod ? displayedPeriod : dayjs().toDate()];
+            if (focusedRange === "compare") {
+              _this.handlers.compareHighlighted(_highlighted);
+            } else {
+              _this.handlers.highlighted(_highlighted);
+            }
+            changedDate = _highlighted[0];
           }
-          if (o.preventDefault(), P) {
-            var k, K = e.keyStep === "month" ? oe : ie, L = K(P, e.asProps.locale);
-            (k = e.unitRefs[L]) === null || k === void 0 || k.focus();
+          e.preventDefault();
+          if (changedDate) {
+            var _this$unitRefs$format;
+            var formatter = _this.keyStep === "month" ? formatMMYY : formatDDMMYY;
+            var formattedDate = formatter(changedDate, _this.asProps.locale);
+            (_this$unitRefs$format = _this.unitRefs[formattedDate]) === null || _this$unitRefs$format === void 0 ? void 0 : _this$unitRefs$format.focus();
           }
         }
       };
-    }), y(D(e), "triggerFormattingProps", {
+    });
+    _defineProperty(_assertThisInitialized(_this), "triggerFormattingProps", {
       day: "numeric",
       month: "short",
       year: "numeric"
-    }), y(D(e), "handleChange", function(n) {
-      var o, _, i, p = e.asProps, v = p.focusedRange, c = p.preselectedCompare, m = p.preselectedValue, g = [], l = v === "compare" ? c : m;
-      if (Array.isArray(n))
-        l = n;
-      else if (!((o = l) !== null && o !== void 0 && o.length))
-        l = [n], g = [n];
-      else if (((_ = l) === null || _ === void 0 ? void 0 : _.length) >= 2)
-        l = [n], g = [n];
-      else if (((i = l) === null || i === void 0 ? void 0 : i[0]) > n) {
-        var h;
-        l = [n, (h = l) === null || h === void 0 ? void 0 : h[0]];
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function(date) {
+      var _value, _value2, _value3;
+      var _this$asProps3 = _this.asProps, focusedRange = _this$asProps3.focusedRange, preselectedCompare = _this$asProps3.preselectedCompare, preselectedValue = _this$asProps3.preselectedValue;
+      var highlighted = [];
+      var value = focusedRange === "compare" ? preselectedCompare : preselectedValue;
+      if (Array.isArray(date)) {
+        value = date;
+      } else if (!((_value = value) !== null && _value !== void 0 && _value.length)) {
+        value = [date];
+        highlighted = [date];
+      } else if (((_value2 = value) === null || _value2 === void 0 ? void 0 : _value2.length) >= 2) {
+        value = [date];
+        highlighted = [date];
+      } else if (((_value3 = value) === null || _value3 === void 0 ? void 0 : _value3[0]) > date) {
+        var _value4;
+        value = [date, (_value4 = value) === null || _value4 === void 0 ? void 0 : _value4[0]];
+      } else {
+        var _value5;
+        value = [(_value5 = value) === null || _value5 === void 0 ? void 0 : _value5[0], date];
+      }
+      if (focusedRange === "compare") {
+        _this.handlers.preselectedCompare(value);
+        _this.handlers.compareHighlighted(highlighted);
       } else {
-        var f;
-        l = [(f = l) === null || f === void 0 ? void 0 : f[0], n];
+        _this.handlers.preselectedValue(value);
+        _this.handlers.highlighted(highlighted);
       }
-      v === "compare" ? (e.handlers.preselectedCompare(l), e.handlers.compareHighlighted(g)) : (e.handlers.preselectedValue(l), e.handlers.highlighted(g));
-    }), e;
+    });
+    return _this;
   }
-  return Q(u, [{
+  _createClass(DateRangeComparatorAbstract2, [{
     key: "getPeriodProps",
-    value: function() {
-      var a, r = this, t = this.asProps, n = t.periods, o = n === void 0 ? this.getDefaultPeriods() : n, _ = t.onHighlightedChange, i = t.onCompareHighlightedChange, p = t.onDisplayedPeriodChange, v = t.preselectedValue, c = t.preselectedCompare, m = t.focusedRange, g = t.getI18nText, l = v ?? ((a = this.asProps.value) === null || a === void 0 ? void 0 : a.value);
-      if (m === "compare") {
-        var h;
-        l = c ?? ((h = this.asProps.value) === null || h === void 0 ? void 0 : h.compare);
+    value: function getPeriodProps() {
+      var _this$asProps$value, _this2 = this;
+      var _this$asProps4 = this.asProps, _this$asProps4$period = _this$asProps4.periods, periods = _this$asProps4$period === void 0 ? this.getDefaultPeriods() : _this$asProps4$period, onHighlightedChange = _this$asProps4.onHighlightedChange, onCompareHighlightedChange = _this$asProps4.onCompareHighlightedChange, onDisplayedPeriodChange = _this$asProps4.onDisplayedPeriodChange, preselectedValue = _this$asProps4.preselectedValue, preselectedCompare = _this$asProps4.preselectedCompare, focusedRange = _this$asProps4.focusedRange, getI18nText = _this$asProps4.getI18nText;
+      var value = preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : (_this$asProps$value = this.asProps.value) === null || _this$asProps$value === void 0 ? void 0 : _this$asProps$value.value;
+      if (focusedRange === "compare") {
+        var _this$asProps$value2;
+        value = preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : (_this$asProps$value2 = this.asProps.value) === null || _this$asProps$value2 === void 0 ? void 0 : _this$asProps$value2.compare;
       }
       return {
-        periods: o,
-        value: l,
-        onChange: function(P) {
-          m === "compare" ? r.handlers.preselectedCompare(P) : r.handlers.preselectedValue(P);
+        periods,
+        value,
+        onChange: function onChange(value2) {
+          if (focusedRange === "compare") {
+            _this2.handlers.preselectedCompare(value2);
+          } else {
+            _this2.handlers.preselectedValue(value2);
+          }
         },
-        onHighlightedChange: m === "compare" ? i : _,
-        onDisplayedPeriodChange: p,
+        onHighlightedChange: focusedRange === "compare" ? onCompareHighlightedChange : onHighlightedChange,
+        onDisplayedPeriodChange,
         role: "listbox",
-        "aria-label": g("periods")
+        "aria-label": getI18nText("periods")
       };
     }
   }, {
     key: "getPrevProps",
-    value: function() {
-      var a = this.asProps.getI18nText, r = this.navigateStep;
+    value: function getPrevProps() {
+      var getI18nText = this.asProps.getI18nText;
+      var navigateStep = this.navigateStep;
       return {
-        getI18nText: a,
+        getI18nText,
         onClick: this.bindHandlerNavigateClick(-1),
-        "aria-label": a(r === "month" ? "prevMonth" : "prevYear")
+        "aria-label": navigateStep === "month" ? getI18nText("prevMonth") : getI18nText("prevYear")
       };
     }
   }, {
     key: "getNextProps",
-    value: function() {
-      var a = this.asProps.getI18nText, r = this.navigateStep;
+    value: function getNextProps() {
+      var getI18nText = this.asProps.getI18nText;
+      var navigateStep = this.navigateStep;
       return {
-        getI18nText: a,
+        getI18nText,
         onClick: this.bindHandlerNavigateClick(1),
-        "aria-label": a(r === "month" ? "nextMonth" : "nextYear")
+        "aria-label": navigateStep === "month" ? getI18nText("nextMonth") : getI18nText("nextYear")
       };
     }
   }, {
     key: "uncontrolledProps",
-    value: function() {
-      var a = this;
+    value: function uncontrolledProps() {
+      var _this3 = this;
       return {
         displayedPeriod: null,
-        visible: [null, function(r) {
-          if (!r)
-            a.handlers.highlighted([]), a.handlers.compareHighlighted([]), a.handlers.preselectedValue(void 0), a.handlers.preselectedCompare(void 0), a.handlers.compareToggle(void 0), a.handlers.focusedRange("value");
-          else {
-            var t, n;
-            a.handlers.compareToggle(!!((t = a.asProps.value) !== null && t !== void 0 && (n = t.compare) !== null && n !== void 0 && n.length));
+        visible: [null, function(visible) {
+          if (!visible) {
+            _this3.handlers.highlighted([]);
+            _this3.handlers.compareHighlighted([]);
+            _this3.handlers.preselectedValue(void 0);
+            _this3.handlers.preselectedCompare(void 0);
+            _this3.handlers.compareToggle(void 0);
+            _this3.handlers.focusedRange("value");
+          } else {
+            var _this3$asProps$value, _this3$asProps$value$;
+            _this3.handlers.compareToggle(!!((_this3$asProps$value = _this3.asProps.value) !== null && _this3$asProps$value !== void 0 && (_this3$asProps$value$ = _this3$asProps$value.compare) !== null && _this3$asProps$value$ !== void 0 && _this3$asProps$value$.length));
           }
-          var o = a.asProps, _ = o.value, i = o.displayedPeriod, p = _ ? M(_.value, _.compare) : void 0;
-          if (r) {
-            if (p && p !== i)
-              a.handlers.displayedPeriod(p);
-            else if (!p) {
-              var v = a.props, c = v.displayedPeriod, m = v.defaultDisplayedPeriod;
-              a.handlers.displayedPeriod(c || m);
+          var _this3$asProps = _this3.asProps, value = _this3$asProps.value, displayedPeriod = _this3$asProps.displayedPeriod;
+          var newDisplayedPeriod = value ? getLatestDate(value.value, value.compare) : void 0;
+          if (visible) {
+            if (newDisplayedPeriod && newDisplayedPeriod !== displayedPeriod) {
+              _this3.handlers.displayedPeriod(newDisplayedPeriod);
+            } else if (!newDisplayedPeriod) {
+              var _this3$props = _this3.props, _displayedPeriod = _this3$props.displayedPeriod, _defaultDisplayedPeriod = _this3$props.defaultDisplayedPeriod;
+              _this3.handlers.displayedPeriod(_displayedPeriod || _defaultDisplayedPeriod);
             }
           }
         }],
@@ -217,183 +308,207 @@ var le = (
         preselectedCompare: null,
         compareToggle: null,
         focusedRange: null,
-        value: [null, function(r) {
-          var t = [r == null ? void 0 : r.value, r == null ? void 0 : r.compare].flat(2).filter(function(n) {
-            var o;
-            return n == null || (o = n.isValid) === null || o === void 0 ? void 0 : o.call(n);
+        value: [null, function(value) {
+          var dates = [value === null || value === void 0 ? void 0 : value.value, value === null || value === void 0 ? void 0 : value.compare].flat(2).filter(function(date) {
+            var _date$isValid;
+            return date === null || date === void 0 ? void 0 : (_date$isValid = date.isValid) === null || _date$isValid === void 0 ? void 0 : _date$isValid.call(date);
           });
-          t.length > 0 && a.handlers.displayedPeriod(M(r));
+          if (dates.length > 0) _this3.handlers.displayedPeriod(getLatestDate(value));
         }]
       };
     }
   }, {
     key: "getApplyProps",
-    value: function() {
-      var a = this.asProps.getI18nText;
+    value: function getApplyProps() {
+      var getI18nText = this.asProps.getI18nText;
       return {
-        getI18nText: a,
+        getI18nText,
         onClick: this.handleApplyClick
       };
     }
   }, {
     key: "getResetProps",
-    value: function() {
-      var a = this, r = this.asProps.getI18nText;
+    value: function getResetProps() {
+      var _this4 = this;
+      var getI18nText = this.asProps.getI18nText;
       return {
-        getI18nText: r,
-        onClick: function() {
-          return a.handleApply(null, null);
+        getI18nText,
+        onClick: function onClick() {
+          return _this4.handleApply(null, null);
         }
       };
     }
   }, {
     key: "isDisabled",
-    value: function(a) {
-      var r = this.asProps.disabled;
-      return r.some(ne(x(a), "date"));
+    value: function isDisabled(date) {
+      var disabled = this.asProps.disabled;
+      return disabled.some(includesDate(dayjs(date), "date"));
     }
   }, {
     key: "getDefaultPeriods",
-    value: function() {
-      var a = this.asProps.getI18nText, r = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
+    value: function getDefaultPeriods() {
+      var getI18nText = this.asProps.getI18nText;
+      var today = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
       return [{
-        children: a("lastMonth"),
-        value: [x(r).subtract(1, "month").startOf("month").toDate(), x(r).startOf("month").toDate()]
+        children: getI18nText("lastMonth"),
+        value: [dayjs(today).subtract(1, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
       }, {
-        children: a("last3Months"),
-        value: [x(r).subtract(2, "month").startOf("month").toDate(), x(r).startOf("month").toDate()]
+        children: getI18nText("last3Months"),
+        value: [dayjs(today).subtract(2, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
       }, {
-        children: a("last6Months"),
-        value: [x(r).subtract(5, "month").startOf("month").toDate(), x(r).startOf("month").toDate()]
+        children: getI18nText("last6Months"),
+        value: [dayjs(today).subtract(5, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
       }, {
-        children: a("last12Months"),
-        value: [x(r).subtract(11, "month").startOf("month").toDate(), x(r).startOf("month").toDate()]
+        children: getI18nText("last12Months"),
+        value: [dayjs(today).subtract(11, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
       }];
     }
   }, {
     key: "getTitleProps",
-    value: function(a, r) {
-      var t = this.asProps, n = t.locale, o = t.displayedPeriod;
+    value: function getTitleProps(props, index) {
+      var _this$asProps5 = this.asProps, locale = _this$asProps5.locale, displayedPeriod = _this$asProps5.displayedPeriod;
       return {
-        children: new Intl.DateTimeFormat(n, {
+        children: new Intl.DateTimeFormat(locale, {
           month: "long",
           year: "numeric"
-        }).format(x(o).add(r, this.navigateStep).startOf(this.navigateStep).toDate())
+        }).format(dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate())
       };
     }
   }, {
     key: "getTriggerProps",
-    value: function(a) {
-      var r, t, n = this, o = a.placeholder, _ = o === void 0 ? "Select date ranges" : o, i = a.separator, p = i === void 0 ? "vs." : i, v = this.asProps, c = v.locale, m = v.visible, g = (r = this.asProps.value) === null || r === void 0 ? void 0 : r.value, l = (t = this.asProps.value) === null || t === void 0 ? void 0 : t.compare, h = U({
-        locale: c
-      }, this.triggerFormattingProps), f = _;
-      return g != null && g[0] && g !== null && g !== void 0 && g[1] && (f = F(g, h)), l != null && l[0] && l !== null && l !== void 0 && l[1] && (f = "".concat(f || "", " ").concat(p, " ").concat(F(l, h))), {
-        children: f,
-        visible: m,
-        onClick: function() {
-          return n.handlers.visible(!m);
+    value: function getTriggerProps(_ref10) {
+      var _this$asProps$value3, _this$asProps$value4, _this5 = this;
+      var _ref10$placeholder = _ref10.placeholder, placeholder = _ref10$placeholder === void 0 ? "Select date ranges" : _ref10$placeholder, _ref10$separator = _ref10.separator, separator = _ref10$separator === void 0 ? "vs." : _ref10$separator;
+      var _this$asProps6 = this.asProps, locale = _this$asProps6.locale, visible = _this$asProps6.visible;
+      var value = (_this$asProps$value3 = this.asProps.value) === null || _this$asProps$value3 === void 0 ? void 0 : _this$asProps$value3.value;
+      var compare = (_this$asProps$value4 = this.asProps.value) === null || _this$asProps$value4 === void 0 ? void 0 : _this$asProps$value4.compare;
+      var formattingProps = _objectSpread({
+        locale
+      }, this.triggerFormattingProps);
+      var children = placeholder;
+      if (value !== null && value !== void 0 && value[0] && value !== null && value !== void 0 && value[1]) {
+        children = shortDateRangeFormat(value, formattingProps);
+      }
+      if (compare !== null && compare !== void 0 && compare[0] && compare !== null && compare !== void 0 && compare[1]) {
+        children = "".concat(children || "", " ").concat(separator, " ").concat(shortDateRangeFormat(compare, formattingProps));
+      }
+      return {
+        children,
+        visible,
+        onClick: function onClick() {
+          return _this5.handlers.visible(!visible);
         },
         onKeyDown: this.handleKeydownDown("trigger")
       };
     }
   }, {
     key: "getRangeInput",
-    value: function() {
+    value: function getRangeInput() {
       throw new Error("not implemented");
     }
   }, {
     key: "getRangeInputProps",
-    value: function() {
+    value: function getRangeInputProps() {
       return {
         inputRole: null
       };
     }
   }, {
     key: "getValueDateRangeProps",
-    value: function() {
-      var a = this, r = this.asProps, t = r.value, n = r.onDisplayedPeriodChange, o = r.locale, _ = r.disabled, i = r.disabledErrorText, p = r.getI18nText, v = r.focusedRange, c = r.preselectedValue, m = r.animationsDisabled, g = r.visible;
+    value: function getValueDateRangeProps() {
+      var _this6 = this;
+      var _this$asProps7 = this.asProps, value = _this$asProps7.value, onDisplayedPeriodChange = _this$asProps7.onDisplayedPeriodChange, locale = _this$asProps7.locale, disabled = _this$asProps7.disabled, disabledErrorText = _this$asProps7.disabledErrorText, getI18nText = _this$asProps7.getI18nText, focusedRange = _this$asProps7.focusedRange, preselectedValue = _this$asProps7.preselectedValue, animationsDisabled = _this$asProps7.animationsDisabled, visible = _this$asProps7.visible;
       return {
-        popoverVisible: g,
-        focused: v === "value" ? !0 : void 0,
-        value: c ?? (t == null ? void 0 : t.value),
-        onChange: function(h) {
-          return a.handlers.preselectedValue(h);
+        popoverVisible: visible,
+        focused: focusedRange === "value" ? true : void 0,
+        value: preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : value === null || value === void 0 ? void 0 : value.value,
+        onChange: function onChange(value2) {
+          return _this6.handlers.preselectedValue(value2);
         },
-        onDisplayedPeriodChange: n,
-        locale: o,
-        disabledDates: _,
-        disabledErrorText: i,
+        onDisplayedPeriodChange,
+        locale,
+        disabledDates: disabled,
+        disabledErrorText,
         children: this.getRangeInput(),
-        getI18nText: p,
-        onFocus: function() {
-          a.handlers.focusedRange("value");
+        getI18nText,
+        onFocus: function onFocus() {
+          _this6.handlers.focusedRange("value");
         },
-        animationsDisabled: m
+        animationsDisabled
       };
     }
   }, {
     key: "getCompareDateRangeProps",
-    value: function() {
-      var a, r = this, t = this.asProps, n = t.value, o = t.onDisplayedPeriodChange, _ = t.locale, i = t.disabled, p = t.disabledErrorText, v = t.getI18nText, c = t.focusedRange, m = t.preselectedCompare, g = t.compareToggle, l = t.animationsDisabled, h = t.visible;
+    value: function getCompareDateRangeProps() {
+      var _value$compare, _this7 = this;
+      var _this$asProps8 = this.asProps, value = _this$asProps8.value, onDisplayedPeriodChange = _this$asProps8.onDisplayedPeriodChange, locale = _this$asProps8.locale, disabled = _this$asProps8.disabled, disabledErrorText = _this$asProps8.disabledErrorText, getI18nText = _this$asProps8.getI18nText, focusedRange = _this$asProps8.focusedRange, preselectedCompare = _this$asProps8.preselectedCompare, compareToggle = _this$asProps8.compareToggle, animationsDisabled = _this$asProps8.animationsDisabled, visible = _this$asProps8.visible;
       return {
-        popoverVisible: h,
-        focused: c === "compare" ? !0 : void 0,
-        disabled: !(g ?? (n == null || (a = n.compare) === null || a === void 0 ? void 0 : a.length)),
-        value: m ?? (n == null ? void 0 : n.compare),
-        onChange: function(P) {
-          return r.handlers.preselectedCompare(P);
+        popoverVisible: visible,
+        focused: focusedRange === "compare" ? true : void 0,
+        disabled: !(compareToggle !== null && compareToggle !== void 0 ? compareToggle : value === null || value === void 0 ? void 0 : (_value$compare = value.compare) === null || _value$compare === void 0 ? void 0 : _value$compare.length),
+        value: preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : value === null || value === void 0 ? void 0 : value.compare,
+        onChange: function onChange(value2) {
+          return _this7.handlers.preselectedCompare(value2);
         },
-        onDisplayedPeriodChange: o,
-        locale: _,
-        disabledDates: i,
+        onDisplayedPeriodChange,
+        locale,
+        disabledDates: disabled,
         children: this.getRangeInput(),
-        getI18nText: v,
-        disabledErrorText: p,
-        onFocus: function() {
-          r.handlers.focusedRange("compare");
+        getI18nText,
+        disabledErrorText,
+        onFocus: function onFocus() {
+          _this7.handlers.focusedRange("compare");
         },
-        animationsDisabled: l
+        animationsDisabled
       };
     }
   }, {
     key: "getCompareToggleProps",
-    value: function() {
-      var a = this, r = this.asProps, t = r.getI18nText;
-      r.value;
-      var n = r.compareToggle;
+    value: function getCompareToggleProps() {
+      var _this8 = this;
+      var _this$asProps9 = this.asProps, getI18nText = _this$asProps9.getI18nText;
+      _this$asProps9.value;
+      var compareToggle = _this$asProps9.compareToggle;
       return {
-        getI18nText: t,
-        checked: n,
-        onChange: function(_) {
-          _ ? (a.handlers.compareToggle(!0), a.handlers.focusedRange("compare")) : (a.handlers.compareToggle(!1), a.handlers.focusedRange("value"), a.handlers.preselectedCompare([]));
+        getI18nText,
+        checked: compareToggle,
+        onChange: function onChange(checked) {
+          if (checked) {
+            _this8.handlers.compareToggle(true);
+            _this8.handlers.focusedRange("compare");
+          } else {
+            _this8.handlers.compareToggle(false);
+            _this8.handlers.focusedRange("value");
+            _this8.handlers.preselectedCompare([]);
+          }
         }
       };
     }
   }, {
     key: "getCalendarProps",
-    value: function(a, r) {
-      var t = this.asProps, n = t.locale, o = t.displayedPeriod, _ = t.disabled, i = t.value, p = t.onCompareHighlightedChange, v = t.highlighted, c = t.compareHighlighted, m = t.onHighlightedChange, g = t.preselectedCompare, l = t.preselectedValue, h = t.focusedRange, f = t.getI18nText;
+    value: function getCalendarProps(_props, index) {
+      var _this$asProps10 = this.asProps, locale = _this$asProps10.locale, displayedPeriod = _this$asProps10.displayedPeriod, disabled = _this$asProps10.disabled, value = _this$asProps10.value, onCompareHighlightedChange = _this$asProps10.onCompareHighlightedChange, highlighted = _this$asProps10.highlighted, compareHighlighted = _this$asProps10.compareHighlighted, onHighlightedChange = _this$asProps10.onHighlightedChange, preselectedCompare = _this$asProps10.preselectedCompare, preselectedValue = _this$asProps10.preselectedValue, focusedRange = _this$asProps10.focusedRange, getI18nText = _this$asProps10.getI18nText;
       return {
-        locale: n,
-        displayedPeriod: x(o).add(r, this.navigateStep).startOf(this.navigateStep).toDate(),
-        disabled: _,
+        locale,
+        displayedPeriod: dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
+        disabled,
         onChange: this.handleChange,
-        highlighted: v,
-        compareHighlighted: c,
-        onCompareHighlightedChange: p,
-        onHighlightedChange: m,
-        range: h,
-        value: l ?? (i == null ? void 0 : i.value),
-        compare: g ?? (i == null ? void 0 : i.compare),
+        highlighted,
+        compareHighlighted,
+        onCompareHighlightedChange,
+        onHighlightedChange,
+        range: focusedRange,
+        value: preselectedValue !== null && preselectedValue !== void 0 ? preselectedValue : value === null || value === void 0 ? void 0 : value.value,
+        compare: preselectedCompare !== null && preselectedCompare !== void 0 ? preselectedCompare : value === null || value === void 0 ? void 0 : value.compare,
         unitRefs: this.unitRefs,
-        getI18nText: f,
-        actionsDescribing: r === 0 ? "range-compare" : null,
-        tabIndex: r === 0 ? 0 : -1
+        getI18nText,
+        actionsDescribing: index === 0 ? "range-compare" : null,
+        tabIndex: index === 0 ? 0 : -1
       };
     }
   }, {
     key: "getPopperProps",
-    value: function() {
+    value: function getPopperProps() {
       return {
         p: 0,
         ref: this.popperRef,
@@ -402,25 +517,26 @@ var le = (
     }
   }, {
     key: "render",
-    value: function() {
-      var a = this.asProps, r, t = this.asProps, n = t.Children, o = t.styles, _ = t["aria-label"];
-      return /* @__PURE__ */ S.createElement(S.Fragment, null, (r = R(o), /* @__PURE__ */ S.createElement(Y, E({
-        "use:aria-label": _,
-        __excludeProps: ["onChange", "value"]
-      }, a), /* @__PURE__ */ S.createElement(n, r.cn("Children", {})))));
+    value: function render() {
+      var _ref = this.asProps, _ref4;
+      var _this$asProps11 = this.asProps, Children = _this$asProps11.Children, styles = _this$asProps11.styles, providedAriaLabel = _this$asProps11["aria-label"];
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, (_ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(Dropdown, assignProps({
+        "use:aria-label": providedAriaLabel,
+        "__excludeProps": ["onChange", "value"]
+      }, _ref), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})))));
     }
   }], [{
     key: "defaultProps",
-    value: function(a) {
-      var r = a.primaryRange, t = a.defaultPrimaryRange, n = a.secondaryRange, o = a.defaultSecondaryRange;
+    value: function defaultProps(_ref11) {
+      var primaryRange = _ref11.primaryRange, defaultPrimaryRange = _ref11.defaultPrimaryRange, secondaryRange = _ref11.secondaryRange, defaultSecondaryRange = _ref11.defaultSecondaryRange;
       return {
-        i18n: B,
+        i18n: localizedMessages,
         locale: "en",
         defaultValue: null,
         defaultHighlighted: [],
         defaultCompareHighlighted: [],
-        defaultDisplayedPeriod: M(r, t, n, o) || se,
-        defaultVisible: !1,
+        defaultDisplayedPeriod: getLatestDate(primaryRange, defaultPrimaryRange, secondaryRange, defaultSecondaryRange) || defaultDisplayedPeriod,
+        defaultVisible: false,
         defaultPreselectedValue: null,
         defaultPreselectedCompare: null,
         defaultCompareToggle: null,
@@ -429,72 +545,80 @@ var le = (
         size: "m"
       };
     }
-  }]), u;
-}(ee);
-y(T, "displayName", "DateRangeComparator");
-y(T, "style", le);
-y(T, "enhance", [ae(B)]);
-y(T, "subtract", function(d, s, u) {
-  return x(d).subtract(s, u).toDate();
+  }]);
+  return DateRangeComparatorAbstract2;
+}(Component);
+_defineProperty(DateRangeComparatorAbstract, "displayName", "DateRangeComparator");
+_defineProperty(DateRangeComparatorAbstract, "style", style);
+_defineProperty(DateRangeComparatorAbstract, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(DateRangeComparatorAbstract, "subtract", function(date, amount, unit) {
+  return dayjs(date).subtract(amount, unit).toDate();
 });
-function Me(d) {
-  var s = arguments[0], u = d.getI18nText;
-  return /* @__PURE__ */ S.createElement(O, E({
-    use: "primary",
-    children: u("apply")
-  }, s));
+function Apply(props) {
+  var _ref2 = arguments[0];
+  var getI18nText = props.getI18nText;
+  return /* @__PURE__ */ React.createElement(Button, assignProps({
+    "use": "primary",
+    "children": getI18nText("apply")
+  }, _ref2));
 }
-function Ee(d) {
-  var s = arguments[0], u = d.getI18nText;
-  return /* @__PURE__ */ S.createElement(O, E({
-    use: "tertiary",
-    theme: "muted",
-    children: u("reset")
-  }, s));
+function Reset(props) {
+  var _ref3 = arguments[0];
+  var getI18nText = props.getI18nText;
+  return /* @__PURE__ */ React.createElement(Button, assignProps({
+    "use": "tertiary",
+    "theme": "muted",
+    "children": getI18nText("reset")
+  }, _ref3));
 }
-function Ae(d) {
-  var s, u = d.Root, e = d.styles;
-  return s = R(e), /* @__PURE__ */ S.createElement(u, s.cn("STrigger", {
-    render: Y.Trigger,
-    tag: te
+function Trigger(props) {
+  var _ref5;
+  var STrigger = props.Root, styles = props.styles;
+  return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(STrigger, _ref5.cn("STrigger", {
+    "render": Dropdown.Trigger,
+    "tag": LinkTrigger
   }));
 }
-function ze(d) {
-  var s, u = d.Root, e = d.styles, a = d.getI18nText;
-  return s = R(e), /* @__PURE__ */ S.createElement(u, s.cn("SCompareToggle", {
-    render: re,
-    label: a("compare")
+function CompareToggle(props) {
+  var _ref6;
+  var SCompareToggle = props.Root, styles = props.styles, getI18nText = props.getI18nText;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SCompareToggle, _ref6.cn("SCompareToggle", {
+    "render": Checkbox,
+    "label": getI18nText("compare")
   }));
 }
-function Ne(d) {
-  var s, u = d.Root, e = d.Children, a = d.styles;
-  return s = R(a), /* @__PURE__ */ S.createElement(u, s.cn("SRangeComparatorHeader", {
-    render: A,
-    gap: 4,
-    alignItems: "center"
-  }), /* @__PURE__ */ S.createElement(e, s.cn("Children", {})));
+function Header(props) {
+  var _ref7;
+  var SRangeComparatorHeader = props.Root, Children = props.Children, styles = props.styles;
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SRangeComparatorHeader, _ref7.cn("SRangeComparatorHeader", {
+    "render": Flex,
+    "gap": 4,
+    "alignItems": "center"
+  }), /* @__PURE__ */ React.createElement(Children, _ref7.cn("Children", {})));
 }
-function Fe(d) {
-  var s, u = d.Root, e = d.Children, a = d.styles;
-  return s = R(a), /* @__PURE__ */ S.createElement(u, s.cn("SBody", {
-    render: A,
-    gap: 4
-  }), /* @__PURE__ */ S.createElement(e, s.cn("Children", {})));
+function Body(props) {
+  var _ref8;
+  var SBody = props.Root, Children = props.Children, styles = props.styles;
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SBody, _ref8.cn("SBody", {
+    "render": Flex,
+    "gap": 4
+  }), /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {})));
 }
-function Oe(d) {
-  var s, u = d.Root, e = d.styles, a = d.Children;
-  return s = R(e), /* @__PURE__ */ S.createElement(u, s.cn("SFooter", {
-    render: A,
-    gap: 2
-  }), /* @__PURE__ */ S.createElement(a, s.cn("Children", {})));
+function Footer(props) {
+  var _ref9;
+  var SFooter = props.Root, styles = props.styles, Children = props.Children;
+  return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SFooter, _ref9.cn("SFooter", {
+    "render": Flex,
+    "gap": 2
+  }), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
 }
 export {
-  Me as Apply,
-  Fe as Body,
-  ze as CompareToggle,
-  Oe as Footer,
-  Ne as Header,
-  Ee as Reset,
-  Ae as Trigger,
-  T as default
+  Apply,
+  Body,
+  CompareToggle,
+  Footer,
+  Header,
+  Reset,
+  Trigger,
+  DateRangeComparatorAbstract as default
 };