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

package/lib/esm/DateRangePicker.mjs

@@ -1,9 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-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 _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent } from "@semcore/core";
 import dayjs from "dayjs";
@@ -12,90 +6,92 @@ import { Period, Next, Prev, Title, Header, Popper, Trigger, InputTrigger } from
 import { CalendarDays } from "./components/Calendar.mjs";
 import RangePickerAbstract, { Reset, Apply } from "./components/RangePickerAbstract.mjs";
 import shortDateRangeFormat from "./utils/shortDateRangeFormat.mjs";
-var DateRangePickerRoot = /* @__PURE__ */ (function(_RangePickerAbstract) {
-  function DateRangePickerRoot2() {
-    var _this;
-    _classCallCheck(this, DateRangePickerRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, DateRangePickerRoot2, [].concat(args));
-    _defineProperty(_this, "navigateStep", "month");
-    _defineProperty(_this, "keyStep", "day");
-    _defineProperty(_this, "keyDiff", {
+class DateRangePickerRoot extends RangePickerAbstract {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "navigateStep", "month");
+    _defineProperty(this, "keyStep", "day");
+    _defineProperty(this, "keyDiff", {
       ArrowLeft: -1,
       ArrowUp: -7,
       ArrowRight: 1,
       ArrowDown: 7
     });
-    return _this;
   }
-  _inherits(DateRangePickerRoot2, _RangePickerAbstract);
-  return _createClass(DateRangePickerRoot2, [{
-    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("last2Days"),
-        value: [dayjs(today).subtract(1, "day").toDate(), today]
-      }, {
-        children: getI18nText("lastWeek"),
-        value: [dayjs(today).subtract(6, "day").toDate(), today]
-      }, {
-        children: getI18nText("last2Weeks"),
-        value: [dayjs(today).subtract(13, "day").toDate(), today]
-      }, {
-        children: getI18nText("lastMonth"),
-        value: [dayjs(today).subtract(1, "month").toDate(), today]
-      }, {
-        children: getI18nText("last2Months"),
-        value: [dayjs(today).subtract(2, "month").toDate(), today]
-      }];
-    }
-  }, {
-    key: "getButtonTriggerProps",
-    value: function getButtonTriggerProps() {
-      var _this$asProps = this.asProps, value = _this$asProps.value, locale = _this$asProps.locale;
-      return _objectSpread(_objectSpread({}, _superPropGet(DateRangePickerRoot2, "getButtonTriggerProps", this, 3)([])), {}, {
-        placeholder: "Select date period",
-        children: shortDateRangeFormat(value, {
-          locale,
-          day: "numeric",
-          month: "short",
-          year: "numeric"
-        })
-      });
-    }
-  }, {
-    key: "getTriggerProps",
-    value: function getTriggerProps() {
-      var _this$asProps2 = this.asProps, visible = _this$asProps2.visible, preselectedValue = _this$asProps2.preselectedValue, onChange = _this$asProps2.onChange, onDisplayedPeriodChange = _this$asProps2.onDisplayedPeriodChange, locale = _this$asProps2.locale, disabled = _this$asProps2.disabled, disabledErrorText = _this$asProps2.disabledErrorText, getI18nText = _this$asProps2.getI18nText, animationsDisabled = _this$asProps2.animationsDisabled;
-      var value = visible ? [preselectedValue[0] || this.asProps.value[0], preselectedValue[1] || this.asProps.value[1]] : this.asProps.value;
-      return _objectSpread(_objectSpread({}, _superPropGet(DateRangePickerRoot2, "getButtonTriggerProps", this, 3)([])), {}, {
-        value,
-        onChange,
-        onDisplayedPeriodChange,
+  getDefaultPeriods() {
+    const {
+      getI18nText
+    } = this.asProps;
+    const today = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0));
+    return [{
+      children: getI18nText("last2Days"),
+      value: [dayjs(today).subtract(1, "day").toDate(), today]
+    }, {
+      children: getI18nText("lastWeek"),
+      value: [dayjs(today).subtract(6, "day").toDate(), today]
+    }, {
+      children: getI18nText("last2Weeks"),
+      value: [dayjs(today).subtract(13, "day").toDate(), today]
+    }, {
+      children: getI18nText("lastMonth"),
+      value: [dayjs(today).subtract(1, "month").toDate(), today]
+    }, {
+      children: getI18nText("last2Months"),
+      value: [dayjs(today).subtract(2, "month").toDate(), today]
+    }];
+  }
+  getButtonTriggerProps() {
+    const {
+      value,
+      locale
+    } = this.asProps;
+    return {
+      ...super.getButtonTriggerProps(),
+      placeholder: "Select date period",
+      children: shortDateRangeFormat(value, {
         locale,
-        disabledDates: disabled,
-        disabledErrorText,
-        children: function children() {
-          return /* @__PURE__ */ React.createElement(InputTrigger.DateRange, null);
-        },
-        getI18nText,
-        animationsDisabled,
-        unit: this.keyStep
-      });
-    }
-  }]);
-})(RangePickerAbstract);
+        day: "numeric",
+        month: "short",
+        year: "numeric"
+      })
+    };
+  }
+  getTriggerProps() {
+    const {
+      visible,
+      preselectedValue,
+      onChange,
+      onDisplayedPeriodChange,
+      locale,
+      disabled,
+      disabledErrorText,
+      getI18nText,
+      animationsDisabled
+    } = this.asProps;
+    const value = visible ? [preselectedValue[0] || this.asProps.value[0], preselectedValue[1] || this.asProps.value[1]] : this.asProps.value;
+    return {
+      ...super.getButtonTriggerProps(),
+      value,
+      onChange,
+      onDisplayedPeriodChange,
+      locale,
+      disabledDates: disabled,
+      disabledErrorText,
+      children: () => /* @__PURE__ */ React.createElement(InputTrigger.DateRange, null),
+      getI18nText,
+      animationsDisabled,
+      unit: this.keyStep
+    };
+  }
+}
 _defineProperty(DateRangePickerRoot, "displayName", "DateRangePicker");
