@vchasno/ui-kit 0.3.28 → 0.3.29

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.29] - 2024-08-18
+
+## Added
+
+-   `DatePicker` - add custom clear icon, hide clear icon if value is empty, hover styles for clear icon
+-   `Title` - add `pretty` prop for show title with text-wrap: pretty mode - set by default
+
+## Fixed
+
+-   fix styles for `Select` and `DatePicker` components
+-   not show `DatePicker` arrow for dropdown mode
+
 ## [0.3.26] - 2024-08-16
 
 ## Fixed

package/dist/Datepicker/index.cjs.js

@@ -15666,11 +15666,16 @@ var Spinner = function (_a) {
             React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
 };
 
-var css_248z = ".react-datepicker__triangle {\n    position: absolute;\n    left: 50px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    position: absolute;\n    margin-left: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    position: absolute;\n    width: 1px;\n    height: 0;\n    box-sizing: content-box;\n    border: 6px solid transparent;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    z-index: -1;\n    left: -6px;\n    border-width: 6px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n    content: '';\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n    top: 0;\n    margin-top: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    border-top: none;\n    border-bottom-color: #fff;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    top: -1px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {\n    position: absolute;\n    top: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    bottom: 0;\n    margin-bottom: -6px;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    border-top-color: #fff;\n    border-bottom: none;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    bottom: -1px;\n    border-top-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {\n    position: absolute;\n    bottom: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker {\n    position: relative;\n    display: inline-flex;\n    padding: 10px;\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    background-color: #fff;\n    color: var(--vchasno-ui-input-font-color);\n    font-size: 0.8rem;\n}\n\n.react-datepicker__time-container {\n    width: 85px;\n    float: right;\n}\n\n.react-datepicker__time-container--with-today-button {\n    position: absolute;\n    top: 0;\n    right: -87px;\n    display: inline;\n    border: 1px solid #aeaeae;\n    border-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time {\n    position: relative;\n    background: white;\n    border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n    width: 85px;\n    margin: 0 auto;\n    border-bottom-right-radius: 0.3rem;\n    overflow-x: hidden;\n    text-align: center;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list {\n    width: 100%;\n    height: calc(195px + (1.7rem / 2));\n    box-sizing: content-box;\n    padding-right: 0;\n    padding-left: 0;\n    margin: 0;\n    list-style: none;\n    overflow-y: scroll;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item {\n    height: 30px;\n    padding: 5px 10px;\n    border-radius: 8px;\n    white-space: nowrap;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected {\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled {\n    color: #ccc;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled:hover {\n    background-color: transparent;\n    cursor: default;\n}\n\n.react-datepicker__header--time {\n    padding-right: 5px;\n    padding-bottom: 8px;\n    padding-left: 5px;\n}\n\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n    border-top-left-radius: 0;\n}\n\n.react-datepicker__header {\n    position: relative;\n    padding-top: 5px;\n    text-align: center;\n}\n\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    border-top-right-radius: 0.3rem;\n}\n\n@media all and (width <= 480px) {\n    .react-datepicker {\n        padding: 0;\n    }\n}\n\n.react-datepicker-popper {\n    z-index: 100;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] {\n    margin-top: 8px;\n}\n\n.react-datepicker-popper[data-placement^='top'] {\n    margin-bottom: 8px;\n}\n\n.react-datepicker-popper[data-placement^='right'] {\n    margin-left: 6px;\n}\n\n.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {\n    right: 42px;\n    left: auto;\n}\n\n.react-datepicker-popper[data-placement^='left'] {\n    margin-right: 6px;\n}\n\n.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {\n    right: auto;\n    left: 42px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header {\n    padding: 8px 0 15px;\n    margin-top: 0;\n    color: var(--vchasno-ui-input-font-color);\n    font-weight: bold;\n    text-transform: capitalize;\n}\n\n.react-datepicker__month-container {\n    float: left;\n}\n\n.react-datepicker__aria-live {\n    display: none;\n}\n\n.react-datepicker__month {\n    margin: 0;\n    text-align: center;\n}\n\n.react-datepicker__day-names,\n.react-datepicker__week {\n    white-space: nowrap;\n}\n\n.react-datepicker__day-name {\n    text-transform: none;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n    display: inline-block;\n    width: 34px;\n    color: var(--vchasno-ui-input-font-color);\n    cursor: pointer;\n    line-height: 34px;\n    text-align: center;\n    transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.react-datepicker__day-names .react-datepicker__day-name {\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.react-datepicker__day-name:nth-child(6),\n.react-datepicker__day-name:nth-child(7) {\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: 700;\n}\n\n.react-datepicker__day:hover {\n    border-radius: 8px;\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__day--today {\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: bold;\n}\n\n.react-datepicker__day--weekend {\n    font-weight: bold;\n}\n\n.react-datepicker__day--outside-month {\n    color: #6b8091;\n}\n\n.react-datepicker__day--disabled {\n    color: #b6cadb;\n    cursor: not-allowed;\n}\n\n.react-datepicker__day--disabled:hover {\n    background-color: transparent;\n}\n\n.react-datepicker__day--selected,\n.react-datepicker__day--in-selecting-range,\n.react-datepicker__day--in-range {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__day--selected:hover,\n.react-datepicker__day--in-selecting-range:hover,\n.react-datepicker__day--in-range:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected) {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n    background-color: rgb(33 107 165 / 50%);\n}\n\n.react-datepicker__month--selecting-range\n    .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n    background-color: #f0f0f0;\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.react-datepicker__input-container {\n    position: relative;\n}\n\n.react-datepicker__close-icon {\n    position: absolute;\n    top: 0;\n    right: 35px;\n    bottom: 0;\n    width: 10px;\n    height: 10px;\n    border: 0;\n    margin: auto;\n    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIGZpbGw9IiNiNmNhZGIiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTM4LjEsMzIuNEw2My4zLDcuM2MxLjYtMS42LDEuNi00LjIsMC01LjdjLTEuNi0xLjYtNC4yLTEuNi01LjcsMEwzMi40LDI2LjdMNy4zLDEuNkM1LjcsMCwzLjEsMCwxLjUsMS42cy0xLjYsNC4yLDAsNS43bDI1LjEsMjUuMUwxLjUsNTcuNmMtMS42LDEuNi0xLjYsNC4yLDAsNS43YzAuOCwwLjgsMS44LDEuMiwyLjksMS4yczIuMS0wLjQsMi45LTEuMmwyNS4xLTI1LjFsMjUuMSwyNS4xYzAuOCwwLjgsMS44LDEuMiwyLjksMS4yYzEsMCwyLjEtMC40LDIuOS0xLjJjMS42LTEuNiwxLjYtNC4yLDAtNS43TDM4LjEsMzIuNHoiLz48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-size: contain;\n    cursor: pointer;\n    outline: none;\n}\n\n.react-datepicker__today-button {\n    padding: 5px 0;\n    border-top: 1px solid #aeaeae;\n    background: #f0f0f0;\n    clear: left;\n    cursor: pointer;\n    font-weight: bold;\n    text-align: center;\n}\n\n.react-datepicker__portal {\n    position: fixed;\n    z-index: 2147483647;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100vw;\n    height: 100vh;\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(0 0 0 / 80%);\n}\n\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n    width: 3rem;\n    line-height: 3rem;\n}\n\n@media (width <= 400px), (height <= 550px) {\n    .react-datepicker__portal .react-datepicker__day-name,\n    .react-datepicker__portal .react-datepicker__day,\n    .react-datepicker__portal .react-datepicker__time-name {\n        width: 2rem;\n        line-height: 2rem;\n    }\n}\n\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n    font-size: 1.44rem;\n}\n\n.react-datepicker__navigation {\n    position: absolute;\n    z-index: 1;\n    top: 15px;\n    display: flex;\n    width: 30px;\n    height: 30px;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 8px;\n    background-size: cover;\n    cursor: pointer;\n    line-height: 1;\n}\n\n.react-datepicker__navigation:hover {\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__navigation--previous {\n    left: 20px;\n}\n\n.react-datepicker__navigation-icon {\n    display: none;\n}\n\n.react-datepicker__navigation--previous::before,\n.react-datepicker__navigation--next::before {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    margin: auto;\n    inset: 0;\n}\n\n.react-datepicker__navigation--previous::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTQyLjcsNjVjMi4xLDAsNC4zLTAuOCw1LjktMi40YzMuMi0zLjIsMy4yLTguNSwwLTExLjdMMzAuNCwzMi43bDE4LjEtMTguNWMzLjItMy4yLDMuMi04LjUsMC0xMS43Yy0zLjItMy4yLTguNS0zLjItMTEuNywwTDE4LjcsMjAuNmMtNi42LDYuNi02LjYsMTcuMywwLDIzLjhsMTguMSwxOC4xQzM4LjQsNjQuMiw0MC42LDY1LDQyLjcsNjV6Ii8+PC9nPjwvc3ZnPg==');\n}\n\n.react-datepicker__navigation--next {\n    right: 20px;\n}\n\n.react-datepicker__day:focus,\n.react-datepicker__navigation--previous:focus,\n.react-datepicker__navigation--next:focus {\n    border-radius: 8px;\n    outline: 1px solid var(--vchasno-ui-calendar-color);\n    outline-offset: 1px;\n}\n\n.react-datepicker__navigation--next--with-time:not(\n        .react-datepicker__navigation--next--with-today-button\n    ) {\n    right: 110px;\n}\n\n.react-datepicker__navigation--next::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTIyLDY1Yy0yLjEsMC00LjMtMC44LTUuOS0yLjRjLTMuMi0zLjItMy4yLTguNSwwLTExLjdsMTguMS0xOC4xTDE2LjIsMTQuMmMtMy4yLTMuMi0zLjItOC41LDAtMTEuN3M4LjUtMy4yLDExLjcsMGwxOC4xLDE4LjFjNi42LDYuNiw2LjYsMTcuMywwLDIzLjhMMjcuOSw2Mi42QzI2LjMsNjQuMiwyNC4yLDY1LDIyLDY1eiIvPjwvZz48L3N2Zz4=');\n}\n\n.react-datepicker__input-container input {\n    width: 100%;\n    height: 30px;\n    box-sizing: border-box;\n    padding: 10px 15px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default, #b6cadb);\n    border-radius: 8px;\n    appearance: none;\n    background: #fff;\n    font-size: var(--vchasno-ui-input-font-size, 0.8rem);\n    line-height: calc(var(--vchasno-ui-input-font-size, 0.8rem) * 2);\n    outline: 1px solid transparent;\n    transition:\n        border var(--vchasno-ui-transition-duration-sec, 0.3s),\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    vertical-align: middle;\n}\n\n.react-datepicker__input-container input:disabled {\n    background: #f3f6f8;\n    color: #b6cadb;\n}\n\n.react-datepicker__input-container input:hover {\n    cursor: default;\n}\n\n.react-datepicker__input-container input:focus {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n/**\n Own component styles\n */\n\n.vchasno-ui-date-picker {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-date-picker .vchasno-ui-date-picker__picker {\n    height: 50px;\n}\n\n.vchasno-ui-date-picker__wrapper {\n    position: relative;\n}\n\n.vchasno-ui-date-picker__wrapper:focus-within .vchasno-ui-label-text,\n.vchasno-ui-date-picker.--not-empty .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\n.vchasno-ui-date-picker__wrapper > svg {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    color: var(--vchasno-ui-input-border-color-default);\n    transform: translateY(-50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\nlabel[class^='vchasno-ui-']:focus-within .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper > .vchasno-ui-spinner {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    transform: translateY(-50%);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper .vchasno-ui-spinner circle {\n    stroke: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker .react-datepicker__input-container input {\n    color: var(--vchasno-ui-input-font-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n}\n\n.vchasno-ui-date-picker .react-datepicker__aria-live {\n    display: none;\n}\n\n.vchasno-ui-date-picker.--disabled,\n.vchasno-ui-date-picker.--disabled\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover,\n.vchasno-ui-date-picker:not(.--disabled):hover\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: pointer;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .react-datepicker__input-container input {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n";
+var css_248z = ".react-datepicker__triangle {\n    position: absolute;\n    left: 50px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] {\n    margin-top: -6px;\n}\n\n.react-datepicker-popper[data-placement^='top'] {\n    margin-top: 6px;\n}\n\n.react-datepicker-popper[data-placement^='right'] {\n    margin-left: -6px;\n}\n\n.react-datepicker-popper[data-placement^='left'] {\n    margin-left: 6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    position: absolute;\n    margin-left: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    position: absolute;\n    width: 1px;\n    height: 0;\n    box-sizing: content-box;\n    border: 6px solid transparent;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    z-index: -1;\n    left: -6px;\n    border-width: 6px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n    content: '';\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n    top: 0;\n    margin-top: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    border-top: none;\n    border-bottom-color: var(--vchasno-ui-input-bg-color);\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    top: -1px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {\n    position: absolute;\n    top: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    bottom: 0;\n    margin-bottom: -6px;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    border-top-color: var(--vchasno-ui-input-bg-color);\n    border-bottom: none;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    bottom: -1px;\n    border-top-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {\n    position: absolute;\n    bottom: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker {\n    position: relative;\n    display: inline-flex;\n    padding: 10px;\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    color: var(--vchasno-ui-input-font-color);\n    font-size: 0.8rem;\n}\n\n.react-datepicker__time-container {\n    width: 85px;\n    float: right;\n}\n\n.react-datepicker__time-container--with-today-button {\n    position: absolute;\n    top: 0;\n    right: -87px;\n    display: inline;\n    border: 1px solid #aeaeae;\n    border-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time {\n    position: relative;\n    background: white;\n    border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n    width: 85px;\n    margin: 0 auto;\n    border-bottom-right-radius: 0.3rem;\n    overflow-x: hidden;\n    text-align: center;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list {\n    width: 100%;\n    height: calc(195px + (1.7rem / 2));\n    box-sizing: content-box;\n    padding-right: 0;\n    padding-left: 0;\n    margin: 0;\n    list-style: none;\n    overflow-y: scroll;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item {\n    height: 30px;\n    padding: 5px 10px;\n    border-radius: 8px;\n    line-height: 20px;\n    white-space: nowrap;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected {\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled {\n    color: #ccc;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled:hover {\n    background-color: transparent;\n    cursor: default;\n}\n\n.react-datepicker__header--time {\n    padding-right: 5px;\n    padding-bottom: 8px;\n    padding-left: 5px;\n}\n\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n    border-top-left-radius: 0;\n}\n\n.react-datepicker__header {\n    position: relative;\n    padding-top: 5px;\n    text-align: center;\n}\n\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    border-top-right-radius: 0.3rem;\n}\n\n@media all and (width <= 480px) {\n    .react-datepicker {\n        padding: 0;\n    }\n}\n\n.react-datepicker-popper {\n    z-index: 100;\n}\n\n.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {\n    right: 42px;\n    left: auto;\n}\n\n.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {\n    right: auto;\n    left: 42px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header {\n    padding: 8px 0 15px;\n    margin-top: 0;\n    color: var(--vchasno-ui-input-font-color);\n    font-weight: bold;\n    text-transform: capitalize;\n}\n\n.react-datepicker__month-container {\n    float: left;\n}\n\n.react-datepicker__aria-live {\n    display: none;\n}\n\n.react-datepicker__month {\n    margin: 0;\n    text-align: center;\n}\n\n.react-datepicker__day-names,\n.react-datepicker__week {\n    white-space: nowrap;\n}\n\n.react-datepicker__day-name {\n    text-transform: none;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n    display: inline-block;\n    width: 34px;\n    color: var(--vchasno-ui-input-font-color);\n    cursor: pointer;\n    line-height: 34px;\n    text-align: center;\n    transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.react-datepicker__day-names .react-datepicker__day-name {\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.react-datepicker__day-name:nth-child(6),\n.react-datepicker__day-name:nth-child(7) {\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: 700;\n}\n\n.react-datepicker__day:hover {\n    border-radius: 8px;\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__day--today {\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: bold;\n}\n\n.react-datepicker__day--weekend {\n    font-weight: bold;\n}\n\n.react-datepicker__day--outside-month {\n    color: #6b8091;\n}\n\n.react-datepicker__day--disabled {\n    color: #b6cadb;\n    cursor: not-allowed;\n}\n\n.react-datepicker__day--disabled:hover {\n    background-color: transparent;\n}\n\n.react-datepicker__day--selected,\n.react-datepicker__day--in-selecting-range,\n.react-datepicker__day--in-range {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__day--selected:hover,\n.react-datepicker__day--in-selecting-range:hover,\n.react-datepicker__day--in-range:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected) {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n    background-color: rgb(33 107 165 / 50%);\n}\n\n.react-datepicker__month--selecting-range\n    .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n    background-color: #f0f0f0;\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.react-datepicker__input-container {\n    position: relative;\n}\n\n.react-datepicker__close-icon {\n    position: absolute;\n    top: 0;\n    right: 35px;\n    bottom: 0;\n    width: 20px;\n    height: 20px;\n    border: 0;\n    margin: auto;\n    background-color: transparent;\n    cursor: pointer;\n    outline: none;\n}\n\n.vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__custom-close-icon {\n    position: absolute;\n    top: 50%;\n    right: 35px;\n    width: 20px;\n    height: 20px;\n    color: var(--vchasno-ui-input-border-color-default);\n    pointer-events: none;\n    transform: translateY(-50%) scale(0);\n    transition:\n        color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        transform var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon)\n    .vchasno-ui-date-picker__custom-close-icon {\n    transform: translateY(-50%) scale(1);\n}\n\n.vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon:hover)\n    .vchasno-ui-date-picker__custom-close-icon {\n    color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__today-button {\n    padding: 5px 0;\n    border-top: 1px solid #aeaeae;\n    background: #f0f0f0;\n    clear: left;\n    cursor: pointer;\n    font-weight: bold;\n    text-align: center;\n}\n\n.react-datepicker__portal {\n    position: fixed;\n    z-index: 2147483647;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100vw;\n    height: 100vh;\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(0 0 0 / 80%);\n}\n\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n    width: 3rem;\n    line-height: 3rem;\n}\n\n@media (width <= 400px), (height <= 550px) {\n    .react-datepicker__portal .react-datepicker__day-name,\n    .react-datepicker__portal .react-datepicker__day,\n    .react-datepicker__portal .react-datepicker__time-name {\n        width: 2rem;\n        line-height: 2rem;\n    }\n}\n\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n    font-size: 1.44rem;\n}\n\n.react-datepicker__navigation {\n    position: absolute;\n    z-index: 1;\n    top: 15px;\n    display: flex;\n    width: 30px;\n    height: 30px;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 8px;\n    background-size: cover;\n    cursor: pointer;\n    line-height: 1;\n}\n\n.react-datepicker__navigation:hover {\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__navigation--previous {\n    left: 20px;\n}\n\n.react-datepicker__navigation-icon {\n    display: none;\n}\n\n.react-datepicker__navigation--previous::before,\n.react-datepicker__navigation--next::before {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    margin: auto;\n    inset: 0;\n}\n\n.react-datepicker__navigation--previous::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTQyLjcsNjVjMi4xLDAsNC4zLTAuOCw1LjktMi40YzMuMi0zLjIsMy4yLTguNSwwLTExLjdMMzAuNCwzMi43bDE4LjEtMTguNWMzLjItMy4yLDMuMi04LjUsMC0xMS43Yy0zLjItMy4yLTguNS0zLjItMTEuNywwTDE4LjcsMjAuNmMtNi42LDYuNi02LjYsMTcuMywwLDIzLjhsMTguMSwxOC4xQzM4LjQsNjQuMiw0MC42LDY1LDQyLjcsNjV6Ii8+PC9nPjwvc3ZnPg==');\n}\n\n.react-datepicker__navigation--next {\n    right: 20px;\n}\n\n.react-datepicker__day:focus,\n.react-datepicker__navigation--previous:focus,\n.react-datepicker__navigation--next:focus {\n    border-radius: 8px;\n    outline: 1px solid var(--vchasno-ui-calendar-color);\n    outline-offset: 1px;\n}\n\n.react-datepicker__navigation--next--with-time:not(\n        .react-datepicker__navigation--next--with-today-button\n    ) {\n    right: 110px;\n}\n\n.react-datepicker__navigation--next::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTIyLDY1Yy0yLjEsMC00LjMtMC44LTUuOS0yLjRjLTMuMi0zLjItMy4yLTguNSwwLTExLjdsMTguMS0xOC4xTDE2LjIsMTQuMmMtMy4yLTMuMi0zLjItOC41LDAtMTEuN3M4LjUtMy4yLDExLjcsMGwxOC4xLDE4LjFjNi42LDYuNiw2LjYsMTcuMywwLDIzLjhMMjcuOSw2Mi42QzI2LjMsNjQuMiwyNC4yLDY1LDIyLDY1eiIvPjwvZz48L3N2Zz4=');\n}\n\n.react-datepicker__input-container input {\n    width: 100%;\n    height: 30px;\n    box-sizing: border-box;\n    padding: 10px 15px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default, #b6cadb);\n    border-radius: 8px;\n    appearance: none;\n    background: var(--vchasno-ui-input-bg-color);\n    font-size: var(--vchasno-ui-input-font-size, 0.8rem);\n    line-height: calc(var(--vchasno-ui-input-font-size, 0.8rem) * 2);\n    outline: 1px solid transparent;\n    transition:\n        border var(--vchasno-ui-transition-duration-sec, 0.3s),\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    vertical-align: middle;\n}\n\n.react-datepicker__input-container input:disabled {\n    background: #f3f6f8;\n    color: #b6cadb;\n}\n\n.react-datepicker__input-container input:hover {\n    cursor: default;\n}\n\n.react-datepicker__input-container input:focus {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n/**\n Own component styles\n */\n\n.vchasno-ui-date-picker {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-date-picker .vchasno-ui-date-picker__picker {\n    height: 50px;\n}\n\n.vchasno-ui-date-picker__wrapper {\n    position: relative;\n}\n\n.vchasno-ui-date-picker__wrapper:focus-within .vchasno-ui-label-text,\n.vchasno-ui-date-picker.--not-empty .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\n.vchasno-ui-date-picker__wrapper > .vchasno-ui-date-picker__custom-calendar-icon {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    color: var(--vchasno-ui-input-border-color-default);\n    transform: translateY(-50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\nlabel[class^='vchasno-ui-']:focus-within\n    .vchasno-ui-date-picker__wrapper\n    > .vchasno-ui-date-picker__custom-calendar-icon {\n    color: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper > .vchasno-ui-spinner {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    transform: translateY(-50%);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper .vchasno-ui-spinner circle {\n    stroke: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker .react-datepicker__input-container input {\n    color: var(--vchasno-ui-input-font-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n}\n\n.vchasno-ui-date-picker .react-datepicker__aria-live {\n    display: none;\n}\n\n.vchasno-ui-date-picker.--disabled,\n.vchasno-ui-date-picker.--disabled\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover,\n.vchasno-ui-date-picker:not(.--disabled):hover\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: pointer;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .react-datepicker__input-container input {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n";
 styleInject(css_248z);
 
