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

package/lib/esm/DatePicker.mjs

@@ -1,15 +1,9 @@
-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, sstyled, assignProps, Component } from "@semcore/core";
+import { createComponent, Component, sstyled, assignProps } from "@semcore/core";
+import { Box } from "@semcore/base-components";
 import Button from "@semcore/button";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import Divider from "@semcore/divider";
-import { Box } from "@semcore/flex-box";
 import dayjs from "dayjs";
 import React from "react";
 import { InputTrigger, Next, Prev, Title, Header, Popper, Trigger } from "./components/index.mjs";
@@ -18,122 +12,123 @@ import PickerAbstract from "./components/PickerAbstract.mjs";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
 import { formatDDMMYY } from "./utils/formatDate.mjs";
 import { includesDate } from "./utils/includesDate.mjs";
-var DatePickerRoot = /* @__PURE__ */ (function(_PickerAbstract) {
-  function DatePickerRoot2() {
-    var _this;
-    _classCallCheck(this, DatePickerRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, DatePickerRoot2, [].concat(args));
-    _defineProperty(_this, "navigateStep", "month");
-    _defineProperty(_this, "keyStep", "day");
-    _defineProperty(_this, "keyDiff", {
+class DatePickerRoot extends PickerAbstract {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "navigateStep", "month");
+    _defineProperty(this, "keyStep", "day");
+    _defineProperty(this, "keyDiff", {
       ArrowLeft: -1,
       ArrowUp: -7,
       ArrowRight: 1,
       ArrowDown: 7
     });
-    _defineProperty(_this, "handlerToday", function() {
-      _this.handlers.value(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)));
+    _defineProperty(this, "handlerToday", () => {
+      this.handlers.value(new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)));
     });
-    return _this;
   }
-  _inherits(DatePickerRoot2, _PickerAbstract);
-  return _createClass(DatePickerRoot2, [{
-    key: "getButtonTriggerProps",
-    value: function getButtonTriggerProps() {
-      var _this$asProps = this.asProps, value = _this$asProps.value, locale = _this$asProps.locale;
-      return _objectSpread(_objectSpread({}, _superPropGet(DatePickerRoot2, "getButtonTriggerProps", this, 3)([])), {}, {
-        placeholder: "Select date",
-        children: value ? formatDDMMYY(value, locale) : null
-      });
-    }
-  }, {
-    key: "getTriggerProps",
-    value: function getTriggerProps() {
-      var _this$asProps2 = this.asProps, value = _this$asProps2.value, 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;
-      return _objectSpread(_objectSpread({}, _superPropGet(DatePickerRoot2, "getButtonTriggerProps", this, 3)([])), {}, {
-        value,
-        onChange,
-        onDisplayedPeriodChange,
-        locale,
-        disabledDates: disabled,
-        disabledErrorText,
-        children: function children() {
-          return /* @__PURE__ */ React.createElement(InputTrigger.SingleDateInput, null);
-        },
-        getI18nText,
-        animationsDisabled,
-        unit: this.keyStep
-      });
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      return _objectSpread(_objectSpread({}, _superPropGet(DatePickerRoot2, "getPopperProps", this, 3)([])), {}, {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DatePicker.Header, null), /* @__PURE__ */ React.createElement(DatePicker.Calendar, null), /* @__PURE__ */ React.createElement(Divider, {
-          ml: -4,
-          mt: 4,
-          w: "calc(100% + 32px)"
-        }), /* @__PURE__ */ React.createElement(DatePicker.Today, null))
-      });
-    }
-  }, {
-    key: "getTitleProps",
-    value: function getTitleProps() {
-      var _this$asProps3 = this.asProps, displayedPeriod = _this$asProps3.displayedPeriod, locale = _this$asProps3.locale;
-      return _objectSpread(_objectSpread({}, _superPropGet(DatePickerRoot2, "getTitleProps", this, 3)([])), {}, {
-        children: new Intl.DateTimeFormat(locale, {
-          month: "long",
-          year: "numeric"
-        }).format(dayjs(displayedPeriod).startOf("month").toDate())
-      });
-    }
-  }, {
-    key: "getTodayProps",
-    value: function getTodayProps() {
-      var _this$asProps4 = this.asProps, i18n = _this$asProps4.i18n, locale = _this$asProps4.locale, disabled = _this$asProps4.disabled;
-      return {
-        i18n,
-        locale,
-        onClick: this.handlerToday,
-        disabled: disabled.some(includesDate(dayjs(), "day"))
-      };
-    }
-  }]);
-})(PickerAbstract);
-_defineProperty(DatePickerRoot, "displayName", "DatePicker");
-_defineProperty(DatePickerRoot, "defaultProps", function(props) {
-  return _objectSpread(_objectSpread({}, PickerAbstract.defaultProps(props)), {}, {
-    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DatePicker.Trigger, null), /* @__PURE__ */ React.createElement(DatePicker.Popper, null))
-  });
-});
-var Today = /* @__PURE__ */ (function(_Component) {
-  function Today2() {
-    _classCallCheck(this, Today2);
-    return _callSuper(this, Today2, arguments);
+  getButtonTriggerProps() {
+    const {
+      value,
+      locale
+    } = this.asProps;
+    return {
+      ...super.getButtonTriggerProps(),
+      placeholder: "Select date",
+      children: value ? formatDDMMYY(value, locale) : null
+    };
+  }
+  getTriggerProps() {
+    const {
+      value,
+      onChange,
+      onDisplayedPeriodChange,
+      locale,
+      disabled,
+      disabledErrorText,
+      getI18nText,
+      animationsDisabled
+    } = this.asProps;
+    return {
+      ...super.getButtonTriggerProps(),
+      value,
+      onChange,
+      onDisplayedPeriodChange,
+      locale,
+      disabledDates: disabled,
+      disabledErrorText,
+      children: () => /* @__PURE__ */ React.createElement(InputTrigger.SingleDateInput, null),
+      getI18nText,
+      animationsDisabled,
+      unit: this.keyStep
+    };
+  }
+  getPopperProps() {
+    return {
+      ...super.getPopperProps(),
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DatePicker.Header, null), /* @__PURE__ */ React.createElement(DatePicker.Calendar, null), /* @__PURE__ */ React.createElement(Divider, {
+        ml: -4,
+        mt: 4,
+        w: "calc(100% + 32px)"
+      }), /* @__PURE__ */ React.createElement(DatePicker.Today, null))
+    };
   }
-  _inherits(Today2, _Component);
-  return _createClass(Today2, [{
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps, _ref2;
-      var SToday = Box;
-      var _this$asProps5 = this.asProps, styles = _this$asProps5.styles, getI18nText = _this$asProps5.getI18nText, disabled = _this$asProps5.disabled, onClick = _this$asProps5.onClick;
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SToday, _ref2.cn("SToday", _objectSpread({}, assignProps({
+  getTitleProps() {
+    const {
+      displayedPeriod,
+      locale
+    } = this.asProps;
+    return {
+      ...super.getTitleProps(),
+      children: new Intl.DateTimeFormat(locale, {
+        month: "long",
+        year: "numeric"
+      }).format(dayjs(displayedPeriod).startOf("month").toDate())
+    };
+  }
+  getTodayProps() {
+    const {
+      i18n,
+      locale,
+      disabled
+    } = this.asProps;
+    return {
+      i18n,
+      locale,
+      onClick: this.handlerToday,
+      disabled: disabled.some(includesDate(dayjs(), "day"))
+    };
+  }
+}
+_defineProperty(DatePickerRoot, "displayName", "DatePicker");
+_defineProperty(DatePickerRoot, "defaultProps", (props) => ({
+  ...PickerAbstract.defaultProps(props),
+  children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DatePicker.Trigger, null), /* @__PURE__ */ React.createElement(DatePicker.Popper, null))
+}));
+class Today extends Component {
+  render() {
+    var _ref = this.asProps, _ref2;
+    const SToday = Box;
+    const {
+      styles,
+      getI18nText,
+      disabled,
+      onClick
+    } = this.asProps;
+    return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SToday, _ref2.cn("SToday", {
+      ...assignProps({
         "__excludeProps": ["onClick"]
-      }, _ref))), /* @__PURE__ */ React.createElement(Button, _ref2.cn("Button", {
-        "use": "tertiary",
-        "children": getI18nText("today"),
-        "disabled": disabled,
-        "onClick": onClick
-      })));
-    }
-  }]);
-})(Component);
+      }, _ref)
+    }), /* @__PURE__ */ React.createElement(Button, _ref2.cn("Button", {
+      "use": "tertiary",
+      "children": getI18nText("today"),
+      "disabled": disabled,
+      "onClick": onClick
+    })));
+  }
+}
 _defineProperty(Today, "enhance", [i18nEnhance(localizedMessages)]);
