import '../_commonjsHelpers-97e6d7b1.js';
import React from 'react';
import 'react-dom';
import { f as _inherits, g as _createClass, h as _classCallCheck, _ as _defineProperty, n as _assertThisInitialized, a as _objectSpread2, i as _getPrototypeOf, j as _possibleConstructorReturn } from '../_rollupPluginBabelHelpers-539c1155.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../index-930c2100.js';
import '../hooks/useActivify.js';
import Tooltip from '../overlays/tooltip.js';
import '../key_codes-a5a2b85e.js';
import '../index-6b96e57a.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import Icon from '../ui/icon.js';
import '../info-fc9c81b4.js';
import '../close-cd95ea58.js';
import '../close-v2-118f2b87.js';
import '../file_placeholder-51e080e8.js';
import '../arrow-e522a0cc.js';
import '../tick-ee41abaf.js';
import { A as AngleDownIcon } from '../angle-down-4038e060.js';
import '../checkmark-b6f07b8e.js';
import '../search-da5a95f5.js';
import '../overlays/withTooltip.js';
import '../index-91504e81.js';
import '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import { d as dayjs } from '../dayjs.min-3572fc97.js';
import '../index-9efc6429.js';
import { c as customParseFormat } from '../customParseFormat-33e63322.js';
import Calendar from '../ui/calendar.js';
import '../generic-2d73c3aa.js';
import Button from '../ui/button.js';
import { Label } from '../ui/label.js';
import { T as TextInput } from '../TextInput-023a1470.js';
import Checkbox from './checkbox.js';
import { T as TimePicker } from '../index-a0f122ff.js';

var css = ".Input_input__11F-i {\n  position: relative;\n  margin-bottom: 0px;\n  margin-right: 8px;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  max-width: 140px; }\n  .Input_input__11F-i input {\n    width: 100%;\n    outline: none;\n    border: none;\n    background-color: transparent;\n    padding: 4px;\n    font-size: 11px;\n    padding-left: 42px;\n    box-sizing: border-box;\n    min-width: 0;\n    cursor: pointer; }\n  .Input_inputLabel__116rs {\n    position: absolute;\n    font-size: 10px;\n    color: #999;\n    top: 52%;\n    left: 6px;\n    transform: translateY(-50%);\n    text-transform: uppercase; }\n  .Input_input__11F-i.Input_endInput__1xUUF input {\n    padding-left: 31px; }\n  .Input_input__11F-i.Input_focused__1a4aH {\n    border: 1px solid #124fa0; }\n  .Input_input__11F-i.Input_compare__3vLwo.Input_focused__1a4aH {\n    border-color: #f1c40f; }\n";
var styles = {"input":"Input_input__11F-i","inputLabel":"Input_inputLabel__116rs","endInput":"Input_endInput__1xUUF","focused":"Input_focused__1a4aH","compare":"Input_compare__3vLwo"};
styleInject(css);

function Input(_ref) {
  var label = _ref.label,
      value = _ref.value,
      className = _ref.className,
      disabled = _ref.disabled,
      onFocus = _ref.onFocus,
      focused = _ref.focused,
      compare = _ref.compare,
      prefixClassName = _ref.prefixClassName;
  var date = dayjs.isDayjs(value) ? dayjs(value).format("DD MMM, YYYY") : "";
  var focusedClassName = focused ? styles.focused : "";
  var compareClassName = compare ? styles.compare : "";
  return React.createElement("div", {
    className: "".concat(styles.input, " ").concat(className, " ").concat(compareClassName, " ").concat(focusedClassName, " ").concat(prefixClassName)
  }, React.createElement("span", {
    className: "".concat(styles.inputLabel, " ").concat(prefixClassName, "-label")
  }, label), React.createElement("input", {
    onFocus: onFocus,
    value: date,
    className: "".concat(styles.inputField, " ").concat(prefixClassName, "-input"),
    placeholder: "Selecting",
    disabled: disabled
  }));
}

Input.propTypes = {
  className: PropTypes.string,
  compare: PropTypes.bool,
  disabled: PropTypes.bool,
  focused: PropTypes.bool,
  label: PropTypes.string,
  onFocus: PropTypes.func,
  prefixClassName: PropTypes.string,
  value: PropTypes.object
};
Input.defaultProps = {
  className: "",
  compare: false,
  disabled: false,
  focused: false,
  label: "",
  onFocus: function onFocus() {},
  prefixClassName: "",
  value: {}
};
Input.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Input",
  "props": {
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "compare": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "focused": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "value": {
      "defaultValue": {
        "value": "{}",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": ""
    }
  }
};

var css$1 = ".Inputs_inputsColumn__7-mQ4 {\n  display: flex;\n  flex-direction: column;\n  padding: 20px 12px; }\n  .Inputs_inputsColumnLabel__Dj1Xz {\n    font-size: 14px;\n    margin-bottom: 2px; }\n  .Inputs_inputsColumnHint__2BOry {\n    font-size: 10px;\n    color: #999;\n    margin-bottom: 14px; }\n\n.Inputs_inputsItems__1V8SG {\n  display: flex;\n  margin-bottom: 24px;\n  animation: Inputs_show-in__3jt9Q 0.2s ease-out both;\n  animation-delay: 0.05s; }\n  .Inputs_inputsItems__1V8SG:last-of-type {\n    margin-bottom: 0; }\n\n.Inputs_inputsButtons__37A6P {\n  display: flex;\n  margin-bottom: 12px;\n  animation: Inputs_show-in__3jt9Q 0.2s ease-out both; }\n  .Inputs_inputsButtons__37A6P .Inputs_inputsButton__ad8bd {\n    margin-right: 8px;\n    font-size: 10px; }\n    .Inputs_inputsButtons__37A6P .Inputs_inputsButton__ad8bd:last-child {\n      margin-right: 0; }\n";
var styles$1 = {"inputsColumn":"Inputs_inputsColumn__7-mQ4","inputsColumnLabel":"Inputs_inputsColumnLabel__Dj1Xz","inputsColumnHint":"Inputs_inputsColumnHint__2BOry","inputsItems":"Inputs_inputsItems__1V8SG","show-in":"Inputs_show-in__3jt9Q","inputsButtons":"Inputs_inputsButtons__37A6P","inputsButton":"Inputs_inputsButton__ad8bd"};
styleInject(css$1);

/**
 * Retrieves some stats for the given start and end date
 * such as if the combination of dates matches any of the helper buttons
 * (Today, Yesterday, Last 7 days etc.)
 */