-_defineProperty(DateRangePickerRoot, "defaultProps", function(props) {
-  return _objectSpread(_objectSpread({}, RangePickerAbstract.defaultProps(props)), {}, {
+_defineProperty(DateRangePickerRoot, "defaultProps", (props) => {
+  return {
+    ...RangePickerAbstract.defaultProps(props),
     children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DateRangePicker.Trigger, null), /* @__PURE__ */ React.createElement(DateRangePicker.Popper, null))
-  });
+  };
 });
-var DateRangePicker = createComponent(DateRangePickerRoot, {
+const DateRangePicker = createComponent(DateRangePickerRoot, {
   Trigger: InputTrigger,
   ButtonTrigger: Trigger,
   Popper,

package/lib/esm/MonthDateRangeComparator.mjs

@@ -1,36 +1,34 @@
-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 _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { createComponent, sstyled, assignProps } from "@semcore/core";
+import { Flex, Box } from "@semcore/base-components";
 import Divider from "@semcore/divider";
-import { Flex, Box } from "@semcore/flex-box";
 import dayjs from "dayjs";
 import React from "react";
 import { Period, Next, Prev, Title, Header as Header$1, Popper } from "./components/index.mjs";
 import { CalendarMonths } from "./components/Calendar.mjs";
 import DateRangeComparatorAbstract, { Footer, Body, CompareToggle, Trigger, Reset, Apply, Header } from "./components/DateRangeComparatorAbstract.mjs";
 import InputTrigger from "./components/InputTrigger.mjs";
-var dateParts = {
+const dateParts = {
   day: false,
   month: true,
   year: true
 };
 function RangeInput(props) {
   var _ref = arguments[0], _ref2;
-  var styles = props.styles;
-  var SComparatorRangeInput = Box;
-  var SRangeIndicator = Box;
-  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SComparatorRangeInput, _ref2.cn("SComparatorRangeInput", _objectSpread({}, assignProps({
-    "data-name": "SComparatorRangeInput",
-    "tag": InputTrigger,
-    "parts": dateParts,
-    "unit": "month",
-    "__excludeProps": ["role", "aria-haspopup", "aria-expanded", "onChange", "value", "id"]
-  }, _ref))), /* @__PURE__ */ React.createElement(InputTrigger.DateRange, null, /* @__PURE__ */ React.createElement(SRangeIndicator, _ref2.cn("SRangeIndicator", {
+  const {
+    styles
+  } = props;
+  const SComparatorRangeInput = Box;
+  const SRangeIndicator = Box;
+  return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SComparatorRangeInput, _ref2.cn("SComparatorRangeInput", {
+    ...assignProps({
+      "data-name": "SComparatorRangeInput",
+      "tag": InputTrigger,
+      "parts": dateParts,
+      "unit": "month",
+      "__excludeProps": ["role", "aria-haspopup", "aria-expanded", "onChange", "value", "id"]
+    }, _ref)
+  }), /* @__PURE__ */ React.createElement(InputTrigger.DateRange, null, /* @__PURE__ */ React.createElement(SRangeIndicator, _ref2.cn("SRangeIndicator", {
     "range": props.range,
     "disabled": props.disabled,
     "w": 12,
@@ -45,128 +43,115 @@ RangeInput.SingleDateInput = InputTrigger.SingleDateInput;
 RangeInput.DateRange = InputTrigger.DateRange;
 RangeInput.DateRangeFromInput = InputTrigger.DateRangeFromInput;
 RangeInput.DateRangeToInput = InputTrigger.DateRangeToInput;
-var MonthDateRangeComparatorRoot = /* @__PURE__ */ (function(_RangeComparatorAbstr) {
-  function MonthDateRangeComparatorRoot2() {
-    var _this;
-    _classCallCheck(this, MonthDateRangeComparatorRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, MonthDateRangeComparatorRoot2, [].concat(args));
-    _defineProperty(_this, "navigateStep", "year");
-    _defineProperty(_this, "keyStep", "month");
-    _defineProperty(_this, "keyDiff", {
+class MonthDateRangeComparatorRoot extends DateRangeComparatorAbstract {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "navigateStep", "year");
+    _defineProperty(this, "keyStep", "month");
+    _defineProperty(this, "keyDiff", {
       ArrowLeft: -1,
       ArrowUp: -3,
       ArrowRight: 1,
       ArrowDown: 3
     });
-    _defineProperty(_this, "triggerFormattingProps", {
+    _defineProperty(this, "triggerFormattingProps", {
       month: "short",
       year: "numeric"
     });
-    return _this;
   }
-  _inherits(MonthDateRangeComparatorRoot2, _RangeComparatorAbstr);
-  return _createClass(MonthDateRangeComparatorRoot2, [{
-    key: "getTitleProps",
-    value: function getTitleProps(props, index) {
-      var _this$asProps = this.asProps, displayedPeriod = _this$asProps.displayedPeriod, locale = _this$asProps.locale;
-      return _objectSpread(_objectSpread({}, _superPropGet(MonthDateRangeComparatorRoot2, "getTitleProps", this, 3)([props, index])), {}, {
-        children: new Intl.DateTimeFormat(locale, {
-          year: "numeric"
-        }).format(dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate())
-      });
-    }
-  }, {
-    key: "getRangeInput",
-    value: function getRangeInput() {
-      return /* @__PURE__ */ React.createElement(MonthDateRangeComparator.RangeInput.DateRange, null);
-    }
-  }, {
-    key: "getRangeCalendarProps",
-    value: function getRangeCalendarProps() {
-      return {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, {
-          direction: "column"
-        }, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.CalendarHeader, {
-          tag: Flex
-        }, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Prev, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Title, null)), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Calendar, null)), /* @__PURE__ */ React.createElement(Flex, {
-          direction: "column"
-        }, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.CalendarHeader, {
-          tag: Flex
-        }, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Title, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Next, null)), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Calendar, null)))
-      };
-    }
-  }, {
-    key: "getValueDateRangeProps",
-    value: function getValueDateRangeProps() {
-      var props = _superPropGet(MonthDateRangeComparatorRoot2, "getValueDateRangeProps", this, 3)([]);
-      return _objectSpread(_objectSpread({}, props), {}, {
-        w: props.w - 60
-      });
-    }
-  }, {
-    key: "getCompareDateRangeProps",
-    value: function getCompareDateRangeProps() {
-      var props = _superPropGet(MonthDateRangeComparatorRoot2, "getCompareDateRangeProps", this, 3)([]);
-      return _objectSpread(_objectSpread({}, props), {}, {
-        w: props.w - 60
-      });
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      return _objectSpread(_objectSpread({}, _superPropGet(MonthDateRangeComparatorRoot2, "getPopperProps", this, 3)([])), {}, {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Header, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Body, {
-          showButtons: true
-        }))
-      });
-    }
-  }, {
-    key: "getHeaderProps",
-    value: function getHeaderProps() {
-      return {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.ValueDateRange, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.CompareToggle, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.CompareDateRange, null))
-      };
-    }
-  }, {
-    key: "getBodyProps",
-    value: function getBodyProps(_ref1) {
-      var showButtons = _ref1.showButtons;
-      return {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.RangeCalendar, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Periods, {
-          showButtons
-        }))
-      };
-    }
-  }, {
-    key: "getPeriodsProps",
-    value: function getPeriodsProps(_ref10) {
-      var showButtons = _ref10.showButtons, _ref10$unclearable = _ref10.unclearable, unclearable = _ref10$unclearable === void 0 ? false : _ref10$unclearable;
-      return {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Periods.Divider, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Periods.Column, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Periods.Options, null), showButtons && /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Periods.Controls, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Apply, null), !unclearable && /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Reset, null))))
-      };
-    }
-  }, {
-    key: "getFooterProps",
-    value: function getFooterProps(_ref11) {
-      var _ref11$unclearable = _ref11.unclearable, unclearable = _ref11$unclearable === void 0 ? false : _ref11$unclearable;
-      return {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Apply, null), !unclearable && /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Reset, null))
-      };
-    }
-  }]);
-})(DateRangeComparatorAbstract);
+  getTitleProps(props, index) {
+    const {
+      displayedPeriod,
+      locale
+    } = this.asProps;
+    return {
+      ...super.getTitleProps(props, index),
+      children: new Intl.DateTimeFormat(locale, {
+        year: "numeric"
+      }).format(dayjs(displayedPeriod).add(index, this.navigateStep).startOf(this.navigateStep).toDate())
+    };
+  }
+  getRangeInput() {
+    return /* @__PURE__ */ React.createElement(MonthDateRangeComparator.RangeInput.DateRange, null);
+  }
+  getRangeCalendarProps() {
+    return {
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, {
+        direction: "column"
+      }, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.CalendarHeader, {
+        tag: Flex
+      }, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Prev, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Title, null)), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Calendar, null)), /* @__PURE__ */ React.createElement(Flex, {
+        direction: "column"
+      }, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.CalendarHeader, {
+        tag: Flex
+      }, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Title, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Next, null)), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Calendar, null)))
+    };
+  }
+  getValueDateRangeProps() {
+    const props = super.getValueDateRangeProps();
+    return {
+      ...props,
+      w: props.w - 60
+    };
+  }
+  getCompareDateRangeProps() {
+    const props = super.getCompareDateRangeProps();
+    return {
+      ...props,
+      w: props.w - 60
+    };
+  }
+  getPopperProps() {
+    return {
+      ...super.getPopperProps(),
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Header, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Body, {
+        showButtons: true
+      }))
+    };
+  }
+  getHeaderProps() {
+    return {
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.ValueDateRange, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.CompareToggle, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.CompareDateRange, null))
+    };
+  }
+  getBodyProps({
+    showButtons
+  }) {
+    return {
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.RangeCalendar, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Periods, {
+        showButtons
+      }))
+    };
+  }
+  getPeriodsProps({
+    showButtons,
+    unclearable = false
+  }) {
+    return {
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Periods.Divider, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Periods.Column, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Periods.Options, null), showButtons && /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Periods.Controls, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Apply, null), !unclearable && /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Reset, null))))
+    };
+  }
+  getFooterProps({
+    unclearable = false
+  }) {
+    return {
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Apply, null), !unclearable && /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Reset, null))
+    };
+  }
+}
 _defineProperty(MonthDateRangeComparatorRoot, "displayName", "MonthDateRangeComparator");