-var DatePicker = createComponent(DatePickerRoot, {
+const DatePicker = createComponent(DatePickerRoot, {
   Trigger: InputTrigger,
   ButtonTrigger: Trigger,
   Popper,

package/lib/esm/DateRangeComparator.mjs

@@ -1,13 +1,7 @@
-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 React from "react";
 import { Period, Next, Prev, Title, Header as Header$1, Popper } from "./components/index.mjs";
 import { CalendarDays } from "./components/Calendar.mjs";
@@ -15,15 +9,19 @@ import DateRangeComparatorAbstract, { Footer, Body, CompareToggle, Trigger, Rese
 import InputTrigger from "./components/InputTrigger.mjs";
 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,
-    "unit": "date",
-    "__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,
+      "unit": "date",
+      "__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,
@@ -38,98 +36,85 @@ RangeInput.SingleDateInput = InputTrigger.SingleDateInput;
 RangeInput.DateRange = InputTrigger.DateRange;
 RangeInput.DateRangeFromInput = InputTrigger.DateRangeFromInput;
 RangeInput.DateRangeToInput = InputTrigger.DateRangeToInput;
-var DateRangeComparatorRoot = /* @__PURE__ */ (function(_RangeComparatorAbstr) {
-  function DateRangeComparatorRoot2() {
-    var _this;
-    _classCallCheck(this, DateRangeComparatorRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, DateRangeComparatorRoot2, [].concat(args));
-    _defineProperty(_this, "navigateStep", "month");
-    _defineProperty(_this, "keyStep", "day");
-    _defineProperty(_this, "keyDiff", {
+class DateRangeComparatorRoot extends DateRangeComparatorAbstract {
+  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(DateRangeComparatorRoot2, _RangeComparatorAbstr);
-  return _createClass(DateRangeComparatorRoot2, [{
-    key: "getRangeInput",
-    value: function getRangeInput() {
-      return /* @__PURE__ */ React.createElement(DateRangeComparator.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(DateRangeComparator.CalendarHeader, {
-          tag: Flex
-        }, /* @__PURE__ */ React.createElement(DateRangeComparator.Prev, null), /* @__PURE__ */ React.createElement(DateRangeComparator.Title, null)), /* @__PURE__ */ React.createElement(DateRangeComparator.Calendar, null)), /* @__PURE__ */ React.createElement(Flex, {
-          direction: "column"
-        }, /* @__PURE__ */ React.createElement(DateRangeComparator.CalendarHeader, {
-          tag: Flex
-        }, /* @__PURE__ */ React.createElement(DateRangeComparator.Title, null), /* @__PURE__ */ React.createElement(DateRangeComparator.Next, null)), /* @__PURE__ */ React.createElement(DateRangeComparator.Calendar, null)))
-      };
-    }
-  }, {
-    key: "getPopperProps",
-    value: function getPopperProps() {
-      return _objectSpread(_objectSpread({}, _superPropGet(DateRangeComparatorRoot2, "getPopperProps", this, 3)([])), {}, {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DateRangeComparator.Header, null), /* @__PURE__ */ React.createElement(DateRangeComparator.Body, {
-          showButtons: true
-        }))
-      });
-    }
-  }, {
-    key: "getHeaderProps",
-    value: function getHeaderProps() {
-      return {
-        children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DateRangeComparator.ValueDateRange, null), /* @__PURE__ */ React.createElement(DateRangeComparator.CompareToggle, null), /* @__PURE__ */ React.createElement(DateRangeComparator.CompareDateRange, null))
-      };
-    }
-  }, {
-    key: "getBodyProps",
-    value: function getBodyProps(_ref1) {
-      var showButtons = _ref1.showButtons;
-      return {
-        children: /* @__PURE__ */ React.createElement(Flex, null, /* @__PURE__ */ React.createElement(DateRangeComparator.RangeCalendar, null), /* @__PURE__ */ React.createElement(DateRangeComparator.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(DateRangeComparator.Periods.Divider, null), /* @__PURE__ */ React.createElement(DateRangeComparator.Periods.Column, null, /* @__PURE__ */ React.createElement(DateRangeComparator.Periods.Options, null), showButtons && /* @__PURE__ */ React.createElement(DateRangeComparator.Periods.Controls, null, /* @__PURE__ */ React.createElement(DateRangeComparator.Apply, null), !unclearable && /* @__PURE__ */ React.createElement(DateRangeComparator.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(DateRangeComparator.Apply, null), !unclearable && /* @__PURE__ */ React.createElement(DateRangeComparator.Reset, null))
-      };
-    }
-  }]);
-})(DateRangeComparatorAbstract);
+  getRangeInput() {
+    return /* @__PURE__ */ React.createElement(DateRangeComparator.RangeInput.DateRange, null);
+  }
+  getRangeCalendarProps() {
+    return {
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Flex, {
+        direction: "column"
+      }, /* @__PURE__ */ React.createElement(DateRangeComparator.CalendarHeader, {
+        tag: Flex
+      }, /* @__PURE__ */ React.createElement(DateRangeComparator.Prev, null), /* @__PURE__ */ React.createElement(DateRangeComparator.Title, null)), /* @__PURE__ */ React.createElement(DateRangeComparator.Calendar, null)), /* @__PURE__ */ React.createElement(Flex, {
+        direction: "column"
+      }, /* @__PURE__ */ React.createElement(DateRangeComparator.CalendarHeader, {
+        tag: Flex
+      }, /* @__PURE__ */ React.createElement(DateRangeComparator.Title, null), /* @__PURE__ */ React.createElement(DateRangeComparator.Next, null)), /* @__PURE__ */ React.createElement(DateRangeComparator.Calendar, null)))
+    };
+  }
+  getPopperProps() {
+    return {
+      ...super.getPopperProps(),
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DateRangeComparator.Header, null), /* @__PURE__ */ React.createElement(DateRangeComparator.Body, {
+        showButtons: true
+      }))
+    };
+  }
+  getHeaderProps() {
+    return {
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DateRangeComparator.ValueDateRange, null), /* @__PURE__ */ React.createElement(DateRangeComparator.CompareToggle, null), /* @__PURE__ */ React.createElement(DateRangeComparator.CompareDateRange, null))
+    };
+  }
+  getBodyProps({
+    showButtons
+  }) {
+    return {
+      children: /* @__PURE__ */ React.createElement(Flex, null, /* @__PURE__ */ React.createElement(DateRangeComparator.RangeCalendar, null), /* @__PURE__ */ React.createElement(DateRangeComparator.Periods, {
+        showButtons
+      }))
+    };
+  }
+  getPeriodsProps({
+    showButtons,
+    unclearable = false
+  }) {
+    return {
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DateRangeComparator.Periods.Divider, null), /* @__PURE__ */ React.createElement(DateRangeComparator.Periods.Column, null, /* @__PURE__ */ React.createElement(DateRangeComparator.Periods.Options, null), showButtons && /* @__PURE__ */ React.createElement(DateRangeComparator.Periods.Controls, null, /* @__PURE__ */ React.createElement(DateRangeComparator.Apply, null), !unclearable && /* @__PURE__ */ React.createElement(DateRangeComparator.Reset, null))))
+    };
+  }
+  getFooterProps({
+    unclearable = false
+  }) {
+    return {
+      children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DateRangeComparator.Apply, null), !unclearable && /* @__PURE__ */ React.createElement(DateRangeComparator.Reset, null))
+    };
+  }
+}
 _defineProperty(DateRangeComparatorRoot, "displayName", "DateRangeComparator");