var getDateStats = function getDateStats(startDate, endDate) {
  var today = dayjs();
  var yesterday = dayjs().subtract(1, "d");
  var isSame = startDate.isSame(endDate, "d");
  var isToday = isSame && startDate.isSame(today, "d");
  var isYesterday = isSame && startDate.isSame(yesterday, "d");
  var isLast7Days = today.subtract(6, "d").isSame(startDate, "d") && endDate && endDate.isSame(today, "d");
  var isLast30Days = today.subtract(29, "d").isSame(startDate, "d") && endDate && endDate.isSame(today, "d");
  return {
    isToday: isToday,
    isYesterday: isYesterday,
    isLast7Days: isLast7Days,
    isLast30Days: isLast30Days
  };
};

function Shortcuts(_ref) {
  var startDate = _ref.startDate,
      endDate = _ref.endDate,
      onChange = _ref.onChange,
      prefixClassName = _ref.prefixClassName;

  var _getDateStats = getDateStats(startDate, endDate),
      isToday = _getDateStats.isToday,
      isYesterday = _getDateStats.isYesterday,
      isLast7Days = _getDateStats.isLast7Days,
      isLast30Days = _getDateStats.isLast30Days;

  var today = dayjs().startOf("day");
  return React.createElement("div", {
    className: "".concat(styles$1.inputsButtons, " ").concat(prefixClassName)
  }, React.createElement(Button, {
    primary: isToday,
    type: isToday ? "primary" : "default",
    className: "".concat(styles$1.inputsButton, " ").concat(prefixClassName, "-button"),
    onClick: function onClick() {
      return onChange(today, today.endOf("day"));
    }
  }, "Today"), React.createElement(Button, {
    primary: isYesterday,
    type: isYesterday ? "primary" : "default",
    className: "".concat(styles$1.inputsButton, " ").concat(prefixClassName, "-button"),
    onClick: function onClick() {
      return onChange(today.subtract(1, "d").startOf("day"), today.subtract(1, "d").endOf("day"));
    }
  }, "Yesterday"), React.createElement(Button, {
    primary: isLast7Days,
    type: isLast7Days ? "primary" : "default",
    className: "".concat(styles$1.inputsButton, " ").concat(prefixClassName, "-button"),
    onClick: function onClick() {
      return onChange(today.subtract(6, "d").startOf("day"), today.endOf("day"));
    }
  }, "Last 7 Days"), React.createElement(Button, {
    primary: isLast30Days,
    type: isLast30Days ? "primary" : "default",
    className: "".concat(styles$1.inputsButton, " ").concat(prefixClassName, "-button"),
    onClick: function onClick() {
      return onChange(today.subtract(29, "d").startOf("day"), today.endOf("day"));
    }
  }, "Last 30 Days"));
}

function Inputs(_ref2) {
  var startDate = _ref2.startDate,
      endDate = _ref2.endDate,
      onChange = _ref2.onChange,
      _onFocus = _ref2.onFocus,
      selectingKey = _ref2.selectingKey,
      prefixClassName = _ref2.prefixClassName;
  return React.createElement("div", {
    className: "".concat(styles$1.inputsColumn, " ").concat(prefixClassName)
  }, React.createElement("div", {
    className: "".concat(styles$1.inputsColumnLabel, " ").concat(prefixClassName, "-label")
  }, "Select Date"), React.createElement("div", {
    className: "".concat(styles$1.inputsColumnHint, " ").concat(prefixClassName, "-hint")
  }, "Tap on the calendar to define custom date ranges"), React.createElement(Shortcuts, {
    prefixClassName: "".concat(prefixClassName, "-shortcuts"),
    startDate: startDate,
    endDate: endDate,
    onChange: onChange
  }), React.createElement("div", {
    className: "".concat(styles$1.inputsItems, " ").concat(prefixClassName, "-input-items")
  }, React.createElement(Input, {
    label: "Start",
    key: "startDate",
    value: startDate,
    onFocus: function onFocus() {
      return _onFocus("startDate");
    },
    focused: selectingKey === "startDate",
    prefixClassName: "".concat(prefixClassName, "-input-item")
  }), React.createElement(Input, {
    className: styles$1.endInput,
    label: "End",
    key: "endDate",
    value: endDate,
    onFocus: function onFocus() {
      return _onFocus("endDate");
    },
    focused: selectingKey === "endDate",
    prefixClassName: "".concat(prefixClassName, "-input-item")
  })));
}

Inputs.propTypes = {
  endDate: PropTypes.instanceOf(dayjs).isRequired,
  startDate: PropTypes.instanceOf(dayjs).isRequired,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  prefixClassName: PropTypes.string,
  selectingKey: PropTypes.string
};
Inputs.defaultProps = {
  onChange: function onChange() {},
  onFocus: function onFocus() {},
  prefixClassName: "",
  selectingKey: ""
};
Shortcuts.propTypes = {
  onChange: PropTypes.func,
  prefixClassName: PropTypes.string,
  endDate: PropTypes.instanceOf(dayjs),
  startDate: PropTypes.instanceOf(dayjs)
};
Shortcuts.defaultProps = {
  onChange: function onChange() {},
  prefixClassName: ""
};
Inputs.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Inputs",
  "props": {
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "selectingKey": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "endDate": {
      "type": {
        "name": "instanceOf",
        "value": "dayjs"
      },
      "required": true,
      "description": ""
    },
    "startDate": {
      "type": {
        "name": "instanceOf",
        "value": "dayjs"
      },
      "required": true,
      "description": ""
    }
  }
};

var css$2 = ".Comparison_inputs__3sxGe {\n  display: flex;\n  flex-direction: column;\n  padding: 20px 12px;\n  padding-top: 0; }\n  .Comparison_inputsLabel__1HmNL {\n    font-size: 14px;\n    margin-bottom: 2px; }\n  .Comparison_inputsHint__2p_Tz {\n    font-size: 10px;\n    color: #999;\n    margin-bottom: 14px; }\n  .Comparison_inputsItems__2h2UQ {\n    display: flex;\n    margin-bottom: 24px;\n    animation: Comparison_show-in__3HFz- 0.2s ease-out both;\n    animation-delay: 0.05s; }\n    .Comparison_inputsItems__2h2UQ:last-of-type {\n      margin-bottom: 0; }\n  .Comparison_inputsButtons__s72G3 {\n    display: flex;\n    margin-bottom: 12px;\n    animation: Comparison_show-in__3HFz- 0.2s ease-out both; }\n    .Comparison_inputsButtons__s72G3 .Comparison_inputsButton__Pj0tM {\n      margin-right: 8px;\n      font-size: 10px; }\n      .Comparison_inputsButtons__s72G3 .Comparison_inputsButton__Pj0tM:last-child {\n        margin-right: 0; }\n      .Comparison_inputsButtons__s72G3 .Comparison_inputsButton__Pj0tM.Comparison_compare__1hPX2 {\n        background-color: #f1c40f;\n        border-color: #f1c40f;\n        color: #fff; }\n  .Comparison_inputsCheckbox__16HSR {\n    font-size: 12px;\n    margin-bottom: 12px;\n    margin-left: 1px; }\n    .Comparison_inputsCheckbox__16HSR-text {\n      font-size: 12px; }\n      .Comparison_inputsCheckbox__16HSR-text.selected {\n        color: #f1c40f; }\n    .Comparison_inputsCheckbox__16HSR-box {\n      width: 12px;\n      height: 12px;\n      margin-right: 4px; }\n      .Comparison_inputsCheckbox__16HSR-box.selected {\n        background-color: #f1c40f;\n        border-color: #f1c40f; }\n";
var styles$2 = {"inputs":"Comparison_inputs__3sxGe","inputsLabel":"Comparison_inputsLabel__1HmNL","inputsHint":"Comparison_inputsHint__2p_Tz","inputsItems":"Comparison_inputsItems__2h2UQ","show-in":"Comparison_show-in__3HFz-","inputsButtons":"Comparison_inputsButtons__s72G3","inputsButton":"Comparison_inputsButton__Pj0tM","compare":"Comparison_compare__1hPX2","inputsCheckbox":"Comparison_inputsCheckbox__16HSR"};
styleInject(css$2);

function Shortcuts$1(_ref) {
  var startDate = _ref.startDate,
      endDate = _ref.endDate,
      onChange = _ref.onChange,
      prefixClassName = _ref.prefixClassName,
      comparisonStartDate = _ref.comparisonStartDate,
      comparisonEndDate = _ref.comparisonEndDate;
  var numDays = endDate ? endDate.diff(startDate, "d") + 1 : 0;
  var prevComparisonStartDate = startDate.subtract(numDays, "d");
  var prevComparisonEndDate = startDate.subtract(1, "d");
  var isPreviousPeriod = comparisonStartDate && comparisonEndDate && comparisonStartDate.isSame(prevComparisonStartDate) && comparisonEndDate.isSame(prevComparisonEndDate);
  return React.createElement("div", {
    className: "".concat(styles$2.inputsButtons, " ").concat(prefixClassName)
  }, React.createElement(Button, {
    onClick: function onClick() {
      onChange(startDate.subtract(numDays, "days"), startDate.subtract(1, "days"));
    },
    className: "".concat(styles$2.inputsButton, " ").concat(isPreviousPeriod ? styles$2.compare : "", " ").concat(prefixClassName, "-button"),
    primary: isPreviousPeriod
  }, "Previous Period"), React.createElement(Button, {
    onClick: function onClick() {
      onChange(null, null, "comparisonStartDate");
    },
    className: "".concat(styles$2.inputsButton, " ").concat(!isPreviousPeriod ? styles$2.compare : "", " ").concat(prefixClassName, "-button"),
    primary: !isPreviousPeriod
  }, "Custom"));
}

function Comparison(_ref2) {
  var comparisonStartDate = _ref2.comparisonStartDate,
      comparisonEndDate = _ref2.comparisonEndDate,
      onToggle = _ref2.onToggle,
      onChange = _ref2.onChange,
      selectingKey = _ref2.selectingKey,
      toggled = _ref2.toggled,
      startDate = _ref2.startDate,
      endDate = _ref2.endDate,
      prefixClassName = _ref2.prefixClassName,
      _onFocus = _ref2.onFocus;
  return React.createElement("div", {
    className: "".concat(styles$2.inputs, " ").concat(prefixClassName)
  }, React.createElement(Checkbox.Item, {
    label: "Compare",
    value: toggled,
    className: "".concat(styles$2.inputsCheckbox, " ").concat(prefixClassName, "-toggle"),
    onChange: onToggle
  }), toggled ? React.createElement(React.Fragment, null, React.createElement(Shortcuts$1, {
    prefixClassName: "".concat(prefixClassName, "-shortcuts"),
    startDate: startDate,
    endDate: endDate,
    comparisonStartDate: comparisonStartDate,
    comparisonEndDate: comparisonEndDate,
    onChange: onChange
  }), React.createElement("div", {
    className: "".concat(styles$2.inputsItems, " ").concat(prefixClassName, "-input-items")
  }, React.createElement(Input, {
    label: "Start",
    key: "comparisonStartDate",
    value: comparisonStartDate,
    onFocus: function onFocus() {
      return _onFocus("comparisonStartDate");
    },
    focused: selectingKey === "comparisonStartDate",
    compare: true,
    prefixClassName: "".concat(prefixClassName, "-input-item")
  }), React.createElement(Input, {
    className: styles$2.endInput,
    label: "End",
    key: "comparisonEndDate",
    value: comparisonEndDate,
    onFocus: function onFocus() {
      return _onFocus("comparisonEndDate");
    },
    focused: selectingKey === "comparisonEndDate",
    compare: true,
    prefixClassName: "".concat(prefixClassName, "-input-item")
  }))) : null);
}

Comparison.propTypes = {
  comparisonEndDate: PropTypes.instanceOf(dayjs),
  comparisonStartDate: PropTypes.instanceOf(dayjs),
  endDate: PropTypes.instanceOf(dayjs),
  onChange: PropTypes.func,
  onToggle: PropTypes.func,
  onFocus: PropTypes.func,
  prefixClassName: PropTypes.string,
  selectingKey: PropTypes.string,
  startDate: PropTypes.instanceOf(dayjs),
  toggled: PropTypes.bool
};
Comparison.defaultProps = {
  onChange: function onChange() {},
  onToggle: function onToggle() {},
  onFocus: function onFocus() {},
  prefixClassName: "",
  selectingKey: "",
  toggled: false
};
Shortcuts$1.propTypes = {
  onChange: PropTypes.func,
  prefixClassName: PropTypes.string,
  endDate: PropTypes.instanceOf(dayjs),
  startDate: PropTypes.instanceOf(dayjs),
  comparisonEndDate: PropTypes.instanceOf(dayjs),
  comparisonStartDate: PropTypes.instanceOf(dayjs)
};
Shortcuts$1.defaultProps = {
  onChange: function onChange() {},
  prefixClassName: ""
};
Comparison.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Comparison",
  "props": {
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onToggle": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "selectingKey": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "toggled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "comparisonEndDate": {
      "type": {
        "name": "instanceOf",
        "value": "dayjs"
      },
      "required": false,
      "description": ""
    },
    "comparisonStartDate": {
      "type": {
        "name": "instanceOf",
        "value": "dayjs"
      },
      "required": false,
      "description": ""
    },
    "endDate": {
      "type": {
        "name": "instanceOf",
        "value": "dayjs"
      },
      "required": false,
      "description": ""
    },
    "startDate": {
      "type": {
        "name": "instanceOf",
        "value": "dayjs"
      },
      "required": false,
      "description": ""
    }
  }
};