-_defineProperty(MonthDateRangeComparatorRoot, "defaultProps", function(props) {
-  return _objectSpread(_objectSpread({}, DateRangeComparatorAbstract.defaultProps(props)), {}, {
+_defineProperty(MonthDateRangeComparatorRoot, "defaultProps", (props) => {
+  return {
+    ...DateRangeComparatorAbstract.defaultProps(props),
     children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Trigger, null), /* @__PURE__ */ React.createElement(MonthDateRangeComparator.Popper, null))
-  });
+  };
 });
 function ValueDateRange(props) {
   var _ref3;
-  var SValueDateRange = props.Root, styles = props.styles;
+  const {
+    Root: SValueDateRange,
+    styles
+  } = props;
   return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SValueDateRange, _ref3.cn("SValueDateRange", {
     "render": MonthDateRangeComparator.RangeInput,
     "range": "value"
@@ -174,7 +159,10 @@ function ValueDateRange(props) {
 }
 function CompareDateRange(props) {
   var _ref4;
-  var SCompareDateRange = props.Root, styles = props.styles;
+  const {
+    Root: SCompareDateRange,
+    styles
+  } = props;
   return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SCompareDateRange, _ref4.cn("SCompareDateRange", {
     "render": MonthDateRangeComparator.RangeInput,
     "range": "compare"
@@ -182,7 +170,11 @@ function CompareDateRange(props) {
 }
 function RangeCalendar(props) {
   var _ref5;
-  var SRangeCalendar = props.Root, Children = props.Children, styles = props.styles;
+  const {
+    Root: SRangeCalendar,
+    Children,
+    styles
+  } = props;
   return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SRangeCalendar, _ref5.cn("SRangeCalendar", {
     "render": Flex,
     "gap": 8
@@ -190,14 +182,20 @@ function RangeCalendar(props) {
 }
 function Periods(props) {
   var _ref6;
-  var SPeriods = props.Root, styles = props.styles;
+  const {
+    Root: SPeriods,
+    styles
+  } = props;
   return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SPeriods, _ref6.cn("SPeriods", {
     "render": Flex
   }));
 }
 function PeriodsDivider(props) {
   var _ref7;
-  var SPeriodsDivider = props.Root, styles = props.styles;
+  const {
+    Root: SPeriodsDivider,
+    styles
+  } = props;
   return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SPeriodsDivider, _ref7.cn("SPeriodsDivider", {
     "orientation": "vertical",
     "h": "auto",
@@ -206,7 +204,10 @@ function PeriodsDivider(props) {
 }
 function PeriodsColumn(props) {
   var _ref8;
-  var SPeriodsColumn = props.Root, styles = props.styles;
+  const {
+    Root: SPeriodsColumn,
+    styles
+  } = props;
   return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SPeriodsColumn, _ref8.cn("SPeriodsColumn", {
     "render": Flex,
     "direction": "column",
@@ -216,21 +217,27 @@ function PeriodsColumn(props) {
 }
 function PeriodsOptions(props) {
   var _ref9;
-  var styles = props.styles, SPeriodsList = props.Root;
+  const {
+    styles,
+    Root: SPeriodsList
+  } = props;
   return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SPeriodsList, _ref9.cn("SPeriodsList", {
     "render": MonthDateRangeComparator.Period
   }));
 }
 function PeriodsControls(props) {
   var _ref0;
-  var styles = props.styles, SPeriodsControls = props.Root;
+  const {
+    styles,
+    Root: SPeriodsControls
+  } = props;
   return _ref0 = sstyled(styles), /* @__PURE__ */ React.createElement(SPeriodsControls, _ref0.cn("SPeriodsControls", {
     "render": Flex,
     "p": 4,
     "gap": 2
   }));
 }
-var MonthDateRangeComparator = createComponent(MonthDateRangeComparatorRoot, {
+const MonthDateRangeComparator = createComponent(MonthDateRangeComparatorRoot, {
   Popper,
   CalendarHeader: Header$1,
   Title,