text: import { _ as _slicedToArray } from './slicedToArray-4e274c67.js';
  import './unsupportedIterableToArray-137e449b.js';
  import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
  import './_commonjsHelpers-97e6d7b1.js';
  import { P as PropTypes } from './index-097535f1.js';
  import './defineProperty-a0480c32.js';
  import './toConsumableArray-127424c2.js';
  import _styled from 'styled-components';
  import './getPrototypeOf-b96da1e1.js';
  import './color.js';
  import './components.js';
  import './contains-component.js';
  import './css.js';
  import { d as dayjs } from './dayjs.min-e57fb69a.js';
  import './date.js';
  import './miscellaneous.js';
  import './environment.js';
  import './font.js';
  import './math-e6d0e93a.js';
  import './characters.js';
  import './format.js';
  import './keycodes.js';
  import './url.js';
  import './web3.js';
  import { RADIUS, GU } from './constants.js';
  import './breakpoints.js';
  import './springs.js';
  import './text-styles.js';
  import './theme-dark.js';
  import './theme-light.js';
  import { useTheme } from './Theme.js';
  import { _ as _extends } from './extends-db4f0c26.js';
  import './objectWithoutProperties-234758e1.js';
  import './index-422d37c0.js';
  import './isObject-3c6ec07e.js';
  import { u as useViewport } from './Viewport-cc7debfb.js';
  import './Layout.js';
  import './FocusVisible.js';
  import './ButtonBase.js';
  import './IconPropTypes-aab7337d.js';
  import './IconAddUser.js';
  import './IconAlert.js';
  import './IconAlignCenter.js';
  import './IconAlignJustify.js';
  import './IconAlignLeft.js';
  import './IconAlignRight.js';
  import './IconAragon.js';
  import './IconArrowDown.js';
  import './IconArrowLeft.js';
  import './IconArrowRight.js';
  import './IconArrowUp.js';
  import './IconAtSign.js';
  import './IconBlock.js';
  import './IconBookmark.js';
  import './IconCalendar.js';
  import './IconCanvas.js';
  import './IconCaution.js';
  import './IconCenter.js';
  import './IconChart.js';
  import './IconChat.js';
  import './IconCheck.js';
  import './IconChip.js';
  import './IconCircleCheck.js';
  import './IconCircleMinus.js';
  import './IconCirclePlus.js';
  import './IconClock.js';
  import './IconCloudDownload.js';
  import './IconCloudUpload.js';
  import './IconCoin.js';
  import './IconConfiguration.js';
  import './IconConnect.js';
  import './IconConnection.js';
  import './IconConsole.js';
  import './IconCopy.js';
  import './IconCross.js';
  import './IconDashedSquare.js';
  import './IconDown.js';
  import './IconDownload.js';
  import './IconEdit.js';
  import './IconEllipsis.js';
  import './IconEnter.js';
  import './IconEthereum.js';
  import './IconExternal.js';
  import './IconFile.js';
  import './IconFilter.js';
  import './IconFlag.js';
  import './IconFolder.js';
  import './IconGraph2.js';
  import './IconGraph.js';
  import './IconGrid.js';
  import './IconGroup.js';
  import './IconHash.js';
  import './IconHeart.js';
  import './IconHide.js';
  import './IconHome.js';
  import './IconImage.js';
  import './IconInfo.js';
  import './IconLabel.js';
  import './IconLayers.js';
  import './IconLeft.js';
  import './IconLink.js';
  import './IconLocation.js';
  import './IconLock.js';
  import './IconMail.js';
  import './IconMaximize.js';
  import './IconMenu.js';
  import './IconMinimize.js';
  import './IconMinus.js';
  import './IconMove.js';
  import './IconNoPicture.js';
  import './IconPicture.js';
  import './IconPlus.js';
  import './IconPower.js';
  import './IconPrint.js';
  import './IconProhibited.js';
  import './IconQuestion.js';
  import './IconRefresh.js';
  import './IconRemoveUser.js';
  import './IconRight.js';
  import './IconRotateLeft.js';
  import './IconRotateRight.js';
  import './IconSearch.js';
  import './IconSettings.js';
  import './IconShare.js';
  import './IconSquareMinus.js';
  import './IconSquarePlus.js';
  import './IconSquare.js';
  import './IconStarFilled.js';
  import './IconStar.js';
  import './IconSwap.js';
  import './IconTarget.js';
  import './IconToken.js';
  import './IconTrash.js';
  import './IconUnlock.js';
  import './IconUp.js';
  import './IconUpload.js';
  import './IconUser.js';
  import './IconView.js';
  import './IconVote.js';
  import './IconWallet.js';
  import './IconWarning.js';
  import './IconWorld.js';
  import './IconWrite.js';
  import './IconZoomIn.js';
  import './IconZoomOut.js';
  import './objectWithoutPropertiesLoose-9606ad13.js';
  import 'react-dom';
  import './web-a351a0a1.js';
  import Button from './Button.js';
  import './getDisplayName-d5fc7707.js';
  import './index-edfeada6.js';
  import './index-f754c2df.js';
  import './RootPortal.js';
  import './proptypes-c8a77d05.js';
  import Popover from './Popover.js';
  import './observe.js';
  import './index-f0d64c59.js';
  import './providers.js';
  import './MonthDay-7b365d52.js';
  import DatePicker from './DatePicker.js';
  import { START_DATE, END_DATE } from './consts.js';
  import Labels from './Labels.js';
  import { handleDateSelect } from './utils.js';
  
  var _StyledPopover = _styled(Popover).withConfig({
    displayName: "DateRangePicker___StyledPopover",
    componentId: "s3s5m9-0"
  })(["min-width:", "px;border:0;filter:none;background:none;margin:2px 0 0 0;"], function (p) {
    return p._css;
  });
  
  var _StyledDiv = _styled("div").withConfig({
    displayName: "DateRangePicker___StyledDiv",
    componentId: "s3s5m9-1"
  })(["padding:", "px ", "px ", "px;border:1px solid ", ";border-radius:", "px;background:", ";"], function (p) {
    return p._css2;
  }, function (p) {
    return p._css3;
  }, function (p) {
    return p._css4;
  }, function (p) {
    return p._css5;
  }, RADIUS, function (p) {
    return p._css6;
  });
  
  var _StyledDiv2 = _styled("div").withConfig({
    displayName: "DateRangePicker___StyledDiv2",
    componentId: "s3s5m9-2"
  })(["display:flex;flex-direction:row;align-items:baseline;"]);
  
  var _StyledDatePicker = _styled(DatePicker).withConfig({
    displayName: "DateRangePicker___StyledDatePicker",
    componentId: "s3s5m9-3"
  })(["margin-left:", "px;"], function (p) {
    return p._css7;
  });
  
  var _StyledDiv3 = _styled("div").withConfig({
    displayName: "DateRangePicker___StyledDiv3",
    componentId: "s3s5m9-4"
  })(["display:flex;align-items:center;justify-content:space-between;margin-top:", "px;", ";"], function (p) {
    return p._css8;
  }, function (p) {
    return p._css9;
  });
  
  var _StyledButton = _styled(Button).withConfig({
    displayName: "DateRangePicker___StyledButton",
    componentId: "s3s5m9-5"
  })(["margin-left:", "px;"], function (p) {
    return p._css10;
  });
  
  function DateRangePicker(_ref) {
    var format = _ref.format,
        endDateProp = _ref.endDate,
        onChange = _ref.onChange,
        startDateProp = _ref.startDate;
    var theme = useTheme();
    var labelsRef = useRef();
  
    var _useState = useState(false),
        _useState2 = _slicedToArray(_useState, 2),
        showPicker = _useState2[0],
        setShowPicker = _useState2[1];
  
    var _useState3 = useState(startDateProp),
        _useState4 = _slicedToArray(_useState3, 2),
        startDate = _useState4[0],
        setStartDate = _useState4[1];
  
    var _useState5 = useState(endDateProp),
        _useState6 = _slicedToArray(_useState5, 2),
        endDate = _useState6[0],
        setEndDate = _useState6[1]; // on closing the picked, reset state
  
  
    useEffect(function () {
      if (!showPicker) {
        setStartDate(startDateProp);
        setEndDate(endDateProp);
      }
    }, [endDateProp, startDateProp, showPicker]);
    var handlePopoverClose = useCallback(function () {
      return setShowPicker(false);
    }, []);
    var handleLabelsClick = useCallback(function () {
      setShowPicker(function (show) {
        return !show;
      });
    }, []);
    var handleDateClick = useCallback(function (date) {
      var result = handleDateSelect({
        date: date,
        startDate: startDate,
        endDate: endDate
      });
      result.startDate !== undefined && setStartDate(result.startDate);
      result.endDate !== undefined && setEndDate(result.endDate);
    }, [startDate, endDate]);
    var handleApply = useCallback(function () {
      setShowPicker(false);
  
      if (startDate && endDate) {
        onChange({
          start: dayjs(startDate).startOf('day').toDate(),
          end: dayjs(endDate).endOf('day').toDate()
        });
      }
    }, [endDate, onChange, startDate]);
    var handleClear = useCallback(function () {
      setStartDate(null);
      setEndDate(null);
      setShowPicker(false);
      onChange({
        start: null,
        end: null
      });
    }, [onChange]);
    var labelProps = useMemo(function () {
      var _startDate = showPicker ? startDate : startDateProp;
  
      var _endDate = showPicker ? endDate : endDateProp;
  
      return {
        startText: _startDate ? dayjs(_startDate).format(format) : START_DATE,
        endText: _endDate ? dayjs(_endDate).format(format) : END_DATE
      };
    }, [endDate, endDateProp, format, showPicker, startDate, startDateProp]);
    var compactMode = useViewport().below('medium');
    var displayMonthBeforeOnLeft = useMemo(function () {
      // If both dates are in the same month, use the right calendar
      // for it, and display month before on the left calendar.
      var propsDatesInSameMonth = startDateProp && endDateProp && dayjs(startDateProp).isSame(dayjs(endDateProp), 'month');
      return !compactMode && (propsDatesInSameMonth || !startDateProp);
    }, [compactMode, endDateProp, startDateProp]);
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Labels, _extends({
      ref: labelsRef,
      enabled: showPicker,
      hasSetDates: Boolean(startDateProp && endDateProp),
      onClick: handleLabelsClick
    }, labelProps)), /*#__PURE__*/React.createElement(_StyledPopover, {
      closeOnOpenerFocus: true,
      onClose: handlePopoverClose,
      opener: labelsRef.current,
      placement: "bottom-start",
      visible: showPicker,
      _css: 37.5 * GU + 2
    }, /*#__PURE__*/React.createElement(_StyledDiv, {
      _css2: 2.5 * GU,
      _css3: 3 * GU,
      _css4: 3 * GU,
      _css5: theme.border,
      _css6: theme.surface
    }, /*#__PURE__*/React.createElement(_StyledDiv2, null, /*#__PURE__*/React.createElement(DatePicker, {
      datesRangeEnd: endDate,
      datesRangeStart: startDate,
      initialDate: dayjs(startDateProp || undefined).subtract(displayMonthBeforeOnLeft ? 1 : 0, 'month').toDate(),
      onSelect: handleDateClick
    }), !compactMode && /*#__PURE__*/React.createElement(_StyledDatePicker, {
      datesRangeEnd: endDate,
      datesRangeStart: startDate,
      initialDate: dayjs(endDateProp || undefined).toDate(),
      onSelect: handleDateClick,
      _css7: 1 * GU
    })), /*#__PURE__*/React.createElement(_StyledDiv3, {
      _css8: GU * 2.25,
      _css9: compactMode ? '' : "\n                    max-width: 247px;\n                    margin-left: auto;\n                  "
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: handleClear,
      size: "small",
      wide: true
    }, "Reset"), /*#__PURE__*/React.createElement(_StyledButton, {
      disabled: !startDate || !endDate,
      mode: "strong",
      onClick: handleApply,
      size: "small",
      wide: true,
      _css10: 1.5 * GU
    }, "Apply")))));
  }
  
  DateRangePicker.propTypes = {
    endDate: PropTypes.instanceOf(Date),
    format: PropTypes.string,
    onChange: PropTypes.func,
    startDate: PropTypes.instanceOf(Date)
  };
  DateRangePicker.defaultProps = {
    format: 'MM/DD/YYYY',
    onChange: function onChange() {}
  };
  
  export default DateRangePicker;
  //# sourceMappingURL=DateRangePicker.js.map
  