var css$3 = ".date-picker-tooltip > div:nth-child(2) > div:nth-child(2) {\n  max-width: unset !important; }\n\n.RangePicker_rangePicker__2zWbG {\n  background-color: #fff;\n  border-radius: 8px;\n  margin-top: 8px;\n  min-width: 500px;\n  min-height: 240px;\n  display: flex;\n  align-items: flex-start;\n  color: #333; }\n\n@keyframes RangePicker_show-in__3A5ds {\n  0% {\n    opacity: 0; }\n  100% {\n    opacity: 1; } }\n";
var styles$3 = {"rangePicker":"RangePicker_rangePicker__2zWbG","show-in":"RangePicker_show-in__3A5ds"};
styleInject(css$3);

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

var RangePicker =
/*#__PURE__*/
function (_React$Component) {
  _inherits(RangePicker, _React$Component);

  var _super = _createSuper(RangePicker);

  function RangePicker(props) {
    var _this;

    _classCallCheck(this, RangePicker);

    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "getValue", function () {
      var _this$state = _this.state,
          startDate = _this$state.startDate,
          endDate = _this$state.endDate,
          comparisonStartDate = _this$state.comparisonStartDate,
          comparisonEndDate = _this$state.comparisonEndDate;
      return {
        startDate: startDate ? startDate.startOf("day").toDate() : startDate,
        endDate: endDate ? endDate.endOf("day").toDate() : startDate,
        comparisonStartDate: comparisonStartDate ? comparisonStartDate.startOf("day").toDate() : null,
        comparisonEndDate: comparisonEndDate ? comparisonEndDate.endOf("day").toDate() : null
      };
    });

    _defineProperty(_assertThisInitialized(_this), "_handleCellClick", function (day) {
      var _this$state2 = _this.state,
          selectingKey = _this$state2.selectingKey,
          compare = _this$state2.compare;
      var comparisonMaxDate = _this.props.comparisonMaxDate;

      if (selectingKey === "startDate") {
        _this.setState({
          selectingKey: "endDate",
          endDate: null
        });
      } else if (compare && selectingKey === "comparisonStartDate") {
        var _this$state3 = _this.state,
            startDate = _this$state3.startDate,
            endDate = _this$state3.endDate;
        var numDays = endDate && endDate.diff(startDate, "d");
        var compMaxDate = comparisonMaxDate && dayjs(comparisonMaxDate).isBefore(day.add(numDays, "d")) ? dayjs(comparisonMaxDate) : day.add(numDays, "d");

        _this.setState({
          selectingKey: "comparisonStartDate",
          comparisonEndDate: compMaxDate
        });
      } else {
        _this.setState({
          selectingKey: "startDate"
        });
      }

      _this.setState(_defineProperty({}, selectingKey, day));
    });

    _defineProperty(_assertThisInitialized(_this), "_setDates", function (startDate, endDate) {
      _this.setState({
        startDate: startDate,
        endDate: endDate,
        selectingKey: "startDate"
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_setComparisonDates", function (comparisonStartDate, comparisonEndDate) {
      var selectingKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this.state.selectingKey;

      _this.setState({
        comparisonStartDate: comparisonStartDate,
        comparisonEndDate: comparisonEndDate,
        selectingKey: selectingKey
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_onToggle", function (newCompare) {
      var _this$state4 = _this.state,
          startDate = _this$state4.startDate,
          endDate = _this$state4.endDate;
      var comparisonMaxDate = _this.props.comparisonMaxDate;
      var numDays = endDate && endDate.diff(startDate, "d") + 1;
      var comparisonStart = null;
      var comparisonEnd = null;

      _this.setState({
        compare: newCompare,
        selectingKey: newCompare ? "comparisonStartDate" : "startDate"
      });

      if (newCompare && startDate && endDate) {
        comparisonStart = startDate.subtract(numDays, "d"); // setting maximum selectable compare date as comparisonEndDate

        comparisonEnd = comparisonMaxDate && comparisonMaxDate < startDate.subtract(1, "d") ? comparisonMaxDate : startDate.subtract(1, "d");
      }

      _this.setState({
        comparisonStartDate: comparisonStart,
        comparisonEndDate: comparisonEnd
      });
    });

    _defineProperty(_assertThisInitialized(_this), "_getParsedValue", function () {
      var _this$props$value = _this.props.value,
          value = _this$props$value === void 0 ? {} : _this$props$value;
      var startDate = dayjs(value.startDate);
      var endDate = dayjs(value.endDate);
      var comparisonStartDate = value.comparisonStartDate ? dayjs(value.comparisonStartDate) : null;
      var comparisonEndDate = value.comparisonEndDate ? dayjs(value.comparisonEndDate) : null;
      return {
        startDate: startDate,
        endDate: endDate,
        comparisonStartDate: comparisonStartDate,
        comparisonEndDate: comparisonEndDate
      };
    });

    var _value = _objectSpread2({}, _this._getParsedValue(props.value));

    _value.compare = _value.comparisonStartDate && _value.comparisonEndDate;

    _this.setState(_value);

    _this.state = {
      startDate: _value.startDate,
      endDate: _value.endDate,
      compare: _value.compare,
      comparisonStartDate: _value.comparisonStartDate,
      comparisonEndDate: _value.comparisonEndDate,
      selectingKey: "startDate"
    };
    dayjs.extend(customParseFormat);
    return _this;
  }

  _createClass(RangePicker, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$state5 = this.state,
          startDate = _this$state5.startDate,
          endDate = _this$state5.endDate,
          comparisonStartDate = _this$state5.comparisonStartDate,
          comparisonEndDate = _this$state5.comparisonEndDate,
          compare = _this$state5.compare,
          selectingKey = _this$state5.selectingKey;
      var value = [{
        from: startDate,
        to: endDate
      }];

      if (this.props.withComparison) {
        value = value.concat({
          from: comparisonStartDate,
          to: comparisonEndDate,
          color: "#f1c40f"
        });
      }

      var _this$props = this.props,
          prefixClassName = _this$props.prefixClassName,
          numMonths = _this$props.numMonths,
          maxDate = _this$props.maxDate,
          minDate = _this$props.minDate,
          comparisonMaxDate = _this$props.comparisonMaxDate;
      return React.createElement("div", {
        className: "".concat(styles$3.rangePicker, " ").concat(prefixClassName)
      }, React.createElement("div", {
        className: "".concat(styles$3.rangePickerCalendarColumn, " ").concat(prefixClassName, "-column")
      }, React.createElement(Calendar, {
        value: value,
        startDate: startDate,
        endDate: endDate,
        onChange: this._handleCellClick,
        numMonths: numMonths,
        maxDate: maxDate,
        minDate: minDate,
        toggled: this.state.compare,
        comparisonMaxDate: comparisonMaxDate,
        prefixClassName: "".concat(prefixClassName, "-calendar")
      })), React.createElement("div", {
        className: "".concat(styles$3.rangePickerCalendarColumn, " ").concat(prefixClassName, "-column")
      }, React.createElement(Inputs, {
        selectingKey: this.state.selectingKey,
        startDate: startDate,
        endDate: endDate,
        onChange: this._setDates,
        prefixClassName: "".concat(prefixClassName, "-column-inputs"),
        onFocus: function onFocus(key) {
          _this2.setState({
            selectingKey: key
          });
        }
      }), this.props.withComparison ? React.createElement(Comparison, {
        selectingKey: selectingKey,
        startDate: startDate,
        endDate: endDate,
        comparisonStartDate: comparisonStartDate,
        comparisonEndDate: comparisonEndDate,
        toggled: compare,
        onChange: this._setComparisonDates,
        prefixClassName: "".concat(prefixClassName, "-column-comparison"),
        onToggle: this._onToggle,
        onFocus: function onFocus(key) {
          _this2.setState({
            selectingKey: key
          });
        }
      }) : null));
    }
  }]);

  return RangePicker;
}(React.Component);
RangePicker.propTypes = {
  withComparison: PropTypes.bool,
  prefixClassName: PropTypes.string,
  numMonths: PropTypes.number,
  maxDate: PropTypes.instanceOf(Date),
  minDate: PropTypes.instanceOf(Date),
  comparisonMaxDate: PropTypes.instanceOf(Date),
  value: PropTypes.shape({
    startDate: PropTypes.object,
    endDate: PropTypes.object,
    comparisonStartDate: PropTypes.object,
    comparisonEndDate: PropTypes.object
  })
};
RangePicker.defaultProps = {
  withComparison: false,
  numMonths: 2,
  prefixClassName: "",
  maxDate: null,
  minDate: null,
  comparisonMaxDate: null,
  value: {
    startDate: dayjs(),
    endDate: dayjs(),
    comparisonStartDate: null,
    comparisonEndDate: null
  }
};
RangePicker.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "getValue",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "_handleCellClick",
    "docblock": "On clicking the cell we want to start/end the range selection depending on the\ncurrent state\nSo if the current selection is startDate, we start endDate selection and so on\nWe use this.state.selectingKey to track this",
    "modifiers": [],
    "params": [{
      "name": "day"
    }],
    "returns": null,
    "description": "On clicking the cell we want to start/end the range selection depending on the\ncurrent state\nSo if the current selection is startDate, we start endDate selection and so on\nWe use this.state.selectingKey to track this"
  }, {
    "name": "_setDates",
    "docblock": "Sets the startDate and endDate\nAlso resets the month in focus to default",
    "modifiers": [],
    "params": [{
      "name": "startDate"
    }, {
      "name": "endDate"
    }],
    "returns": null,
    "description": "Sets the startDate and endDate\nAlso resets the month in focus to default"
  }, {
    "name": "_setComparisonDates",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "comparisonStartDate",
      "type": null
    }, {
      "name": "comparisonEndDate",
      "type": null
    }, {
      "name": "selectingKey",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_onToggle",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "newCompare",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_getParsedValue",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }],
  "displayName": "RangePicker",
  "props": {
    "withComparison": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": ""
    },
    "numMonths": {
      "defaultValue": {
        "value": "2",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "maxDate": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "instanceOf",
        "value": "Date"
      },
      "required": false,
      "description": ""
    },
    "minDate": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "instanceOf",
        "value": "Date"
      },
      "required": false,
      "description": ""
    },
    "comparisonMaxDate": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "instanceOf",
        "value": "Date"
      },
      "required": false,
      "description": ""
    },
    "value": {
      "defaultValue": {
        "value": "{\n  startDate: dayjs(),\n  endDate: dayjs(),\n  comparisonStartDate: null,\n  comparisonEndDate: null,\n}",
        "computed": false
      },
      "type": {
        "name": "shape",
        "value": {
          "startDate": {
            "name": "object",
            "required": false
          },
          "endDate": {
            "name": "object",
            "required": false
          },
          "comparisonStartDate": {
            "name": "object",
            "required": false
          },
          "comparisonEndDate": {
            "name": "object",
            "required": false
          }
        }
      },
      "required": false,
      "description": ""
    }
  }
};

