@desynova-digital/components 8.19.46 → 8.19.48

package/atoms/cardV2/thumbnail.js

@@ -243,7 +243,7 @@ var Thumbnail = function Thumbnail(props) {
         }) || null
       )
     ),
-    file_type && file_type !== 'video' && file_type !== 'image' ? _react2.default.createElement(
+    file_type && !thumbnail ? _react2.default.createElement(
       "div",
       { className: "thumbnail-image-block background-block" },
       _react2.default.createElement(

package/atoms/datePicker/datePicker.js

@@ -9,7 +9,7 @@ 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"]),
+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 _react = require("react");
@@ -41,15 +41,15 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
 //'@desynova-digital/tokens'
 
 var DatePickerInput = _styledComponents2.default.div(_templateObject, function (props) {
-  return props.inline ? "none" : "block";
+  return props.inline ? 'none' : 'block';
 }, function (props) {
   return _tokens.colors[props.theme].inputCommon.background;
 }, function (props) {
   return _tokens.colors[props.theme].datepicker.selectedColor;
 }, function (props) {
-  return props.readOnly ? "not-allowed" : "pointer";
+  return props.readOnly ? 'not-allowed' : 'pointer';
 }, function (props) {
-  return props.readOnly ? "none" : "all";
+  return props.readOnly ? 'none' : 'all';
 }, function (props) {
   return _tokens.colors[props.theme].inputCommon.borderDisabled;
 }, function (props) {
@@ -57,11 +57,11 @@ var DatePickerInput = _styledComponents2.default.div(_templateObject, function (
 }, function (props) {
   return _tokens.colors[props.theme].inputCommon.colorDisabled;
 }, function (props) {
-  return props.label ? "transparent" : function (props) {
+  return props.label ? 'transparent' : function (props) {
     return _tokens.colors[props.theme].inputCommon.placeholder;
   };
 }, function (props) {
-  return props.label ? "0" : "1";
+  return props.label ? '0' : '1';
 }, function (props) {
   return props.placeholder ? function (props) {
     return _tokens.colors[props.theme].inputCommon.placeholder;
@@ -69,41 +69,39 @@ var DatePickerInput = _styledComponents2.default.div(_templateObject, function (
     return _tokens.colors[props.theme].inputCommon.placeholder;
   };
 }, function (props) {
-  return props.placeholder ? "1" : "1";
+  return props.placeholder ? '1' : '1';
 }, function (props) {
   if (props.error) {
     return _tokens.colors[props.theme].inputError.border;
-  } else {
-    return _tokens.colors[props.theme].inputCommon.border;
   }
+  return _tokens.colors[props.theme].inputCommon.border;
 }, function (props) {
   if (props.error) {
     return _tokens.colors[props.theme].inputError.borderHover;
-  } else {
-    return _tokens.colors[props.theme].inputCommon.borderHover;
   }
+  return _tokens.colors[props.theme].inputCommon.borderHover;
 }, function (props) {
   return _tokens.colors[props.theme].inputLabel.color;
 }, function (props) {
-  return props.inline ? "relative" : "absolute";
+  return props.inline ? 'relative' : 'absolute';
 }, function (props) {
-  return props.inline ? "0px" : "10px";
+  return props.inline ? '0px' : '10px';
 }, function (props) {
-  return props.inline ? "0px" : "-10px;";
+  return props.inline ? '0px' : '-10px;';
 }, function (props) {
   return _tokens.colors[props.theme].inputLabel.colorOnFocus;
 }, function (props) {
-  return props.inline ? "relative" : "absolute";
+  return props.inline ? 'relative' : 'absolute';
 }, function (props) {
-  return props.inline ? "0" : "10";
+  return props.inline ? '0' : '10';
 }, function (props) {
   return _tokens.colors[props.theme].datepicker.background;
 }, function (props) {
   return _tokens.colors[props.theme].datepicker.calenderBorder;
 }, function (props) {
-  return props.inline ? "visible" : "hidden";
+  return props.inline ? 'visible' : 'hidden';
 }, function (props) {
-  return props.inline ? "1" : "0";
+  return props.inline ? '1' : '0';
 }, function (props) {
   return _tokens.colors[props.theme].datepicker.monthHeaderBorder;
 }, function (props) {
@@ -159,35 +157,32 @@ var InputError = _styledComponents2.default.span(_templateObject2, function (pro
 var DateUtilities = {
   pad: function pad(value, length) {
     while (value.length < length) {
-      value = "0" + value;
+      value = '0' + value;
     }return value;
   },
-
   clone: function clone(date) {
-    return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+    if (date) {
+      return new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0, 0);
+    }
+    return null;
   },
-
   toString: function toString(date) {
     if (date) {
-      return DateUtilities.pad(date.getDate().toString(), 2) + "/" + DateUtilities.pad((date.getMonth() + 1).toString(), 2) + "/" + date.getFullYear();
-    } else {
-      return "";
+      return DateUtilities.pad(date.getDate().toString(), 2) + '/' + DateUtilities.pad((date.getMonth() + 1).toString(), 2) + '/' + date.getFullYear();
     }
+    return '';
   },
-
   toDayOfMonthString: function toDayOfMonthString(date) {
     return DateUtilities.pad(date.getDate().toString());
   },
-
   toMonthAndYearString: function toMonthAndYearString(date) {
-    var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
     return {
-      monthYear: months[date.getMonth()] + " " + date.getFullYear(),
+      monthYear: months[date.getMonth()] + ' ' + date.getFullYear(),
       month: months[date.getMonth()],
       year: date.getFullYear()
     };
   },
-
   moveToDayOfWeek: function moveToDayOfWeek(date, dayOfWeek, lookForward) {
     while (date.getDay() !== dayOfWeek) {
       if (lookForward) {
@@ -198,28 +193,26 @@ var DateUtilities = {
     }
     return date;
   },
-
   isSameDay: function isSameDay(first, second) {
     return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth() && first.getDate() === second.getDate();
   },
-
   stringToDate: function stringToDate(date) {
-    if (typeof date === "string") {
-      return new Date(date.split("/")[1] + "/" + date.split("/")[0] + "/" + date.split("/")[2]);
-    } else if (typeof date === "number") {
+
+    if (typeof date === 'string') {
+      return date.trim().length ? new Date(date.split('/')[1] + '/' + date.split('/')[0] + '/' + date.split('/')[2]) : null;
+    }if (typeof date === 'number') {
       return new Date(date);
     }
   },
   isBefore: function isBefore(first, second) {
-    if (typeof second === "string" || typeof second === "number") {
+    if (typeof second === 'string' || typeof second === 'number') {
       second = DateUtilities.stringToDate(second);
     }
 
     return first.getTime() < second.getTime();
   },
-
   isAfter: function isAfter(first, second) {
-    if (typeof second === "string" || typeof second === "number") {
+    if (typeof second === 'string' || typeof second === 'number') {
       second = DateUtilities.stringToDate(second);
     }
     return first.getTime() > second.getTime();
@@ -239,20 +232,23 @@ var DatePicker = function (_Component) {
     var def = null;
     var view = [new Date(), new Date()];
     var selectedDates = [];
-    if (typeof props.selected === "string") {
-      def = DateUtilities.stringToDate(props.selected);
-      view[0] = def;
-      selectedDates = [def];
+    if (typeof props.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(props.selected)) {
       selectedDates = props.selected.map(function (dateVal, idx) {
-        if (typeof dateVal === "number") {
+        if (typeof dateVal === 'number') {
           dateVal = new Date(dateVal);
           view[idx] = dateVal;
-
           return dateVal;
-        } else {
+        }if (dateVal.trim()) {
           view[idx] = DateUtilities.stringToDate(dateVal);
-
           return DateUtilities.stringToDate(dateVal);
         }
       });
@@ -281,21 +277,23 @@ var DatePicker = function (_Component) {
   _createClass(DatePicker, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      document.addEventListener("click", this.hideOnDocumentClick);
+      document.addEventListener('click', this.hideOnDocumentClick);
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      document.removeEventListener("click", this.hideOnDocumentClick);
+      document.removeEventListener('click', this.hideOnDocumentClick);
     }
   }, {
     key: "hideOnDocumentClick",
     value: function hideOnDocumentClick(e) {
       if (
-      //e.target.className !== 'date-picker-trigger-' + this.state.ids[0] &&
-      //e.target.className !== 'date-picker-trigger-' + this.state.ids[1] &&
+      /*
+       * e.target.className !== 'date-picker-trigger-' + this.state.ids[0] &&
+       * e.target.className !== 'date-picker-trigger-' + this.state.ids[1] &&
+       */
 
-      typeof e.target.className === "string" && !e.target.className.includes("date-picker-trigger-") && !(this.parentsHaveClassName(e.target, "ardp-calendar-" + this.state.ids[0]) || this.parentsHaveClassName(e.target, "ardp-calendar-" + this.state.ids[1])) && !(this.parentsHaveClassName(e.target, "date-picker-trigger-" + this.state.ids[0]) || this.parentsHaveClassName(e.target, "date-picker-trigger-" + this.state.ids[1]))) {
+      typeof e.target.className === 'string' && !e.target.className.includes('date-picker-trigger-') && !(this.parentsHaveClassName(e.target, 'ardp-calendar-' + this.state.ids[0]) || this.parentsHaveClassName(e.target, 'ardp-calendar-' + this.state.ids[1])) && !(this.parentsHaveClassName(e.target, 'date-picker-trigger-' + this.state.ids[0]) || this.parentsHaveClassName(e.target, 'date-picker-trigger-' + this.state.ids[1]))) {
         this.hide();
       }
     }
@@ -306,14 +304,14 @@ var DatePicker = function (_Component) {
         return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
       }
 
-      return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
+      return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
     }
   }, {
     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;
+        if (parent.className && typeof parent.className === 'string' && parent.className.indexOf(className) > -1) return true;
 
         parent = parent.parentNode;
       }
@@ -337,32 +335,39 @@ var DatePicker = function (_Component) {
 
       var selectedDateArr = [].concat(_toConsumableArray(this.state.selectedDate));
 
-      /*if (dayIdx === 0 && this.state.selectedDate[1]) {
-        if (!DateUtilities.isBefore(day, this.state.selectedDate[1])) {
-          selectedDateArr[1] = null
-        }
-      }
-        if(selectedDateArr[0] && this.props.rangePicker){
-        selectedDateArr[1] = day
-      }else{
-        selectedDateArr[0] = day
-      } */
+      /*
+       *if (dayIdx === 0 && this.state.selectedDate[1]) {
+       *if (!DateUtilities.isBefore(day, this.state.selectedDate[1])) {
+       *  selectedDateArr[1] = null
+       *}
+       *}
+       *
+       *if(selectedDateArr[0] && this.props.rangePicker){
+       *selectedDateArr[1] = day
+       *}else{
+       *selectedDateArr[0] = day
+       *} 
+       */
 
       if (this.props.rangePicker) {
-        // if(selectedDateArr[0]){
-        //   selectedDateArr[1] = day;
-        // }else{
-        //   selectedDateArr[0] = day;
-        // }
+        /*
+         * if(selectedDateArr[0]){
+         *   selectedDateArr[1] = day;
+         * }else{
+         *   selectedDateArr[0] = day;
+         * }
+         */
 
         if (selectedDateArr[0] && selectedDateArr[1] && this.state.dateSelectionFor == 0 && this.props.datepickerStep != 2) {
           selectedDateArr[0] = null;
           selectedDateArr[1] = null;
         } else {
           selectedDateArr[this.state.dateSelectionFor] = day;
-          // if(selectedDateArr[1] && this.state.dateSelectionFor == 0){
-          //   selectedDateArr[1] = null;
-          // }
+          /*
+           * if(selectedDateArr[1] && this.state.dateSelectionFor == 0){
+           *   selectedDateArr[1] = null;
+           * }
+           */
           if (selectedDateArr[0] && !selectedDateArr[1] && this.state.dateSelectionFor == 0) {
             selectedDateArr[1] = day;
           } else if (this.props.datepickerStep == 2 && this.state.dateSelectionFor == 0) {
@@ -376,11 +381,13 @@ var DatePicker = function (_Component) {
           }
         }
 
-        /*if(selectedDateArr[1] && DateUtilities.isBefore(selectedDateArr[1], selectedDateArr[0])){
-            let temp = selectedDateArr[0]; 
-            selectedDateArr[0] = selectedDateArr[1];
-            selectedDateArr[1] = temp;
-          } */
+        /*
+         *if(selectedDateArr[1] && DateUtilities.isBefore(selectedDateArr[1], selectedDateArr[0])){
+         *  let temp = selectedDateArr[0]; 
+         *  selectedDateArr[0] = selectedDateArr[1];
+         *  selectedDateArr[1] = temp;
+         *} 
+         */
       } else {
         selectedDateArr[0] = day;
       }
@@ -408,7 +415,7 @@ var DatePicker = function (_Component) {
     value: function clearDateValue() {
       var _this3 = this;
 
-      //let selectedDateArr = [...this.state.selectedDate];
+      // let selectedDateArr = [...this.state.selectedDate];
       this.setState({
         selectedDate: this.props.rangePicker ? [null, null] : [null],
         dateSelectionFor: 0
@@ -435,10 +442,11 @@ var DatePicker = function (_Component) {
             left: 0
           });
         } else {
-          var trigger = this.refs.trigger,
-              rect = trigger.getBoundingClientRect(),
-              isTopHalf = rect.top > window.innerHeight / 2,
-              calendarHeight = 203;
+          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,
@@ -451,10 +459,10 @@ var DatePicker = function (_Component) {
         if (this.props.inline) {
           this.refs.calendar1.show();
         } else {
-          var _trigger = this.refs.trigger1,
-              _rect = _trigger.getBoundingClientRect(),
-              _isTopHalf = _rect.top > window.innerHeight / 2,
-              _calendarHeight = 203;
+          var _trigger = this.refs.trigger1;
+          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,
@@ -488,8 +496,8 @@ var DatePicker = function (_Component) {
 
       var dateStr = DateUtilities.toString(this.state.selectedDate[0]);
       if (this.props.rangePicker && this.state.selectedDate[1]) {
-        dateStr = 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
+        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",
@@ -497,7 +505,7 @@ var DatePicker = function (_Component) {
         _react2.default.createElement(
           DatePickerInput,
           _extends({}, this.props, {
-            className: this.props.className ? "ardp-date-picker " + this.props.className : "ardp-date-picker"
+            className: this.props.className ? 'ardp-date-picker ' + this.props.className : 'ardp-date-picker'
           }),
           _react2.default.createElement(
             "div",
@@ -505,9 +513,9 @@ var DatePicker = function (_Component) {
             this.props.labelAsText ? _react2.default.createElement(
               "div",
               {
-                ref: "trigger",
-                type: "text",
-                className: "label-text date-picker-trigger-" + this.state.ids[0],
+                ref: 'trigger',
+                type: 'text',
+                className: 'label-text date-picker-trigger-' + this.state.ids[0],
                 onClick: function onClick() {
                   return _this4.show(0);
                 }
@@ -519,18 +527,18 @@ var DatePicker = function (_Component) {
               _react2.default.createElement(
                 "label",
                 {
-                  className: DateUtilities.toString(this.state.selectedDate[0]).length > 0 ? "floaton" : ""
+                  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",
                 placeholder: this.props.placeholder,
                 theme: this.props.theme
               }, {
-                ref: "trigger",
-                type: "text",
-                className: "date-picker-trigger-" + this.state.ids[0],
+                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() {
@@ -561,13 +569,13 @@ var DatePicker = function (_Component) {
                   }
                 },
                 _react2.default.createElement(_icon2.default, { name: "cross", height: "12", weight: "12" }),
-                " "
+                ' '
               )
             ),
             _react2.default.createElement(Calendar, _extends({
               theme: this.props.theme
             }, {
-              ref: "calendar",
+              ref: 'calendar',
               id: this.state.ids[0],
               view: this.state.view[0],
               selected: this.state.selectedDate[0],
@@ -601,18 +609,23 @@ var _initialiseProps = function _initialiseProps() {
       var def = null;
       var view = [new Date(), new Date()];
       var selectedDates = [];
-      if (typeof newProps.selected === "string") {
-        def = DateUtilities.stringToDate(newProps.selected);
-        view[0] = def;
-        selectedDates = [def];
+      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") {
+          if (typeof dateVal === 'number') {
             dateVal = new Date(dateVal);
             view[idx] = dateVal;
 
             return dateVal;
-          } else {
+          }if (dateVal.trim()) {
             view[idx] = DateUtilities.stringToDate(dateVal);
 
             return DateUtilities.stringToDate(dateVal);
@@ -666,8 +679,10 @@ var Calendar = function (_Component2) {
       this.setState({
         visible: true,
         style: {
-          // top: position.top,
-          // left: position.left
+          /*
+           * top: position.top,
+           * left: position.left
+           */
         }
       });
     }
@@ -682,14 +697,14 @@ var Calendar = function (_Component2) {
       return _react2.default.createElement(
         "div",
         {
-          ref: "calendar",
-          className: "ardp-calendar-" + this.props.id + " calendar" + (this.state.visible ? " calendar-show" : " calendar-hide"),
+          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",
+          ref: 'monthHeader',
           dateIdx: this.props.dateIdx,
           view: this.props.view,
           onMove: this.onMove,
@@ -698,7 +713,7 @@ var Calendar = function (_Component2) {
         })),
         _react2.default.createElement(WeekHeader, null),
         _react2.default.createElement(Weeks, {
-          ref: "weeks",
+          ref: 'weeks',
           view: this.props.view,
           selected: this.props.selected,
           selected2: this.props.selected2,
@@ -789,8 +804,8 @@ var MonthHeader = function (_Component3) {
       var current = DateUtilities.clone(view);
       current.setDate(current.getDate() + 7);
 
-      var starts = [view],
-          month = current.getMonth();
+      var starts = [view];
+      var month = current.getMonth();
 
       while (current.getMonth() === month) {
         starts.push(DateUtilities.clone(current));
@@ -802,9 +817,8 @@ var MonthHeader = function (_Component3) {
 
       if (direction) {
         return this.props.minDate && DateUtilities.isBefore(first, this.props.minDate);
-      } else {
-        return this.props.maxDate && DateUtilities.isAfter(last, this.props.maxDate);
       }
+      return this.props.maxDate && DateUtilities.isAfter(last, this.props.maxDate);
     }
   }, {
     key: "render",
@@ -813,53 +827,54 @@ var MonthHeader = function (_Component3) {
 
       var enabled = this.state.enabled;
 
-      return _react2.default.createElement("div", { className: "month-header" }, _react2.default.createElement("span", {
-        className: enabled && !this.limitDates(true) ? "prev-month" : "next-month disabled",
+
+      return _react2.default.createElement('div', { className: 'month-header' }, _react2.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, {
-        name: "angle-left-double",
+        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", {
-        className: enabled && !this.limitDates(true) ? "prev-month" : "next-month disabled",
+      }, null)), _react2.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, {
-        name: "angle-left",
+        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(
+      }, 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", {
-        className: enabled && !this.limitDates(false) ? "next-month" : "next-month disabled",
+      )), _react2.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, {
-        name: "angle-right",
+        name: 'angle-right',
         width: 8,
         height: 16,
         stroke: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke
-      }, null)), _react2.default.createElement("span", {
-        className: enabled && !this.limitDates(false) ? "next-month" : "next-month disabled",
+      }, null)), _react2.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, {
-        name: "angle-right-double",
+        name: 'angle-right-double',
         color: _tokens.colors[this.props.theme].datepicker.nextPrevIconStroke,
         width: 16,
         height: 16,
@@ -870,9 +885,11 @@ var MonthHeader = function (_Component3) {
     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())) {
-        // return {
-        //   view: DateUtilities.clone(props.minDate)
-        // }
+        /*
+         * return {
+         *   view: DateUtilities.clone(props.minDate)
+         * }
+         */
       }
       return null;
     }
@@ -893,7 +910,7 @@ var WeekHeader = function (_Component4) {
   _createClass(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 _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'));
     }
   }]);
 
@@ -923,7 +940,7 @@ var Weeks = function (_Component5) {
   _createClass(Weeks, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.refs.current.addEventListener("transitionend", this.onTransitionEnd);
+      this.refs.current.addEventListener('transitionend', this.onTransitionEnd);
     }
   }, {
     key: "onTransitionEnd",
@@ -944,8 +961,8 @@ var Weeks = function (_Component5) {
       var current = DateUtilities.clone(view);
       current.setDate(current.getDate() + 7);
 
-      var starts = [view],
-          month = current.getMonth();
+      var starts = [view];
+      var month = current.getMonth();
 
       while (current.getMonth() === month) {
         starts.push(DateUtilities.clone(current));
@@ -957,26 +974,26 @@ var Weeks = function (_Component5) {
     key: "moveTo",
     value: function moveTo(view, isForward) {
       this.setState({
-        sliding: isForward ? "left" : "right",
+        sliding: isForward ? 'left' : 'right',
         other: DateUtilities.clone(view)
       });
     }
   }, {
     key: "render",
     value: function render() {
-      return _react2.default.createElement("div", { className: "weeks" }, _react2.default.createElement("div", {
-        ref: "current",
-        className: "current" + (this.state.sliding ? " sliding " + this.state.sliding : "")
-      }, this.renderWeeks(this.state.view)), _react2.default.createElement("div", {
-        ref: "other",
-        className: "other" + (this.state.sliding ? " sliding " + this.state.sliding : "")
+      return _react2.default.createElement('div', { className: 'weeks' }, _react2.default.createElement('div', {
+        ref: 'current',
+        className: 'current' + (this.state.sliding ? ' sliding ' + this.state.sliding : '')
+      }, this.renderWeeks(this.state.view)), _react2.default.createElement('div', {
+        ref: 'other',
+        className: 'other' + (this.state.sliding ? ' sliding ' + this.state.sliding : '')
       }, this.renderWeeks(this.state.other)));
     }
   }, {
     key: "renderWeeks",
     value: function renderWeeks(view) {
-      var starts = this.getWeekStartDates(view),
-          month = starts[1].getMonth();
+      var starts = this.getWeekStartDates(view);
+      var month = starts[1].getMonth();
 
       return starts.map(function (s, i) {
         return _react2.default.createElement(Week, {
@@ -998,10 +1015,12 @@ var Weeks = function (_Component5) {
     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())) {
-        // return {
-        //   view: DateUtilities.clone(props.minDate),
-        //   other: DateUtilities.clone(props.minDate)
-        // }
+        /*
+         * return {
+         *   view: DateUtilities.clone(props.minDate),
+         *   other: DateUtilities.clone(props.minDate)
+         * }
+         */
       }
       return null;
     }
@@ -1029,8 +1048,8 @@ var Week = function (_Component6) {
   _createClass(Week, [{
     key: "buildDays",
     value: function buildDays(start) {
-      var days = [DateUtilities.clone(start)],
-          clone = DateUtilities.clone(start);
+      var days = [DateUtilities.clone(start)];
+      var clone = DateUtilities.clone(start);
       for (var i = 1; i <= 6; i++) {
         clone = DateUtilities.clone(clone);
         clone.setDate(clone.getDate() + 1);
@@ -1046,19 +1065,19 @@ var Week = function (_Component6) {
   }, {
     key: "getDayClassName",
     value: function getDayClassName(day) {
-      var className = "day";
-      if (DateUtilities.isSameDay(day, new Date())) className += " today";
-      if (this.props.month !== day.getMonth()) className += " other-month";
+      var className = 'day';
+      if (DateUtilities.isSameDay(day, new Date())) className += ' today';
+      if (this.props.month !== day.getMonth()) className += ' other-month';
       if (this.props.selected && DateUtilities.isSameDay(day, this.props.selected)) {
-        className += this.props.rangePicker ? " selected range-start" : " selected";
+        className += this.props.rangePicker ? ' selected range-start' : ' selected';
       }
       if (this.props.selected2 && DateUtilities.isSameDay(day, this.props.selected2)) {
-        className += this.props.rangePicker ? " selected range-end" : " selected";
+        className += this.props.rangePicker ? ' selected range-end' : ' selected';
       }
       if (this.props.selected && this.props.selected2 && DateUtilities.isAfter(day, this.props.selected) && DateUtilities.isBefore(day, this.props.selected2)) {
-        className += " in-selected-range";
+        className += ' in-selected-range';
       }
-      if (this.isDisabled(day)) className += " disabled";
+      if (this.isDisabled(day)) className += ' disabled';
       return className;
     }
   }, {
@@ -1071,8 +1090,9 @@ var Week = function (_Component6) {
   }, {
     key: "isDisabled",
     value: function isDisabled(day) {
-      var minDate = this.props.minDate,
-          maxDate = this.props.maxDate;
+      var minDate = this.props.minDate;
+      var maxDate = this.props.maxDate;
+
 
       return minDate && DateUtilities.isBefore(day, minDate) || maxDate && DateUtilities.isAfter(day, maxDate) || this.isDateFromDisabled(day);
     }
@@ -1091,10 +1111,10 @@ var Week = function (_Component6) {
     key: "render",
     value: function render() {
       var days = this.buildDays(this.props.start);
-      return _react2.default.createElement("div", { className: "week" }, days.map(function (day, i) {
+      return _react2.default.createElement('div', { className: 'week' }, days.map(function (day, i) {
         var _this12 = this;
 
-        return _react2.default.createElement("div", {
+        return _react2.default.createElement('div', {
           key: i,
           onClick: function onClick() {
             _this12.onSelect(day);
@@ -1114,10 +1134,10 @@ var Week = function (_Component6) {
 }(_react.Component);
 
 DatePicker.defaultProps = {
-  theme: "light",
+  theme: 'light',
   inline: false,
   rangePicker: false,
-  defaultSelcted: "",
+  defaultSelcted: '',
   disabledDates: []
 };
 

package/atoms/icon/icons.json

@@ -1565,6 +1565,13 @@
       ],
       "width": 24,
       "height": 24
+    },
+    "video-icon": {
+      "paths": [
+        "M1.8 3.6H0V16.2C0 17.19 0.81 18 1.8 18H14.4V16.2H1.8V3.6ZM16.2 0H5.4C4.41 0 3.6 0.81 3.6 1.8V12.6C3.6 13.59 4.41 14.4 5.4 14.4H16.2C17.19 14.4 18 13.59 18 12.6V1.8C18 0.81 17.19 0 16.2 0ZM16.2 12.6H5.4V1.8H16.2V12.6ZM9 3.15V11.25L14.4 7.2L9 3.15Z"
+      ],
+      "width": 18,
+      "height": 18
     }
   }
 }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "8.19.46",
+  "version": "8.19.48",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "8.19.46",
+    "@desynova-digital/tokens": "8.19.48",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },