@desynova-digital/components 8.17.5 → 8.17.7

package/atoms/datePicker/datePicker.js

@@ -9,7 +9,8 @@ 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");
 
@@ -151,6 +152,10 @@ var DatePickerInput = _styledComponents2.default.div(_templateObject, function (
   return _tokens.colors[props.theme].datepicker.daySelectedBackground;
 });
 
+var InputError = _styledComponents2.default.span(_templateObject2, function (props) {
+  return _tokens.colors[props.theme].inputError.color;
+});
+
 var DateUtilities = {
   pad: function pad(value, length) {
     while (value.length < length) {
@@ -487,91 +492,100 @@ 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(
-        DatePickerInput,
-        _extends({}, this.props, {
-          className: this.props.className ? "ardp-date-picker " + this.props.className : "ardp-date-picker"
-        }),
+        "div",
+        null,
         _react2.default.createElement(
-          "div",
-          null,
-          this.props.labelAsText ? _react2.default.createElement(
-            "div",
-            {
-              ref: "trigger",
-              type: "text",
-              className: "label-text date-picker-trigger-" + this.state.ids[0],
-              onClick: function onClick() {
-                return _this4.show(0);
-              }
-            },
-            this.props.label
-          ) : _react2.default.createElement(
+          DatePickerInput,
+          _extends({}, this.props, {
+            className: this.props.className ? "ardp-date-picker " + this.props.className : "ardp-date-picker"
+          }),
+          _react2.default.createElement(
             "div",
-            { className: "form-input" },
-            _react2.default.createElement(
-              "label",
-              {
-                className: DateUtilities.toString(this.state.selectedDate[0]).length > 0 ? "floaton" : ""
-              },
-              this.props.label
-            ),
-            _react2.default.createElement("input", _extends({
-              type: "text",
-              placeholder: this.props.placeholder,
-              theme: this.props.theme
-            }, {
-              ref: "trigger",
-              type: "text",
-              className: "date-picker-trigger-" + this.state.ids[0],
-              readOnly: true,
-              value: dateStr, // ( DateUtilities.toString(this.state.selectedDate[0])+''+ this.state.selectedDate[1]? DateUtilities.toString(this.state.selectedDate[0]):null ),
-              onClick: function onClick() {
-                return _this4.show(0);
-              }
-            })),
-            !this.props.rangePicker && !this.props.inline && !this.props.readOnly && _react2.default.createElement(
-              "span",
+            null,
+            this.props.labelAsText ? _react2.default.createElement(
+              "div",
               {
-                className: "calender-icon",
+                ref: "trigger",
+                type: "text",
+                className: "label-text date-picker-trigger-" + this.state.ids[0],
                 onClick: function onClick() {
                   return _this4.show(0);
                 }
               },
-              _react2.default.createElement(_icon2.default, {
-                name: "calender",
-                height: "18",
-                width: "16",
-                color: "#AFB2BA"
-              })
-            ),
-            this.props.rangePicker && dateStr && dateStr.length > 0 && _react2.default.createElement(
+              this.props.label
+            ) : _react2.default.createElement(
               "div",
-              {
-                className: "clear-icon",
+              { className: "form-input" },
+              _react2.default.createElement(
+                "label",
+                {
+                  className: DateUtilities.toString(this.state.selectedDate[0]).length > 0 ? "floaton" : ""
+                },
+                this.props.label
+              ),
+              _react2.default.createElement("input", _extends({
+                type: "text",
+                placeholder: this.props.placeholder,
+                theme: this.props.theme
+              }, {
+                ref: "trigger",
+                type: "text",
+                className: "date-picker-trigger-" + this.state.ids[0],
+                readOnly: true,
+                value: dateStr, // ( DateUtilities.toString(this.state.selectedDate[0])+''+ this.state.selectedDate[1]? DateUtilities.toString(this.state.selectedDate[0]):null ),
                 onClick: function onClick() {
-                  _this4.clearDateValue();
+                  return _this4.show(0);
                 }
-              },
-              _react2.default.createElement(_icon2.default, { name: "cross", height: "12", weight: "12" }),
-              " "
-            )
-          ),
-          _react2.default.createElement(Calendar, _extends({
-            theme: this.props.theme
-          }, {
-            ref: "calendar",
-            id: this.state.ids[0],
-            view: this.state.view[0],
-            selected: this.state.selectedDate[0],
-            selected2: this.state.selectedDate[1],
-            rangePicker: this.props.rangePicker,
-            disabledDates: this.props.disabledDates,
-            onSelect: this.onSelect,
-            dateIdx: 0,
-            minDate: this.props.minDate,
-            maxDate: this.props.maxDate
-          }))
-        )
+              })),
+              !this.props.rangePicker && !this.props.inline && !this.props.readOnly && _react2.default.createElement(
+                "span",
+                {
+                  className: "calender-icon",
+                  onClick: function onClick() {
+                    return _this4.show(0);
+                  }
+                },
+                _react2.default.createElement(_icon2.default, {
+                  name: "calender",
+                  height: "18",
+                  width: "16",
+                  color: "#AFB2BA"
+                })
+              ),
+              this.props.rangePicker && dateStr && dateStr.length > 0 && _react2.default.createElement(
+                "div",
+                {
+                  className: "clear-icon",
+                  onClick: function onClick() {
+                    _this4.clearDateValue();
+                  }
+                },
+                _react2.default.createElement(_icon2.default, { name: "cross", height: "12", weight: "12" }),
+                " "
+              )
+            ),
+            _react2.default.createElement(Calendar, _extends({
+              theme: this.props.theme
+            }, {
+              ref: "calendar",
+              id: this.state.ids[0],
+              view: this.state.view[0],
+              selected: this.state.selectedDate[0],
+              selected2: this.state.selectedDate[1],
+              rangePicker: this.props.rangePicker,
+              disabledDates: this.props.disabledDates,
+              onSelect: this.onSelect,
+              dateIdx: 0,
+              minDate: this.props.minDate,
+              maxDate: this.props.maxDate
+            }))
+          )
+        ),
+        this.props.error && this.props.error.length > 0 ? _react2.default.createElement(
+          InputError,
+          { value: this.props.value, theme: this.props.theme, error: this.props.error },
+          this.props.error
+        ) : null
       );
     }
   }]);

package/atoms/datePicker/datePicker.story.js

@@ -32,6 +32,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
           ),
           _react2.default.createElement(_components.DatePicker, {
             label: 'from',
+            error: "Select date",
             rangePicker: false,
             minDate: null,
             maxDate: null,

package/package.json

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