var css$4 = ".date-picker-tooltip {\n  max-width: unset !important; }\n\n.SinglePicker_singlePicker__1VSSS {\n  background-color: #fff;\n  border-radius: 8px;\n  min-height: 240px;\n  display: flex;\n  align-items: flex-start;\n  color: #333; }\n\n@keyframes SinglePicker_show-in__1I1aQ {\n  0% {\n    opacity: 0; }\n  100% {\n    opacity: 1; } }\n";
var styles$4 = {"singlePicker":"SinglePicker_singlePicker__1VSSS","show-in":"SinglePicker_show-in__1I1aQ"};
styleInject(css$4);

function _createSuper$1(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

var SinglePicker =
/*#__PURE__*/
function (_React$Component) {
  _inherits(SinglePicker, _React$Component);

  var _super = _createSuper$1(SinglePicker);

  function SinglePicker() {
    var _this;

    _classCallCheck(this, SinglePicker);

    _this = _super.call(this);

    _defineProperty(_assertThisInitialized(_this), "_handleCellClick", function (day) {
      _this.props.onChange(day.toDate());
    });

    _defineProperty(_assertThisInitialized(_this), "_getParsedValue", function () {
      var _this$props$value = _this.props.value,
          value = _this$props$value === void 0 ? {} : _this$props$value;
      return dayjs(value);
    });

    dayjs.extend(customParseFormat);
    return _this;
  }

  _createClass(SinglePicker, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          value = _this$props.value,
          prefixClassName = _this$props.prefixClassName,
          maxDate = _this$props.maxDate,
          minDate = _this$props.minDate;

      var date = this._getParsedValue(value);

      return React.createElement("div", {
        className: "".concat(styles$4.singlePicker, " ").concat(prefixClassName)
      }, React.createElement(Calendar, {
        prefixClassName: "".concat(prefixClassName, "-calendar"),
        value: [{
          from: date,
          to: date
        }],
        onChange: this._handleCellClick,
        numMonths: 1,
        maxDate: maxDate,
        minDate: minDate
      }));
    }
    /**
     * On clicking the cell we want to start/end the range selection depending on the
     * current state
     * So if the current selection is startDate, we start endDate selection and so on
     * We use this.state.selectingKey to track this
     */

  }]);

  return SinglePicker;
}(React.Component);
SinglePicker.propTypes = {
  onChange: PropTypes.func,
  value: PropTypes.object,
  prefixClassName: PropTypes.string,
  maxDate: PropTypes.string,
  minDate: PropTypes.string
};
SinglePicker.defaultProps = {
  onChange: function onChange() {},
  value: dayjs(),
  prefixClassName: "",
  maxDate: undefined,
  minDate: undefined
};
SinglePicker.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "_handleCellClick",
    "docblock": "On clicking the cell we want to start/end the range selection depending on the\ncurrent state\nSo if the current selection is startDate, we start endDate selection and so on\nWe use this.state.selectingKey to track this",
    "modifiers": [],
    "params": [{
      "name": "day"
    }],
    "returns": null,
    "description": "On clicking the cell we want to start/end the range selection depending on the\ncurrent state\nSo if the current selection is startDate, we start endDate selection and so on\nWe use this.state.selectingKey to track this"
  }, {
    "name": "_getParsedValue",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }],
  "displayName": "SinglePicker",
  "props": {
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": ""
    },
    "value": {
      "defaultValue": {
        "value": "dayjs()",
        "computed": true
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": ""
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "maxDate": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    },
    "minDate": {
      "defaultValue": {
        "value": "undefined",
        "computed": true
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": ""
    }
  }
};

