@semcore/date-picker 16.2.4 → 17.0.0-prerelease.18

package/lib/esm/components/DateRangeComparatorAbstract.mjs

@@ -1,17 +1,11 @@
-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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, assignProps, Component } from "@semcore/core";
+import { Flex } from "@semcore/base-components";
 import { LinkTrigger } from "@semcore/base-trigger";
 import Button from "@semcore/button";
 import Checkbox from "@semcore/checkbox";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import Dropdown from "@semcore/dropdown";
-import { Flex } from "@semcore/flex-box";
 import dayjs from "dayjs";
 import React from "react";
 import { localizedMessages } from "../translations/__intergalactic-dynamic-locales.mjs";
@@ -19,564 +13,592 @@ import { formatMMYY, formatDDMMYY } from "../utils/formatDate.mjs";
 import { includesDate } from "../utils/includesDate.mjs";
 import shortDateRangeFormat from "../utils/shortDateRangeFormat.mjs";
 /*!__reshadow-styles__:"../style/date-picker.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SPopper_gjj0p_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_gjj0p_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_gjj0p_gg_:active,.___SPopper_gjj0p_gg_:focus{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_gjj0p_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SHeader_gjj0p_gg_,.___STitle_gjj0p_gg_{display:flex;align-items:center}.___STitle_gjj0p_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_gjj0p_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_gjj0p_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_gjj0p_gg_ .___SInner_gjj0p_gg_{justify-content:flex-start}.___SInputMask_gjj0p_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_gjj0p_gg_.__animationsDisabled_gjj0p_gg_{transition:none}.___SInputMask_gjj0p_gg_ .___SValue_gjj0p_gg_{letter-spacing:0}.___SInputMask_gjj0p_gg_ .___SValue_gjj0p_gg_:focus{outline:0}.___SIndicator_gjj0p_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_gjj0p_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_gjj0p_gg_._range_value_gjj0p_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_gjj0p_gg_._range_compare_gjj0p_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_gjj0p_gg_.__disabled_gjj0p_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_gjj0p_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_gjj0p_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_gjj0p_gg_ .___SMask_gjj0p_gg_,.___SDateRange_gjj0p_gg_ .___SValue_gjj0p_gg_,.___SSingleDateInput_gjj0p_gg_ .___SMask_gjj0p_gg_,.___SSingleDateInput_gjj0p_gg_ .___SValue_gjj0p_gg_{opacity:0}.___SSingleDateInput_gjj0p_gg_:focus-within .___SHumanizedDate_gjj0p_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_gjj0p_gg_:focus-within .___SMask_gjj0p_gg_,.___SSingleDateInput_gjj0p_gg_:focus-within .___SValue_gjj0p_gg_{opacity:1}.___SDateRange_gjj0p_gg_:focus-within .___SHumanizedDate_gjj0p_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_gjj0p_gg_:focus-within .___SMask_gjj0p_gg_,.___SDateRange_gjj0p_gg_:focus-within .___SValue_gjj0p_gg_{opacity:1}.___SInputMask_gjj0p_gg_.__noHumanizedDate_gjj0p_gg_ .___SMask_gjj0p_gg_,.___SInputMask_gjj0p_gg_.__noHumanizedDate_gjj0p_gg_ .___SValue_gjj0p_gg_{opacity:1}.___SDateRange_gjj0p_gg_ .___SInputMask_gjj0p_gg_:focus-within .___SMask_gjj0p_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_gjj0p_gg_:focus-within .___SRangeSep_gjj0p_gg_,.___SRangeSep_gjj0p_gg_.__fulfilled_gjj0p_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_gjj0p_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_gjj0p_gg_,.___SRangeComparatorHeader_gjj0p_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_gjj0p_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_gjj0p_gg_,.___SPeriodsList_gjj0p_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_gjj0p_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_gjj0p_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_gjj0p_gg_{transition:none}}",
+    ".___SPopper_9ubmf_gg_{padding:var(--intergalactic-spacing-4x, 16px);outline:0}.___SPopper_9ubmf_gg_::-moz-focus-inner{border:0;padding:0}.___SPopper_9ubmf_gg_:active,.___SPopper_9ubmf_gg_:focus{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPopper_9ubmf_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SHeader_9ubmf_gg_,.___STitle_9ubmf_gg_{display:flex;align-items:center}.___STitle_9ubmf_gg_{font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-primary, #191b23);height:32px;width:100%;justify-content:center}.___SToday_9ubmf_gg_{display:flex;margin-top:var(--intergalactic-spacing-3x, 12px);justify-content:center}.___SPeriod_9ubmf_gg_{display:flex;flex-direction:column;margin-bottom:var(--intergalactic-spacing-2x, 8px)}.___SButton_9ubmf_gg_ .___SInner_9ubmf_gg_{justify-content:flex-start}.___SInputMask_9ubmf_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_9ubmf_gg_.__animationsDisabled_9ubmf_gg_{transition:none}.___SInputMask_9ubmf_gg_ .___SValue_9ubmf_gg_{letter-spacing:0}.___SInputMask_9ubmf_gg_ .___SValue_9ubmf_gg_:focus{outline:0}.___SIndicator_9ubmf_gg_{color:var(--intergalactic-text-secondary, #6c6e79)}.___SRangeIndicator_9ubmf_gg_{border-radius:50%;flex-shrink:0}.___SRangeIndicator_9ubmf_gg_._range_value_9ubmf_gg_{background-color:var(--intergalactic-date-picker-cell-active, #2bb3ff)}.___SRangeIndicator_9ubmf_gg_._range_compare_9ubmf_gg_{background-color:var(--intergalactic-date-picker-cell-comparison-active, #8649e1)}.___SRangeIndicator_9ubmf_gg_.__disabled_9ubmf_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3)}.___SHumanizedDate_9ubmf_gg_{position:absolute;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.___SMask_9ubmf_gg_{letter-spacing:0;white-space:nowrap;overflow:hidden}.___SDateRange_9ubmf_gg_ .___SMask_9ubmf_gg_,.___SDateRange_9ubmf_gg_ .___SValue_9ubmf_gg_,.___SSingleDateInput_9ubmf_gg_ .___SMask_9ubmf_gg_,.___SSingleDateInput_9ubmf_gg_ .___SValue_9ubmf_gg_{opacity:0}.___SSingleDateInput_9ubmf_gg_:focus-within .___SHumanizedDate_9ubmf_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SSingleDateInput_9ubmf_gg_:focus-within .___SMask_9ubmf_gg_,.___SSingleDateInput_9ubmf_gg_:focus-within .___SValue_9ubmf_gg_{opacity:1}.___SDateRange_9ubmf_gg_:focus-within .___SHumanizedDate_9ubmf_gg_{opacity:0;z-index:var(--intergalactic-z-index-deep, -999)}.___SDateRange_9ubmf_gg_:focus-within .___SMask_9ubmf_gg_,.___SDateRange_9ubmf_gg_:focus-within .___SValue_9ubmf_gg_{opacity:1}.___SInputMask_9ubmf_gg_.__noHumanizedDate_9ubmf_gg_ .___SMask_9ubmf_gg_,.___SInputMask_9ubmf_gg_.__noHumanizedDate_9ubmf_gg_ .___SValue_9ubmf_gg_{opacity:1}.___SDateRange_9ubmf_gg_ .___SInputMask_9ubmf_gg_:focus-within .___SMask_9ubmf_gg_{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SDateRange_9ubmf_gg_:focus-within .___SRangeSep_9ubmf_gg_,.___SRangeSep_9ubmf_gg_.__fulfilled_9ubmf_gg_{color:var(--intergalactic-text-primary, #191b23)}.___SRangeComparatorHeader_9ubmf_gg_{border-bottom:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SRangeCalendar_9ubmf_gg_,.___SRangeComparatorHeader_9ubmf_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___SFooter_9ubmf_gg_{border-top:1px solid var(--intergalactic-border-primary, #c4c7cf)}.___SFooter_9ubmf_gg_,.___SPeriodsList_9ubmf_gg_{padding:var(--intergalactic-spacing-4x, 16px)}.___STooltip_9ubmf_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SCompareToggle_9ubmf_gg_{white-space:nowrap}@media (prefers-reduced-motion){.___SInputMask_9ubmf_gg_{transition:none}}",
     /*__inner_css_end__*/
-    "gjj0p_gg_"
+    "9ubmf_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHeader": "___SHeader_gjj0p_gg_",
-    "__STitle": "___STitle_gjj0p_gg_",
-    "__SToday": "___SToday_gjj0p_gg_",
-    "__SPeriod": "___SPeriod_gjj0p_gg_",
-    "__SButton": "___SButton_gjj0p_gg_",
-    "__SInner": "___SInner_gjj0p_gg_",
-    "__SInputMask": "___SInputMask_gjj0p_gg_",
-    "_animationsDisabled": "__animationsDisabled_gjj0p_gg_",
-    "__SIndicator": "___SIndicator_gjj0p_gg_",
-    "__SRangeIndicator": "___SRangeIndicator_gjj0p_gg_",
-    "_range_value": "_range_value_gjj0p_gg_",
-    "_range_compare": "_range_compare_gjj0p_gg_",
-    "_disabled": "__disabled_gjj0p_gg_",
-    "__SHumanizedDate": "___SHumanizedDate_gjj0p_gg_",
-    "__SMask": "___SMask_gjj0p_gg_",
-    "__SSingleDateInput": "___SSingleDateInput_gjj0p_gg_",
-    "__SValue": "___SValue_gjj0p_gg_",
-    "__SDateRange": "___SDateRange_gjj0p_gg_",
-    "_noHumanizedDate": "__noHumanizedDate_gjj0p_gg_",
-    "__SRangeSep": "___SRangeSep_gjj0p_gg_",
-    "_fulfilled": "__fulfilled_gjj0p_gg_",
-    "__SRangeComparatorHeader": "___SRangeComparatorHeader_gjj0p_gg_",
-    "__SRangeCalendar": "___SRangeCalendar_gjj0p_gg_",
-    "__SFooter": "___SFooter_gjj0p_gg_",
-    "__SPeriodsList": "___SPeriodsList_gjj0p_gg_",
-    "__STooltip": "___STooltip_gjj0p_gg_",
-    "__SCompareToggle": "___SCompareToggle_gjj0p_gg_",
-    "__SPopper": "___SPopper_gjj0p_gg_"
+    "__SHeader": "___SHeader_9ubmf_gg_",
+    "__STitle": "___STitle_9ubmf_gg_",
+    "__SToday": "___SToday_9ubmf_gg_",
+    "__SPeriod": "___SPeriod_9ubmf_gg_",
+    "__SButton": "___SButton_9ubmf_gg_",
+    "__SInner": "___SInner_9ubmf_gg_",
+    "__SInputMask": "___SInputMask_9ubmf_gg_",
+    "_animationsDisabled": "__animationsDisabled_9ubmf_gg_",
+    "__SIndicator": "___SIndicator_9ubmf_gg_",
+    "__SRangeIndicator": "___SRangeIndicator_9ubmf_gg_",
+    "_range_value": "_range_value_9ubmf_gg_",
+    "_range_compare": "_range_compare_9ubmf_gg_",
+    "_disabled": "__disabled_9ubmf_gg_",
+    "__SHumanizedDate": "___SHumanizedDate_9ubmf_gg_",
+    "__SMask": "___SMask_9ubmf_gg_",
+    "__SSingleDateInput": "___SSingleDateInput_9ubmf_gg_",
+    "__SValue": "___SValue_9ubmf_gg_",
+    "__SDateRange": "___SDateRange_9ubmf_gg_",
+    "_noHumanizedDate": "__noHumanizedDate_9ubmf_gg_",
+    "__SRangeSep": "___SRangeSep_9ubmf_gg_",
+    "_fulfilled": "__fulfilled_9ubmf_gg_",
+    "__SRangeComparatorHeader": "___SRangeComparatorHeader_9ubmf_gg_",
+    "__SRangeCalendar": "___SRangeCalendar_9ubmf_gg_",
+    "__SFooter": "___SFooter_9ubmf_gg_",
+    "__SPeriodsList": "___SPeriodsList_9ubmf_gg_",
+    "__STooltip": "___STooltip_9ubmf_gg_",
+    "__SCompareToggle": "___SCompareToggle_9ubmf_gg_",
+    "__SPopper": "___SPopper_9ubmf_gg_"
   })
 );
-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());
-  });
+const INTERACTION_TAGS = ["INPUT"];
+const INTERACTION_KEYS = ["ArrowDown", "Enter", " "];
+const defaultDisplayedPeriod = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
+const getLatestDate = (...dateRanges) => {
+  const allDates = dateRanges.flat().filter(Boolean).filter((date) => !Number.isNaN(new Date(date).getTime()));
   if (!allDates.length) return null;
-  allDates.sort(function(a, b) {
-    return new Date(b).getTime() - new Date(a).getTime();
-  });
-  var latestDate = allDates[0];
+  allDates.sort((a, b) => new Date(b).getTime() - new Date(a).getTime());
+  const latestDate = allDates[0];
   return latestDate;
 };
-var DateRangeComparatorAbstract = /* @__PURE__ */ (function(_Component) {
-  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 = _callSuper(this, DateRangeComparatorAbstract2, [].concat(args));
-    _defineProperty(_this, "prevButtonRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "nextButtonRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "popperRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "resetButtonRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "applyButtonRef", /* @__PURE__ */ React.createRef());
-    _defineProperty(_this, "periodRefs", []);
-    _defineProperty(_this, "unitRefs", {});
-    _defineProperty(_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(_this, "bindHandlerNavigateClick", function(direction) {
-      return function() {
-        return _this.navigateView(direction);
-      };
+class DateRangeComparatorAbstract extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "prevButtonRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "nextButtonRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "popperRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "resetButtonRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "applyButtonRef", /* @__PURE__ */ React.createRef());
+    _defineProperty(this, "periodRefs", []);
+    _defineProperty(this, "unitRefs", {});
+    _defineProperty(this, "navigateView", (direction) => {
+      const {
+        displayedPeriod
+      } = this.asProps;
+      const action = direction >= 1 ? "add" : "subtract";
+      const date = dayjs(displayedPeriod)[action](1, this.navigateStep).toDate();
+      this.handlers.displayedPeriod(date);
     });
-    _defineProperty(_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(this, "bindHandlerNavigateClick", (direction) => () => this.navigateView(direction));
+    _defineProperty(this, "handleApplyClick", () => {
+      const {
+        value,
+        preselectedValue,
+        preselectedCompare
+      } = this.asProps;
+      return this.handleApply(preselectedValue ?? (value == null ? void 0 : value.value), preselectedCompare ?? (value == null ? void 0 : value.compare));
     });
-    _defineProperty(_this, "handleApply", function(value, compare) {
-      _this.handlers.value({
+    _defineProperty(this, "handleApply", (value, compare) => {
+      this.handlers.value({
         value,
         compare
       });
-      _this.handlers.visible(false);
+      this.handlers.visible(false);
     });
-    _defineProperty(_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, target = e.target;
-        var highlighted = focusedRange === "compare" ? _this.asProps.compareHighlighted : _this.asProps.highlighted;
-        if ([" ", "Enter"].includes(key) && [_this.prevButtonRef.current, _this.nextButtonRef.current].includes(target)) return;
-        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;
-        };
-        var isPeriodTarget = _this.periodRefs.find(function(el) {
-          return el === target;
-        });
-        var isResetButtonTarget = target === _this.resetButtonRef.current;
-        var isApplyButtonTarget = target === _this.applyButtonRef.current;
-        var areTargetedControls = isPeriodTarget || isResetButtonTarget || isApplyButtonTarget;
-        if (place === "popper" && e.key === " " && highlighted.length && !areTargetedControls) {
-          var highlightedDate = highlighted[1] || highlighted[0];
-          if (!_this.isDisabled(highlightedDate)) {
-            _this.handleChange(highlightedDate);
+    _defineProperty(this, "handleKeydownDown", (place) => (e) => {
+      var _a;
+      const {
+        displayedPeriod,
+        preselectedValue,
+        visible,
+        focusedRange
+      } = this.asProps;
+      const {
+        key,
+        target
+      } = e;
+      const highlighted = focusedRange === "compare" ? this.asProps.compareHighlighted : this.asProps.highlighted;
+      if ([" ", "Enter"].includes(key) && [this.prevButtonRef.current, this.nextButtonRef.current].includes(target)) return;
+      if (place === "trigger" && INTERACTION_KEYS.includes(key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.handlers.visible(!visible);
+        setTimeout(() => {
+          const popper = this.popperRef.current;
+          if (popper) {
+            popper.focus();
           }
-          e.preventDefault();
+        }, 0);
+      }
+      const day = this.keyDiff[key];
+      const setNextDisplayedPeriod = (next_highlighted) => {
+        const [startPeriod, endPeriod] = next_highlighted;
+        const highlightedPeriod = endPeriod || startPeriod;
+        let displayedPeriodNormalized = displayedPeriod == null ? void 0 : displayedPeriod.getDate();
+        let highlightedPeriodNormalized = highlightedPeriod == null ? void 0 : highlightedPeriod.getDate();
+        if (this.navigateStep === "month") {
+          displayedPeriodNormalized = displayedPeriod == null ? void 0 : displayedPeriod.getMonth();
+          highlightedPeriodNormalized = highlightedPeriod == null ? void 0 : highlightedPeriod.getMonth();
         }
-        if (place === "popper" && e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-          return _this.handleApplyClick();
+        if (this.navigateStep === "year") {
+          displayedPeriodNormalized = displayedPeriod == null ? void 0 : displayedPeriod.getYear();
+          highlightedPeriodNormalized = highlightedPeriod == null ? void 0 : highlightedPeriod.getYear();
         }
-        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));
+        const offset = highlightedPeriodNormalized - displayedPeriodNormalized;
+        if (offset < 0 || offset > 1) {
+          return highlightedPeriod;
+        }
+        return displayedPeriod;
+      };
+      const isPeriodTarget = this.periodRefs.find((el) => el === target);
+      const isResetButtonTarget = target === this.resetButtonRef.current;
+      const isApplyButtonTarget = target === this.applyButtonRef.current;
+      const areTargetedControls = isPeriodTarget || isResetButtonTarget || isApplyButtonTarget;
+      if (place === "popper" && e.key === " " && highlighted.length && !areTargetedControls) {
+        const highlightedDate = highlighted[1] || highlighted[0];
+        if (!this.isDisabled(highlightedDate)) {
+          this.handleChange(highlightedDate);
+        }
+        e.preventDefault();
+      }
+      if (place === "popper" && e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        return this.handleApplyClick();
+      }
+      let changedDate = void 0;
+      if (day) {
+        if (INTERACTION_TAGS.includes(e.target.tagName)) return;
+        if (highlighted.length) {
+          let next_highlighted;
+          if ((preselectedValue == null ? 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 {
-            var _highlighted = [displayedPeriod ? displayedPeriod : dayjs().toDate()];
-            if (focusedRange === "compare") {
-              _this.handlers.compareHighlighted(_highlighted);
-            } else {
-              _this.handlers.highlighted(_highlighted);
-            }
-            changedDate = _highlighted[0];
+            this.handlers.highlighted(next_highlighted);
           }
-          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 || _this$unitRefs$format.focus();
+          this.handlers.displayedPeriod(setNextDisplayedPeriod(next_highlighted));
+        } else {
+          const highlighted2 = [displayedPeriod ? displayedPeriod : dayjs().toDate()];
+          if (focusedRange === "compare") {
+            this.handlers.compareHighlighted(highlighted2);
+          } else {
+            this.handlers.highlighted(highlighted2);
           }
+          changedDate = highlighted2[0];
         }
-      };
+        e.preventDefault();
+        if (changedDate) {
+          const formatter = this.keyStep === "month" ? formatMMYY : formatDDMMYY;
+          const formattedDate = formatter(changedDate, this.asProps.locale);
+          (_a = this.unitRefs[formattedDate]) == null ? void 0 : _a.focus();
+        }
+      }
     });
-    _defineProperty(_this, "triggerFormattingProps", {
+    _defineProperty(this, "triggerFormattingProps", {
       day: "numeric",
       month: "short",
       year: "numeric"
     });
-    _defineProperty(_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;
+    _defineProperty(this, "handleChange", (date) => {
+      const {
+        focusedRange,
+        preselectedCompare,
+        preselectedValue
+      } = this.asProps;
+      let highlighted = [];
+      let value = focusedRange === "compare" ? preselectedCompare : preselectedValue;
       if (Array.isArray(date)) {
         value = date;
-      } else if (!((_value = value) !== null && _value !== void 0 && _value.length)) {
+      } else if (!(value == null ? void 0 : value.length)) {
         value = [date];
         highlighted = [date];
-      } else if (((_value2 = value) === null || _value2 === void 0 ? void 0 : _value2.length) >= 2) {
+      } else if ((value == null ? void 0 : value.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 if ((value == null ? void 0 : value[0]) > date) {
+        value = [date, value == null ? void 0 : value[0]];
       } else {
-        var _value5;
-        value = [(_value5 = value) === null || _value5 === void 0 ? void 0 : _value5[0], date];
+        value = [value == null ? void 0 : value[0], date];
       }
       if (focusedRange === "compare") {
-        _this.handlers.preselectedCompare(value);
-        _this.handlers.compareHighlighted(highlighted);
+        this.handlers.preselectedCompare(value);
+        this.handlers.compareHighlighted(highlighted);
       } else {
-        _this.handlers.preselectedValue(value);
-        _this.handlers.highlighted(highlighted);
+        this.handlers.preselectedValue(value);
+        this.handlers.highlighted(highlighted);
       }
     });
-    return _this;
   }
-  _inherits(DateRangeComparatorAbstract2, _Component);
-  return _createClass(DateRangeComparatorAbstract2, [{
-    key: "getPeriodProps",
-    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,
-        value,
-        "onChange": function onChange(value2) {
-          if (focusedRange === "compare") {
-            _this2.handlers.preselectedCompare(value2);
-          } else {
-            _this2.handlers.preselectedValue(value2);
-          }
-        },
-        "onHighlightedChange": focusedRange === "compare" ? onCompareHighlightedChange : onHighlightedChange,
-        onDisplayedPeriodChange,
-        "role": "listbox",
-        "aria-label": getI18nText("periods"),
-        "periodRef": function periodRef(index) {
-          return function(element) {
-            if (!element) return;
-            _this2.periodRefs[index] = element;
-          };
-        }
-      };
-    }
-  }, {
-    key: "getPrevProps",
-    value: function getPrevProps() {
-      var getI18nText = this.asProps.getI18nText;
-      var navigateStep = this.navigateStep;
-      return {
-        getI18nText,
-        "ref": this.prevButtonRef,
-        "onClick": this.bindHandlerNavigateClick(-1),
-        "aria-label": navigateStep === "month" ? getI18nText("prevMonth") : getI18nText("prevYear")
-      };
-    }
-  }, {
-    key: "getNextProps",
-    value: function getNextProps() {
-      var getI18nText = this.asProps.getI18nText;
-      var navigateStep = this.navigateStep;
-      return {
-        getI18nText,
-        "ref": this.nextButtonRef,
-        "onClick": this.bindHandlerNavigateClick(1),
-        "aria-label": navigateStep === "month" ? getI18nText("nextMonth") : getI18nText("nextYear")
-      };
-    }
-  }, {
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      var _this3 = this;
-      return {
-        displayedPeriod: null,
-        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.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 _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);
-            }
-          }
-        }],
-        highlighted: null,
-        compareHighlighted: null,
-        preselectedValue: null,
-        preselectedCompare: null,
-        compareToggle: null,
-        focusedRange: null,
-        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 || (_date$isValid = date.isValid) === null || _date$isValid === void 0 ? void 0 : _date$isValid.call(date);
-          });
-          if (dates.length > 0) _this3.handlers.displayedPeriod(getLatestDate(value));
-        }]
-      };
-    }
-  }, {
-    key: "getApplyProps",
-    value: function getApplyProps() {
-      var getI18nText = this.asProps.getI18nText;
-      return {
-        getI18nText,
-        onClick: this.handleApplyClick,
-        ref: this.applyButtonRef
-      };
-    }
-  }, {
-    key: "getResetProps",
-    value: function getResetProps() {
-      var _this4 = this;
-      var getI18nText = this.asProps.getI18nText;
-      return {
-        getI18nText,
-        onClick: function onClick() {
-          return _this4.handleApply(null, null);
-        },
-        ref: this.resetButtonRef
-      };
-    }
-  }, {
-    key: "isDisabled",
-    value: function isDisabled(date) {
-      var disabled = this.asProps.disabled;
-      return disabled.some(includesDate(dayjs(date), "date"));
-    }
-  }, {
-    key: "getDefaultPeriods",
-    value: function getDefaultPeriods() {
-      var getI18nText = this.asProps.getI18nText;
-      var today = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
-      return [{
-        children: getI18nText("lastMonth"),
-        value: [dayjs(today).subtract(1, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
-      }, {
-        children: getI18nText("last3Months"),
-        value: [dayjs(today).subtract(2, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
-      }, {
-        children: getI18nText("last6Months"),
-        value: [dayjs(today).subtract(5, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
-      }, {
-        children: getI18nText("last12Months"),
-        value: [dayjs(today).subtract(11, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
-      }];
-    }
-  }, {
-    key: "getTitleProps",
-    value: function getTitleProps(_props, index) {
-      var _this$asProps5 = this.asProps, locale = _this$asProps5.locale, displayedPeriod = _this$asProps5.displayedPeriod;
-      return {
-        children: new Intl.DateTimeFormat(locale, {
-          month: "long",
-          year: "numeric"
-        }).format(dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate())
-      };
+  static defaultProps({
+    primaryRange,
+    defaultPrimaryRange,
+    secondaryRange,
+    defaultSecondaryRange
+  }) {
+    return {
+      i18n: localizedMessages,
+      locale: "en",
+      defaultValue: null,
+      defaultHighlighted: [],
+      defaultCompareHighlighted: [],
+      defaultDisplayedPeriod: getLatestDate(primaryRange, defaultPrimaryRange, secondaryRange, defaultSecondaryRange) || defaultDisplayedPeriod,
+      defaultVisible: false,
+      defaultPreselectedValue: null,
+      defaultPreselectedCompare: null,
+      defaultCompareToggle: null,
+      defaultFocusedRange: "value",
+      disabled: [],
+      size: "m"
+    };
+  }
+  getPeriodProps() {
+    var _a, _b;
+    const {
+      periods = this.getDefaultPeriods(),
+      onHighlightedChange,
+      onCompareHighlightedChange,
+      onDisplayedPeriodChange,
+      preselectedValue,
+      preselectedCompare,
+      focusedRange,
+      getI18nText
+    } = this.asProps;
+    let value = preselectedValue ?? ((_a = this.asProps.value) == null ? void 0 : _a.value);
+    if (focusedRange === "compare") {
+      value = preselectedCompare ?? ((_b = this.asProps.value) == null ? void 0 : _b.compare);
     }
-  }, {
-    key: "getTriggerProps",
-    value: function getTriggerProps(_ref0) {
-      var _this$asProps$value3, _this$asProps$value4, _this5 = this;
-      var _ref0$placeholder = _ref0.placeholder, placeholder = _ref0$placeholder === void 0 ? "Select date ranges" : _ref0$placeholder, _ref0$separator = _ref0.separator, separator = _ref0$separator === void 0 ? "vs." : _ref0$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 {
+      periods,
+      value,
+      "onChange": (value2) => {
+        if (focusedRange === "compare") {
+          this.handlers.preselectedCompare(value2);
+        } else {
+          this.handlers.preselectedValue(value2);
+        }
+      },
+      "onHighlightedChange": focusedRange === "compare" ? onCompareHighlightedChange : onHighlightedChange,
+      onDisplayedPeriodChange,
+      "role": "listbox",
+      "aria-label": getI18nText("periods"),
+      "periodRef": (index) => (element) => {
+        if (!element) return;
+        this.periodRefs[index] = element;
       }
-      return {
-        children,
-        visible,
-        onClick: function onClick() {
-          return _this5.handlers.visible(!visible);
-        },
-        onKeyDown: this.handleKeydownDown("trigger")
-      };
-    }
-  }, {
-    key: "getRangeInput",
-    value: function getRangeInput() {
-      throw new Error("not implemented");
-    }
-  }, {
-    key: "getRangeInputProps",
-    value: function getRangeInputProps() {
-      return {
-        inputRole: null
-      };
-    }
-  }, {
-    key: "getValueDateRangeProps",
-    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: 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,
-        locale,
-        disabledDates: disabled,
-        disabledErrorText,
-        children: this.getRangeInput(),
-        getI18nText,
-        onFocus: function onFocus() {
-          _this6.handlers.focusedRange("value");
-        },
-        animationsDisabled
-      };
-    }
-  }, {
-    key: "getCompareDateRangeProps",
-    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: visible,
-        focused: focusedRange === "compare" ? true : void 0,
-        disabled: !(compareToggle !== null && compareToggle !== void 0 ? compareToggle : value === null || value === 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,
-        locale,
-        disabledDates: disabled,
-        children: this.getRangeInput(),
-        getI18nText,
-        disabledErrorText,
-        onFocus: function onFocus() {
-          _this7.handlers.focusedRange("compare");
-        },
-        animationsDisabled
-      };
-    }
-  }, {
-    key: "getCompareToggleProps",
-    value: function getCompareToggleProps() {
-      var _this8 = this;
-      var _this$asProps9 = this.asProps, getI18nText = _this$asProps9.getI18nText, compareToggle = _this$asProps9.compareToggle;
-      return {
-        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([]);
+    };
+  }
+  getPrevProps() {
+    const {
+      getI18nText
+    } = this.asProps;
+    const {
+      navigateStep
+    } = this;
+    return {
+      getI18nText,
+      "ref": this.prevButtonRef,
+      "onClick": this.bindHandlerNavigateClick(-1),
+      "aria-label": navigateStep === "month" ? getI18nText("prevMonth") : getI18nText("prevYear")
+    };
+  }
+  getNextProps() {
+    const {
+      getI18nText
+    } = this.asProps;
+    const {
+      navigateStep
+    } = this;
+    return {
+      getI18nText,
+      "ref": this.nextButtonRef,
+      "onClick": this.bindHandlerNavigateClick(1),
+      "aria-label": navigateStep === "month" ? getI18nText("nextMonth") : getI18nText("nextYear")
+    };
+  }
+  uncontrolledProps() {
+    return {
+      displayedPeriod: null,
+      visible: [null, (visible) => {
+        var _a, _b;
+        if (!visible) {
+          this.handlers.highlighted([]);
+          this.handlers.compareHighlighted([]);
+          this.handlers.preselectedValue(void 0);
+          this.handlers.preselectedCompare(void 0);
+          this.handlers.compareToggle(void 0);
+          this.handlers.focusedRange("value");
+        } else {
+          this.handlers.compareToggle(!!((_b = (_a = this.asProps.value) == null ? void 0 : _a.compare) == null ? void 0 : _b.length));
+        }
+        const {
+          value,
+          displayedPeriod
+        } = this.asProps;
+        const newDisplayedPeriod = value ? getLatestDate(value.value, value.compare) : void 0;
+        if (visible) {
+          if (newDisplayedPeriod && newDisplayedPeriod !== displayedPeriod) {
+            this.handlers.displayedPeriod(newDisplayedPeriod);
+          } else if (!newDisplayedPeriod) {
+            const {
+              displayedPeriod: displayedPeriod2,
+              defaultDisplayedPeriod: defaultDisplayedPeriod2
+            } = this.props;
+            this.handlers.displayedPeriod(displayedPeriod2 || defaultDisplayedPeriod2);
           }
         }
-      };
-    }
-  }, {
-    key: "getCalendarProps",
-    value: function getCalendarProps(_props, index) {
-      var _this$asProps0 = this.asProps, locale = _this$asProps0.locale, displayedPeriod = _this$asProps0.displayedPeriod, disabled = _this$asProps0.disabled, value = _this$asProps0.value, onCompareHighlightedChange = _this$asProps0.onCompareHighlightedChange, highlighted = _this$asProps0.highlighted, compareHighlighted = _this$asProps0.compareHighlighted, onHighlightedChange = _this$asProps0.onHighlightedChange, preselectedCompare = _this$asProps0.preselectedCompare, preselectedValue = _this$asProps0.preselectedValue, focusedRange = _this$asProps0.focusedRange, getI18nText = _this$asProps0.getI18nText;
-      return {
-        locale,
-        displayedPeriod: dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
-        disabled,
-        onChange: this.handleChange,
-        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,
-        actionsDescribing: index === 0 ? "range-compare" : null,
-        tabIndex: index === 0 ? 0 : -1
-      };
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      return {
-        p: 0,
-        ref: this.popperRef,
-        onKeyDown: this.handleKeydownDown("popper")
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref4;
-      var _this$asProps1 = this.asProps, Children = _this$asProps1.Children, styles = _this$asProps1.styles, providedAriaLabel = _this$asProps1["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", {})))));
+      }],
+      highlighted: null,
+      compareHighlighted: null,
+      preselectedValue: null,
+      preselectedCompare: null,
+      compareToggle: null,
+      focusedRange: null,
+      value: [null, (value) => {
+        const dates = [value == null ? void 0 : value.value, value == null ? void 0 : value.compare].flat(2).filter((date) => {
+          var _a;
+          return (_a = date == null ? void 0 : date.isValid) == null ? void 0 : _a.call(date);
+        });
+        if (dates.length > 0) this.handlers.displayedPeriod(getLatestDate(value));
+      }]
+    };
+  }
+  getApplyProps() {
+    const {
+      getI18nText
+    } = this.asProps;
+    return {
+      getI18nText,
+      onClick: this.handleApplyClick,
+      ref: this.applyButtonRef
+    };
+  }
+  getResetProps() {
+    const {
+      getI18nText
+    } = this.asProps;
+    return {
+      getI18nText,
+      onClick: () => this.handleApply(null, null),
+      ref: this.resetButtonRef
+    };
+  }
+  isDisabled(date) {
+    const {
+      disabled
+    } = this.asProps;
+    return disabled.some(includesDate(dayjs(date), "date"));
+  }
+  getDefaultPeriods() {
+    const {
+      getI18nText
+    } = this.asProps;
+    const today = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
+    return [{
+      children: getI18nText("lastMonth"),
+      value: [dayjs(today).subtract(1, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
+    }, {
+      children: getI18nText("last3Months"),
+      value: [dayjs(today).subtract(2, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
+    }, {
+      children: getI18nText("last6Months"),
+      value: [dayjs(today).subtract(5, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
+    }, {
+      children: getI18nText("last12Months"),
+      value: [dayjs(today).subtract(11, "month").startOf("month").toDate(), dayjs(today).startOf("month").toDate()]
+    }];
+  }
+  getTitleProps(_props, index) {
+    const {
+      locale,
+      displayedPeriod
+    } = this.asProps;
+    return {
+      children: new Intl.DateTimeFormat(locale, {
+        month: "long",
+        year: "numeric"
+      }).format(dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate())
+    };
+  }
+  getTriggerProps({
+    placeholder = "Select date ranges",
+    separator = "vs."
+  }) {
+    var _a, _b;
+    const {
+      locale,
+      visible
+    } = this.asProps;
+    const value = (_a = this.asProps.value) == null ? void 0 : _a.value;
+    const compare = (_b = this.asProps.value) == null ? void 0 : _b.compare;
+    const formattingProps = {
+      locale,
+      ...this.triggerFormattingProps
+    };
+    let children = placeholder;
+    if ((value == null ? void 0 : value[0]) && (value == null ? void 0 : value[1])) {
+      children = shortDateRangeFormat(value, formattingProps);
     }
-  }], [{
-    key: "defaultProps",
-    value: function defaultProps(_ref1) {
-      var primaryRange = _ref1.primaryRange, defaultPrimaryRange = _ref1.defaultPrimaryRange, secondaryRange = _ref1.secondaryRange, defaultSecondaryRange = _ref1.defaultSecondaryRange;
-      return {
-        i18n: localizedMessages,
-        locale: "en",
-        defaultValue: null,
-        defaultHighlighted: [],
-        defaultCompareHighlighted: [],
-        defaultDisplayedPeriod: getLatestDate(primaryRange, defaultPrimaryRange, secondaryRange, defaultSecondaryRange) || defaultDisplayedPeriod,
-        defaultVisible: false,
-        defaultPreselectedValue: null,
-        defaultPreselectedCompare: null,
-        defaultCompareToggle: null,
-        defaultFocusedRange: "value",
-        disabled: [],
-        size: "m"
-      };
+    if ((compare == null ? void 0 : compare[0]) && (compare == null ? void 0 : compare[1])) {
+      children = `${children || ""} ${separator} ${shortDateRangeFormat(compare, formattingProps)}`;
     }
-  }]);
-})(Component);
+    return {
+      children,
+      visible,
+      onClick: () => this.handlers.visible(!visible),
+      onKeyDown: this.handleKeydownDown("trigger")
+    };
+  }
+  getRangeInput() {
+    throw new Error("not implemented");
+  }
+  getRangeInputProps() {
+    return {
+      inputRole: null
+    };
+  }
+  getValueDateRangeProps() {
+    const {
+      value,
+      onDisplayedPeriodChange,
+      locale,
+      disabled,
+      disabledErrorText,
+      getI18nText,
+      focusedRange,
+      preselectedValue,
+      animationsDisabled,
+      visible
+    } = this.asProps;
+    return {
+      popoverVisible: visible,
+      focused: focusedRange === "value" ? true : void 0,
+      value: preselectedValue ?? (value == null ? void 0 : value.value),
+      onChange: (value2) => this.handlers.preselectedValue(value2),
+      onDisplayedPeriodChange,
+      locale,
+      disabledDates: disabled,
+      disabledErrorText,
+      children: this.getRangeInput(),
+      getI18nText,
+      onFocus: () => {
+        this.handlers.focusedRange("value");
+      },
+      animationsDisabled
+    };
+  }
+  getCompareDateRangeProps() {
+    var _a;
+    const {
+      value,
+      onDisplayedPeriodChange,
+      locale,
+      disabled,
+      disabledErrorText,
+      getI18nText,
+      focusedRange,
+      preselectedCompare,
+      compareToggle,
+      animationsDisabled,
+      visible
+    } = this.asProps;
+    return {
+      popoverVisible: visible,
+      focused: focusedRange === "compare" ? true : void 0,
+      disabled: !(compareToggle ?? ((_a = value == null ? void 0 : value.compare) == null ? void 0 : _a.length)),
+      value: preselectedCompare ?? (value == null ? void 0 : value.compare),
+      onChange: (value2) => this.handlers.preselectedCompare(value2),
+      onDisplayedPeriodChange,
+      locale,
+      disabledDates: disabled,
+      children: this.getRangeInput(),
+      getI18nText,
+      disabledErrorText,
+      onFocus: () => {
+        this.handlers.focusedRange("compare");
+      },
+      animationsDisabled
+    };
+  }
+  getCompareToggleProps() {
+    const {
+      getI18nText,
+      compareToggle
+    } = this.asProps;
+    return {
+      getI18nText,
+      checked: compareToggle,
+      onChange: (checked) => {
+        if (checked) {
+          this.handlers.compareToggle(true);
+          this.handlers.focusedRange("compare");
+        } else {
+          this.handlers.compareToggle(false);
+          this.handlers.focusedRange("value");
+          this.handlers.preselectedCompare([]);
+        }
+      }
+    };
+  }
+  getCalendarProps(_props, index) {
+    const {
+      locale,
+      displayedPeriod,
+      disabled,
+      value,
+      onCompareHighlightedChange,
+      highlighted,
+      compareHighlighted,
+      onHighlightedChange,
+      preselectedCompare,
+      preselectedValue,
+      focusedRange,
+      getI18nText
+    } = this.asProps;
+    return {
+      locale,
+      displayedPeriod: dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate(),
+      disabled,
+      onChange: this.handleChange,
+      highlighted,
+      compareHighlighted,
+      onCompareHighlightedChange,
+      onHighlightedChange,
+      range: focusedRange,
+      value: preselectedValue ?? (value == null ? void 0 : value.value),
+      compare: preselectedCompare ?? (value == null ? void 0 : value.compare),
+      unitRefs: this.unitRefs,
+      getI18nText,
+      actionsDescribing: index === 0 ? "range-compare" : null,
+      tabIndex: index === 0 ? 0 : -1
+    };
+  }
+  getPopperProps() {
+    return {
+      p: 0,
+      ref: this.popperRef,
+      onKeyDown: this.handleKeydownDown("popper")
+    };
+  }
+  render() {
+    var _ref = this.asProps, _ref4;
+    const {
+      Children,
+      styles,
+      "aria-label": providedAriaLabel
+    } = this.asProps;
+    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", {})))));
+  }
+}
 _defineProperty(DateRangeComparatorAbstract, "displayName", "DateRangeComparator");
 _defineProperty(DateRangeComparatorAbstract, "style", style);
 _defineProperty(DateRangeComparatorAbstract, "enhance", [i18nEnhance(localizedMessages)]);
-_defineProperty(DateRangeComparatorAbstract, "subtract", function(date, amount, unit) {
+_defineProperty(DateRangeComparatorAbstract, "subtract", (date, amount, unit) => {
   return dayjs(date).subtract(amount, unit).toDate();
 });
 function Apply(props) {
   var _ref2 = arguments[0];
-  var getI18nText = props.getI18nText;
+  const {
+    getI18nText
+  } = props;
   return /* @__PURE__ */ React.createElement(Button, assignProps({
     "use": "primary",
     "children": getI18nText("apply")
@@ -584,7 +606,9 @@ function Apply(props) {
 }
 function Reset(props) {
   var _ref3 = arguments[0];
-  var getI18nText = props.getI18nText;
+  const {
+    getI18nText
+  } = props;
   return /* @__PURE__ */ React.createElement(Button, assignProps({
     "use": "tertiary",
     "theme": "muted",
@@ -593,7 +617,10 @@ function Reset(props) {
 }
 function Trigger(props) {
   var _ref5;
-  var STrigger = props.Root, styles = props.styles;
+  const {
+    Root: STrigger,
+    styles
+  } = props;
   return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(STrigger, _ref5.cn("STrigger", {
     "render": Dropdown.Trigger,
     "tag": LinkTrigger
@@ -601,7 +628,11 @@ function Trigger(props) {
 }
 function CompareToggle(props) {
   var _ref6;
-  var SCompareToggle = props.Root, styles = props.styles, getI18nText = props.getI18nText;
+  const {
+    Root: SCompareToggle,
+    styles,
+    getI18nText
+  } = props;
   return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SCompareToggle, _ref6.cn("SCompareToggle", {
     "render": Checkbox,
     "label": getI18nText("compare")
@@ -609,7 +640,11 @@ function CompareToggle(props) {
 }
 function Header(props) {
   var _ref7;
-  var SRangeComparatorHeader = props.Root, Children = props.Children, styles = props.styles;
+  const {
+    Root: SRangeComparatorHeader,
+    Children,
+    styles
+  } = props;
   return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SRangeComparatorHeader, _ref7.cn("SRangeComparatorHeader", {
     "render": Flex,
     "gap": 4,
@@ -618,7 +653,11 @@ function Header(props) {
 }
 function Body(props) {
   var _ref8;
-  var SBody = props.Root, Children = props.Children, styles = props.styles;
+  const {
+    Root: SBody,
+    Children,
+    styles
+  } = props;
   return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SBody, _ref8.cn("SBody", {
     "render": Flex,
     "gap": 4
@@ -626,7 +665,11 @@ function Body(props) {
 }
 function Footer(props) {
   var _ref9;
-  var SFooter = props.Root, styles = props.styles, Children = props.Children;
+  const {
+    Root: SFooter,
+    styles,
+    Children
+  } = props;
   return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SFooter, _ref9.cn("SFooter", {
     "render": Flex,
     "gap": 2