-var SvgCalendar = function () { return (React.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+var SvgCalendar = function () { return (React.createElement("svg", { className: "vchasno-ui-date-picker__custom-calendar-icon", width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16 4h1c.6 0 1 .4 1 1v10c0 1.7-1.3 3-3 3H5c-1.7 0-3-1.3-3-3V5c0-.6.4-1 1-1h1V3c0-.6.4-1 1-1s1 .4 1 1v1h8V3c0-.6.4-1 1-1s1 .4 1 1v1zm-1 12c.6 0 1-.4 1-1V6H4v9c0 .6.4 1 1 1h10zM8 9a1 1 0 11-2 0 1 1 0 012 0zm2 1a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0zm-7 5a1 1 0 100-2 1 1 0 000 2zm4-1a1 1 0 11-2 0 1 1 0 012 0z", fill: "currentColor" }))); };
+// Вставляємо на місце де має відображатися іконка закриття бібілотеки так як немає API для підміни іконки та її контролю
+// за допомогою :has(.react-datepicker__close-icon) та :has(.react-datepicker__close-icon:hover) контролюємо появу та зміну кольору іконки
+var CloseSvg = function () { return (React.createElement("span", { className: "vchasno-ui-date-picker__custom-close-icon" },
+    React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M11.4 10L14.7 6.7C15.1 6.3 15.1 5.7 14.7 5.3C14.3 4.9 13.7 4.9 13.3 5.3L10 8.6L6.7 5.3C6.3 4.9 5.7 4.9 5.3 5.3C4.9 5.7 4.9 6.3 5.3 6.7L8.6 10L5.3 13.3C4.9 13.7 4.9 14.3 5.3 14.7C5.5 14.9 5.7 15 6 15C6.3 15 6.5 14.9 6.7 14.7L10 11.4L13.3 14.7C13.5 14.9 13.7 15 14 15C14.3 15 14.5 14.9 14.7 14.7C15.1 14.3 15.1 13.7 14.7 13.3L11.4 10Z", fill: "currentColor" })))); };
 var DATE_FORMATS = ['dd.MM.yyyy', 'dd-MM-yyyy', 'dd/MM/yyyy', 'dd.MM.yy', 'dd-MM-yy', 'dd/MM/yy'];
 var defaultMask = [
     /\d/,
@@ -15688,7 +15693,7 @@ var defaultMask = [
  * @see <https://reactdatepicker.com/>
  */
 var DatePicker = function (_a) {
-    var label = _a.label, disabled = _a.disabled, required = _a.required, loading = _a.loading, hint = _a.hint, error = _a.error, _b = _a.dateFormat, dateFormat = _b === void 0 ? DATE_FORMATS : _b, className = _a.className, _c = _a.timeCaption, timeCaption = _c === void 0 ? 'Час' : _c, _d = _a.enableTabLoop, enableTabLoop = _d === void 0 ? false : _d, _e = _a.locale, locale = _e === void 0 ? uk : _e, _f = _a.showMask, showMask = _f === void 0 ? false : _f, _g = _a.mask, mask = _g === void 0 ? defaultMask : _g, rest = __rest(_a, ["label", "disabled", "required", "loading", "hint", "error", "dateFormat", "className", "timeCaption", "enableTabLoop", "locale", "showMask", "mask"]);
+    var label = _a.label, disabled = _a.disabled, required = _a.required, loading = _a.loading, hint = _a.hint, error = _a.error, _b = _a.dateFormat, dateFormat = _b === void 0 ? DATE_FORMATS : _b, className = _a.className, _c = _a.timeCaption, timeCaption = _c === void 0 ? 'Час' : _c, _d = _a.enableTabLoop, enableTabLoop = _d === void 0 ? false : _d, _e = _a.locale, locale = _e === void 0 ? uk : _e, _f = _a.showMask, showMask = _f === void 0 ? false : _f, _g = _a.showPopperArrow, showPopperArrow = _g === void 0 ? false : _g, _h = _a.mask, mask = _h === void 0 ? defaultMask : _h, rest = __rest(_a, ["label", "disabled", "required", "loading", "hint", "error", "dateFormat", "className", "timeCaption", "enableTabLoop", "locale", "showMask", "showPopperArrow", "mask"]);
     var valueExists = !!rest.selected || !!rest.value;
     return (React.createElement("label", { className: cn('vchasno-ui-date-picker', {
             '--loading': loading,
@@ -15698,8 +15703,9 @@ var DatePicker = function (_a) {
         }, className) },
         React.createElement("span", { className: "vchasno-ui-date-picker__wrapper" },
             label && React.createElement(LabelText, null, label),
-            React.createElement(DatePicker$1, __assign({ enableTabLoop: enableTabLoop, locale: locale, timeCaption: timeCaption, disabled: disabled, placeholderText: " ", className: "vchasno-ui-date-picker__picker", dateFormat: dateFormat, customInput: showMask ? React.createElement(MaskedInput, { inputMode: "text", mask: mask, showMask: true }) : undefined }, rest)),
-            loading ? React.createElement(Spinner, { height: "18px" }) : React.createElement(SvgCalendar, null)),
+            React.createElement(DatePicker$1, __assign({ enableTabLoop: enableTabLoop, locale: locale, timeCaption: timeCaption, disabled: disabled, placeholderText: " ", showPopperArrow: showPopperArrow, className: "vchasno-ui-date-picker__picker", dateFormat: dateFormat, customInput: showMask ? React.createElement(MaskedInput, { inputMode: "text", mask: mask, showMask: true }) : undefined }, rest)),
+            loading ? React.createElement(Spinner, { height: "18px" }) : React.createElement(SvgCalendar, null),
+            React.createElement(CloseSvg, null)),
         React.createElement(InputMeta, { hint: hint, error: error })));
 };