var css$5 = ".Date_date__2Kopj {\n  position: relative; }\n  .Date_dateTime__2Dt6J > div {\n    border-radius: 0;\n    padding: 12px 14px;\n    padding-right: 16px; }\n  .Date_dateTime__2Dt6J .Date_TimePickerInput__timePickerInput___qghY7__2deNi {\n    flex: 1; }\n\n.Date_dateLabel__vFla2 {\n  display: block;\n  color: #666;\n  font-size: 12px;\n  font-weight: 600;\n  margin-bottom: 6px;\n  margin-left: 2px;\n  transition: 0.2s ease-out; }\n  .Date_dateLabel__vFla2.Date_focused__3UXOx {\n    color: #124fa0; }\n\n.Date_dateInputWrapper__1NjtW {\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  overflow: hidden;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #fff;\n  padding: 4px 8px;\n  box-sizing: border-box;\n  cursor: pointer;\n  outline: none;\n  transition: 0.2s ease-out; }\n  .Date_dateInputWrapper__1NjtW.Date_focused__3UXOx {\n    border-color: #124fa0; }\n  .Date_dateInputWrapper__1NjtW.Date_disabled__2Y2C5 {\n    pointer-events: none;\n    background-color: #eee; }\n\n.Date_dateInput__2XBzx {\n  border: none;\n  outline: none;\n  width: 100%;\n  font-size: 12px;\n  white-space: nowrap; }\n  .Date_dateInput__2XBzx span {\n    opacity: 0.3; }\n\n.Date_dateError__12G1Y .Date_dateLabel__vFla2 {\n  color: #f44336; }\n\n.Date_dateError__12G1Y .Date_dateInputWrapper__1NjtW {\n  border-color: #f44336;\n  background-color: rgba(244, 67, 54, 0.05); }\n\n.Date_dateInputSubtext__wfzLF {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 4px;\n  font-size: 12px;\n  position: absolute;\n  bottom: 0;\n  transform: translate3d(0, 100%, 0);\n  padding-top: 4px; }\n\n.Date_dateInputSubtextError__rrvTj {\n  color: #ff0c0c;\n  opacity: 0.8; }\n\n.Date_datePickrInput__1V1L3 {\n  position: absolute;\n  left: 0;\n  bottom: 0; }\n\n.Date_dateInputZeroState__25bPG {\n  font-family: \"Roboto\";\n  display: block;\n  padding: 16px;\n  font-size: 14px;\n  opacity: 0.4; }\n";
var styles$5 = {"date":"Date_date__2Kopj","dateTime":"Date_dateTime__2Dt6J","TimePickerInput__timePickerInput___qghY7":"Date_TimePickerInput__timePickerInput___qghY7__2deNi","dateLabel":"Date_dateLabel__vFla2","focused":"Date_focused__3UXOx","dateInputWrapper":"Date_dateInputWrapper__1NjtW","disabled":"Date_disabled__2Y2C5","dateInput":"Date_dateInput__2XBzx","dateError":"Date_dateError__12G1Y","dateInputSubtext":"Date_dateInputSubtext__wfzLF","dateInputSubtextError":"Date_dateInputSubtextError__rrvTj","datePickrInput":"Date_datePickrInput__1V1L3","dateInputZeroState":"Date_dateInputZeroState__25bPG"};
styleInject(css$5);

