@desynova-digital/components 8.19.63 → 9.0.1

package/atoms/datePicker/datePicker.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -9,22 +9,22 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 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  }\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\n    div.calendar\n    div.month-header\n    > span.month-header-text\n    > .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\n    div.calendar\n    div.weeks\n    div.week\n    div.day.today\n    > span:hover {\n    background: ", ";\n    cursor: pointer;\n    color: ", ";\n  }\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    div.day.other-month\n    > span {\n    color: ", ";\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    div.day.disabled\n    > span:hover {\n    color: ", ";\n    cursor: not-allowed;\n    background: ", ";\n  }\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    div.day.other-month.disabled\n    > 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\n    div.calendar\n    div.weeks\n    div.week\n    div.day.today.disabled\n    > 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\n    div.calendar\n    div.weeks\n    div.week\n    div.day.selected.today\n    > span:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    div.day.selected.disabled\n    > span,\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    div.day.selected.disabled\n    > span:hover {\n    background: ", ";\n  }\n\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    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\n    div.calendar\n    div.weeks\n    div.week\n    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  }\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\n    div.calendar\n    div.month-header\n    > span.month-header-text\n    > .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\n    div.calendar\n    div.weeks\n    div.week\n    div.day.today\n    > span:hover {\n    background: ", ";\n    cursor: pointer;\n    color: ", ";\n  }\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    div.day.other-month\n    > span {\n    color: ", ";\n  }\n  &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    div.day.disabled\n    > span:hover {\n    color: ", ";\n    cursor: not-allowed;\n    background: ", ";\n  }\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    div.day.other-month.disabled\n    > 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\n    div.calendar\n    div.weeks\n    div.week\n    div.day.today.disabled\n    > 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\n    div.calendar\n    div.weeks\n    div.week\n    div.day.selected.today\n    > span:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    div.day.selected.disabled\n    > span,\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    div.day.selected.disabled\n    > span:hover {\n    background: ", ";\n  }\n\n  &.ardp-date-picker\n    div.calendar\n    div.weeks\n    div.week\n    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\n    div.calendar\n    div.weeks\n    div.week\n    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 _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 _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _styledComponents = require("styled-components");
+var _styledComponents = require('styled-components');
 
 var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-var _icon = require("../icon");
+var _icon = require('../icon');
 
 var _icon2 = _interopRequireDefault(_icon);
 
-var _tokens = require("../../../tokens");
+var _tokens = require('@desynova-digital/tokens');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -197,10 +197,10 @@ var DateUtilities = {
     return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate();
   },
   stringToDate: function stringToDate(date) {
-
     if (typeof date === 'string') {
       return date.trim().length ? new Date(date.split('/')[1] + '/' + date.split('/')[0] + '/' + date.split('/')[2]) : null;
-    }if (typeof date === 'number') {
+    }
+    if (typeof date === 'number') {
       return new Date(date);
     }
   },
