@geneui/components 2.11.1

package/DatePicker.js

@@ -0,0 +1,1231 @@
+import { s as styleInject } from './style-inject.es-746bb8ed.js';
+import './globalStyling-9c60a159.js';
+import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { createContext, useState, useCallback, useContext, useMemo, useEffect, forwardRef } from 'react';
+import { c as classnames } from './index-6ff23041.js';
+import { p as propTypesExports } from './index-e0af0caf.js';
+import { a as dayjs, i as isBetween, d as dayjsWithPlugins } from './dateValidation-67caec66.js';
+import { r as chunk, n as noop } from './index-ac59cb10.js';
+import { g as guid } from './guid-8ddf77b3.js';
+import Button from './Button.js';
+import Icon from './Icon.js';
+import './configs-91c86664.js';
+import './_commonjsHelpers-24198af3.js';
+import 'react-dom';
+
+var css_248z = "[data-gene-ui-version=\"2.11.0\"] .datepicker-holder{background:var(--background);display:inline-grid;font-weight:600;grid-template-areas:\"date-box-1\" \"date-actions\";grid-template-columns:auto;grid-template-rows:auto auto;min-width:20.8rem;padding:1rem 2rem 2rem;vertical-align:top}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder .not-clickable{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder:not(.range-mode){padding-bottom:0}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder.range-mode{grid-template-areas:\"date-box-1 date-box-2 date-actions\";grid-template-columns:auto auto auto;grid-template-rows:auto}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder.range-mode:not(.simple-range-mode)>li+li{margin:0 0 0 3rem}html[dir=rtl] .datepicker-holder.range-mode:not(.simple-range-mode)>li+li{margin:0 3rem 0 0}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder.range-mode .date-box{display:grid;grid-template-rows:auto 1fr auto}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder.range-mode.simple-range-mode{grid-template-areas:\"date-box-1 date-box-2\" \"date-actions date-actions\";grid-template-columns:auto auto;grid-template-rows:auto auto}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder.range-mode.simple-range-mode .date-box-2{margin:0 0 0 3rem}html[dir=rtl] .datepicker-holder.range-mode.simple-range-mode .date-box-2{margin:0 3rem 0 0}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder.range-mode.simple-range-mode .date-actions{margin:.5rem 0 0}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder .date-box-1{grid-area:date-box-1}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder .date-box-2{grid-area:date-box-2}[data-gene-ui-version=\"2.11.0\"] .datepicker-holder .date-actions{grid-area:date-actions}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul{display:flex;margin:0 0 .5rem}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul+ul{margin:2px 0 0}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li{align-items:center;border:1px solid #0000;border-radius:100%;color:rgba(var(--background-sc-rgb),.8);cursor:pointer;display:flex;height:3.6rem;justify-content:center;position:relative;text-align:center;transition:color .3s,border-color .3s,background .3s;width:3.6rem}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li+li{margin:0 0 0 2px}html[dir=rtl] .calendar-days>ul>li+li{margin:0 2px 0 0}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li>span{display:block;z-index:0}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li>span:before{bottom:-1px;content:\"\";display:block;left:-2px;pointer-events:none;position:absolute;right:-2px;top:-1px;transition:background .3s;z-index:-1}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li.heading{color:rgba(var(--background-sc-rgb),32);font-weight:700;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li.heading>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li.disabled{color:rgba(var(--background-sc-rgb),.3);font-weight:600;pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li.current{border-color:var(--hero);color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li.will-be-current{background:rgba(var(--hero-rgb),.15)}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li:hover{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li.selected{background:var(--hero)!important;color:var(--hero-sc)!important}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li.selected:hover{background:var(--hero-hover)!important}[data-gene-ui-version=\"2.11.0\"] .range-mode .calendar-days>ul>li:hover{background:rgba(var(--hero-rgb),.15)}html:not([dir=rtl]) .calendar-days>ul>li.range-start>span:before,html:not([dir=rtl]) .calendar-days>ul>li:first-child>span:before{border-top-left-radius:3.8rem}html[dir=rtl] .calendar-days>ul>li.range-start>span:before,html[dir=rtl] .calendar-days>ul>li:first-child>span:before{border-top-right-radius:3.8rem}html:not([dir=rtl]) .calendar-days>ul>li.range-start>span:before,html:not([dir=rtl]) .calendar-days>ul>li:first-child>span:before{border-bottom-left-radius:3.8rem}html[dir=rtl] .calendar-days>ul>li.range-start>span:before,html[dir=rtl] .calendar-days>ul>li:first-child>span:before{border-bottom-right-radius:3.8rem}html:not([dir=rtl]) .calendar-days>ul>li.range-end>span:before,html:not([dir=rtl]) .calendar-days>ul>li:last-child>span:before{border-top-right-radius:3.8rem}html[dir=rtl] .calendar-days>ul>li.range-end>span:before,html[dir=rtl] .calendar-days>ul>li:last-child>span:before{border-top-left-radius:3.8rem}html:not([dir=rtl]) .calendar-days>ul>li.range-end>span:before,html:not([dir=rtl]) .calendar-days>ul>li:last-child>span:before{border-bottom-right-radius:3.8rem}html[dir=rtl] .calendar-days>ul>li.range-end>span:before,html[dir=rtl] .calendar-days>ul>li:last-child>span:before{border-bottom-left-radius:3.8rem}[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul.hover-row:hover>li>span:before,[data-gene-ui-version=\"2.11.0\"] .calendar-days>ul>li.ranged>span:before{background:rgba(var(--hero-rgb),.15)}[data-gene-ui-version=\"2.11.0\"] .date-actions ul{display:flex;flex-direction:column}[data-gene-ui-version=\"2.11.0\"] .date-actions.horizontal li:only-child{border-top:1px solid rgba(var(--background-sc-rgb),.1);display:flex;justify-content:center;margin:.5rem 0 0;padding:.8rem 0}[data-gene-ui-version=\"2.11.0\"] .date-actions.horizontal li:only-child .btn{font-weight:700}[data-gene-ui-version=\"2.11.0\"] .date-actions.vertical .btn:not(.a-outline){margin:0 0 1.2rem}[data-gene-ui-version=\"2.11.0\"] .date-actions.vertical .btn.a-outline{margin:.8rem 0 0}[data-gene-ui-version=\"2.11.0\"] .simple-range-mode .date-actions ul{flex-direction:row}[data-gene-ui-version=\"2.11.0\"] .simple-range-mode .date-actions ul li{flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .simple-range-mode .date-actions ul li:first-child{flex:auto}[data-gene-ui-version=\"2.11.0\"] .date-heading{align-items:center;display:flex;font:700 1.6rem var(--font-family);margin:0 0 1.8rem;text-align:center}[data-gene-ui-version=\"2.11.0\"] .date-heading>li{flex-shrink:0}[data-gene-ui-version=\"2.11.0\"] .date-heading>li:not(.title){align-items:center;display:flex;flex:auto;justify-content:flex-start;width:50%}[data-gene-ui-version=\"2.11.0\"] .date-heading>li:not(.title)>*+*{margin:0 0 0 .4rem}html[dir=rtl] .date-heading>li:not(.title)>*+*{margin:0 .4rem 0 0}[data-gene-ui-version=\"2.11.0\"] .date-heading>li:not(.title):last-child{justify-content:flex-end}[data-gene-ui-version=\"2.11.0\"] .date-heading>li.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.11.0\"] .date-heading .clickable{cursor:pointer;transition:color .3s}[data-gene-ui-version=\"2.11.0\"] .date-heading .clickable.active,[data-gene-ui-version=\"2.11.0\"] .date-heading .clickable:hover{color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .date-heading .icon{align-items:center;border-radius:100%;cursor:pointer;display:flex;height:3rem;justify-content:center;transition:background .3s;width:3rem}[data-gene-ui-version=\"2.11.0\"] .date-heading .icon:hover{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.11.0\"] .month-years-select{min-height:22.9rem;width:26.4rem}[data-gene-ui-version=\"2.11.0\"] .month-years-select li{display:flex}[data-gene-ui-version=\"2.11.0\"] .month-years-select li+li{margin:3.6rem 0 0}[data-gene-ui-version=\"2.11.0\"] .month-years-select button{border-radius:3rem;cursor:pointer;display:block;font:600 1.6rem var(--font-family);height:3rem;overflow:hidden;text-overflow:ellipsis;transition:color .3s,background .3s;-webkit-user-select:none;user-select:none;white-space:nowrap;width:calc(33.33333% - 1.46667rem)}[data-gene-ui-version=\"2.11.0\"] .month-years-select button:nth-child(2){margin:0 2.2rem}[data-gene-ui-version=\"2.11.0\"] .month-years-select button:hover{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.11.0\"] .month-years-select button.disabled{color:rgba(var(--background-sc-rgb),.3);pointer-events:none}[data-gene-ui-version=\"2.11.0\"] .month-years-select button.selected{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.11.0\"] .month-years-select .disable{color:rgba(var(--background-sc-rgb),.3);pointer-events:none;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.11.0\"] .month-years-select-button{max-height:3rem;min-height:3rem}[data-gene-ui-version=\"2.11.0\"] .month-years-select-button.selected:hover{background:var(--hero)!important}[data-gene-ui-version=\"2.11.0\"] .month-years-select-button:active{background:none}[data-gene-ui-version=\"2.11.0\"] .time-inputs-str{align-items:center;display:flex;font:600 1.6rem var(--font-family);justify-content:center;margin:1.2rem 0 0}[data-gene-ui-version=\"2.11.0\"] .time-inputs-str li{align-items:center;display:flex;flex-direction:column;justify-content:center}[data-gene-ui-version=\"2.11.0\"] .time-inputs-str li>:first-child{order:0}[data-gene-ui-version=\"2.11.0\"] .time-inputs-str li>:nth-child(2){order:2}[data-gene-ui-version=\"2.11.0\"] .time-inputs-str li>:nth-child(3){order:1}[data-gene-ui-version=\"2.11.0\"] .time-inputs-str li>*+*{margin:.2rem 0 0}[data-gene-ui-version=\"2.11.0\"] .time-inputs-str li+li{margin:0 0 0 1rem}html[dir=rtl] .time-inputs-str li+li{margin:0 1rem 0 0}[data-gene-ui-version=\"2.11.0\"] .time-input-el{align-items:center;background:rgba(var(--background-sc-rgb),.03);border:1px solid rgba(var(--hero-rgb),0);border-radius:.3rem;cursor:default;display:flex;height:3.6rem;justify-content:center;text-align:center;transition:border-color .4s,background .4s;width:5.8rem}[data-gene-ui-version=\"2.11.0\"] button:active~.time-input-el{background:#0000;border-color:var(--hero)}[data-gene-ui-version=\"2.11.0\"] .week-picker:hover{background:rgba(var(--background-sc-rgb),.03)}";
+styleInject(css_248z);
+
+const configs = {
+  weekdays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+  months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  weekdaysSlice: 1,
+  monthsSlice: 3,
+  weekStart: 1,
+  buttons: {
+    today: 'Today',
+    apply: 'Apply',
+    thisMonth: 'This Month',
+    thisWeek: 'This Week'
+  },
+  actions: {
+    today: 'Today',
+    yesterday: 'Yesterday',
+    last7Days: 'Last 7 days',
+    last30Days: 'Last 30 days',
+    thisMonth: 'This Month',
+    custom: 'Custom'
+  }
+};
+
+const Context = /*#__PURE__*/createContext([configs]);
+function Provider(_ref) {
+  let {
+    children
+  } = _ref;
+  const [state, setState] = useState(configs);
+  const setter = useCallback(next => {
+    setState({
+      ...configs,
+      ...next
+    });
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Context.Provider, {
+    value: [state, setter]
+  }, children);
+}
+const useDatePickerContext = () => {
+  const [configs, setConfigs] = useContext(Context);
+  return [configs, setConfigs];
+};
+
+function Day(_ref) {
+  let {
+    value,
+    disabled,
+    isCurrent,
+    isSelected,
+    isRanged,
+    onClick,
+    onHover,
+    rangeStart,
+    isHoveredBefore,
+    startDate,
+    endDate,
+    isHovered,
+    rangeEnd,
+    hide,
+    max,
+    min
+  } = _ref;
+  const handleClick = useCallback(() => {
+    const checkedValue = disabled ? value.isBefore(min) ? min : max : value;
+    onClick && onClick(checkedValue);
+  }, [value, onClick, max, min, disabled]);
+  const handleMouseEnter = useCallback(() => onHover && onHover(value), [value, onHover]);
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: classnames({
+      disabled,
+      selected: !disabled && isSelected,
+      current: isCurrent,
+      ranged: !disabled && isRanged,
+      'range-start': endDate && value.isSame(startDate) || isHoveredBefore && isHovered || rangeStart && !isHoveredBefore,
+      'range-end': endDate && value.isSame(startDate) ? false : rangeStart && isHoveredBefore || !isHoveredBefore && isHovered || rangeEnd
+    }),
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter
+  }, !hide && /*#__PURE__*/React__default.createElement("span", null, value.date()));
+}
+Day.propTypes = {
+  value: propTypesExports.instanceOf(dayjs).isRequired,
+  startDate: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  endDate: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  max: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  min: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  isHovered: propTypesExports.bool,
+  disabled: propTypesExports.bool,
+  isCurrent: propTypesExports.bool,
+  isSelected: propTypesExports.bool,
+  isRanged: propTypesExports.bool,
+  isHoveredBefore: propTypesExports.bool,
+  onClick: propTypesExports.func
+};
+Day.defaultProps = {
+  disabled: false,
+  isCurrent: false,
+  isSelected: false,
+  isRanged: false
+};
+
+function getRange(rangeStart, rangeEnd, selected) {
+  return !rangeStart || rangeEnd ? [selected, null] : selected.isBefore(rangeStart) ? [selected, rangeStart] : [rangeStart, selected];
+}
+
+const addTime = (date, _ref) => {
+  let [hour, minute, second] = _ref;
+  return date.hour(hour).minute(minute).second(second);
+};
+
+const DAYS_TO_SHOW = 6 * 7;
+function getCalendarDays(startOfMonth) {
+  const firstWeekDay = startOfMonth.day();
+  // Because of using Monday as week start
+  const startDiff = firstWeekDay === 0 ? 6 : firstWeekDay - 1;
+  const first = startOfMonth.subtract(startDiff, 'days');
+  const days = Array(DAYS_TO_SHOW).fill().map((_, i) => first.add(i, 'd'));
+  return days;
+}
+
+function getCalendarMonths(startOfYear) {
+  const end = startOfYear.endOf('y');
+  let pointer = startOfYear;
+  const months = [];
+  while (pointer.isBefore(end)) {
+    months.push(pointer);
+    pointer = pointer.add(1, 'M');
+  }
+  return months;
+}
+
+const getCalendarYears = startYear => Array(12).fill(startYear - 1).map((item, i) => item + i);
+const getStartOfDecade = year => Math.floor(year / 10) * 10;
+const nextDecade = date => date.set('y', getStartOfDecade(date.year()) + 10).startOf('y');
+const prevDecade = date => date.set('y', getStartOfDecade(date.year()) - 10).startOf('y');
+
+const nextMonthAvailable = (date, max) => !max || date.add(1, 'M').isBefore(max, 'M');
+const prevMonthAvailable = (date, min) => !min || date.subtract(1, 'M').isAfter(min, 'M');
+
+dayjs.extend(isBetween);
+dayjs.Ls.en.weekStart = 1;
+function Days(_ref) {
+  let {
+    preview,
+    selected,
+    rangePicker,
+    weekPicker,
+    rangeStart,
+    rangeEnd,
+    onRangeChange,
+    onChange,
+    onPreviewChange,
+    hovered,
+    onHover,
+    maxPreview,
+    minPreview,
+    max,
+    min,
+    frozenDateRange,
+    markedDate
+  } = _ref;
+  const [contextConfigs] = useDatePickerContext();
+  const days = useMemo(() => chunk(getCalendarDays(preview.startOf('M')), 7), [preview]);
+  const handleRangeClick = useCallback(day => {
+    const range = getRange(rangeStart, rangeEnd, day);
+    onRangeChange && onRangeChange(range);
+  }, [rangeStart, rangeEnd, onRangeChange]);
+  const handleWeekClick = useCallback(day => {
+    const start = day.startOf('w');
+    const end = day.endOf('w');
+    onRangeChange && onRangeChange([start, end]);
+  }, [onRangeChange]);
+  const handleDiffMonthClick = useCallback(day => {
+    if (day.isBefore(preview) && !prevMonthAvailable(preview, minPreview)) return;
+    if (day.isAfter(preview) && !nextMonthAvailable(preview, maxPreview)) return;
+    onPreviewChange && onPreviewChange(day);
+  }, [preview, minPreview, maxPreview, onPreviewChange]);
+  const handleClick = useCallback(day => {
+    if (!day.isSame(preview, 'M')) {
+      handleDiffMonthClick(day);
+      // return; // TODO ::: check if this correct
+    }
+
+    rangePicker && handleRangeClick(day);
+    weekPicker && handleWeekClick(day);
+    !rangePicker && !weekPicker && onChange && onChange(day);
+  }, [handleRangeClick, handleWeekClick, handleDiffMonthClick, preview, rangePicker, weekPicker, onChange]);
+  const checkDayFrozenState = useCallback(item => {
+    const format = 'YYYY/MM/DD';
+    const formattedItem = dayjs(item.format(format));
+    return Array.isArray(frozenDateRange) && frozenDateRange.length && !!frozenDateRange.find(_ref2 => {
+      let {
+        from,
+        to
+      } = _ref2;
+      return from && to && formattedItem.isBetween(dayjs(from).format(format), dayjs(to).format(format), 'day', '[]');
+    });
+  }, [frozenDateRange]);
+  const checkDayDisabledState = useCallback(item => !item.isSame(preview, 'M') || min && item.endOf('day').isBefore(min) || max && item.isAfter(max), [min, max, preview]);
+  const checkDayHideState = useCallback(item => !item.isSame(preview, 'M'), [preview]);
+  const isHovered = useCallback(item => hovered && hovered.isSame(item) && !dayjs(hovered).isBetween(rangeStart, rangeEnd), [hovered, rangeStart, rangeEnd]);
+  const isSelected = useCallback(item => rangePicker || weekPicker ? item.isSame(rangeStart, 'd') || item.isSame(rangeEnd, 'd') : selected && selected.isSame(item, 'd') || false, [rangePicker, weekPicker, rangeStart, rangeEnd, selected]);
+  const isRanged = useCallback(item => Boolean((rangePicker || weekPicker) && rangeStart && dayjs(item).isBetween(rangeStart, rangeEnd || hovered, 'd', '[]')), [rangePicker, weekPicker, rangeStart, rangeEnd, hovered]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "calendar-days"
+  }, /*#__PURE__*/React__default.createElement("ul", null, contextConfigs.weekdays && contextConfigs.weekdays.map((item, i) => /*#__PURE__*/React__default.createElement("li", {
+    key: i,
+    className: "heading"
+  }, /*#__PURE__*/React__default.createElement("span", null, item.slice(0, contextConfigs.weekdaysSlice))))), days.map(items => /*#__PURE__*/React__default.createElement("ul", {
+    key: guid(),
+    className: classnames({
+      'hover-row': weekPicker
+    })
+  }, items.map(item => /*#__PURE__*/React__default.createElement(Day, {
+    isCurrent: !checkDayDisabledState(item) && item.isSame(markedDate || dayjs(), 'd'),
+    rangeStart: rangePicker && rangeStart && item.isSame(rangeStart, 'd'),
+    disabled: checkDayDisabledState(item) || checkDayFrozenState(item),
+    rangeEnd: rangePicker && rangeEnd && item.isSame(rangeEnd, 'd'),
+    isHoveredBefore: !!(rangeStart && rangeStart.isAfter(hovered)),
+    hide: checkDayHideState(item),
+    isSelected: isSelected(item),
+    isHovered: isHovered(item),
+    isRanged: isRanged(item),
+    startDate: rangeStart,
+    onClick: handleClick,
+    endDate: rangeEnd,
+    onHover: onHover,
+    value: item,
+    key: guid(),
+    max: max,
+    min: min
+  })))));
+}
+Days.defaultProps = {
+  preview: dayjs().startOf('M'),
+  rangeStart: null,
+  rangeEnd: null
+};
+
+function Months(_ref) {
+  let {
+    year,
+    selected,
+    onChange,
+    max,
+    min,
+    setIsThisMonthAllowed
+  } = _ref;
+  const [contextConfigs] = useDatePickerContext();
+  const months = useMemo(() => chunk(getCalendarMonths(year.startOf('y')), 3), [year]);
+  const monthName = useCallback(date => {
+    const month = contextConfigs.months[date.get('month')];
+    return month ? month.slice(0, contextConfigs.monthsSlice) : date.format('MMM');
+  }, [contextConfigs]);
+  const isMonthMaxOrMinChecker = useCallback(month => {
+    if (month && (max || min)) {
+      return max && dayjs(month).isAfter(dayjs(max), 'month') || min && dayjs(month).isBefore(dayjs(min), 'month');
+    }
+  }, [max, min]);
+  useEffect(() => {
+    if (min && !max) {
+      setIsThisMonthAllowed(dayjs(min).isSameOrBefore(dayjs(new Date()), 'month'));
+    } else if (!min && max) {
+      setIsThisMonthAllowed(dayjs(max).isSameOrAfter(dayjs(new Date()), 'month'));
+    } else if (min && max) {
+      setIsThisMonthAllowed(dayjs(min).isSameOrBefore(dayjs(new Date()), 'month') && dayjs(max).isSameOrAfter(dayjs(new Date()), 'month'));
+    }
+  }, [max, min]);
+  return /*#__PURE__*/React__default.createElement("ul", {
+    className: "month-years-select"
+  }, months.map(row => /*#__PURE__*/React__default.createElement("li", {
+    key: guid()
+  }, row.map(month => /*#__PURE__*/React__default.createElement(Button, {
+    key: guid(),
+    className: classnames('month-years-select-button', {
+      selected: selected && selected.isSame(month, 'M'),
+      disable: isMonthMaxOrMinChecker(month)
+    }),
+    onClick: () => onChange && onChange(month),
+    color: isMonthMaxOrMinChecker(month) ? 'default' : 'default',
+    flexibility: "content-size",
+    appearance: "minimal"
+  }, monthName(month))))));
+}
+Months.defaultProps = {
+  year: dayjs().startOf('y')
+};
+
+function Years(_ref) {
+  let {
+    previewYear,
+    selected,
+    onChange,
+    onPreviewChange
+  } = _ref;
+  const startOfDecade = useMemo(() => getStartOfDecade(previewYear), [previewYear]);
+  const years = useMemo(() => chunk(getCalendarYears(startOfDecade), 3), [startOfDecade]);
+  const isFromDecade = useCallback(year => year > startOfDecade - 1 && year < startOfDecade + 10, [startOfDecade]);
+  const handleClick = useCallback(e => {
+    const {
+      year
+    } = e.target.dataset;
+    isFromDecade(year) ? onChange && onChange(year) : onPreviewChange && onPreviewChange(year);
+  }, [isFromDecade, onPreviewChange, onChange]);
+  return /*#__PURE__*/React__default.createElement("ul", {
+    className: "month-years-select"
+  }, years.map(row => /*#__PURE__*/React__default.createElement("li", {
+    key: row[0]
+  }, row.map(year =>
+  /*#__PURE__*/
+  // TODO ::: replace with Button atom
+  React__default.createElement("button", {
+    key: year,
+    "data-year": year,
+    className: classnames({
+      selected: selected && selected === year,
+      disabled: !isFromDecade(year)
+    }),
+    onClick: handleClick
+  }, year)))));
+}
+Years.defaultProps = {
+  date: dayjs().year()
+};
+
+function Body(_ref) {
+  let {
+    view,
+    onViewChange,
+    preview,
+    onPreviewChange,
+    selected,
+    onChange,
+    weekPicker,
+    rangeStart,
+    rangeEnd,
+    onRangeChange,
+    monthPicker,
+    rangePicker,
+    hovered,
+    onHover,
+    maxPreview,
+    minPreview,
+    max,
+    min,
+    markedDate,
+    setIsThisMonthAllowed,
+    frozenDateRange
+  } = _ref;
+  const isRange = weekPicker || monthPicker || rangePicker;
+  const handleMonthChange = useCallback(month => {
+    if (!monthPicker) {
+      onPreviewChange(month);
+      onViewChange('days');
+    } else {
+      const start = month.startOf('M');
+      const end = month.endOf('M');
+      onPreviewChange(month);
+      onRangeChange([start, end]);
+    }
+  }, [monthPicker, onPreviewChange, onViewChange, onRangeChange]);
+  const handleYearChange = useCallback(year => {
+    onPreviewChange(preview.set('y', year));
+    onViewChange('months');
+  }, [preview, onPreviewChange, onViewChange]);
+  const handleFooterPreviewChange = useCallback(year => onPreviewChange(preview.set('y', year)), [preview, onPreviewChange]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, view === 'days' && /*#__PURE__*/React__default.createElement(Days, {
+    weekPicker: weekPicker,
+    preview: preview,
+    selected: selected,
+    onChange: onChange,
+    onPreviewChange: onPreviewChange,
+    rangeStart: rangeStart,
+    rangeEnd: rangeEnd,
+    onRangeChange: onRangeChange,
+    rangePicker: rangePicker,
+    hovered: hovered,
+    onHover: onHover,
+    maxPreview: maxPreview,
+    minPreview: minPreview,
+    max: max,
+    min: min,
+    markedDate: markedDate,
+    frozenDateRange: frozenDateRange
+  }), view === 'months' && /*#__PURE__*/React__default.createElement(Months, {
+    selected: isRange ? rangeStart : selected,
+    onChange: handleMonthChange,
+    year: preview.startOf('y'),
+    max: max,
+    min: min,
+    setIsThisMonthAllowed: setIsThisMonthAllowed
+  }), view === 'years' && /*#__PURE__*/React__default.createElement(Years, {
+    selected: isRange ? rangeStart && rangeStart.year() : selected && selected.year(),
+    onChange: handleYearChange,
+    previewYear: preview.year(),
+    onPreviewChange: handleFooterPreviewChange
+  }));
+}
+
+function Header(_ref) {
+  let {
+    view,
+    months,
+    onViewChange,
+    preview,
+    onPreviewChange,
+    monthPicker,
+    rangePicker,
+    maxPreview,
+    minPreview
+  } = _ref;
+  const startOfDecade = useMemo(() => getStartOfDecade(preview.year()), [preview]);
+  const years = useMemo(() => "".concat(startOfDecade, " - ").concat(startOfDecade + 9), [startOfDecade]);
+  const month = useMemo(() => preview.get('month'), [preview]);
+  const prevYearVisible = !minPreview || preview.subtract(1, 'y').isAfter(minPreview, 'M');
+  const nextYearVisible = !maxPreview || preview.add(1, 'y').isBefore(maxPreview, 'M');
+  const prevMonthVisible = view === 'days' && prevMonthAvailable(preview, minPreview);
+  const nextMonthVisible = view === 'days' && nextMonthAvailable(preview, maxPreview);
+  const headerMonthsVisible = view === 'days';
+  const headerYearVisible = view !== 'years';
+  const headerYearsVisible = view === 'years';
+  const backButtonVisible = monthPicker ? view === 'years' : view !== 'days';
+  const handlePrevMonth = () => onPreviewChange(preview.subtract(1, 'M'));
+  const handleHeaderMonth = () => !rangePicker && onViewChange('months');
+  const handleHeaderYear = () => !rangePicker && onViewChange('years');
+  const handleNextMonth = () => onPreviewChange(preview.add(1, 'M'));
+  const handleBack = () => onViewChange(view === 'years' ? 'months' : 'days');
+  const handlePrevYear = useCallback(() => view !== 'years' ? onPreviewChange(preview.subtract(1, 'y')) : onPreviewChange(prevDecade(preview)), [view, onPreviewChange, preview]);
+  const handleNextYear = useCallback(() => view !== 'years' ? onPreviewChange(preview.add(1, 'y')) : onPreviewChange(nextDecade(preview)), [view, onPreviewChange, preview]);
+  return /*#__PURE__*/React__default.createElement("ul", {
+    className: "date-heading"
+  }, /*#__PURE__*/React__default.createElement("li", null, backButtonVisible && /*#__PURE__*/React__default.createElement(Icon, {
+    onClick: handleBack,
+    type: "bc-icon-arrow-back"
+  }), prevYearVisible && /*#__PURE__*/React__default.createElement(Icon, {
+    onClick: handlePrevYear,
+    type: "bc-icon-left-outline"
+  }), prevMonthVisible && /*#__PURE__*/React__default.createElement(Icon, {
+    onClick: handlePrevMonth,
+    type: "bc-icon-arrow-left-nav"
+  })), /*#__PURE__*/React__default.createElement("li", {
+    className: "title"
+  }, headerMonthsVisible && /*#__PURE__*/React__default.createElement("span", {
+    onClick: handleHeaderMonth,
+    className: classnames({
+      clickable: !rangePicker
+    })
+  }, months && months[month] || preview.format('MMMM'), "\xA0 \xA0"), headerYearVisible && /*#__PURE__*/React__default.createElement("span", {
+    onClick: handleHeaderYear,
+    className: classnames({
+      clickable: !rangePicker
+    })
+  }, preview.format('YYYY')), headerYearsVisible && /*#__PURE__*/React__default.createElement("span", null, years)), /*#__PURE__*/React__default.createElement("li", null, nextMonthVisible && /*#__PURE__*/React__default.createElement(Icon, {
+    onClick: handleNextMonth,
+    type: "bc-icon-arrow-right-nav"
+  }), nextYearVisible && /*#__PURE__*/React__default.createElement(Icon, {
+    onClick: handleNextYear,
+    type: "bc-icon-right-outline"
+  })));
+}
+
+function Footer(_ref) {
+  let {
+    onPreviewChange,
+    onSelect,
+    weekPicker,
+    monthPicker,
+    onRangeChange,
+    rangePicker,
+    todayText,
+    thisWeekText,
+    thisMonthText,
+    customOption,
+    isThisMonthAllowed
+  } = _ref;
+  const handleClick = useCallback(() => {
+    const today = customOption ? dayjs.isDayjs(customOption === null || customOption === void 0 ? void 0 : customOption.date) ? customOption === null || customOption === void 0 ? void 0 : customOption.date : dayjs(customOption === null || customOption === void 0 ? void 0 : customOption.date) : dayjs().startOf('d');
+    onPreviewChange && onPreviewChange(today);
+    if (!weekPicker && !monthPicker) {
+      onSelect && onSelect(today);
+    } else {
+      const unit = weekPicker ? 'w' : 'M';
+      onRangeChange && onRangeChange([today.startOf(unit), today.endOf(unit)]);
+    }
+  }, [weekPicker, monthPicker, onPreviewChange, onSelect, onRangeChange, customOption]);
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: "date-actions horizontal"
+  }, !rangePicker && /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Button, {
+    color: "default",
+    appearance: "minimal",
+    flexibility: "default",
+    onClick: handleClick,
+    disabled: !isThisMonthAllowed
+  }, customOption ? customOption.label : weekPicker ? thisWeekText : monthPicker ? thisMonthText : todayText))));
+}
+Footer.defaultProps = {
+  todayText: 'Today',
+  thisWeekText: 'This Week',
+  thisMonthText: 'This Month'
+};
+
+const format = value => "".concat(String(value).length === 1 ? '0' : '').concat(value);
+function TimeInput(_ref) {
+  let {
+    value,
+    onChange
+  } = _ref;
+  const handleChange = useCallback((val, unit) => {
+    if (val || val === 0) {
+      onChange && onChange(value.set(unit, value.get(unit) + val));
+    }
+  }, [value, onChange]);
+  return /*#__PURE__*/React__default.createElement("ul", {
+    className: "time-inputs-str"
+  }, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: () => handleChange(1, 'h'),
+    color: "default",
+    appearance: "minimal",
+    icon: "bc-icon-arrow-up"
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: () => handleChange(-1, 'h'),
+    color: "default",
+    appearance: "minimal",
+    icon: "bc-icon-arrow-down"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "time-input-el"
+  }, format(value.get('h')))), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("span", null, ":")), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: () => handleChange(1, 'm'),
+    color: "default",
+    appearance: "minimal",
+    icon: "bc-icon-arrow-up"
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: () => handleChange(-1, 'm'),
+    color: "default",
+    appearance: "minimal",
+    icon: "bc-icon-arrow-down"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "time-input-el"
+  }, format(value.get('m')))), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("span", null, ":")), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Button, {
+    onClick: () => handleChange(1, 's'),
+    color: "default",
+    appearance: "minimal",
+    icon: "bc-icon-arrow-up"
+  }), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: () => handleChange(-1, 's'),
+    color: "default",
+    appearance: "minimal",
+    icon: "bc-icon-arrow-down"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "time-input-el"
+  }, format(value.get('s')))));
+}
+
+const Calendar = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    onChange,
+    defaultValue,
+    weekPicker,
+    monthPicker,
+    className,
+    rangePicker,
+    defaultPreview,
+    rangeStart,
+    rangeEnd,
+    onRangeChange,
+    defaultTimeValues,
+    hovered,
+    onHover,
+    onPreviewChange,
+    maxPreview,
+    minPreview,
+    max,
+    min,
+    withTime,
+    time,
+    onTimeChange,
+    todayText,
+    thisWeekText,
+    thisMonthText,
+    value,
+    markedDate,
+    customOption,
+    frozenDateRange
+  } = props;
+  const [contextConfigs] = useDatePickerContext();
+  const defaultView = monthPicker ? 'months' : 'days';
+  const [view, setView] = useState(defaultView);
+  const [isThisMonthAllowed, setIsThisMonthAllowed] = useState(true);
+  const [previewState, setPreviewState] = useState(() => defaultPreview || dayjs());
+  const [selected, setSelected] = useState(defaultValue);
+  const isControlled = ('preview' in props);
+  const preview = isControlled ? props.preview : previewState;
+  const handleSelect = useCallback(value => {
+    setSelected(value);
+    onChange && onChange(value);
+  }, [onChange]);
+  const handlePreviewChange = useCallback(preview => {
+    !isControlled && setPreviewState(preview);
+    onPreviewChange && onPreviewChange(preview);
+  }, [onPreviewChange, isControlled]);
+  const handleRangeChange = useCallback(_ref => {
+    let [start, end] = _ref;
+    const formattedStart = start ? addTime(start.startOf('d'), defaultTimeValues[0]) : start;
+    const formattedEnd = end ? addTime(end.startOf('d'), defaultTimeValues[1]) : end;
+    onRangeChange([formattedStart, formattedEnd]);
+  }, [withTime, defaultTimeValues, onRangeChange]);
+  useEffect(() => {
+    const date = dayjsWithPlugins(value);
+    if (date.isValid()) {
+      setSelected(date);
+      setPreviewState(date);
+    }
+  }, [value]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("li", {
+    className: classnames('date-box', className),
+    ref: ref
+  }, /*#__PURE__*/React__default.createElement(Header, {
+    rangePicker: rangePicker,
+    view: view,
+    onViewChange: setView,
+    preview: preview,
+    onPreviewChange: handlePreviewChange,
+    monthPicker: monthPicker,
+    maxPreview: maxPreview,
+    minPreview: minPreview,
+    months: contextConfigs.months
+  }), /*#__PURE__*/React__default.createElement(Body, {
+    view: view,
+    rangePicker: rangePicker,
+    onViewChange: setView,
+    preview: preview,
+    onPreviewChange: handlePreviewChange,
+    selected: selected,
+    onChange: handleSelect,
+    weekPicker: weekPicker,
+    monthPicker: monthPicker,
+    rangeStart: rangeStart,
+    rangeEnd: rangeEnd,
+    onRangeChange: handleRangeChange,
+    hovered: hovered,
+    onHover: onHover,
+    maxPreview: maxPreview,
+    minPreview: minPreview,
+    max: max,
+    min: min,
+    markedDate: markedDate,
+    frozenDateRange: frozenDateRange,
+    setIsThisMonthAllowed: setIsThisMonthAllowed
+  }), withTime && time && /*#__PURE__*/React__default.createElement(TimeInput, {
+    value: time,
+    onChange: onTimeChange
+  })), /*#__PURE__*/React__default.createElement(Footer, {
+    onSelect: handleSelect,
+    onPreviewChange: handlePreviewChange,
+    weekPicker: weekPicker,
+    monthPicker: monthPicker,
+    onRangeChange: handleRangeChange,
+    rangePicker: rangePicker,
+    todayText: todayText || contextConfigs.buttons.today,
+    thisWeekText: thisWeekText || contextConfigs.buttons.thisWeek,
+    thisMonthText: thisMonthText || contextConfigs.buttons.thisMonth,
+    customOption: customOption,
+    isThisMonthAllowed: isThisMonthAllowed
+  }));
+});
+
+const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    defaultValue,
+    onChange,
+    className,
+    todayText,
+    defaultPreview,
+    value,
+    min,
+    max,
+    format,
+    withTime,
+    onTimeChange,
+    markedDate,
+    customOption,
+    frozenDateRange,
+    ...restProps
+  } = _ref;
+  const date = useMemo(() => value && dayjs(value), [value]);
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
+    ref: ref,
+    className: classnames(className, 'datepicker-holder')
+  }, restProps), /*#__PURE__*/React__default.createElement(Calendar, {
+    max: max,
+    min: min,
+    frozenDateRange: frozenDateRange,
+    defaultValue: defaultValue && dayjs(defaultValue),
+    defaultPreview: defaultPreview && dayjs(defaultPreview),
+    onChange: date => onChange(date.toDate()),
+    time: date,
+    value: date,
+    format: format,
+    withTime: withTime,
+    todayText: todayText,
+    onTimeChange: onTimeChange,
+    markedDate: markedDate,
+    customOption: customOption
+  }));
+});
+DatePicker.propTypes = {
+  /**
+   * Initial datepicker value.
+   */
+  defaultValue: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Initial value for  datepicker preview
+   */
+  defaultPreview: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Max specifies the maximum value allowed for datepicker
+   */
+  max: propTypesExports.instanceOf(dayjs),
+  /**
+   * Min specifies the minimum value allowed for datepicker
+   */
+  min: propTypesExports.instanceOf(dayjs),
+  /**
+   * Fires event when user changes date[icker value
+   * (date: Date) => void
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Additional classname which will apply to datepicker holder ul element
+   */
+  className: propTypesExports.string,
+  /**
+   * Custom text for today button inside footer.
+   * Default value is `Today`
+   */
+  todayText: propTypesExports.string,
+  /**
+   * MarkedDate specifies the default mark date
+   */
+  markedDate: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * CustomOption is an object that is used to add a custom button to set a custom date.
+   */
+  customOption: propTypesExports.shape({
+    /**
+     * Label of custom button
+     */
+    label: propTypesExports.string,
+    /**
+     * Date of custom button
+     */
+    date: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number])
+  })
+};
+
+function WeekPicker(_ref) {
+  let {
+    onChange,
+    rangeStartDefault,
+    rangeEndDefault,
+    className,
+    thisWeekText,
+    defaultTimeValues,
+    ...restProps
+  } = _ref;
+  const [rangeStart, setRangeStart] = useState(rangeStartDefault && dayjs(rangeStartDefault));
+  const [rangeEnd, setRangeEnd] = useState(rangeEndDefault && dayjs(rangeEndDefault));
+  const handleRangeChange = useCallback(_ref2 => {
+    let [start, end] = _ref2;
+    setRangeStart(start);
+    setRangeEnd(end);
+    onChange && onChange([start.toDate(), end.toDate()]);
+  }, [onChange]);
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
+    className: classnames(className, 'datepicker-holder')
+  }, restProps), /*#__PURE__*/React__default.createElement(Calendar, {
+    weekPicker: true,
+    rangeStart: rangeStart,
+    rangeEnd: rangeEnd,
+    onRangeChange: handleRangeChange,
+    thisWeekText: thisWeekText,
+    defaultTimeValues: defaultTimeValues
+  }));
+}
+WeekPicker.propTypes = {
+  /**
+   * Fires event when user changes datepicker value
+   * ([startDate: Date, endDate: Date]) => void
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Setting default time value when date range changed
+   */
+  defaultTimeValues: propTypesExports.arrayOf(propTypesExports.arrayOf(propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]))),
+  /**
+   * Initial value for start date
+   */
+  rangeStartDefault: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Initial value for end date
+   */
+  rangeEndDefault: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Additional classname which will apply to datepicker holder ul element
+   */
+  className: propTypesExports.string,
+  /**
+   * Custom text for this week button inside footer.
+   * Default value is `This Week`
+   */
+  thisWeekText: propTypesExports.string
+};
+WeekPicker.defaultProps = {
+  defaultTimeValues: [['00', '00', '00'], ['23', '59', '59']],
+  onChange: noop
+};
+
+function MonthPicker(_ref) {
+  let {
+    onChange,
+    rangeStartDefault,
+    rangeEndDefault,
+    className,
+    thisMonthText,
+    defaultTimeValues,
+    max,
+    min,
+    ...restProps
+  } = _ref;
+  const [rangeStart, setRangeStart] = useState(rangeStartDefault && dayjs(rangeStartDefault));
+  const [rangeEnd, setRangeEnd] = useState(rangeEndDefault && dayjs(rangeEndDefault));
+  const handleRangeChange = useCallback(_ref2 => {
+    let [start, end] = _ref2;
+    setRangeStart(start);
+    setRangeEnd(end);
+    onChange && onChange([start.toDate(), end.toDate()]);
+  }, [onChange]);
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
+    className: classnames(className, 'datepicker-holder')
+  }, restProps), /*#__PURE__*/React__default.createElement(Calendar, {
+    max: max,
+    min: min,
+    monthPicker: true,
+    rangeStart: rangeStart,
+    rangeEnd: rangeEnd,
+    onRangeChange: handleRangeChange,
+    thisMonthText: thisMonthText,
+    defaultTimeValues: defaultTimeValues
+  }));
+}
+MonthPicker.propTypes = {
+  /**
+   * Fires event when user changes datepicker value
+   * ([startDate: date endDate: date]) => void
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Setting default time value when date range changed
+   */
+  defaultTimeValues: propTypesExports.arrayOf(propTypesExports.arrayOf(propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]))),
+  /**
+   * Initial value for start date
+   */
+  rangeStartDefault: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Initial value for end date
+   */
+  rangeEndDefault: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Max specifies the maximum value allowed for monthPicker
+   */
+  max: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Min specifies the minimum value allowed for monthPicker
+   */
+  min: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Additional classname which will apply to datepicker holder ul element
+   */
+  className: propTypesExports.string,
+  /**
+   * Custom text for this month button inside footer.
+   * Default value is `This Month`
+   */
+  thisMonthText: propTypesExports.string
+};
+MonthPicker.defaultProps = {
+  defaultTimeValues: [['00', '00', '00'], ['23', '59', '59']],
+  onChange: noop
+};
+
+const getDefaultOptions = function (_ref) {
+  let [startTime, endTime] = _ref;
+  let actionsTextes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return [{
+    name: actionsTextes.today,
+    start: addTime(dayjs().startOf('d'), startTime),
+    end: addTime(dayjs().add(1, 'd').startOf('d'), endTime)
+  }, {
+    name: actionsTextes.yesterday,
+    start: addTime(dayjs().subtract(1, 'd').startOf('d'), startTime),
+    end: addTime(dayjs().startOf('d'), endTime)
+  }, {
+    name: actionsTextes.last7Days,
+    start: addTime(dayjs().subtract(6, 'd').startOf('d'), startTime),
+    end: addTime(dayjs().endOf('d'), endTime)
+  }, {
+    name: actionsTextes.last30Days,
+    start: addTime(dayjs().subtract(29, 'd').startOf('d'), startTime),
+    end: addTime(dayjs().startOf('d'), endTime)
+  }, {
+    name: actionsTextes.thisMonth,
+    start: addTime(dayjs().startOf('M').startOf('d'), startTime),
+    end: addTime(dayjs().endOf('M').startOf('d'), endTime)
+  }];
+};
+const getOptionIndex = (rangeStart, rangeEnd, options) => options.findIndex(_ref2 => {
+  let {
+    start,
+    end
+  } = _ref2;
+  return rangeStart && rangeEnd && start.isSame(rangeStart, 'd') && end.isSame(rangeEnd, 'd');
+});
+
+function RangeOption(_ref) {
+  let {
+    start,
+    end,
+    selected,
+    children,
+    onClick,
+    ...restProps
+  } = _ref;
+  const handleClick = useCallback(() => onClick && onClick([start, end]), [onClick, start, end]);
+  return /*#__PURE__*/React__default.createElement(Button, _extends({
+    appearance: selected ? 'default' : 'minimal',
+    color: "default",
+    flexibility: "full-width",
+    onClick: handleClick
+  }, restProps), children);
+}
+function RangeOptions(_ref2) {
+  let {
+    rangeStart,
+    rangeEnd,
+    onClick,
+    customOptions,
+    defaultTimeValues,
+    customText
+  } = _ref2;
+  const [contextConfigs] = useDatePickerContext();
+  const options = useMemo(() => customOptions ? customOptions.map(_ref3 => {
+    let {
+      start,
+      end,
+      ...props
+    } = _ref3;
+    return {
+      ...props,
+      start: dayjs.isDayjs(start) ? start : dayjs(start),
+      end: dayjs.isDayjs(end) ? end : dayjs(end)
+    };
+  }) : getDefaultOptions(defaultTimeValues, contextConfigs.actions), [customOptions, contextConfigs]);
+  const selectedIndex = useMemo(() => getOptionIndex(rangeStart, rangeEnd, options), [rangeStart, rangeEnd, options]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, options.map((_ref4, i) => {
+    let {
+      start,
+      end,
+      name
+    } = _ref4;
+    return /*#__PURE__*/React__default.createElement(RangeOption, {
+      key: i,
+      start: start,
+      end: end,
+      selected: i === selectedIndex,
+      onClick: onClick
+    }, name);
+  }), /*#__PURE__*/React__default.createElement(RangeOption, {
+    className: "pointer-events-none",
+    selected: rangeStart && rangeEnd && selectedIndex === -1
+  }, customText || contextConfigs.actions.custom));
+}
+
+const RangePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    onChange,
+    onApply,
+    rangeStartDefault,
+    rangeEndDefault,
+    withRangeOptions,
+    withTime,
+    defaultTimeValues,
+    className,
+    todayText,
+    applyText,
+    customText,
+    rangeOptions,
+    max,
+    min,
+    value,
+    withApply,
+    markedDate,
+    frozenDateRange,
+    ...restProps
+  } = _ref;
+  const [contextConfigs] = useDatePickerContext();
+  const [hovered, setHovered] = useState();
+  const [rangeStart, setRangeStart] = useState(() => rangeStartDefault && dayjs(rangeStartDefault));
+  const [rangeEnd, setRangeEnd] = useState(() => rangeEndDefault && dayjs(rangeEndDefault));
+  const [firstPreview, setFirstPreview] = useState(() => rangeStart || dayjs());
+  const [secondPreview, setSecondPreview] = useState(() => rangeEnd ? rangeEnd.isSame(rangeStart, 'M') ? rangeEnd.add(1, 'M') : rangeEnd : dayjs().add(1, 'M'));
+  const setPreviews = useCallback((start, end) => {
+    setFirstPreview(start);
+    setSecondPreview(start.isSame(end, 'M') ? end.add(1, 'M') : end);
+  }, []);
+  const handleRangeChange = useCallback(_ref2 => {
+    let [startDate, endDate] = _ref2;
+    const start = withTime ? startDate : startDate && startDate.startOf('d');
+    const end = withTime ? endDate : endDate && endDate.endOf('d');
+    setRangeStart(start);
+    setRangeEnd(end);
+    start && end && setPreviews(start, end);
+    onChange([start, end]);
+  }, [onChange, setPreviews, withTime]);
+  const handleToday = useCallback(() => {
+    const today = dayjs();
+    handleRangeChange([today.startOf('d'), today.endOf('d')]);
+  }, [handleRangeChange]);
+  const handleApply = useCallback(() => {
+    const diff = dayjsWithPlugins(rangeStart).diff(rangeEnd, 's');
+    const endDate = diff > 0 ? rangeEnd.add(diff, 's') : rangeEnd;
+    onApply && onApply([rangeStart.toDate(), endDate.toDate()]);
+  }, [onApply, rangeStart, rangeEnd]);
+  const handleFirstPreviewChange = useCallback(preview => {
+    setFirstPreview(preview);
+    if (!rangeEnd) {
+      // We must check this after, maybe this will mote cover all cases.
+      setSecondPreview(rangeStart && rangeStart.isAfter(preview) ? rangeStart : preview.add(1, 'M'));
+    }
+  }, [rangeStart, rangeEnd]);
+  const handleSecondPreviewChange = useCallback(preview => {
+    setSecondPreview(preview);
+    if (!rangeEnd) {
+      setFirstPreview(rangeStart || preview.subtract(1, 'M'));
+    }
+  }, [rangeStart, rangeEnd]);
+  useEffect(() => {
+    const startDate = dayjsWithPlugins(value && value[0] || null);
+    const endDate = dayjsWithPlugins(value && value[1] || null);
+    if (startDate.isValid() && endDate.isValid()) {
+      setRangeStart(startDate);
+      setRangeEnd(endDate);
+      setFirstPreview(startDate);
+      setSecondPreview(endDate.isSame(startDate, 'M') ? endDate.add(1, 'M') : endDate);
+    }
+  }, [value]);
+  return /*#__PURE__*/React__default.createElement("ul", _extends({
+    className: classnames('datepicker-holder', 'range-mode', {
+      'simple-range-mode': !withRangeOptions
+    }),
+    ref: ref
+  }, restProps), /*#__PURE__*/React__default.createElement(Calendar, {
+    onRangeChange: handleRangeChange,
+    defaultTimeValues: defaultTimeValues,
+    className: "date-box-1",
+    rangePicker: true,
+    rangeStart: rangeStart,
+    rangeEnd: rangeEnd,
+    hovered: hovered,
+    onHover: rangeStart ? setHovered : null,
+    onPreviewChange: handleFirstPreviewChange,
+    preview: firstPreview,
+    maxPreview: secondPreview,
+    withTime: withTime,
+    time: rangeStart || dayjs().startOf('d'),
+    onTimeChange: start => handleRangeChange([start, rangeEnd]),
+    max: max,
+    min: min,
+    value: value && value[0],
+    markedDate: markedDate,
+    frozenDateRange: frozenDateRange
+  }), /*#__PURE__*/React__default.createElement(Calendar, {
+    onRangeChange: handleRangeChange,
+    defaultTimeValues: defaultTimeValues,
+    className: "date-box-2",
+    rangePicker: true,
+    rangeStart: rangeStart,
+    rangeEnd: rangeEnd,
+    hovered: hovered,
+    onHover: rangeStart ? setHovered : null,
+    preview: secondPreview,
+    onPreviewChange: handleSecondPreviewChange,
+    minPreview: firstPreview,
+    withTime: withTime,
+    time: rangeEnd || dayjs().startOf('d'),
+    onTimeChange: end => handleRangeChange([rangeStart, end]),
+    max: max,
+    min: min,
+    value: value && value[1],
+    markedDate: markedDate,
+    frozenDateRange: frozenDateRange
+  }), /*#__PURE__*/React__default.createElement("li", {
+    className: classnames('date-actions', {
+      vertical: withRangeOptions,
+      horizontal: !withRangeOptions
+    })
+  }, /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, !withRangeOptions && /*#__PURE__*/React__default.createElement(Button, {
+    color: "default",
+    appearance: "minimal",
+    flexibility: "default",
+    onClick: handleToday
+  }, todayText || contextConfigs.buttons.today), withRangeOptions && /*#__PURE__*/React__default.createElement(RangeOptions, {
+    rangeStart: rangeStart,
+    defaultTimeValues: defaultTimeValues,
+    rangeEnd: rangeEnd,
+    onClick: handleRangeChange,
+    customText: customText,
+    customOptions: rangeOptions
+  })), /*#__PURE__*/React__default.createElement("li", null, withApply && /*#__PURE__*/React__default.createElement(Button, {
+    disabled: !rangeStart || !rangeEnd || value && rangeStart.isSame(value[0]) && rangeEnd.isSame(value[1]),
+    appearance: "outline",
+    flexibility: withRangeOptions ? 'full-width' : 'default',
+    onClick: handleApply
+  }, applyText || contextConfigs.buttons.apply)))));
+});
+RangePicker.propTypes = {
+  /**
+   * Fires event when user changes date range picker value.
+   * ([startDate: Date, EndDate: Date]) => void
+   */
+  onChange: propTypesExports.func,
+  /**
+   * Fires event when user clicks on apply button
+   * ([startDate:Date, endDate: Date]) => void
+   */
+  onApply: propTypesExports.func,
+  /**
+   * Initial start date value
+   */
+  rangeStartDefault: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Initial end date value
+   */
+  rangeEndDefault: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number]),
+  /**
+   * Max specifies the maximum value allowed for datepicker
+   */
+  max: propTypesExports.instanceOf(dayjs),
+  /**
+   * Min specifies the minimum value allowed for datepicker
+   */
+  min: propTypesExports.instanceOf(dayjs),
+  /**
+   * Removes Today button from left bottom corner, and
+   * Displays buttons in the bottom of the calendar
+   */
+  withRangeOptions: propTypesExports.bool,
+  withTime: propTypesExports.bool,
+  /**
+   * Additional className which will apply
+   * To date range picker wrapper ul element
+   */
+  className: propTypesExports.string,
+  /**
+   * Custom today button text
+   */
+  todayText: propTypesExports.string,
+  /**
+   * Custom apply button text
+   */
+  applyText: propTypesExports.string,
+  /**
+   * Custom text for range options
+   */
+  customText: propTypesExports.string,
+  /**
+   * Setting default time value when date range changed
+   */
+  defaultTimeValues: propTypesExports.arrayOf(propTypesExports.arrayOf(propTypesExports.oneOfType([propTypesExports.number, propTypesExports.string]))),
+  /**
+   *  RangeOption will render buttons with custom range options
+   */
+  rangeOptions: propTypesExports.arrayOf(propTypesExports.shape({
+    name: propTypesExports.string,
+    start: propTypesExports.instanceOf(dayjs),
+    end: propTypesExports.instanceOf(dayjs)
+  })),
+  /**
+   * Ability to show/hide the apply button
+   * default: true
+   */
+  withApply: propTypesExports.bool,
+  /**
+   * MarkedDate specifies the default mark date
+   */
+  markedDate: propTypesExports.oneOfType([propTypesExports.instanceOf(dayjs), propTypesExports.instanceOf(Date), propTypesExports.string, propTypesExports.number])
+};
+RangePicker.defaultProps = {
+  withRangeOptions: false,
+  withTime: false,
+  withApply: true,
+  defaultTimeValues: [['00', '00', '00'], ['23', '59', '59']],
+  onChange: noop
+};
+
+DatePicker.WeekPicker = WeekPicker;
+DatePicker.MonthPicker = MonthPicker;
+DatePicker.RangePicker = RangePicker;
+DatePicker.Context = Context;
+DatePicker.Provider = Provider;
+DatePicker.useDatePickerContext = useDatePickerContext;
+
+export { DatePicker as default };