@mirohq/design-system-calendar 0.1.0-calendar-component.0

package/dist/module.js

@@ -0,0 +1,683 @@
+import { Flex as Flex$1, mergeRefs as mergeRefs$1, Primitive as Primitive$1 } from '@mirohq/design-system';
+import { styled } from '@mirohq/design-system-stitches';
+import * as React from 'react';
+import React__default, { useRef, useCallback } from 'react';
+import { useDateSegment, useLocale, useDateField, useButton, useFocusRing, mergeProps, useDialog, usePopover, Overlay, DismissButton, useDateFormatter, useCalendarCell, useCalendarGrid, useDateRangePicker, useRangeCalendar, useCalendar, useDatePicker } from 'react-aria';
+import { createCalendar, isSameMonth, isSameDay, getDayOfWeek, isWeekend, isToday, getLocalTimeZone, getWeeksInMonth } from '@internationalized/date';
+import { useDateFieldState, useDateRangePickerState, useRangeCalendarState, useCalendarState, useDatePickerState } from 'react-stately';
+import { Flex } from '@mirohq/design-system-flex';
+import { IconChevronLeft, IconChevronRight, IconCalendarBlank } from '@mirohq/design-system-icons';
+import { mergeRefs } from '@mirohq/design-system-utils';
+import { Button as Button$1 } from '@mirohq/design-system-button';
+import { Primitive } from '@mirohq/design-system-primitive';
+
+const StyledDataSegment = styled(Primitive.div, {
+  color: "$text-neutrals-subtle",
+  "&[data-value]": {
+    color: "$text-neutrals"
+  },
+  "& span": {
+    pointerEvents: "none",
+    "&[data-placeholder]": {
+      display: "none",
+      height: "0",
+      color: "$text-neutrals-subtle"
+    }
+  }
+});
+
+const FieldDateSegment = React__default.forwardRef(({ segment, state }) => {
+  const ref = useRef(null);
+  const { segmentProps } = useDateSegment(segment, state, ref);
+  return /* @__PURE__ */ React__default.createElement(StyledDataSegment, {
+    ...segmentProps,
+    ref,
+    "data-value": state.value !== null ? "" : void 0
+  }, /* @__PURE__ */ React__default.createElement("span", {
+    "aria-hidden": "true",
+    "data-placeholder": !segment.isPlaceholder ? "" : void 0
+  }, segment.placeholder), segment.isPlaceholder ? "" : segment.text);
+});
+const TextField = (props) => {
+  const ref = useRef(null);
+  const { locale } = useLocale();
+  const state = useDateFieldState({
+    ...props,
+    isReadOnly: true,
+    locale,
+    createCalendar
+  });
+  const { fieldProps } = useDateField(props, state, ref);
+  return /* @__PURE__ */ React__default.createElement(Flex, {
+    ...fieldProps,
+    ref
+  }, state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(FieldDateSegment, {
+    key: i,
+    segment,
+    state
+  })));
+};
+
+const StyledButton = styled(Primitive.button, {
+  padding: "0",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  color: "$text-neutrals",
+  "&[disabled]": {
+    cursor: "not-allowed"
+  }
+});
+const StyledFieldButton = styled(Primitive.button, {
+  padding: "0",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+  square: "28px",
+  "&[disabled]": {
+    cursor: "not-allowed"
+  },
+  "& svg": {
+    color: "$text-neutrals-subtle",
+    square: "22px"
+  },
+  "&[data-custom]": {
+    width: "100%",
+    height: "unset"
+  }
+});
+
+const Button = React__default.forwardRef((props, forwardRef) => {
+  const ref = useRef(null);
+  const { buttonProps } = useButton(props, ref);
+  const { focusProps } = useFocusRing();
+  const { children } = props;
+  const refs = mergeRefs([ref, forwardRef]);
+  return /* @__PURE__ */ React__default.createElement(StyledButton, {
+    ...mergeProps(buttonProps, focusProps),
+    ref: refs
+  }, children);
+});
+const FieldButton = (props) => {
+  const ref = useRef(null);
+  const { buttonProps } = useButton(props, ref);
+  const { customButton = false, children } = props;
+  return /* @__PURE__ */ React__default.createElement(StyledFieldButton, {
+    "data-custom": customButton ? "" : void 0,
+    ...buttonProps,
+    ref
+  }, children);
+};
+
+const Popover = (props) => {
+  const ref = React.useRef(null);
+  const { state, children } = props;
+  const { dialogProps } = useDialog(props, ref);
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      ...props,
+      popoverRef: ref
+    },
+    state
+  );
+  return /* @__PURE__ */ React.createElement(Overlay, null, /* @__PURE__ */ React.createElement("div", {
+    ...underlayProps
+  }), /* @__PURE__ */ React.createElement("div", {
+    ...popoverProps,
+    ref
+  }, /* @__PURE__ */ React.createElement(DismissButton, {
+    onDismiss: state.close
+  }), /* @__PURE__ */ React.createElement("div", {
+    ...dialogProps,
+    ref
+  }, children), /* @__PURE__ */ React.createElement(DismissButton, {
+    onDismiss: state.close
+  })));
+};
+
+const StyledRangePicker = styled(Primitive.div, {
+  display: "inline-block"
+});
+const StyledRangePickerInput$1 = styled(Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  padding: "$100",
+  paddingLeft: "$150",
+  border: "1px solid $border-neutrals",
+  borderRadius: "$50",
+  background: "$background-neutrals",
+  color: "$text-neutrals",
+  minWidth: "230px",
+  "&:hover": {
+    border: "1px solid $border-primary-hover",
+    cursor: "pointer"
+  }
+});
+const StyledRangePickerInputContent$1 = styled(Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  fontSize: "$200",
+  lineHeight: "24px",
+  width: "100%"
+});
+
+const StyledPredefinedRanges = styled(Primitive.div, {
+  display: "flex",
+  flexDirection: "column",
+  borderRight: "1px solid $border-neutrals",
+  padding: "$300 $200 0 $200",
+  "& button": {
+    background: "transparent",
+    border: "none",
+    fontSize: "$200",
+    padding: "0 0 0 $100",
+    textAlign: "left",
+    lineHeight: "24px",
+    color: "$text-neutrals",
+    marginBottom: "$150",
+    borderRadius: "$50",
+    minWidth: "125px",
+    cursor: "pointer",
+    "&:hover": {
+      backgroundColor: "$background-primary-prominent-hover",
+      color: "$text-primary-inverted",
+      fontWeight: "600"
+    }
+  }
+});
+
+const PredefinedRanges = React__default.forwardRef(({ range, onClick }, forwardRef) => /* @__PURE__ */ React__default.createElement(StyledPredefinedRanges, {
+  ref: forwardRef
+}, range == null ? void 0 : range.map((date, i) => /* @__PURE__ */ React__default.createElement("button", {
+  key: i,
+  type: "button",
+  onClick: () => onClick(date)
+}, date.label))));
+
+const StyledBody = styled(Primitive.div, {
+  display: "inline-block",
+  background: "$background-neutrals"
+});
+const StyledBodyContent = styled(Flex$1, {
+  margin: "0 auto",
+  boxShadow: "$100",
+  background: "$background-neutrals",
+  borderRadius: "$100"
+});
+const StyledGridContent = styled(Flex$1, {
+  paddingBottom: "$200",
+  "& [data-left-calendar]": {
+    paddingLeft: "$200",
+    paddingRight: "$100"
+  },
+  "& [data-right-calendar]": {
+    paddingLeft: "$100",
+    paddingRight: "$200"
+  }
+});
+const StyledBodyContentLeft = styled(Primitive.div, {
+  paddingLeft: "$200",
+  paddingRight: "$100"
+});
+const StyledBodyContentRight = styled(Primitive.div, {
+  paddingLeft: "$100",
+  paddingRight: "$200"
+});
+const StyledClearContent = styled(Primitive.div, {
+  padding: "$200",
+  borderTop: "1px solid $border-neutrals"
+});
+
+const StyledHeaderTitle = styled(Flex$1, {
+  justifyContent: "center",
+  flex: "3",
+  color: "$text-neutrals"
+});
+const StyledHeader = styled(Flex$1, {
+  padding: "0 $200",
+  color: "$text-neutrals"
+});
+
+const Header = ({
+  state,
+  prevButtonProps,
+  nextButtonProps,
+  visibleMonths
+}) => {
+  const monthDateFormatter = useDateFormatter({
+    month: "long",
+    year: "numeric",
+    timeZone: state.timeZone
+  });
+  return /* @__PURE__ */ React__default.createElement(StyledHeader, null, /* @__PURE__ */ React__default.createElement(Button, {
+    ...prevButtonProps
+  }, /* @__PURE__ */ React__default.createElement(IconChevronLeft, null)), /* @__PURE__ */ React__default.createElement(StyledHeaderTitle, null, /* @__PURE__ */ React__default.createElement("h2", null, monthDateFormatter.format(
+    state.visibleRange.start.toDate(state.timeZone)
+  ))), visibleMonths !== void 0 && /* @__PURE__ */ React__default.createElement(StyledHeaderTitle, null, /* @__PURE__ */ React__default.createElement("h2", null, monthDateFormatter.format(
+    state.visibleRange.start.add({ months: 1 }).toDate(state.timeZone)
+  ))), /* @__PURE__ */ React__default.createElement(Button, {
+    ...nextButtonProps
+  }, /* @__PURE__ */ React__default.createElement(IconChevronRight, null)));
+};
+
+const StyledCellContent = styled(Primitive.div, {
+  square: "28px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "$50",
+  color: "$text-neutrals",
+  "&[data-today]": {
+    color: "$text-primary"
+  },
+  "&[data-weekend]": {
+    color: "$text-neutrals-subtle"
+  },
+  "&[data-selected-middle]": {
+    color: "$text-neutrals"
+  },
+  "&[data-selection]": {
+    borderRadius: "$50",
+    background: "$background-primary-prominent-selected",
+    color: "$text-primary-inverted",
+    fontWeight: "600"
+  },
+  "&[data-disabled]": {
+    textDecoration: "line-through",
+    color: "$text-neutrals-disabled"
+  }
+});
+const StyledCell = styled(Primitive.div, {
+  square: "36px",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  "&:hover": {
+    background: "$background-primary-subtle-hover",
+    [`& ${StyledCellContent}`]: {
+      background: "$background-primary-prominent-hover",
+      color: "$text-primary-inverted"
+    }
+  },
+  "&[data-selected]": {
+    background: "$background-primary-subtle-hover"
+  },
+  "&[data-selection-start]": {
+    borderBottomLeftRadius: "$lg",
+    borderTopLeftRadius: "$lg"
+  },
+  "&[data-selection-end]": {
+    borderBottomRightRadius: "$lg",
+    borderTopRightRadius: "$lg"
+  },
+  "&[data-hidden]": {
+    display: "none"
+  },
+  "&[data-disabled]": {
+    cursor: "not-allowed",
+    "&:hover": {
+      background: "transparent",
+      [`& ${StyledCellContent}`]: {
+        background: "transparent",
+        color: "$text-neutrals-disabled"
+      }
+    }
+  }
+});
+
+const Cell = React__default.forwardRef(
+  (props, forwardRef) => {
+    const { state, date, currentMonth } = props;
+    const ref = useRef(null);
+    const { cellProps, buttonProps, isSelected, isDisabled, formattedDate } = useCalendarCell({ date }, state, ref);
+    const isOutsideMonth = !isSameMonth(currentMonth, date);
+    const isSelectionStart = state.highlightedRange !== void 0 && state.highlightedRange !== null ? isSameDay(date, state.highlightedRange.start) : isSelected;
+    const isSelectionEnd = state.highlightedRange !== void 0 && state.highlightedRange !== null ? isSameDay(date, state.highlightedRange.end) : isSelected;
+    const { locale } = useLocale();
+    const dayOfWeek = getDayOfWeek(date, locale);
+    const isWeekendDay = isWeekend(date, locale);
+    const isRoundedLeft = isSelected && (isSelectionStart || dayOfWeek === 0 || date.day === 1);
+    const isRoundedRight = isSelected && (isSelectionEnd || dayOfWeek === 6 || date.day === date.calendar.getDaysInMonth(date));
+    const { focusProps } = useFocusRing();
+    return /* @__PURE__ */ React__default.createElement("td", {
+      ...cellProps
+    }, /* @__PURE__ */ React__default.createElement(StyledCell, {
+      ...mergeProps(buttonProps, focusProps),
+      ref: forwardRef,
+      "data-selected": isSelected ? "" : void 0,
+      "data-selection-start": isRoundedLeft ? "" : void 0,
+      "data-selection-end": isRoundedRight ? "" : void 0,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-hidden": isOutsideMonth ? "" : void 0
+    }, /* @__PURE__ */ React__default.createElement(StyledCellContent, {
+      "data-selected-middle": isSelected && !(isSelectionStart || isSelectionEnd) ? "" : void 0,
+      "data-selection": isSelectionStart || isSelectionEnd ? "" : void 0,
+      "data-disabled": isDisabled ? "" : void 0,
+      "data-today": isToday(date, getLocalTimeZone()) ? "" : void 0,
+      "data-weekend": isWeekendDay ? "" : void 0
+    }, formattedDate)));
+  }
+);
+
+const StyledGrid = styled(Primitive.table, {
+  borderCollapse: "separate",
+  borderSpacing: " 0 $50"
+});
+const StyledDays = styled(Primitive.th, {
+  square: "36px",
+  color: "$text-neutrals"
+});
+
+const Grid = React__default.forwardRef(
+  (props, forwardRef) => {
+    const { locale } = useLocale();
+    const { state, offset = {} } = props;
+    const startDate = state.visibleRange.start.add(offset);
+    const { gridProps, headerProps, weekDays } = useCalendarGrid(
+      props,
+      state
+    );
+    const weeksInMonth = getWeeksInMonth(startDate, locale);
+    return /* @__PURE__ */ React__default.createElement(StyledGrid, {
+      ref: forwardRef,
+      ...gridProps,
+      cellPadding: "0"
+    }, /* @__PURE__ */ React__default.createElement("thead", {
+      ...headerProps
+    }, /* @__PURE__ */ React__default.createElement("tr", null, weekDays.map((day, i) => /* @__PURE__ */ React__default.createElement(StyledDays, {
+      key: i
+    }, /* @__PURE__ */ React__default.createElement("div", null, day))))), /* @__PURE__ */ React__default.createElement("tbody", null, Array.from(Array(weeksInMonth).keys()).map((weekIndex) => /* @__PURE__ */ React__default.createElement("tr", {
+      key: weekIndex
+    }, state.getDatesInWeek(weekIndex, startDate).map(
+      (date, i) => date !== null ? /* @__PURE__ */ React__default.createElement(Cell, {
+        key: i,
+        state,
+        date,
+        currentMonth: startDate
+      }) : /* @__PURE__ */ React__default.createElement("td", {
+        key: i
+      })
+    )))));
+  }
+);
+
+const RangePicker = React__default.forwardRef((props, forwardRef) => {
+  const {
+    predefinedRanges,
+    minDate,
+    maxDate,
+    visibleMonths,
+    clearString,
+    children,
+    defaultOpen,
+    onClear
+  } = props;
+  const state = useDateRangePickerState(
+    props
+  );
+  const ref = useRef(null);
+  const { locale } = useLocale();
+  const { groupProps, startFieldProps, endFieldProps, buttonProps } = useDateRangePicker(
+    {
+      ...props,
+      isOpen: defaultOpen
+    },
+    state,
+    ref
+  );
+  const change = (value) => {
+    state.setValue(value);
+    state.close();
+  };
+  const rangeState = useRangeCalendarState({
+    ...props,
+    visibleDuration: visibleMonths,
+    minValue: minDate,
+    maxValue: maxDate,
+    autoFocus: true,
+    onFocusChange: focus,
+    onChange: change,
+    locale,
+    createCalendar
+  });
+  const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(
+    props,
+    rangeState,
+    ref
+  );
+  const rangeClick = useCallback(
+    (selectedRange) => {
+      if (selectedRange.range !== void 0) {
+        state.setValue(selectedRange.range);
+        rangeState.setValue(selectedRange.range);
+      }
+    },
+    [rangeState, state]
+  );
+  const clear = () => {
+    state.setValue({ start: null, end: null });
+    if (onClear !== void 0) {
+      onClear();
+      state.close();
+    }
+  };
+  const refs = mergeRefs([ref, forwardRef]);
+  return /* @__PURE__ */ React__default.createElement(StyledRangePicker, {
+    ref: refs
+  }, children === void 0 && /* @__PURE__ */ React__default.createElement(StyledRangePickerInput$1, {
+    ...groupProps,
+    ref
+  }, /* @__PURE__ */ React__default.createElement(StyledRangePickerInputContent$1, null, /* @__PURE__ */ React__default.createElement(TextField, {
+    ...startFieldProps
+  }), /* @__PURE__ */ React__default.createElement("span", {
+    "aria-hidden": "true"
+  }, "\u2013"), /* @__PURE__ */ React__default.createElement(TextField, {
+    ...endFieldProps
+  }), /* @__PURE__ */ React__default.createElement(Flex, {
+    css: { marginLeft: "auto" }
+  }, /* @__PURE__ */ React__default.createElement(FieldButton, {
+    ...buttonProps
+  }, /* @__PURE__ */ React__default.createElement(IconCalendarBlank, null))))), children !== null && /* @__PURE__ */ React__default.createElement("div", {
+    ...groupProps,
+    ref
+  }, /* @__PURE__ */ React__default.createElement(FieldButton, {
+    ...buttonProps,
+    customButton: true
+  }, children)), state.isOpen && /* @__PURE__ */ React__default.createElement(Popover, {
+    triggerRef: ref,
+    state,
+    placement: "bottom start"
+  }, /* @__PURE__ */ React__default.createElement(StyledBody, {
+    ref: refs
+  }, /* @__PURE__ */ React__default.createElement(StyledBodyContent, null, predefinedRanges !== void 0 && /* @__PURE__ */ React__default.createElement(PredefinedRanges, {
+    range: predefinedRanges,
+    onClick: rangeClick
+  }), /* @__PURE__ */ React__default.createElement(Flex, {
+    direction: "column",
+    ...calendarProps
+  }, /* @__PURE__ */ React__default.createElement(Header, {
+    state: rangeState,
+    prevButtonProps,
+    nextButtonProps,
+    visibleMonths
+  }), /* @__PURE__ */ React__default.createElement(StyledGridContent, null, /* @__PURE__ */ React__default.createElement(StyledBodyContentLeft, null, /* @__PURE__ */ React__default.createElement(Grid, {
+    state: rangeState
+  })), visibleMonths !== void 0 && /* @__PURE__ */ React__default.createElement(StyledBodyContentRight, null, /* @__PURE__ */ React__default.createElement(Grid, {
+    onChange: change,
+    state: rangeState,
+    offset: { months: 1 }
+  }))), onClear !== void 0 && /* @__PURE__ */ React__default.createElement(StyledClearContent, null, /* @__PURE__ */ React__default.createElement(Button$1, {
+    size: "medium",
+    type: "button",
+    onClick: clear,
+    disabled: rangeState.value === null
+  }, clearString)))))));
+});
+
+const StyledRangePickerInput = styled(Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  padding: "$100",
+  paddingLeft: "$150",
+  border: "1px solid $border-neutrals",
+  borderRadius: "$50",
+  background: "$background-neutrals",
+  color: "$text-neutrals",
+  minWidth: "230px",
+  "&:hover": {
+    border: "1px solid $border-primary-hover",
+    cursor: "pointer"
+  }
+});
+const StyledRangePickerInputContent = styled(Primitive.div, {
+  display: "flex",
+  alignItems: "center",
+  fontSize: "$200",
+  lineHeight: "24px",
+  width: "100%"
+});
+const StyledDatePicker = styled(Primitive.div, {
+  display: "inline-block"
+});
+
+const DatePickerBody = React__default.forwardRef((props, forwardRef) => {
+  const {
+    predefinedRanges,
+    visibleMonths,
+    onClear,
+    minDate,
+    maxDate,
+    clearString
+  } = props;
+  const { locale } = useLocale();
+  const state = useCalendarState({
+    ...props,
+    visibleDuration: visibleMonths,
+    minValue: minDate,
+    maxValue: maxDate,
+    locale,
+    createCalendar
+  });
+  const ref = useRef(null);
+  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
+    props,
+    state
+  );
+  const dateClick = useCallback(
+    (selectedRange) => {
+      if (selectedRange.date !== void 0)
+        state.setValue(selectedRange.date);
+    },
+    [state]
+  );
+  const refs = mergeRefs([ref, forwardRef]);
+  return /* @__PURE__ */ React__default.createElement(StyledBody, {
+    ref: refs
+  }, /* @__PURE__ */ React__default.createElement(StyledBodyContent, {
+    ...calendarProps
+  }, predefinedRanges !== void 0 && /* @__PURE__ */ React__default.createElement(PredefinedRanges, {
+    range: predefinedRanges,
+    onClick: dateClick
+  }), /* @__PURE__ */ React__default.createElement(Flex$1, {
+    direction: "column"
+  }, /* @__PURE__ */ React__default.createElement(Header, {
+    state,
+    prevButtonProps,
+    nextButtonProps,
+    visibleMonths
+  }), /* @__PURE__ */ React__default.createElement(StyledGridContent, null, /* @__PURE__ */ React__default.createElement(StyledBodyContentLeft, null, /* @__PURE__ */ React__default.createElement(Grid, {
+    state
+  })), visibleMonths !== void 0 && /* @__PURE__ */ React__default.createElement(StyledBodyContentRight, null, /* @__PURE__ */ React__default.createElement(Grid, {
+    state,
+    offset: { months: 1 }
+  }))), onClear !== void 0 && /* @__PURE__ */ React__default.createElement(StyledClearContent, null, /* @__PURE__ */ React__default.createElement(Button$1, {
+    size: "medium",
+    onClick: onClear,
+    disabled: state.value === null
+  }, clearString)))));
+});
+
+const DatePicker = React__default.forwardRef((props, forwardRef) => {
+  const {
+    picker,
+    predefinedRanges,
+    visibleMonths,
+    defaultValue,
+    minDate,
+    maxDate,
+    children,
+    clearString,
+    defaultOpen,
+    onClear
+  } = props;
+  const ref = useRef(null);
+  const refs = mergeRefs$1([ref, forwardRef]);
+  const state = useDatePickerState(props);
+  const { groupProps, fieldProps, buttonProps, calendarProps } = useDatePicker(
+    { ...props, isOpen: defaultOpen },
+    state,
+    ref
+  );
+  const clearState = () => {
+    state.setValue(null);
+    if (onClear !== void 0) {
+      onClear();
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, picker === "single" ? /* @__PURE__ */ React__default.createElement(StyledDatePicker, {
+    ref: refs
+  }, children === void 0 && /* @__PURE__ */ React__default.createElement(StyledRangePickerInput, {
+    ...groupProps,
+    ref
+  }, /* @__PURE__ */ React__default.createElement(StyledRangePickerInputContent, null, /* @__PURE__ */ React__default.createElement(TextField, {
+    ...fieldProps
+  }), /* @__PURE__ */ React__default.createElement(Flex, {
+    css: { marginLeft: "auto" }
+  }, /* @__PURE__ */ React__default.createElement(FieldButton, {
+    ...buttonProps
+  }, /* @__PURE__ */ React__default.createElement(IconCalendarBlank, null))))), children !== void 0 && /* @__PURE__ */ React__default.createElement("div", {
+    ...groupProps,
+    ref
+  }, /* @__PURE__ */ React__default.createElement(FieldButton, {
+    ...buttonProps,
+    customButton: true
+  }, children)), state.isOpen && /* @__PURE__ */ React__default.createElement(Popover, {
+    triggerRef: ref,
+    state,
+    placement: "bottom start"
+  }, /* @__PURE__ */ React__default.createElement(DatePickerBody, {
+    ...calendarProps,
+    defaultValue,
+    predefinedRanges,
+    visibleMonths,
+    onClear: clearState,
+    minDate,
+    maxDate,
+    clearString
+  }))) : /* @__PURE__ */ React__default.createElement(DatePickerBody, {
+    ...calendarProps,
+    defaultValue,
+    predefinedRanges,
+    visibleMonths,
+    onClear: onClear !== void 0 ? clearState : void 0,
+    minDate,
+    maxDate,
+    clearString: onClear !== void 0 ? clearString : void 0
+  }));
+});
+
+const StyledCalendar = styled(Primitive$1.div, {});
+const Calendar = React__default.forwardRef(({ picker, defaultValue, ...props }, forwardRef) => /* @__PURE__ */ React__default.createElement(StyledCalendar, {
+  ref: forwardRef
+}, picker === "range" ? /* @__PURE__ */ React__default.createElement(RangePicker, {
+  defaultValue,
+  ...props
+}) : /* @__PURE__ */ React__default.createElement(DatePicker, {
+  defaultValue,
+  ...props,
+  picker
+})));
+
+export { Calendar };
+//# sourceMappingURL=module.js.map