@@ -247,7 +247,8 @@ var DatePicker = function (_Component) {
           dateVal = new Date(dateVal);
           view[idx] = dateVal;
           return dateVal;
-        }if (typeof dateVal === 'string') {
+        }
+        if (typeof dateVal === 'string') {
           if (dateVal.trim()) {
             view[idx] = DateUtilities.stringToDate(dateVal);
             return DateUtilities.stringToDate(dateVal);
@@ -280,17 +281,17 @@ var DatePicker = function (_Component) {
   }
 
   _createClass(DatePicker, [{
-    key: "componentDidMount",
+    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 (
       /*
@@ -303,7 +304,7 @@ var DatePicker = function (_Component) {
       }
     }
   }, {
-    key: "getUniqueIdentifier",
+    key: 'getUniqueIdentifier',
     value: function getUniqueIdentifier() {
       function s4() {
         return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
@@ -312,7 +313,7 @@ var DatePicker = function (_Component) {
       return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
     }
   }, {
-    key: "parentsHaveClassName",
+    key: 'parentsHaveClassName',
     value: function parentsHaveClassName(element, className) {
       var parent = element;
       while (parent) {
@@ -324,17 +325,17 @@ var DatePicker = function (_Component) {
       return false;
     }
   }, {
-    key: "setMinDate",
+    key: 'setMinDate',
     value: function setMinDate(date) {
       this.setState({ minDate: date });
     }
   }, {
-    key: "setMaxDate",
+    key: 'setMaxDate',
     value: function setMaxDate(date) {
       this.setState({ maxDate: date });
     }
   }, {
-    key: "onSelect",
+    key: 'onSelect',
     value: function onSelect(dayIdx, day) {
       var _this2 = this;
 
@@ -351,7 +352,7 @@ var DatePicker = function (_Component) {
        *selectedDateArr[1] = day
        *}else{
        *selectedDateArr[0] = day
-       *} 
+       *}
        */
 
       if (this.props.rangePicker) {
@@ -388,10 +389,10 @@ var DatePicker = function (_Component) {
 
         /*
          *if(selectedDateArr[1] && DateUtilities.isBefore(selectedDateArr[1], selectedDateArr[0])){
-         *  let temp = selectedDateArr[0]; 
+         *  let temp = selectedDateArr[0];
          *  selectedDateArr[0] = selectedDateArr[1];
          *  selectedDateArr[1] = temp;
-         *} 
+         *}
          */
       } else {
         selectedDateArr[0] = day;
@@ -416,7 +417,7 @@ var DatePicker = function (_Component) {
       });
     }
   }, {
-    key: "clearDateValue",
+    key: 'clearDateValue',
     value: function clearDateValue() {
       var _this3 = this;
 
@@ -436,7 +437,7 @@ var DatePicker = function (_Component) {
       });
     }
   }, {
-    key: "show",
+    key: 'show',
     value: function show(id) {
       this.props.onCalendarOpen ? this.props.onCalendarOpen() : null;
       if (id === 0) {
@@ -477,7 +478,7 @@ var DatePicker = function (_Component) {
       }
     }
   }, {
-    key: "hide",
+    key: 'hide',
     value: function hide(dayIdx) {
       if (dayIdx === 0) {
         this.refs.calendar.hide();
@@ -495,7 +496,7 @@ var DatePicker = function (_Component) {
       }
     }
   }, {
-    key: "render",
+    key: 'render',
     value: function render() {
       var _this4 = this;
 
@@ -505,7 +506,7 @@ var DatePicker = function (_Component) {
         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",
+        'div',
         null,
         _react2.default.createElement(
           DatePickerInput,
@@ -513,10 +514,10 @@ var DatePicker = function (_Component) {
             className: this.props.className ? 'ardp-date-picker ' + this.props.className : 'ardp-date-picker'
           }),
           _react2.default.createElement(
-            "div",
+            'div',
             null,
             this.props.labelAsText ? _react2.default.createElement(
-              "div",
+              'div',
               {
                 ref: 'trigger',
                 type: 'text',
@@ -527,17 +528,17 @@ var DatePicker = function (_Component) {
               },
               this.props.label
             ) : _react2.default.createElement(
-              "div",
-              { className: "form-input" },
+              'div',
+              { className: 'form-input' },
               _react2.default.createElement(
-                "label",
+                'label',
                 {
                   className: DateUtilities.toString(this.state.selectedDate[0]).length > 0 ? 'floaton' : ''
                 },
-                this.props.label && "" + this.props.label + (this.props.isRequired ? '*' : '')
+                this.props.label && '' + this.props.label + (this.props.isRequired ? '*' : '')
               ),
-              _react2.default.createElement("input", _extends({
-                type: "text",
+              _react2.default.createElement('input', _extends({
+                type: 'text',
                 placeholder: this.props.placeholder,
                 theme: this.props.theme
               }, {
@@ -551,29 +552,21 @@ var DatePicker = function (_Component) {
                 }
               })),
               !this.props.rangePicker && !this.props.inline && !this.props.readOnly && _react2.default.createElement(
-                "span",
-                {
-                  className: "calender-icon",
-                  onClick: function onClick() {
+                'span',
+                { className: 'calender-icon', onClick: function onClick() {
                     return _this4.show(0);
-                  }
-                },
-                _react2.default.createElement(_icon2.default, {
-                  name: "calender",
-                  height: "18",
-                  width: "16",
-                  color: "#AFB2BA"
-                })
+                  } },
+                _react2.default.createElement(_icon2.default, { name: 'calender', height: '18', width: '16', color: '#AFB2BA' })
               ),
               this.props.rangePicker && dateStr && dateStr.length > 0 && _react2.default.createElement(
-                "div",
+                'div',
                 {
-                  className: "clear-icon",
+                  className: 'clear-icon',
                   onClick: function onClick() {
                     _this4.clearDateValue();
                   }
                 },
-                _react2.default.createElement(_icon2.default, { name: "cross", height: "12", weight: "12" }),
+                _react2.default.createElement(_icon2.default, { name: 'cross', height: '12', weight: '12' }),
                 ' '
               )
             ),
@@ -629,7 +622,8 @@ var _initialiseProps = function _initialiseProps() {
             dateVal = new Date(dateVal);
             view[idx] = dateVal;
             return dateVal;
-          }if (typeof dateVal === 'string') {
+          }
+          if (typeof dateVal === 'string') {
             if (dateVal.trim()) {
               view[idx] = DateUtilities.stringToDate(dateVal);
               return DateUtilities.stringToDate(dateVal);
@@ -677,12 +671,12 @@ var Calendar = function (_Component2) {
   }
 
   _createClass(Calendar, [{
-    key: "onTransitionEnd",
+    key: 'onTransitionEnd',
     value: function onTransitionEnd() {
       this.refs.monthHeader.enable();
     }
   }, {
-    key: "show",
+    key: 'show',
     value: function show(position) {
       this.setState({
         visible: true,
@@ -695,15 +689,15 @@ var Calendar = function (_Component2) {
       });
     }
   }, {
-    key: "hide",
+    key: 'hide',
     value: function hide() {
       if (this.state.visible) this.setState({ visible: false });
     }
   }, {
-    key: "render",
+    key: 'render',
     value: function render() {
       return _react2.default.createElement(
-        "div",
+        'div',
         {
           ref: 'calendar',
           className: 'ardp-calendar-' + this.props.id + ' calendar' + (this.state.visible ? ' calendar-show' : ' calendar-hide'),
@@ -760,7 +754,7 @@ var MonthHeader = function (_Component3) {
   }
 
   _createClass(MonthHeader, [{
-    key: "moveBackward",
+    key: 'moveBackward',
     value: function moveBackward(type) {
       var view = DateUtilities.clone(this.state.view);
       if (type === 'month') {
@@ -771,7 +765,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') {
@@ -782,7 +776,7 @@ var MonthHeader = function (_Component3) {
       this.move(view, true);
     }
   }, {
-    key: "move",
+    key: 'move',
     value: function move(view, isForward) {
       var _this7 = this;
 
@@ -796,14 +790,14 @@ 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);
@@ -829,7 +823,7 @@ var MonthHeader = function (_Component3) {
       return this.props.maxDate && DateUtilities.isAfter(last, this.props.maxDate);
     }
   }, {
-    key: "render",
+    key: 'render',
     value: function render() {
       var _this8 = this;
 
@@ -858,12 +852,12 @@ var MonthHeader = function (_Component3) {
         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" },
+        'span',
+        { className: 'month-text' },
         DateUtilities.toMonthAndYearString(this.state.view).month
       ), _react2.default.createElement(
-        "span",
-        { className: "year-text" },
+        'span',
+        { className: 'year-text' },
         ' ',
         DateUtilities.toMonthAndYearString(this.state.view).year
       )), _react2.default.createElement('span', {
@@ -890,7 +884,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())) {
         /*
@@ -916,7 +910,7 @@ var WeekHeader = function (_Component4) {
   }
 
   _createClass(WeekHeader, [{
-    key: "render",
+    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'));
     }
@@ -946,12 +940,12 @@ var Weeks = function (_Component5) {
   }
 
   _createClass(Weeks, [{
-    key: "componentDidMount",
+    key: 'componentDidMount',
     value: function componentDidMount() {
       this.refs.current.addEventListener('transitionend', this.onTransitionEnd);
     }
   }, {
-    key: "onTransitionEnd",
+    key: 'onTransitionEnd',
     value: function onTransitionEnd() {
       this.setState({
         sliding: null,
@@ -961,7 +955,7 @@ var Weeks = function (_Component5) {
       this.props.onTransitionEnd();
     }
   }, {
-    key: "getWeekStartDates",
+    key: 'getWeekStartDates',
     value: function getWeekStartDates(view) {
       view.setDate(1);
       view = DateUtilities.moveToDayOfWeek(DateUtilities.clone(view), 0, false);
@@ -979,7 +973,7 @@ var Weeks = function (_Component5) {
       return starts;
     }
   }, {
-    key: "moveTo",
+    key: 'moveTo',
     value: function moveTo(view, isForward) {
       this.setState({
         sliding: isForward ? 'left' : 'right',
@@ -987,7 +981,7 @@ var Weeks = function (_Component5) {
       });
     }
   }, {
-    key: "render",
+    key: 'render',
     value: function render() {
       return _react2.default.createElement('div', { className: 'weeks' }, _react2.default.createElement('div', {
         ref: 'current',
@@ -998,7 +992,7 @@ var Weeks = function (_Component5) {
       }, this.renderWeeks(this.state.other)));
     }
   }, {
-    key: "renderWeeks",
+    key: 'renderWeeks',
     value: function renderWeeks(view) {
       var starts = this.getWeekStartDates(view);
       var month = starts[1].getMonth();
@@ -1020,7 +1014,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())) {
         /*
@@ -1054,7 +1048,7 @@ var Week = function (_Component6) {
   }
 
   _createClass(Week, [{
-    key: "buildDays",
+    key: 'buildDays',
     value: function buildDays(start) {
       var days = [DateUtilities.clone(start)];
       var clone = DateUtilities.clone(start);
@@ -1066,12 +1060,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';
@@ -1089,14 +1083,14 @@ 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;
@@ -1105,7 +1099,7 @@ var Week = function (_Component6) {
       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) {
@@ -1116,7 +1110,7 @@ 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) {
@@ -1129,9 +1123,9 @@ var Week = function (_Component6) {
           },
           className: this.getDayClassName(day)
         }, _react2.default.createElement(
-          "span",
+          'span',
           null,
-          " ",
+          ' ',
           DateUtilities.toDayOfMonthString(day)
         ));
       }.bind(this)));