function _createSuper$2(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date$1.prototype.toString.call(Reflect.construct(Date$1, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

var Date$1 =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Date, _React$Component);

  var _super = _createSuper$2(Date);

  function Date() {
    var _this;

    _classCallCheck(this, Date);

    _this = _super.call(this);

    _defineProperty(_assertThisInitialized(_this), "_DOMNode", React.createRef());

    _defineProperty(_assertThisInitialized(_this), "rangeComparisonRef", React.createRef());

    _defineProperty(_assertThisInitialized(_this), "getToolTipPosition", function () {
      var attachTo = _this.props.attachTo;

      if (attachTo && attachTo.current && _this._DOMNode && _this._DOMNode.current) {
        var attachToElementHeight = attachTo.current.getBoundingClientRect().height;

        var _this$_DOMNode$curren = _this._DOMNode.current.getBoundingClientRect(),
            bottom = _this$_DOMNode$curren.bottom;

        if (bottom + 270 > attachToElementHeight) {
          // 270 is height of calendar
          return "TOP";
        }
      }
    });

    _defineProperty(_assertThisInitialized(_this), "_getParsedDate", function () {
      var _this$props = _this.props,
          withRange = _this$props.withRange,
          value = _this$props.value;
      var format = "DD MMM, YYYY";
      var actualValue = _this.state.date || value;

      if (withRange) {
        var _this$_getParsedValue = _this._getParsedValueFromObject(actualValue),
            startDate = _this$_getParsedValue.startDate,
            endDate = _this$_getParsedValue.endDate;

        if (!startDate.isValid() || !endDate.isValid()) return "";
        return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
      }

      var date = _this._getParsedValueFromDate(actualValue);

      if (!date.isValid()) return "Invalid Date";
      if (_this.props.withTime) return "".concat(date.format("DD/MM/YYYY hh:mm A"));
      return "".concat(date.format("DD MMMM, YYYY"));
    });

    _defineProperty(_assertThisInitialized(_this), "_getParsedValueFromObject", function () {
      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.value;
      var startDate = dayjs(value.startDate);
      var endDate = dayjs(value.endDate);
      var comparisonStartDate = value.comparisonStartDate ? dayjs(value.comparisonStartDate) : null;
      var comparisonEndDate = value.comparisonEndDate ? dayjs(value.comparisonEndDate) : null;
      return {
        startDate: startDate,
        endDate: endDate,
        comparisonStartDate: comparisonStartDate,
        comparisonEndDate: comparisonEndDate
      };
    });

    _defineProperty(_assertThisInitialized(_this), "_getParsedValueFromDate", function () {
      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props.value;
      if (!value) return dayjs();
      return dayjs(value);
    });

    _defineProperty(_assertThisInitialized(_this), "_handleChange", function (date) {
      var newDate = date.toDate ? date.toDate() : date;
      var _this$props2 = _this.props,
          maxDate = _this$props2.maxDate,
          minDate = _this$props2.minDate;
      if (maxDate && dayjs(newDate).isAfter(maxDate)) return _this.setState({
        date: maxDate
      });
      if (minDate && dayjs(newDate).isBefore(minDate)) return _this.setState({
        date: minDate
      });

      if (!_this.props.withTime) {
        _this.setState({
          active: false,
          focused: false,
          date: newDate
        });

        _this.props.onChange(newDate);
      } else {
        _this.setState({
          date: newDate
        });
      }
    });

    _defineProperty(_assertThisInitialized(_this), "toggleDate", function () {
      var disabled = _this.props.disabled;
      if (!disabled) _this.setState(function (state) {
        return {
          active: !state.active,
          focused: !state.active
        };
      });
    });

    _defineProperty(_assertThisInitialized(_this), "closeDate", function () {
      _this.setState({
        active: false,
        focused: false
      });

      if (_this.rangeComparisonRef.current) {
        _this.props.onChange(_this.rangeComparisonRef.current.getValue());
      } else if (_this.state.date) {
        _this.props.onChange(_this.state.date);
      }
    });

    _this.state = {
      active: false,
      focused: false,
      date: undefined
    };
    return _this;
  }

  _createClass(Date, [{
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          className = _this$props3.className,
          error = _this$props3.error,
          disabled = _this$props3.disabled,
          maxDate = _this$props3.maxDate,
          minDate = _this$props3.minDate,
          comparisonMaxDate = _this$props3.comparisonMaxDate,
          comparisonMinDate = _this$props3.comparisonMinDate,
          withRange = _this$props3.withRange,
          withComparison = _this$props3.withComparison,
          value = _this$props3.value,
          prefixClassName = _this$props3.prefixClassName,
          numMonths = _this$props3.numMonths,
          withTime = _this$props3.withTime;
      var errorClassName = error ? styles$5.dateError : "";
      var disabledClassName = disabled ? styles$5.disabled : "";
      return React.createElement("div", {
        "data-testid": "date",
        className: "".concat(styles$5.date, " ").concat(errorClassName, " ").concat(disabledClassName, " ").concat(className, " ").concat(prefixClassName)
      }, this.renderLabel(), this.renderInput(), React.createElement(Tooltip, {
        onClose: this.closeDate,
        attachTo: this._DOMNode,
        active: this.state.active,
        offset: this.props.offset,
        className: "date-picker-tooltip",
        position: this.props.position || this.getToolTipPosition(),
        prefixClassName: "".concat(prefixClassName, "-tooltip")
      }, withRange ? React.createElement(RangePicker, {
        ref: this.rangeComparisonRef,
        value: value,
        maxDate: maxDate,
        minDate: minDate,
        active: this.state.active,
        comparisonMaxDate: comparisonMaxDate,
        comparisonMinDate: comparisonMinDate,
        withComparison: withComparison,
        prefixClassName: "".concat(prefixClassName, "-picker"),
        numMonths: numMonths
      }) : React.createElement(SinglePicker, {
        value: this.state.date || value,
        onChange: this._handleChange,
        maxDate: maxDate,
        minDate: minDate,
        prefixClassName: "".concat(prefixClassName, "-picker"),
        numMonths: numMonths
      }), withTime ? React.createElement("div", {
        className: "".concat(styles$5.dateTime, " ").concat(prefixClassName, "-time")
      }, React.createElement(TimePicker, {
        prefixClassName: "".concat(prefixClassName, "-time-picker"),
        value: dayjs(this.state.date || value),
        onChange: this._handleChange
      })) : null));
    }
  }, {
    key: "renderLabel",
    value: function renderLabel() {
      var _this$props4 = this.props,
          prefixClassName = _this$props4.prefixClassName,
          error = _this$props4.error,
          label = _this$props4.label;
      if (!label) return null;
      return React.createElement(Label, {
        focused: this.state.focused,
        error: error,
        className: "".concat(prefixClassName, "-label")
      }, label);
    }
  }, {
    key: "renderInput",
    value: function renderInput() {
      var _this$state = this.state,
          focused = _this$state.focused,
          active = _this$state.active;
      var _this$props5 = this.props,
          placeholder = _this$props5.placeholder,
          prefixClassName = _this$props5.prefixClassName,
          onFocus = _this$props5.onFocus,
          onBlur = _this$props5.onBlur,
          disabled = _this$props5.disabled;

      var parsedValue = this._getParsedDate();

      return React.createElement(TextInput, {
        className: "".concat(prefixClassName, "-input"),
        innerRef: this._DOMNode,
        onKeyDown: this._handleKeyDown,
        onFocus: onFocus,
        onBlur: onBlur,
        onMouseDown: this.toggleDate,
        focused: focused,
        active: active,
        value: parsedValue,
        placeholder: placeholder,
        editable: false,
        disabled: disabled,
        postfixComponent: React.createElement(Icon, {
          src: AngleDownIcon
        })
      });
    }
  }]);

  return Date;
}(React.Component);

Date$1.propTypes = {
  /** If you want to attach the input tooltip to your a custom input */
  attachTo: PropTypes.object,

  /** The classname to appended to the outermost element */
  className: PropTypes.string,

  /** If the input is disabled (non-editable) */
  disabled: PropTypes.bool,

  /** If the input has an error. */
  error: PropTypes.bool,

  /** The prefix classname appended to all elements */
  prefixClassName: PropTypes.string,

  /** Label text */
  label: PropTypes.string,

  /** Input tooltip offset ({x: 0, y: 0}) */
  offset: PropTypes.object,

  /** onBlur callback */
  onBlur: PropTypes.func,

  /** onChange callback */
  onChange: PropTypes.func,

  /** onFocus callback */
  onFocus: PropTypes.func,

  /** Input placeholder */
  placeholder: PropTypes.string,

  /** Tooltip position (TOP/BOTTOM) */
  position: PropTypes.string,

  /** The date */
  value: PropTypes.string,

  /** Max selectable date */
  maxDate: PropTypes.instanceOf(Date$1),

  /** Min selectable date */
  minDate: PropTypes.instanceOf(Date$1),

  /** Max selectable comparison date */
  comparisonMaxDate: PropTypes.instanceOf(Date$1),

  /** Min selectable comparison date */
  comparisonMinDate: PropTypes.instanceOf(Date$1),

  /** With range support (From Date -> To Date) */
  withRange: PropTypes.bool,

  /** With Comparison support (comparing 2 ranges) */
  withComparison: PropTypes.bool,

  /** If whether to show the time picker or not */
  withTime: PropTypes.bool,

  /** Number of months to show at a time */
  numMonths: PropTypes.number
};
Date$1.defaultProps = {
  onFocus: function onFocus() {},
  onBlur: function onBlur() {},
  onChange: function onChange() {},
  label: "",
  className: "",
  value: "",
  placeholder: "",
  error: false,
  disabled: false,
  offset: null,
  position: null,
  attachTo: null,
  maxDate: null,
  minDate: null,
  comparisonMaxDate: null,
  comparisonMinDate: null,
  numMonths: 1,
  withTime: false
};
Date$1.classNames = {
  $prefix: "Outermost element",
  "$prefix-label": "Label",
  "$prefix-input": "Input",
  "$prefix-tooltip": "Tooltip wrapping the picker",
  "$prefix-picker": "The div wrapping the picker inside the tooltip",
  "$prefix-time": "The div wrapping the time picker inside the tooltip",
  "$prefix-time-picker": "The timepicker inside the tooltip",
  "$prefix-picker-calendar": "Calendar element",
  "$prefix-picker-calendar-arrow-left": "Calendar arrow left",
  "$prefix-picker-calendar-arrow-right": "Calendar arrow right",
  "$prefix-picker-calendar-calendar": "The calendar month",
  "$prefix-picker-calendar-calendar-header": "The calendar header",
  "$prefix-picker-calendar-calendar-header-text": "The calendar header's text (Month)",
  "$prefix-picker-calendar-labels": "The wrapper for labels for the days",
  "$prefix-picker-calendar-label": "The labels for the days (Sun, Mon, Tue, etc.)",
  "$prefix-picker-calendar-calendar-grid": "The main calendar grid div",
  "$prefix-picker-calendar-calendar-grid-row": "Each row of the calendar grid",
  "$prefix-picker-calendar-calendar-grid-row-item": "Each item of the grid (the square)",
  "$prefix-picker-calendar-calendar-grid-row-item-selected": "selected grid row item",
  "$prefix-picker-calendar-grid-row-item-text": "The label for each grid item (the day)",
  "$prefix-picker-column": "The column for a range picker",
  "$prefix-picker-column-inputs": "The inputs wrapper",
  "$prefix-picker-column-comparison": "The comparison wrapper",
  "$prefix-picker-column-inputs-shortcuts": "The button shortcuts wrapper",
  "$prefix-picker-column-inputs-shortcuts-button": "The button shortcut",
  "$prefix-picker-column-inputs-label": "The label class",
  "$prefix-picker-column-inputs-hint": "The hint class",
  "$prefix-picker-column-inputs-input-items": "The items class",
  "$prefix-picker-column-inputs-input-item": "The input element",
  "$prefix-picker-column-comparison-shortcuts": "The button shortcuts wrapper",
  "$prefix-picker-column-comparison-shortcuts-button": "The button shortcut",
  "$prefix-picker-column-comparison-toggle": "Comparison toggle",
  "$prefix-picker-column-comparison-input-items": "Comparison inputs wrapper",
  "$prefix-picker-column-comparison-input-item": "Comparison input"
};
Date$1.__docgenInfo = {
  "description": "",
  "methods": [{
    "name": "getToolTipPosition",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "renderLabel",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "renderInput",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "_getParsedDate",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "_getParsedValueFromObject",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "value",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_getParsedValueFromDate",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "value",
      "type": null
    }],
    "returns": null
  }, {
    "name": "_handleChange",
    "docblock": null,
    "modifiers": [],
    "params": [{
      "name": "date",
      "type": null
    }],
    "returns": null
  }, {
    "name": "toggleDate",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }, {
    "name": "closeDate",
    "docblock": null,
    "modifiers": [],
    "params": [],
    "returns": null
  }],
  "displayName": "Date",
  "props": {
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onFocus callback"
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onBlur callback"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "onChange callback"
    },
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label text"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to appended to the outermost element"
    },
    "value": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The date"
    },
    "placeholder": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Input placeholder"
    },
    "error": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If the input has an error."
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If the input is disabled (non-editable)"
    },
    "offset": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": "Input tooltip offset ({x: 0, y: 0})"
    },
    "position": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Tooltip position (TOP/BOTTOM)"
    },
    "attachTo": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "object"
      },
      "required": false,
      "description": "If you want to attach the input tooltip to your a custom input"
    },
    "maxDate": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "instanceOf",
        "value": "Date"
      },
      "required": false,
      "description": "Max selectable date"
    },
    "minDate": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "instanceOf",
        "value": "Date"
      },
      "required": false,
      "description": "Min selectable date"
    },
    "comparisonMaxDate": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "instanceOf",
        "value": "Date"
      },
      "required": false,
      "description": "Max selectable comparison date"
    },
    "comparisonMinDate": {
      "defaultValue": {
        "value": "null",
        "computed": false
      },
      "type": {
        "name": "instanceOf",
        "value": "Date"
      },
      "required": false,
      "description": "Min selectable comparison date"
    },
    "numMonths": {
      "defaultValue": {
        "value": "1",
        "computed": false
      },
      "type": {
        "name": "number"
      },
      "required": false,
      "description": "Number of months to show at a time"
    },
    "withTime": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "If whether to show the time picker or not"
    },
    "prefixClassName": {
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The prefix classname appended to all elements"
    },
    "withRange": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "With range support (From Date -> To Date)"
    },
    "withComparison": {
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "With Comparison support (comparing 2 ranges)"
    }
  }
};

export default Date$1;