-_defineProperty(DateRangeComparatorRoot, "defaultProps", function(props) {
-  return _objectSpread(_objectSpread({}, DateRangeComparatorAbstract.defaultProps(props)), {}, {
+_defineProperty(DateRangeComparatorRoot, "defaultProps", (props) => {
+  return {
+    ...DateRangeComparatorAbstract.defaultProps(props),
     children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DateRangeComparator.Trigger, null), /* @__PURE__ */ React.createElement(DateRangeComparator.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": DateRangeComparator.RangeInput,
     "range": "value"
@@ -137,7 +122,10 @@ function ValueDateRange(props) {
 }
 function CompareDateRange(props) {
   var _ref4;
-  var SSecondaryDateRange = props.Root, styles = props.styles;
+  const {
+    Root: SSecondaryDateRange,
+    styles
+  } = props;
   return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SSecondaryDateRange, _ref4.cn("SSecondaryDateRange", {
     "render": DateRangeComparator.RangeInput,
     "range": "compare"
@@ -145,7 +133,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
@@ -153,14 +145,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",
@@ -169,7 +167,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",
@@ -178,7 +179,10 @@ function PeriodsColumn(props) {
 }
 function PeriodsOptions(props) {
   var _ref9;
-  var styles = props.styles, SPeriodsOptions = props.Root;
+  const {
+    styles,
+    Root: SPeriodsOptions
+  } = props;
   return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(SPeriodsOptions, _ref9.cn("SPeriodsOptions", {
     "render": DateRangeComparator.Period,
     "p": 2
@@ -186,14 +190,17 @@ function PeriodsOptions(props) {
 }
 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 DateRangeComparator = createComponent(DateRangeComparatorRoot, {
+const DateRangeComparator = createComponent(DateRangeComparatorRoot, {
   Popper,
   CalendarHeader: Header$1,
   Title,