@geneui/components 3.0.0-next-06dadf3-29102024 → 3.0.0-next-63cb5e7-01112024

package/DatePicker/index.js

@@ -1,1229 +0,0 @@
-import { s as styleInject } from '../style-inject.es-746bb8ed.js';
-import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
-import React__default, { createContext, useState, useCallback, useContext, useMemo, forwardRef, useEffect } from 'react';
-import { c as classnames } from '../index-031ff73c.js';
-import PropTypes from 'prop-types';
-import { a as dayjs, i as isBetween, d as dayjsWithPlugins } from '../dateValidation-67caec66.js';
-import { q as chunk, n as noop } from '../index-5f37f281.js';
-import { g as guid } from '../guid-8ddf77b3.js';
-import Button from '../Button/index.js';
-import Icon from '../Icon/index.js';
-import '../_commonjsHelpers-24198af3.js';
-import 'react-dom';
-import '../tslib.es6-f211516f.js';
-
-var css_248z = "[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .datepicker-holder .not-clickable{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.16.4\"] .datepicker-holder:not(.range-mode){padding-bottom:0}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .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.16.4\"] .datepicker-holder.range-mode .date-box{display:grid;grid-template-rows:auto 1fr auto}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .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.16.4\"] .datepicker-holder.range-mode.simple-range-mode .date-actions{margin:.5rem 0 0}[data-gene-ui-version=\"2.16.4\"] .datepicker-holder .date-box-1{grid-area:date-box-1}[data-gene-ui-version=\"2.16.4\"] .datepicker-holder .date-box-2{grid-area:date-box-2}[data-gene-ui-version=\"2.16.4\"] .datepicker-holder .date-actions{grid-area:date-actions}[data-gene-ui-version=\"2.16.4\"] .calendar-days>ul{display:flex;margin:0 0 .5rem}[data-gene-ui-version=\"2.16.4\"] .calendar-days>ul+ul{margin:2px 0 0}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .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.16.4\"] .calendar-days>ul>li>span{display:block;z-index:0}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .calendar-days>ul>li.heading{color:rgba(var(--background-sc-rgb),32);font-weight:700;pointer-events:none}[data-gene-ui-version=\"2.16.4\"] .calendar-days>ul>li.heading>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}[data-gene-ui-version=\"2.16.4\"] .calendar-days>ul>li.disabled{color:rgba(var(--background-sc-rgb),.3);font-weight:600;pointer-events:none}[data-gene-ui-version=\"2.16.4\"] .calendar-days>ul>li.current{border-color:var(--hero);color:var(--hero)}[data-gene-ui-version=\"2.16.4\"] .calendar-days>ul>li.will-be-current{background:rgba(var(--hero-rgb),.15)}[data-gene-ui-version=\"2.16.4\"] .calendar-days>ul>li:hover{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.16.4\"] .calendar-days>ul>li.selected{background:var(--hero)!important;color:var(--hero-sc)!important}[data-gene-ui-version=\"2.16.4\"] .calendar-days>ul>li.selected:hover{background:var(--hero-hover)!important}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .calendar-days>ul.hover-row:hover>li>span:before,[data-gene-ui-version=\"2.16.4\"] .calendar-days>ul>li.ranged>span:before{background:rgba(var(--hero-rgb),.15)}[data-gene-ui-version=\"2.16.4\"] .date-actions ul{display:flex;flex-direction:column}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .date-actions.horizontal li:only-child .btn{font-weight:700}[data-gene-ui-version=\"2.16.4\"] .date-actions.vertical .btn:not(.a-outline){margin:0 0 1.2rem}[data-gene-ui-version=\"2.16.4\"] .date-actions.vertical .btn.a-outline{margin:.8rem 0 0}[data-gene-ui-version=\"2.16.4\"] .simple-range-mode .date-actions ul{flex-direction:row}[data-gene-ui-version=\"2.16.4\"] .simple-range-mode .date-actions ul li{flex-shrink:0}[data-gene-ui-version=\"2.16.4\"] .simple-range-mode .date-actions ul li:first-child{flex:auto}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .date-heading>li{flex-shrink:0}[data-gene-ui-version=\"2.16.4\"] .date-heading>li:not(.title){align-items:center;display:flex;flex:auto;justify-content:flex-start;width:50%}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .date-heading>li:not(.title):last-child{justify-content:flex-end}[data-gene-ui-version=\"2.16.4\"] .date-heading>li.title{opacity:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-gene-ui-version=\"2.16.4\"] .date-heading .clickable{cursor:pointer;transition:color .3s}[data-gene-ui-version=\"2.16.4\"] .date-heading .clickable.active,[data-gene-ui-version=\"2.16.4\"] .date-heading .clickable:hover{color:var(--hero)}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .date-heading .icon:hover{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.16.4\"] .month-years-select{min-height:22.9rem;width:26.4rem}[data-gene-ui-version=\"2.16.4\"] .month-years-select li{display:flex}[data-gene-ui-version=\"2.16.4\"] .month-years-select li+li{margin:3.6rem 0 0}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .month-years-select button:nth-child(2){margin:0 2.2rem}[data-gene-ui-version=\"2.16.4\"] .month-years-select button:hover{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.16.4\"] .month-years-select button.disabled{color:rgba(var(--background-sc-rgb),.3);pointer-events:none}[data-gene-ui-version=\"2.16.4\"] .month-years-select button.selected{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .month-years-select-button{max-height:3rem;min-height:3rem}[data-gene-ui-version=\"2.16.4\"] .month-years-select-button.selected:hover{background:var(--hero)!important}[data-gene-ui-version=\"2.16.4\"] .month-years-select-button:active{background:none}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .time-inputs-str li{align-items:center;display:flex;flex-direction:column;justify-content:center}[data-gene-ui-version=\"2.16.4\"] .time-inputs-str li>:first-child{order:0}[data-gene-ui-version=\"2.16.4\"] .time-inputs-str li>:nth-child(2){order:2}[data-gene-ui-version=\"2.16.4\"] .time-inputs-str li>:nth-child(3){order:1}[data-gene-ui-version=\"2.16.4\"] .time-inputs-str li>*+*{margin:.2rem 0 0}[data-gene-ui-version=\"2.16.4\"] .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.16.4\"] .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.16.4\"] button:active~.time-input-el{background:#0000;border-color:var(--hero)}[data-gene-ui-version=\"2.16.4\"] .week-picker:hover{background:rgba(var(--background-sc-rgb),.03)}";
-styleInject(css_248z);
-
-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');
-
-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: PropTypes.instanceOf(dayjs).isRequired,
-  startDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  endDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  max: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  min: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  isHovered: PropTypes.bool,
-  disabled: PropTypes.bool,
-  isCurrent: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  isRanged: PropTypes.bool,
-  isHoveredBefore: PropTypes.bool,
-  onClick: PropTypes.func
-};
-Day.defaultProps = {
-  disabled: false,
-  isCurrent: false,
-  isSelected: false,
-  isRanged: false
-};
-
-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
-  } = _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]);
-  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,
-    max,
-    min
-  } = _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 checkYearEnableState = useCallback(year => {
-    if (!year) return false;
-    if (min && !max) return year >= dayjs(min).year();
-    if (!min && max) return year <= dayjs(max).year();
-    if (min && max) return max && year <= dayjs(max).year() && min && year >= dayjs(min).year();
-    return true;
-  }, [max, min]);
-  const handleClick = useCallback(year => {
-    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__*/React__default.createElement(Button, {
-    key: year,
-    className: classnames({
-      selected: selected && selected === year,
-      disabled: !isFromDecade(year) || !checkYearEnableState(year)
-    }),
-    onClick: () => handleClick(year),
-    color: "default",
-    flexibility: "content-size",
-    appearance: "minimal"
-  }, 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,
-    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
-  }), view === 'years' && /*#__PURE__*/React__default.createElement(Years, {
-    selected: isRange ? rangeStart && rangeStart.year() : selected && selected.year(),
-    onChange: handleYearChange,
-    previewYear: preview.year(),
-    onPreviewChange: handleFooterPreviewChange,
-    max: max,
-    min: min
-  }));
-}
-
-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,
-    isThisDateAllowed
-  } = _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: !isThisDateAllowed
-  }, 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 [isThisDateAllowed, setIsThisDateAllowed] = 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]);
-  useEffect(() => {
-    if (min && !max) setIsThisDateAllowed(dayjs(min).isSameOrBefore(dayjs(), 'date'));
-    if (!min && max) setIsThisDateAllowed(dayjs(max).isSameOrAfter(dayjs(), 'date'));
-    if (min && max) setIsThisDateAllowed(dayjs(min).isSameOrBefore(dayjs(), 'date') && dayjs(max).isSameOrAfter(dayjs(), 'date'));
-  }, [max, min]);
-  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
-  }), 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,
-    isThisDateAllowed: isThisDateAllowed
-  }));
-});
-
-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: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Initial value for  datepicker preview
-   */
-  defaultPreview: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Max specifies the maximum value allowed for datepicker
-   */
-  max: PropTypes.instanceOf(dayjs),
-  /**
-   * Min specifies the minimum value allowed for datepicker
-   */
-  min: PropTypes.instanceOf(dayjs),
-  /**
-   * Fires event when user changes date[icker value
-   * (date: Date) => void
-   */
-  onChange: PropTypes.func,
-  /**
-   * Additional classname which will apply to datepicker holder ul element
-   */
-  className: PropTypes.string,
-  /**
-   * Custom text for today button inside footer.
-   * Default value is `Today`
-   */
-  todayText: PropTypes.string,
-  /**
-   * MarkedDate specifies the default mark date
-   */
-  markedDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * CustomOption is an object that is used to add a custom button to set a custom date.
-   */
-  customOption: PropTypes.shape({
-    /**
-     * Label of custom button
-     */
-    label: PropTypes.string,
-    /**
-     * Date of custom button
-     */
-    date: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.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: PropTypes.func,
-  /**
-   * Setting default time value when date range changed
-   */
-  defaultTimeValues: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))),
-  /**
-   * Initial value for start date
-   */
-  rangeStartDefault: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Initial value for end date
-   */
-  rangeEndDefault: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Additional classname which will apply to datepicker holder ul element
-   */
-  className: PropTypes.string,
-  /**
-   * Custom text for this week button inside footer.
-   * Default value is `This Week`
-   */
-  thisWeekText: PropTypes.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: PropTypes.func,
-  /**
-   * Setting default time value when date range changed
-   */
-  defaultTimeValues: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))),
-  /**
-   * Initial value for start date
-   */
-  rangeStartDefault: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Initial value for end date
-   */
-  rangeEndDefault: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Max specifies the maximum value allowed for monthPicker
-   */
-  max: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Min specifies the minimum value allowed for monthPicker
-   */
-  min: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Additional classname which will apply to datepicker holder ul element
-   */
-  className: PropTypes.string,
-  /**
-   * Custom text for this month button inside footer.
-   * Default value is `This Month`
-   */
-  thisMonthText: PropTypes.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: PropTypes.func,
-  /**
-   * Fires event when user clicks on apply button
-   * ([startDate:Date, endDate: Date]) => void
-   */
-  onApply: PropTypes.func,
-  /**
-   * Initial start date value
-   */
-  rangeStartDefault: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Initial end date value
-   */
-  rangeEndDefault: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number]),
-  /**
-   * Max specifies the maximum value allowed for datepicker
-   */
-  max: PropTypes.instanceOf(dayjs),
-  /**
-   * Min specifies the minimum value allowed for datepicker
-   */
-  min: PropTypes.instanceOf(dayjs),
-  /**
-   * Removes Today button from left bottom corner, and
-   * Displays buttons in the bottom of the calendar
-   */
-  withRangeOptions: PropTypes.bool,
-  withTime: PropTypes.bool,
-  /**
-   * Additional className which will apply
-   * To date range picker wrapper ul element
-   */
-  className: PropTypes.string,
-  /**
-   * Custom today button text
-   */
-  todayText: PropTypes.string,
-  /**
-   * Custom apply button text
-   */
-  applyText: PropTypes.string,
-  /**
-   * Custom text for range options
-   */
-  customText: PropTypes.string,
-  /**
-   * Setting default time value when date range changed
-   */
-  defaultTimeValues: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))),
-  /**
-   *  RangeOption will render buttons with custom range options
-   */
-  rangeOptions: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    start: PropTypes.instanceOf(dayjs),
-    end: PropTypes.instanceOf(dayjs)
-  })),
-  /**
-   * Ability to show/hide the apply button
-   * default: true
-   */
-  withApply: PropTypes.bool,
-  /**
-   * MarkedDate specifies the default mark date
-   */
-  markedDate: PropTypes.oneOfType([PropTypes.instanceOf(dayjs), PropTypes.instanceOf(Date), PropTypes.string, PropTypes.number])
-};
-RangePicker.defaultProps = {
-  withRangeOptions: false,
-  withTime: false,
-  withApply: true,
-  defaultTimeValues: [['00', '00', '00'], ['23', '59', '59']],
-  onChange: noop
-};
-
-// Styles
-DatePicker.WeekPicker = WeekPicker;
-DatePicker.MonthPicker = MonthPicker;
-DatePicker.RangePicker = RangePicker;
-DatePicker.Context = Context;
-DatePicker.Provider = Provider;
-DatePicker.useDatePickerContext = useDatePickerContext;
-
-export { DatePicker as default };