@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/datePicker/datePicker.js

@@ -1,46 +1,32 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DateUtilities = undefined;
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _templateObject = _taggedTemplateLiteral(['\n  & div.form-input > input {\n    display: ', ';\n  }\n\n  .form-input input {\n    width: 100%;\n    box-sizing: border-box;\n\n    background: ', ';\n\n    border: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    font-family: \'SFUIText-Medium\';\n    color: ', ';\n    cursor: ', ';\n    pointer-events: ', ';\n    font-size: 14px;\n    padding: 10px 20px 4px 0px;\n    display: block;\n\n    &:disabled:hover {\n      border-color: ', ';\n    }\n    &:disabled {\n      border-color: ', ';\n      color: ', ';\n    }\n    &:focus {\n      outline: none;\n    }\n    &::placeholder {\n      color: ', ';\n      opacity: ', ';\n      transition: 0.2s ease all;\n    }\n    &:focus::placeholder {\n      color: ', ';\n\n      opacity: ', ';\n    }\n  }\n\n  .form-input {\n    border-bottom: 1px solid\n      ', ';\n\n    &:hover {\n      border-color: ', ';\n    }\n    position: relative;\n    margin-top: 20px;\n    display: flex;\n    align-items: center;\n    .calender-icon {\n      cursor: pointer;\n      path {\n        fill-rule: evenodd;\n        clip-rule: evenodd;\n      }\n    }\n\n    .clear-icon {\n      position: absolute;\n      right: 0px;\n      bottom: 6px;\n      cursor: pointer;\n      path {\n        fill: #ef5350;\n      }\n    }\n  }\n  .form-input label {\n    color: ', ';\n    font-size: 14px;\n    font-family: \'SFUIText-Regular\';\n    position: ', ';\n    pointer-events: none;\n    text-transform: none;\n    left: 0px;\n    top: ', ';\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n\n  .form-input label.floaton {\n    top: ', ';\n    left: 0px;\n    font-size: 10px;\n    color: ', ';\n    text-transform: capitalize;\n  }\n\n  /* ======Date picker====== */\n\n  &.ardp-date-picker {\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n    box-sizing: border-box;\n    position: relative;\n  }\n  &.ardp-date-picker * {\n    box-sizing: border-box;\n  }\n  &.ardp-date-picker div.calendar {\n    position: ', ';\n    z-index: ', ';\n    background: ', ';\n    width: 300px;\n    border-radius: 0px;\n    height: auto;\n    overflow: hidden;\n    border: 1px solid\n      ', ';\n  }\n\n  &.ardp-date-picker div.calendar:after,\n  &.ardp-date-picker div.calendar:before {\n    display: table;\n    content: \' \';\n    box-sizing: border-box;\n  }\n\n  &.ardp-date-picker div.calendar.calendar-show {\n    visibility: visible;\n    opacity: 1;\n    transition: opacity 100ms linear;\n  }\n  &.ardp-date-picker div.calendar.calendar-hide {\n    visibility: ', ';\n    opacity: ', ';\n    transition: visibility 0s 100ms, opacity 100ms linear;\n  }\n\n  &.ardp-date-picker div.calendar div.month-header {\n    float: left;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    padding: 10px;\n    border-bottom: 1px solid\n      ', ';\n  }\n  &.ardp-date-picker div.calendar div.month-header > span > i {\n    cursor: pointer;\n    padding: 6px;\n    border-radius: 50%;\n    width: 25px;\n    text-align: center;\n    height: 25px;\n    border-radius: 18px;\n    background-color: ', ';\n  }\n  &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n    path {\n      stroke: ', ';\n    }\n  }\n  &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n    path {\n      fill: transparent;\n    }\n  }\n  &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n    color: ', ';\n    width: 150px;\n    text-align: center;\n  }\n  &.ardp-date-picker div.calendar div.month-header > span.month-header-text > .month-text {\n    font-family: \'SFUIText-Medium\';\n    color: ', ';\n    text-transform: uppercase;\n  }\n\n  &.ardp-date-picker div.calendar div.week-header {\n    float: left;\n    width: 100%;\n    display: block;\n    padding: 10px 3px;\n  }\n  &.ardp-date-picker div.calendar div.week-header > span {\n    float: left;\n    width: 14.285714285714286%;\n    font-size: 14px;\n    text-transform: uppercase;\n    color: ', ';\n    text-align: center;\n  }\n  &.ardp-date-picker div.calendar div.weeks {\n    float: left;\n    width: 100%;\n    overflow: hidden;\n    position: relative;\n    padding: 5px 0px;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div {\n    width: 300px;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.current {\n    left: 0;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.other {\n    left: 300px;\n    position: absolute;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.other.right {\n    left: -300px;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.sliding {\n    transition: transform 250ms ease;\n    -webkit-transition: -webkit-transform 250ms ease;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n    transform: translate3d(-300px, 0, 0);\n    -webkit-transform: translate3d(-300px, 0, 0);\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n    transform: translate3d(300px, 0, 0);\n    -webkit-transform: translate3d(300px, 0, 0);\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week {\n    float: left;\n    width: 100%;\n    margin: 5px 0px;\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day {\n    float: left;\n    width: 14.285714285714286%;\n    font-size: 14px;\n    text-align: center;\n    /* padding: 2px 0px; */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n    //padding: 11px 0px 5px;\n    display: inline-block;\n    border-radius: 50%;\n    height: 30px;\n    width: 30px;\n    text-align: center;\n    border: 1px solid transparent;\n    background: ', ';\n    color: ', ';\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span:hover {\n    background: ', ';\n    cursor: pointer;\n    color: ', ';\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month > span {\n    color: ', ';\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span:hover {\n    color: ', ';\n    cursor: not-allowed;\n    background: ', ';\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month.disabled > span {\n    color: ', ';\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n    border: 1px none\n      ', ';\n    color: ', ';\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.today.disabled > span {\n    background: ', ';\n    border: 1px solid transparent;\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.today > span:hover {\n    background: ', ';\n    color: ', ';\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span:hover {\n    background: ', ';\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-start {\n    background: ', ';\n\n    border-top-left-radius: 30px;\n    border-bottom-left-radius: 30px;\n\n    & > span {\n      background: transparent;\n      border-top-right-radius: 0px;\n      border-bottom-right-radius: 0px;\n    }\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-end {\n    background: ', ';\n\n    border-top-right-radius: 30px;\n    border-bottom-right-radius: 30px;\n\n    & > span {\n      background: transparent;\n      border-top-left-radius: 0px;\n      border-bottom-left-radius: 0px;\n    }\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n    background: ', ';\n    & > span {\n      background: transparent;\n      color: #fff;\n    }\n  }\n'], ['\n  & div.form-input > input {\n    display: ', ';\n  }\n\n  .form-input input {\n    width: 100%;\n    box-sizing: border-box;\n\n    background: ', ';\n\n    border: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    font-family: \'SFUIText-Medium\';\n    color: ', ';\n    cursor: ', ';\n    pointer-events: ', ';\n    font-size: 14px;\n    padding: 10px 20px 4px 0px;\n    display: block;\n\n    &:disabled:hover {\n      border-color: ', ';\n    }\n    &:disabled {\n      border-color: ', ';\n      color: ', ';\n    }\n    &:focus {\n      outline: none;\n    }\n    &::placeholder {\n      color: ', ';\n      opacity: ', ';\n      transition: 0.2s ease all;\n    }\n    &:focus::placeholder {\n      color: ', ';\n\n      opacity: ', ';\n    }\n  }\n\n  .form-input {\n    border-bottom: 1px solid\n      ', ';\n\n    &:hover {\n      border-color: ', ';\n    }\n    position: relative;\n    margin-top: 20px;\n    display: flex;\n    align-items: center;\n    .calender-icon {\n      cursor: pointer;\n      path {\n        fill-rule: evenodd;\n        clip-rule: evenodd;\n      }\n    }\n\n    .clear-icon {\n      position: absolute;\n      right: 0px;\n      bottom: 6px;\n      cursor: pointer;\n      path {\n        fill: #ef5350;\n      }\n    }\n  }\n  .form-input label {\n    color: ', ';\n    font-size: 14px;\n    font-family: \'SFUIText-Regular\';\n    position: ', ';\n    pointer-events: none;\n    text-transform: none;\n    left: 0px;\n    top: ', ';\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n\n  .form-input label.floaton {\n    top: ', ';\n    left: 0px;\n    font-size: 10px;\n    color: ', ';\n    text-transform: capitalize;\n  }\n\n  /* ======Date picker====== */\n\n  &.ardp-date-picker {\n    font-size: 16px;\n    font-family: \'SFUIText-Regular\';\n    box-sizing: border-box;\n    position: relative;\n  }\n  &.ardp-date-picker * {\n    box-sizing: border-box;\n  }\n  &.ardp-date-picker div.calendar {\n    position: ', ';\n    z-index: ', ';\n    background: ', ';\n    width: 300px;\n    border-radius: 0px;\n    height: auto;\n    overflow: hidden;\n    border: 1px solid\n      ', ';\n  }\n\n  &.ardp-date-picker div.calendar:after,\n  &.ardp-date-picker div.calendar:before {\n    display: table;\n    content: \' \';\n    box-sizing: border-box;\n  }\n\n  &.ardp-date-picker div.calendar.calendar-show {\n    visibility: visible;\n    opacity: 1;\n    transition: opacity 100ms linear;\n  }\n  &.ardp-date-picker div.calendar.calendar-hide {\n    visibility: ', ';\n    opacity: ', ';\n    transition: visibility 0s 100ms, opacity 100ms linear;\n  }\n\n  &.ardp-date-picker div.calendar div.month-header {\n    float: left;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    padding: 10px;\n    border-bottom: 1px solid\n      ', ';\n  }\n  &.ardp-date-picker div.calendar div.month-header > span > i {\n    cursor: pointer;\n    padding: 6px;\n    border-radius: 50%;\n    width: 25px;\n    text-align: center;\n    height: 25px;\n    border-radius: 18px;\n    background-color: ', ';\n  }\n  &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n    path {\n      stroke: ', ';\n    }\n  }\n  &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n    path {\n      fill: transparent;\n    }\n  }\n  &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n    color: ', ';\n    width: 150px;\n    text-align: center;\n  }\n  &.ardp-date-picker div.calendar div.month-header > span.month-header-text > .month-text {\n    font-family: \'SFUIText-Medium\';\n    color: ', ';\n    text-transform: uppercase;\n  }\n\n  &.ardp-date-picker div.calendar div.week-header {\n    float: left;\n    width: 100%;\n    display: block;\n    padding: 10px 3px;\n  }\n  &.ardp-date-picker div.calendar div.week-header > span {\n    float: left;\n    width: 14.285714285714286%;\n    font-size: 14px;\n    text-transform: uppercase;\n    color: ', ';\n    text-align: center;\n  }\n  &.ardp-date-picker div.calendar div.weeks {\n    float: left;\n    width: 100%;\n    overflow: hidden;\n    position: relative;\n    padding: 5px 0px;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div {\n    width: 300px;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.current {\n    left: 0;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.other {\n    left: 300px;\n    position: absolute;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.other.right {\n    left: -300px;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.sliding {\n    transition: transform 250ms ease;\n    -webkit-transition: -webkit-transform 250ms ease;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n    transform: translate3d(-300px, 0, 0);\n    -webkit-transform: translate3d(-300px, 0, 0);\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n    transform: translate3d(300px, 0, 0);\n    -webkit-transform: translate3d(300px, 0, 0);\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week {\n    float: left;\n    width: 100%;\n    margin: 5px 0px;\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day {\n    float: left;\n    width: 14.285714285714286%;\n    font-size: 14px;\n    text-align: center;\n    /* padding: 2px 0px; */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n    //padding: 11px 0px 5px;\n    display: inline-block;\n    border-radius: 50%;\n    height: 30px;\n    width: 30px;\n    text-align: center;\n    border: 1px solid transparent;\n    background: ', ';\n    color: ', ';\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span:hover {\n    background: ', ';\n    cursor: pointer;\n    color: ', ';\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month > span {\n    color: ', ';\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span:hover {\n    color: ', ';\n    cursor: not-allowed;\n    background: ', ';\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month.disabled > span {\n    color: ', ';\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n    border: 1px none\n      ', ';\n    color: ', ';\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.today.disabled > span {\n    background: ', ';\n    border: 1px solid transparent;\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.today > span:hover {\n    background: ', ';\n    color: ', ';\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span:hover {\n    background: ', ';\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-start {\n    background: ', ';\n\n    border-top-left-radius: 30px;\n    border-bottom-left-radius: 30px;\n\n    & > span {\n      background: transparent;\n      border-top-right-radius: 0px;\n      border-bottom-right-radius: 0px;\n    }\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-end {\n    background: ', ';\n\n    border-top-right-radius: 30px;\n    border-bottom-right-radius: 30px;\n\n    & > span {\n      background: transparent;\n      border-top-left-radius: 0px;\n      border-bottom-left-radius: 0px;\n    }\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n    background: ', ';\n    & > span {\n      background: transparent;\n      color: #fff;\n    }\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  color: ', ';\n  font-family: \'SFUIText-Medium\' !important;\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n'], ['\n  color: ', ';\n  font-family: \'SFUIText-Medium\' !important;\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _icon = require('../icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-var _tokens = require('@desynova-digital/tokens');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+exports["default"] = exports.DateUtilities = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _tokens = require("@desynova-digital/tokens");
+var _templateObject, _templateObject2;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 //'@desynova-digital/tokens'
 
-var DatePickerInput = _styledComponents2.default.div(_templateObject, function (props) {
+var DatePickerInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  & div.form-input > input {\n    display: ", ";\n  }\n\n  .form-input input {\n    width: 100%;\n    box-sizing: border-box;\n\n    background: ", ";\n\n    border: none;\n    border-radius: 0px;\n    -webkit-appearance: none;\n\n    font-family: 'SFUIText-Medium';\n    color: ", ";\n    cursor: ", ";\n    pointer-events: ", ";\n    font-size: 14px;\n    padding: 10px 20px 4px 0px;\n    display: block;\n\n    &:disabled:hover {\n      border-color: ", ";\n    }\n    &:disabled {\n      border-color: ", ";\n      color: ", ";\n    }\n    &:focus {\n      outline: none;\n    }\n    &::placeholder {\n      color: ", ";\n      opacity: ", ";\n      transition: 0.2s ease all;\n    }\n    &:focus::placeholder {\n      color: ", ";\n\n      opacity: ", ";\n    }\n  }\n\n  .form-input {\n    border-bottom: 1px solid\n      ", ";\n\n    &:hover {\n      border-color: ", ";\n    }\n    position: relative;\n    margin-top: 20px;\n    display: flex;\n    align-items: center;\n    .calender-icon {\n      cursor: pointer;\n      path {\n        fill-rule: evenodd;\n        clip-rule: evenodd;\n      }\n    }\n\n    .clear-icon {\n      position: absolute;\n      right: 0px;\n      bottom: 6px;\n      cursor: pointer;\n      path {\n        fill: #ef5350;\n      }\n    }\n  }\n  .form-input label {\n    color: ", ";\n    font-size: 14px;\n    font-family: 'SFUIText-Regular';\n    position: ", ";\n    pointer-events: none;\n    text-transform: none;\n    left: 0px;\n    top: ", ";\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n\n  .form-input label.floaton {\n    top: ", ";\n    left: 0px;\n    font-size: 10px;\n    color: ", ";\n    text-transform: capitalize;\n  }\n\n  /* ======Date picker====== */\n\n  &.ardp-date-picker {\n    font-size: 16px;\n    font-family: 'SFUIText-Regular';\n    box-sizing: border-box;\n    position: relative;\n  }\n  &.ardp-date-picker * {\n    box-sizing: border-box;\n  }\n  &.ardp-date-picker div.calendar {\n    position: ", ";\n    z-index: ", ";\n    background: ", ";\n    width: 300px;\n    border-radius: 0px;\n    height: auto;\n    overflow: hidden;\n    border: 1px solid\n      ", ";\n  }\n\n  &.ardp-date-picker div.calendar:after,\n  &.ardp-date-picker div.calendar:before {\n    display: table;\n    content: ' ';\n    box-sizing: border-box;\n  }\n\n  &.ardp-date-picker div.calendar.calendar-show {\n    visibility: visible;\n    opacity: 1;\n    transition: opacity 100ms linear;\n  }\n  &.ardp-date-picker div.calendar.calendar-hide {\n    visibility: ", ";\n    opacity: ", ";\n    transition: visibility 0s 100ms, opacity 100ms linear;\n  }\n\n  &.ardp-date-picker div.calendar div.month-header {\n    float: left;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: baseline;\n    padding: 10px;\n    border-bottom: 1px solid\n      ", ";\n  }\n  &.ardp-date-picker div.calendar div.month-header > span > i {\n    cursor: pointer;\n    padding: 6px;\n    border-radius: 50%;\n    width: 25px;\n    text-align: center;\n    height: 25px;\n    border-radius: 18px;\n    background-color: ", ";\n  }\n  &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n    path {\n      stroke: ", ";\n    }\n  }\n  &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n    path {\n      fill: transparent;\n    }\n  }\n  &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n    color: ", ";\n    width: 150px;\n    text-align: center;\n  }\n  &.ardp-date-picker div.calendar div.month-header > span.month-header-text > .month-text {\n    font-family: 'SFUIText-Medium';\n    color: ", ";\n    text-transform: uppercase;\n  }\n\n  &.ardp-date-picker div.calendar div.week-header {\n    float: left;\n    width: 100%;\n    display: block;\n    padding: 10px 3px;\n  }\n  &.ardp-date-picker div.calendar div.week-header > span {\n    float: left;\n    width: 14.285714285714286%;\n    font-size: 14px;\n    text-transform: uppercase;\n    color: ", ";\n    text-align: center;\n  }\n  &.ardp-date-picker div.calendar div.weeks {\n    float: left;\n    width: 100%;\n    overflow: hidden;\n    position: relative;\n    padding: 5px 0px;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div {\n    width: 300px;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.current {\n    left: 0;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.other {\n    left: 300px;\n    position: absolute;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.other.right {\n    left: -300px;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.sliding {\n    transition: transform 250ms ease;\n    -webkit-transition: -webkit-transform 250ms ease;\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n    transform: translate3d(-300px, 0, 0);\n    -webkit-transform: translate3d(-300px, 0, 0);\n  }\n  &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n    transform: translate3d(300px, 0, 0);\n    -webkit-transform: translate3d(300px, 0, 0);\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week {\n    float: left;\n    width: 100%;\n    margin: 5px 0px;\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day {\n    float: left;\n    width: 14.285714285714286%;\n    font-size: 14px;\n    text-align: center;\n    /* padding: 2px 0px; */\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n    //padding: 11px 0px 5px;\n    display: inline-block;\n    border-radius: 50%;\n    height: 30px;\n    width: 30px;\n    text-align: center;\n    border: 1px solid transparent;\n    background: ", ";\n    color: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span:hover {\n    background: ", ";\n    cursor: pointer;\n    color: ", ";\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month > span {\n    color: ", ";\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span:hover {\n    color: ", ";\n    cursor: not-allowed;\n    background: ", ";\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month.disabled > span {\n    color: ", ";\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n    border: 1px none\n      ", ";\n    color: ", ";\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.today.disabled > span {\n    background: ", ";\n    border: 1px solid transparent;\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.today > span:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span,\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span:hover {\n    background: ", ";\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-start {\n    background: ", ";\n\n    border-top-left-radius: 30px;\n    border-bottom-left-radius: 30px;\n\n    & > span {\n      background: transparent;\n      border-top-right-radius: 0px;\n      border-bottom-right-radius: 0px;\n    }\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-end {\n    background: ", ";\n\n    border-top-right-radius: 30px;\n    border-bottom-right-radius: 30px;\n\n    & > span {\n      background: transparent;\n      border-top-left-radius: 0px;\n      border-bottom-left-radius: 0px;\n    }\n  }\n\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n    background: ", ";\n    & > span {\n      background: transparent;\n      color: #fff;\n    }\n  }\n"])), function (props) {
   return props.inline ? 'none' : 'block';
 }, function (props) {
   return _tokens.colors[props.theme].inputCommon.background;
@@ -149,16 +135,13 @@ var DatePickerInput = _styledComponents2.default.div(_templateObject, function (
 }, function (props) {
   return _tokens.colors[props.theme].datepicker.daySelectedBackground;
 });
-
-var InputError = _styledComponents2.default.span(_templateObject2, function (props) {
+var InputError = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: 'SFUIText-Medium' !important;\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n"])), function (props) {
   return _tokens.colors[props.theme].inputError.color;
 });
-
-var DateUtilities = {
+var DateUtilities = exports.DateUtilities = {
   pad: function pad(value, length) {
-    while (value.length < length) {
-      value = '0' + value;
-    }return value;
+    while (value.length < length) value = '0' + value;
+    return value;
   },
   clone: function clone(date) {
     if (date) {
@@ -208,7 +191,6 @@ var DateUtilities = {
     if (typeof second === 'string' || typeof second === 'number') {
       second = DateUtilities.stringToDate(second);
     }
-
     return first.getTime() < second.getTime();
   },
   isAfter: function isAfter(first, second) {
@@ -218,58 +200,92 @@ var DateUtilities = {
     return first.getTime() > second.getTime();
   }
 };
-
-var DatePicker = function (_Component) {
-  _inherits(DatePicker, _Component);
-
-  function DatePicker(props) {
-    _classCallCheck(this, DatePicker);
-
-    var _this = _possibleConstructorReturn(this, (DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call(this, props));
-
-    _initialiseProps.call(_this);
-
-    var def = null;
-    var view = [new Date(), new Date()];
-    var selectedDates = [];
-    if (typeof props.selected === 'string') {
-      if (!props.selected.trim()) {
-        selectedDates = [];
-        view[0] = null;
+var DatePicker = /*#__PURE__*/function (_Component) {
+  function DatePicker(_props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, DatePicker);
+    _this = _callSuper(this, DatePicker, [_props]);
+    (0, _defineProperty2["default"])(_this, "UNSAFE_componentWillReceiveProps", function (newProps) {
+      if (newProps.selected !== _this.props.selected || newProps.selected && _this.props.selected && newProps.selected.toString() !== _this.props.selected.toString()) {
+        var def = null;
+        var view = [new Date(), new Date()];
+        var selectedDates = [];
+        if (typeof newProps.selected === 'string') {
+          if (!props.selected.trim()) {
+            selectedDates = [];
+            view[0] = null;
+          } else {
+            def = DateUtilities.stringToDate(props.selected);
+            view[0] = def;
+            selectedDates = [def];
+          }
+        } else if (Array.isArray(newProps.selected)) {
+          selectedDates = newProps.selected.map(function (dateVal, idx) {
+            if (typeof dateVal === 'number') {
+              dateVal = new Date(dateVal);
+              view[idx] = dateVal;
+              return dateVal;
+            }
+            if (typeof dateVal === 'string') {
+              if (dateVal.trim()) {
+                view[idx] = DateUtilities.stringToDate(dateVal);
+                return DateUtilities.stringToDate(dateVal);
+              }
+            } else {
+              view[idx] = DateUtilities.stringToDate(dateVal);
+              return DateUtilities.stringToDate(dateVal);
+            }
+          });
+        }
+        _this.setState({
+          view: view,
+          minDate: null,
+          maxDate: null,
+          id: _this.getUniqueIdentifier(),
+          ids: [_this.getUniqueIdentifier(), _this.getUniqueIdentifier()],
+          selectedDate: selectedDates
+        });
+      }
+    });
+    var _def = null;
+    var _view = [new Date(), new Date()];
+    var _selectedDates = [];
+    if (typeof _props.selected === 'string') {
+      if (!_props.selected.trim()) {
+        _selectedDates = [];
+        _view[0] = null;
       } else {
-        def = DateUtilities.stringToDate(props.selected);
-        view[0] = def;
-        selectedDates = [def];
+        _def = DateUtilities.stringToDate(_props.selected);
+        _view[0] = _def;
+        _selectedDates = [_def];
       }
-    } else if (Array.isArray(props.selected)) {
-      selectedDates = props.selected.map(function (dateVal, idx) {
+    } else if (Array.isArray(_props.selected)) {
+      _selectedDates = _props.selected.map(function (dateVal, idx) {
         if (typeof dateVal === 'number') {
           dateVal = new Date(dateVal);
-          view[idx] = dateVal;
+          _view[idx] = dateVal;
           return dateVal;
         }
         if (typeof dateVal === 'string') {
           if (dateVal.trim()) {
-            view[idx] = DateUtilities.stringToDate(dateVal);
+            _view[idx] = DateUtilities.stringToDate(dateVal);
             return DateUtilities.stringToDate(dateVal);
           }
         } else {
-          view[idx] = DateUtilities.stringToDate(dateVal);
+          _view[idx] = DateUtilities.stringToDate(dateVal);
           return DateUtilities.stringToDate(dateVal);
         }
       });
     }
-
     _this.state = {
-      view: view,
+      view: _view,
       minDate: null,
       maxDate: null,
       id: _this.getUniqueIdentifier(),
       ids: [_this.getUniqueIdentifier(), _this.getUniqueIdentifier()],
-      selectedDate: selectedDates,
+      selectedDate: _selectedDates,
       dateSelectionFor: 0
     };
-
     _this.hideOnDocumentClick = _this.hideOnDocumentClick.bind(_this);
     _this.getUniqueIdentifier = _this.getUniqueIdentifier.bind(_this);
     _this.parentsHaveClassName = _this.parentsHaveClassName.bind(_this);
@@ -279,19 +295,19 @@ var DatePicker = function (_Component) {
     _this.show = _this.show.bind(_this);
     return _this;
   }
-
-  _createClass(DatePicker, [{
-    key: 'componentDidMount',
+  (0, _inherits2["default"])(DatePicker, _Component);
+  return (0, _createClass2["default"])(DatePicker, [{
+    key: "componentDidMount",
     value: function componentDidMount() {
       document.addEventListener('click', this.hideOnDocumentClick);
     }
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
       document.removeEventListener('click', this.hideOnDocumentClick);
     }
   }, {
-    key: 'hideOnDocumentClick',
+    key: "hideOnDocumentClick",
     value: function hideOnDocumentClick(e) {
       if (
       /*
@@ -304,42 +320,42 @@ var DatePicker = function (_Component) {
       }
     }
   }, {
-    key: 'getUniqueIdentifier',
+    key: "getUniqueIdentifier",
     value: function getUniqueIdentifier() {
       function s4() {
         return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
       }
-
       return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
     }
   }, {
-    key: 'parentsHaveClassName',
+    key: "parentsHaveClassName",
     value: function parentsHaveClassName(element, className) {
       var parent = element;
       while (parent) {
         if (parent.className && typeof parent.className === 'string' && parent.className.indexOf(className) > -1) return true;
-
         parent = parent.parentNode;
       }
-
       return false;
     }
   }, {
-    key: 'setMinDate',
+    key: "setMinDate",
     value: function setMinDate(date) {
-      this.setState({ minDate: date });
+      this.setState({
+        minDate: date
+      });
     }
   }, {
-    key: 'setMaxDate',
+    key: "setMaxDate",
     value: function setMaxDate(date) {
-      this.setState({ maxDate: date });
+      this.setState({
+        maxDate: date
+      });
     }
   }, {
-    key: 'onSelect',
+    key: "onSelect",
     value: function onSelect(dayIdx, day) {
       var _this2 = this;
-
-      var selectedDateArr = [].concat(_toConsumableArray(this.state.selectedDate));
+      var selectedDateArr = (0, _toConsumableArray2["default"])(this.state.selectedDate);
 
       /*
        *if (dayIdx === 0 && this.state.selectedDate[1]) {
@@ -379,7 +395,6 @@ var DatePicker = function (_Component) {
           } else if (this.props.datepickerStep == 2 && this.state.dateSelectionFor == 0) {
             selectedDateArr[1] = day;
           }
-
           if (selectedDateArr[1] && DateUtilities.isBefore(selectedDateArr[1], selectedDateArr[0])) {
             var temp = selectedDateArr[0];
             selectedDateArr[0] = selectedDateArr[1];
@@ -397,7 +412,6 @@ var DatePicker = function (_Component) {
       } else {
         selectedDateArr[0] = day;
       }
-
       this.setState({
         selectedDate: selectedDateArr,
         dateSelectionFor: this.props.rangePicker ? selectedDateArr[0] && this.state.dateSelectionFor == 0 ? 1 : 0 : this.state.dateSelectionFor
@@ -417,10 +431,9 @@ var DatePicker = function (_Component) {
       });
     }
   }, {
-    key: 'clearDateValue',
+    key: "clearDateValue",
     value: function clearDateValue() {
       var _this3 = this;
-
       // let selectedDateArr = [...this.state.selectedDate];
       this.setState({
         selectedDate: this.props.rangePicker ? [null, null] : [null],
@@ -437,7 +450,7 @@ var DatePicker = function (_Component) {
       });
     }
   }, {
-    key: 'show',
+    key: "show",
     value: function show(id) {
       this.props.onCalendarOpen ? this.props.onCalendarOpen() : null;
       if (id === 0) {
@@ -449,11 +462,9 @@ var DatePicker = function (_Component) {
           });
         } else {
           var trigger = this.refs.trigger;
-
           var rect = trigger.getBoundingClientRect();
           var isTopHalf = rect.top > window.innerHeight / 2;
           var calendarHeight = 203;
-
           this.refs.calendar.show({
             top: isTopHalf ? rect.top + window.scrollY - calendarHeight - 3 : rect.top + trigger.clientHeight + window.scrollY + 3,
             left: rect.left
@@ -461,7 +472,6 @@ var DatePicker = function (_Component) {
         }
       } else if (id === 1) {
         this.hide(0);
-
         if (this.props.inline) {
           this.refs.calendar1.show();
         } else {
@@ -469,7 +479,6 @@ var DatePicker = function (_Component) {
           var _rect = _trigger.getBoundingClientRect();
           var _isTopHalf = _rect.top > window.innerHeight / 2;
           var _calendarHeight = 203;
-
           this.refs.calendar1.show({
             top: _isTopHalf ? _rect.top + window.scrollY - _calendarHeight - 3 : _rect.top + _trigger.clientHeight + window.scrollY + 3,
             left: _rect.left
@@ -478,7 +487,7 @@ var DatePicker = function (_Component) {
       }
     }
   }, {
-    key: 'hide',
+    key: "hide",
     value: function hide(dayIdx) {
       if (dayIdx === 0) {
         this.refs.calendar.hide();
@@ -496,187 +505,99 @@ var DatePicker = function (_Component) {
       }
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this4 = this;
-
       var dateStr = DateUtilities.toString(this.state.selectedDate[0]);
       if (this.props.rangePicker && this.state.selectedDate[1]) {
         dateStr += ' - ';
         dateStr = dateStr.concat(this.state.selectedDate[1] ? DateUtilities.toString(this.state.selectedDate[1]) : null); // dateStr+  this.state.selectedDate[1]? DateUtilities.toString(this.state.selectedDate[1]):null
       }
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          DatePickerInput,
-          _extends({}, this.props, {
-            className: this.props.className ? 'ardp-date-picker ' + this.props.className : 'ardp-date-picker'
-          }),
-          _react2.default.createElement(
-            'div',
-            null,
-            this.props.labelAsText ? _react2.default.createElement(
-              'div',
-              {
-                ref: 'trigger',
-                type: 'text',
-                className: 'label-text date-picker-trigger-' + this.state.ids[0],
-                onClick: function onClick() {
-                  return _this4.show(0);
-                }
-              },
-              this.props.label
-            ) : _react2.default.createElement(
-              'div',
-              { className: 'form-input' },
-              _react2.default.createElement(
-                'label',
-                {
-                  className: DateUtilities.toString(this.state.selectedDate[0]).length > 0 ? 'floaton' : ''
-                },
-                this.props.label && '' + this.props.label + (this.props.isRequired ? '*' : '')
-              ),
-              _react2.default.createElement('input', _extends({
-                type: 'text',
-                placeholder: this.props.placeholder,
-                theme: this.props.theme
-              }, {
-                ref: 'trigger',
-                type: 'text',
-                className: 'date-picker-trigger-' + this.state.ids[0],
-                readOnly: true,
-                value: dateStr, // ( DateUtilities.toString(this.state.selectedDate[0])+''+ this.state.selectedDate[1]? DateUtilities.toString(this.state.selectedDate[0]):null ),
-                onClick: function onClick() {
-                  return _this4.show(0);
-                }
-              })),
-              !this.props.rangePicker && !this.props.inline && !this.props.readOnly && _react2.default.createElement(
-                'span',
-                { className: 'calender-icon', onClick: function onClick() {
-                    return _this4.show(0);
-                  } },
-                _react2.default.createElement(_icon2.default, { name: 'calender', height: '18', width: '16', color: '#AFB2BA' })
-              ),
-              this.props.rangePicker && dateStr && dateStr.length > 0 && _react2.default.createElement(
-                'div',
-                {
-                  className: 'clear-icon',
-                  onClick: function onClick() {
-                    _this4.clearDateValue();
-                  }
-                },
-                _react2.default.createElement(_icon2.default, { name: 'cross', height: '12', weight: '12' }),
-                ' '
-              )
-            ),
-            _react2.default.createElement(Calendar, _extends({
-              theme: this.props.theme
-            }, {
-              ref: 'calendar',
-              id: this.state.ids[0],
-              view: this.state.view[0],
-              selected: this.state.selectedDate[0],
-              selected2: this.state.selectedDate[1],
-              rangePicker: this.props.rangePicker,
-              disabledDates: this.props.disabledDates,
-              onSelect: this.onSelect,
-              dateIdx: 0,
-              minDate: this.props.minDate,
-              maxDate: this.props.maxDate
-            }))
-          )
-        ),
-        this.props.error && this.props.error.length > 0 ? _react2.default.createElement(
-          InputError,
-          { value: this.props.value, theme: this.props.theme, error: this.props.error },
-          this.props.error
-        ) : null
-      );
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(DatePickerInput, (0, _extends2["default"])({}, this.props, {
+        className: this.props.className ? 'ardp-date-picker ' + this.props.className : 'ardp-date-picker'
+      }), /*#__PURE__*/_react["default"].createElement("div", null, this.props.labelAsText ? /*#__PURE__*/_react["default"].createElement("div", {
+        ref: 'trigger',
+        type: 'text',
+        className: 'label-text date-picker-trigger-' + this.state.ids[0],
+        onClick: function onClick() {
+          return _this4.show(0);
+        }
+      }, this.props.label) : /*#__PURE__*/_react["default"].createElement("div", {
+        className: "form-input"
+      }, /*#__PURE__*/_react["default"].createElement("label", {
+        className: DateUtilities.toString(this.state.selectedDate[0]).length > 0 ? 'floaton' : ''
+      }, this.props.label && "".concat(this.props.label).concat(this.props.isRequired ? '*' : '')), /*#__PURE__*/_react["default"].createElement("input", (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
+        type: "text",
+        placeholder: this.props.placeholder,
+        theme: this.props.theme,
+        ref: 'trigger'
+      }, "type", 'text'), "className", 'date-picker-trigger-' + this.state.ids[0]), "readOnly", true), "value", dateStr), "onClick", function onClick() {
+        return _this4.show(0);
+      })), !this.props.rangePicker && !this.props.inline && !this.props.readOnly && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "calender-icon",
+        onClick: function onClick() {
+          return _this4.show(0);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "calender",
+        height: "18",
+        width: "16",
+        color: "#AFB2BA"
+      })), this.props.rangePicker && dateStr && dateStr.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "clear-icon",
+        onClick: function onClick() {
+          _this4.clearDateValue();
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "cross",
+        height: "12",
+        weight: "12"
+      }), ' ')), /*#__PURE__*/_react["default"].createElement(Calendar, {
+        theme: this.props.theme,
+        ref: 'calendar',
+        id: this.state.ids[0],
+        view: this.state.view[0],
+        selected: this.state.selectedDate[0],
+        selected2: this.state.selectedDate[1],
+        rangePicker: this.props.rangePicker,
+        disabledDates: this.props.disabledDates,
+        onSelect: this.onSelect,
+        dateIdx: 0,
+        minDate: this.props.minDate,
+        maxDate: this.props.maxDate
+      }))), this.props.error && this.props.error.length > 0 ? /*#__PURE__*/_react["default"].createElement(InputError, {
+        value: this.props.value,
+        theme: this.props.theme,
+        error: this.props.error
+      }, this.props.error) : null);
     }
   }]);
-
-  return DatePicker;
 }(_react.Component);
-
-var _initialiseProps = function _initialiseProps() {
-  var _this13 = this;
-
-  this.UNSAFE_componentWillReceiveProps = function (newProps) {
-    if (newProps.selected !== _this13.props.selected || newProps.selected && _this13.props.selected && newProps.selected.toString() !== _this13.props.selected.toString()) {
-      var def = null;
-      var view = [new Date(), new Date()];
-      var selectedDates = [];
-      if (typeof newProps.selected === 'string') {
-        if (!props.selected.trim()) {
-          selectedDates = [];
-          view[0] = null;
-        } else {
-          def = DateUtilities.stringToDate(props.selected);
-          view[0] = def;
-          selectedDates = [def];
-        }
-      } else if (Array.isArray(newProps.selected)) {
-        selectedDates = newProps.selected.map(function (dateVal, idx) {
-          if (typeof dateVal === 'number') {
-            dateVal = new Date(dateVal);
-            view[idx] = dateVal;
-            return dateVal;
-          }
-          if (typeof dateVal === 'string') {
-            if (dateVal.trim()) {
-              view[idx] = DateUtilities.stringToDate(dateVal);
-              return DateUtilities.stringToDate(dateVal);
-            }
-          } else {
-            view[idx] = DateUtilities.stringToDate(dateVal);
-            return DateUtilities.stringToDate(dateVal);
-          }
-        });
-      }
-
-      _this13.setState({
-        view: view,
-        minDate: null,
-        maxDate: null,
-        id: _this13.getUniqueIdentifier(),
-        ids: [_this13.getUniqueIdentifier(), _this13.getUniqueIdentifier()],
-        selectedDate: selectedDates
-      });
-    }
-  };
-};
-
-var Calendar = function (_Component2) {
-  _inherits(Calendar, _Component2);
-
+var Calendar = /*#__PURE__*/function (_Component2) {
   function Calendar(props) {
-    _classCallCheck(this, Calendar);
-
-    var _this5 = _possibleConstructorReturn(this, (Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call(this, props));
-
-    _this5.onMove = function (view, isForward) {
+    var _this5;
+    (0, _classCallCheck2["default"])(this, Calendar);
+    _this5 = _callSuper(this, Calendar, [props]);
+    (0, _defineProperty2["default"])(_this5, "onMove", function (view, isForward) {
       this.refs.weeks.moveTo(view, isForward);
-    };
-
+    });
     _this5.state = {
       visible: false
     };
-
     _this5.onMove = _this5.onMove.bind(_this5);
     _this5.onTransitionEnd = _this5.onTransitionEnd.bind(_this5);
     _this5.show = _this5.show.bind(_this5);
     _this5.hide = _this5.hide.bind(_this5);
     return _this5;
   }
-
-  _createClass(Calendar, [{
-    key: 'onTransitionEnd',
+  (0, _inherits2["default"])(Calendar, _Component2);
+  return (0, _createClass2["default"])(Calendar, [{
+    key: "onTransitionEnd",
     value: function onTransitionEnd() {
       this.refs.monthHeader.enable();
     }
   }, {
-    key: 'show',
+    key: "show",
     value: function show(position) {
       this.setState({
         visible: true,
@@ -689,59 +610,48 @@ var Calendar = function (_Component2) {
       });
     }
   }, {
-    key: 'hide',
+    key: "hide",
     value: function hide() {
-      if (this.state.visible) this.setState({ visible: false });
+      if (this.state.visible) this.setState({
+        visible: false
+      });
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
-      return _react2.default.createElement(
-        'div',
-        {
-          ref: 'calendar',
-          className: 'ardp-calendar-' + this.props.id + ' calendar' + (this.state.visible ? ' calendar-show' : ' calendar-hide'),
-          style: this.state.style
-        },
-        _react2.default.createElement(MonthHeader, _extends({
-          theme: this.props.theme
-        }, {
-          ref: 'monthHeader',
-          dateIdx: this.props.dateIdx,
-          view: this.props.view,
-          onMove: this.onMove,
-          minDate: this.props.minDate,
-          maxDate: this.props.maxDate
-        })),
-        _react2.default.createElement(WeekHeader, null),
-        _react2.default.createElement(Weeks, {
-          ref: 'weeks',
-          view: this.props.view,
-          selected: this.props.selected,
-          selected2: this.props.selected2,
-          rangePicker: this.props.rangePicker,
-          disabledDates: this.props.disabledDates,
-          onTransitionEnd: this.onTransitionEnd,
-          onSelect: this.props.onSelect,
-          dateIdx: this.props.dateIdx,
-          minDate: this.props.minDate,
-          maxDate: this.props.maxDate
-        })
-      );
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        ref: 'calendar',
+        className: 'ardp-calendar-' + this.props.id + ' calendar' + (this.state.visible ? ' calendar-show' : ' calendar-hide'),
+        style: this.state.style
+      }, /*#__PURE__*/_react["default"].createElement(MonthHeader, {
+        theme: this.props.theme,
+        ref: 'monthHeader',
+        dateIdx: this.props.dateIdx,
+        view: this.props.view,
+        onMove: this.onMove,
+        minDate: this.props.minDate,
+        maxDate: this.props.maxDate
+      }), /*#__PURE__*/_react["default"].createElement(WeekHeader, null), /*#__PURE__*/_react["default"].createElement(Weeks, {
+        ref: 'weeks',
+        view: this.props.view,
+        selected: this.props.selected,
+        selected2: this.props.selected2,
+        rangePicker: this.props.rangePicker,
+        disabledDates: this.props.disabledDates,
+        onTransitionEnd: this.onTransitionEnd,
+        onSelect: this.props.onSelect,
+        dateIdx: this.props.dateIdx,
+        minDate: this.props.minDate,
+        maxDate: this.props.maxDate
+      }));
     }
   }]);
-
-  return Calendar;
 }(_react.Component);
-
-var MonthHeader = function (_Component3) {
-  _inherits(MonthHeader, _Component3);
-
+var MonthHeader = /*#__PURE__*/function (_Component3) {
   function MonthHeader(props) {
-    _classCallCheck(this, MonthHeader);
-
-    var _this6 = _possibleConstructorReturn(this, (MonthHeader.__proto__ || Object.getPrototypeOf(MonthHeader)).call(this, props));
-
+    var _this6;
+    (0, _classCallCheck2["default"])(this, MonthHeader);
+    _this6 = _callSuper(this, MonthHeader, [props]);
     _this6.state = {
       view: DateUtilities.clone(_this6.props.view),
       enabled: true
@@ -752,9 +662,9 @@ var MonthHeader = function (_Component3) {
     _this6.enable = _this6.enable.bind(_this6);
     return _this6;
   }
-
-  _createClass(MonthHeader, [{
-    key: 'moveBackward',
+  (0, _inherits2["default"])(MonthHeader, _Component3);
+  return (0, _createClass2["default"])(MonthHeader, [{
+    key: "moveBackward",
     value: function moveBackward(type) {
       var view = DateUtilities.clone(this.state.view);
       if (type === 'month') {
@@ -765,7 +675,7 @@ var MonthHeader = function (_Component3) {
       this.move(view, false);
     }
   }, {
-    key: 'moveForward',
+    key: "moveForward",
     value: function moveForward(type) {
       var view = DateUtilities.clone(this.state.view);
       if (type === 'month') {
@@ -776,12 +686,10 @@ var MonthHeader = function (_Component3) {
       this.move(view, true);
     }
   }, {
-    key: 'move',
+    key: "move",
     value: function move(view, isForward) {
       var _this7 = this;
-
       if (!this.state.enabled) return;
-
       this.setState({
         view: view,
         enabled: false
@@ -790,92 +698,83 @@ var MonthHeader = function (_Component3) {
       });
     }
   }, {
-    key: 'enable',
+    key: "enable",
     value: function enable() {
       this.setState({
         enabled: true
       });
     }
   }, {
-    key: 'limitDates',
+    key: "limitDates",
     value: function limitDates(direction) {
       var view = DateUtilities.clone(this.state.view);
       view.setDate(1);
       view = DateUtilities.moveToDayOfWeek(DateUtilities.clone(view), 0, false);
-
       var current = DateUtilities.clone(view);
       current.setDate(current.getDate() + 7);
-
       var starts = [view];
       var month = current.getMonth();
-
       while (current.getMonth() === month) {
         starts.push(DateUtilities.clone(current));
         current.setDate(current.getDate() + 7);
       }
-
       var first = DateUtilities.clone(starts[0]);
       var last = DateUtilities.moveToDayOfWeek(DateUtilities.clone(starts[starts.length - 1]), 6, true);
-
       if (direction) {
         return this.props.minDate && DateUtilities.isBefore(first, this.props.minDate);
       }
       return this.props.maxDate && DateUtilities.isAfter(last, this.props.maxDate);
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this8 = this;
-
       var enabled = this.state.enabled;
-
-
-      return _react2.default.createElement('div', { className: 'month-header' }, _react2.default.createElement('span', {
+      return /*#__PURE__*/_react["default"].createElement('div', {
+        className: 'month-header'
+      }, /*#__PURE__*/_react["default"].createElement('span', {
         className: enabled && !this.limitDates(true) ? 'prev-month' : 'next-month disabled',
         onClick: function onClick() {
           _this8.limitDates(true) ? null : _this8.moveBackward('year');
         }
-      }, _react2.default.createElement(_icon2.default, {
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
         name: 'angle-left-double',
         width: 16,
         height: 16,
         color: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke,
         stroke: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke
-      }, null)), _react2.default.createElement('span', {
+      }, null)), /*#__PURE__*/_react["default"].createElement('span', {
         className: enabled && !this.limitDates(true) ? 'prev-month' : 'next-month disabled',
         onClick: function onClick() {
           _this8.limitDates(true) ? null : _this8.moveBackward('month');
         }
-      }, _react2.default.createElement(_icon2.default, {
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
         name: 'angle-left',
         width: 8,
         height: 16,
         stroke: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke
-      }, null)), _react2.default.createElement('span', { className: 'month-header-text' }, _react2.default.createElement(
-        'span',
-        { className: 'month-text' },
-        DateUtilities.toMonthAndYearString(this.state.view).month
-      ), _react2.default.createElement(
-        'span',
-        { className: 'year-text' },
-        ' ',
-        DateUtilities.toMonthAndYearString(this.state.view).year
-      )), _react2.default.createElement('span', {
+      }, null)), /*#__PURE__*/_react["default"].createElement('span', {
+        className: 'month-header-text'
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        className: "month-text"
+      }, DateUtilities.toMonthAndYearString(this.state.view).month), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "year-text"
+      }, ' ', DateUtilities.toMonthAndYearString(this.state.view).year)), /*#__PURE__*/_react["default"].createElement('span', {
         className: enabled && !this.limitDates(false) ? 'next-month' : 'next-month disabled',
         onClick: function onClick() {
           _this8.limitDates(false) ? null : _this8.moveForward('month');
         }
-      }, _react2.default.createElement(_icon2.default, {
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
         name: 'angle-right',
         width: 8,
         height: 16,
         stroke: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke
-      }, null)), _react2.default.createElement('span', {
+      }, null)), /*#__PURE__*/_react["default"].createElement('span', {
         className: enabled && !this.limitDates(false) ? 'next-month' : 'next-month disabled',
         onClick: function onClick() {
           _this8.limitDates(false) ? null : _this8.moveForward('year');
         }
-      }, _react2.default.createElement(_icon2.default, {
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
         name: 'angle-right-double',
         color: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke,
         width: 16,
@@ -884,7 +783,7 @@ var MonthHeader = function (_Component3) {
       }, null)));
     }
   }], [{
-    key: 'getDerivedStateFromProps',
+    key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
       if (props.dateIdx === 1 && props.minDate && (props.minDate.getMonth() !== state.view.getMonth() || props.minDate.getFullYear() !== state.view.getFullYear())) {
         /*
@@ -896,76 +795,61 @@ var MonthHeader = function (_Component3) {
       return null;
     }
   }]);
-
-  return MonthHeader;
 }(_react.Component);
-
-var WeekHeader = function (_Component4) {
-  _inherits(WeekHeader, _Component4);
-
+var WeekHeader = /*#__PURE__*/function (_Component4) {
   function WeekHeader() {
-    _classCallCheck(this, WeekHeader);
-
-    return _possibleConstructorReturn(this, (WeekHeader.__proto__ || Object.getPrototypeOf(WeekHeader)).apply(this, arguments));
+    (0, _classCallCheck2["default"])(this, WeekHeader);
+    return _callSuper(this, WeekHeader, arguments);
   }
-
-  _createClass(WeekHeader, [{
-    key: 'render',
+  (0, _inherits2["default"])(WeekHeader, _Component4);
+  return (0, _createClass2["default"])(WeekHeader, [{
+    key: "render",
     value: function render() {
-      return _react2.default.createElement('div', { className: 'week-header' }, _react2.default.createElement('span', null, 'Sun'), _react2.default.createElement('span', null, 'Mon'), _react2.default.createElement('span', null, 'Tue'), _react2.default.createElement('span', null, 'Wed'), _react2.default.createElement('span', null, 'Thu'), _react2.default.createElement('span', null, 'Fri'), _react2.default.createElement('span', null, 'Sat'));
+      return /*#__PURE__*/_react["default"].createElement('div', {
+        className: 'week-header'
+      }, /*#__PURE__*/_react["default"].createElement('span', null, 'Sun'), /*#__PURE__*/_react["default"].createElement('span', null, 'Mon'), /*#__PURE__*/_react["default"].createElement('span', null, 'Tue'), /*#__PURE__*/_react["default"].createElement('span', null, 'Wed'), /*#__PURE__*/_react["default"].createElement('span', null, 'Thu'), /*#__PURE__*/_react["default"].createElement('span', null, 'Fri'), /*#__PURE__*/_react["default"].createElement('span', null, 'Sat'));
     }
   }]);
-
-  return WeekHeader;
 }(_react.Component);
-
-var Weeks = function (_Component5) {
-  _inherits(Weeks, _Component5);
-
+var Weeks = /*#__PURE__*/function (_Component5) {
   function Weeks(props) {
-    _classCallCheck(this, Weeks);
-
-    var _this10 = _possibleConstructorReturn(this, (Weeks.__proto__ || Object.getPrototypeOf(Weeks)).call(this, props));
-
-    _this10.state = {
-      view: DateUtilities.clone(_this10.props.view),
-      other: DateUtilities.clone(_this10.props.view),
+    var _this9;
+    (0, _classCallCheck2["default"])(this, Weeks);
+    _this9 = _callSuper(this, Weeks, [props]);
+    _this9.state = {
+      view: DateUtilities.clone(_this9.props.view),
+      other: DateUtilities.clone(_this9.props.view),
       sliding: null
     };
-
-    _this10.onTransitionEnd = _this10.onTransitionEnd.bind(_this10);
-    _this10.getWeekStartDates = _this10.getWeekStartDates.bind(_this10);
-    _this10.moveTo = _this10.moveTo.bind(_this10);
-    return _this10;
+    _this9.onTransitionEnd = _this9.onTransitionEnd.bind(_this9);
+    _this9.getWeekStartDates = _this9.getWeekStartDates.bind(_this9);
+    _this9.moveTo = _this9.moveTo.bind(_this9);
+    return _this9;
   }
-
-  _createClass(Weeks, [{
-    key: 'componentDidMount',
+  (0, _inherits2["default"])(Weeks, _Component5);
+  return (0, _createClass2["default"])(Weeks, [{
+    key: "componentDidMount",
     value: function componentDidMount() {
       this.refs.current.addEventListener('transitionend', this.onTransitionEnd);
     }
   }, {
-    key: 'onTransitionEnd',
+    key: "onTransitionEnd",
     value: function onTransitionEnd() {
       this.setState({
         sliding: null,
         view: DateUtilities.clone(this.state.other)
       });
-
       this.props.onTransitionEnd();
     }
   }, {
-    key: 'getWeekStartDates',
+    key: "getWeekStartDates",
     value: function getWeekStartDates(view) {
       view.setDate(1);
       view = DateUtilities.moveToDayOfWeek(DateUtilities.clone(view), 0, false);
-
       var current = DateUtilities.clone(view);
       current.setDate(current.getDate() + 7);
-
       var starts = [view];
       var month = current.getMonth();
-
       while (current.getMonth() === month) {
         starts.push(DateUtilities.clone(current));
         current.setDate(current.getDate() + 7);
@@ -973,7 +857,7 @@ var Weeks = function (_Component5) {
       return starts;
     }
   }, {
-    key: 'moveTo',
+    key: "moveTo",
     value: function moveTo(view, isForward) {
       this.setState({
         sliding: isForward ? 'left' : 'right',
@@ -981,24 +865,25 @@ var Weeks = function (_Component5) {
       });
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
-      return _react2.default.createElement('div', { className: 'weeks' }, _react2.default.createElement('div', {
+      return /*#__PURE__*/_react["default"].createElement('div', {
+        className: 'weeks'
+      }, /*#__PURE__*/_react["default"].createElement('div', {
         ref: 'current',
         className: 'current' + (this.state.sliding ? ' sliding ' + this.state.sliding : '')
-      }, this.renderWeeks(this.state.view)), _react2.default.createElement('div', {
+      }, this.renderWeeks(this.state.view)), /*#__PURE__*/_react["default"].createElement('div', {
         ref: 'other',
         className: 'other' + (this.state.sliding ? ' sliding ' + this.state.sliding : '')
       }, this.renderWeeks(this.state.other)));
     }
   }, {
-    key: 'renderWeeks',
+    key: "renderWeeks",
     value: function renderWeeks(view) {
       var starts = this.getWeekStartDates(view);
       var month = starts[1].getMonth();
-
       return starts.map(function (s, i) {
-        return _react2.default.createElement(Week, {
+        return /*#__PURE__*/_react["default"].createElement(Week, {
           key: i,
           start: s,
           month: month,
@@ -1014,7 +899,7 @@ var Weeks = function (_Component5) {
       }.bind(this));
     }
   }], [{
-    key: 'getDerivedStateFromProps',
+    key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
       if (props.dateIdx === 1 && props.minDate && (props.minDate.getMonth() !== state.view.getMonth() || props.minDate.getFullYear() !== state.view.getFullYear())) {
         /*
@@ -1027,28 +912,22 @@ var Weeks = function (_Component5) {
       return null;
     }
   }]);
-
-  return Weeks;
 }(_react.Component);
-
-var Week = function (_Component6) {
-  _inherits(Week, _Component6);
-
+var Week = /*#__PURE__*/function (_Component6) {
   function Week(props) {
-    _classCallCheck(this, Week);
-
-    var _this11 = _possibleConstructorReturn(this, (Week.__proto__ || Object.getPrototypeOf(Week)).call(this, props));
-
-    _this11.buildDays = _this11.buildDays.bind(_this11);
-    _this11.isOtherMonth = _this11.isOtherMonth.bind(_this11);
-    _this11.getDayClassName = _this11.getDayClassName.bind(_this11);
-    _this11.isDisabled = _this11.isDisabled.bind(_this11);
-    _this11.onSelect = _this11.onSelect.bind(_this11);
-    return _this11;
+    var _this10;
+    (0, _classCallCheck2["default"])(this, Week);
+    _this10 = _callSuper(this, Week, [props]);
+    _this10.buildDays = _this10.buildDays.bind(_this10);
+    _this10.isOtherMonth = _this10.isOtherMonth.bind(_this10);
+    _this10.getDayClassName = _this10.getDayClassName.bind(_this10);
+    _this10.isDisabled = _this10.isDisabled.bind(_this10);
+    _this10.onSelect = _this10.onSelect.bind(_this10);
+    return _this10;
   }
-
-  _createClass(Week, [{
-    key: 'buildDays',
+  (0, _inherits2["default"])(Week, _Component6);
+  return (0, _createClass2["default"])(Week, [{
+    key: "buildDays",
     value: function buildDays(start) {
       var days = [DateUtilities.clone(start)];
       var clone = DateUtilities.clone(start);
@@ -1060,12 +939,12 @@ var Week = function (_Component6) {
       return days;
     }
   }, {
-    key: 'isOtherMonth',
+    key: "isOtherMonth",
     value: function isOtherMonth(day) {
       return this.props.month !== day.month();
     }
   }, {
-    key: 'getDayClassName',
+    key: "getDayClassName",
     value: function getDayClassName(day) {
       var className = 'day';
       if (DateUtilities.isSameDay(day, new Date())) className += ' today';
@@ -1083,23 +962,21 @@ var Week = function (_Component6) {
       return className;
     }
   }, {
-    key: 'onSelect',
+    key: "onSelect",
     value: function onSelect(day) {
       if (!this.isDisabled(day)) {
         this.props.onSelect(this.props.dateIdx, day);
       }
     }
   }, {
-    key: 'isDisabled',
+    key: "isDisabled",
     value: function isDisabled(day) {
       var minDate = this.props.minDate;
       var maxDate = this.props.maxDate;
-
-
       return minDate && DateUtilities.isBefore(day, minDate) || maxDate && DateUtilities.isAfter(day, maxDate) || this.isDateFromDisabled(day);
     }
   }, {
-    key: 'isDateFromDisabled',
+    key: "isDateFromDisabled",
     value: function isDateFromDisabled(day) {
       var r = false;
       this.props.disabledDates.forEach(function (disableddate) {
@@ -1110,31 +987,24 @@ var Week = function (_Component6) {
       return r;
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var days = this.buildDays(this.props.start);
-      return _react2.default.createElement('div', { className: 'week' }, days.map(function (day, i) {
-        var _this12 = this;
-
-        return _react2.default.createElement('div', {
+      return /*#__PURE__*/_react["default"].createElement('div', {
+        className: 'week'
+      }, days.map(function (day, i) {
+        var _this11 = this;
+        return /*#__PURE__*/_react["default"].createElement('div', {
           key: i,
           onClick: function onClick() {
-            _this12.onSelect(day);
+            _this11.onSelect(day);
           },
           className: this.getDayClassName(day)
-        }, _react2.default.createElement(
-          'span',
-          null,
-          ' ',
-          DateUtilities.toDayOfMonthString(day)
-        ));
+        }, /*#__PURE__*/_react["default"].createElement("span", null, " ", DateUtilities.toDayOfMonthString(day)));
       }.bind(this)));
     }
   }]);
-
-  return Week;
 }(_react.Component);
-
 DatePicker.defaultProps = {
   theme: 'light',
   inline: false,
@@ -1142,6 +1012,4 @@ DatePicker.defaultProps = {
   defaultSelcted: '',
   disabledDates: []
 };
-
-exports.default = DatePicker;
-exports.DateUtilities = DateUtilities;
+var _default = exports["default"] = DatePicker;