@vchasno/ui-kit 0.3.21 → 0.3.23

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.23] - 2024-08-14
+
+## Fixed
+
+-   Rewrite `Select` label implementation - (input values issue)
+
+## [0.3.22] - 2024-08-14
+
+## Added
+
+-   Ability to import css files per component with direct import from `@vchasno/ui-kit/css/{component-name}.global.css`
+
 ## [0.3.21] - 2024-08-14
 
 ## Added

package/dist/Datepicker/index.cjs.js

@@ -15666,7 +15666,7 @@ 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    box-shadow: 0 2px 2px 0 rgb(28 54 72 / 11%);\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'] .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";
 styleInject(css_248z);
 
 var SvgCalendar = function () { return (React.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },

package/dist/Datepicker/index.js

@@ -15646,7 +15646,7 @@ var Spinner = function (_a) {
             React__default.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    box-shadow: 0 2px 2px 0 rgb(28 54 72 / 11%);\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'] .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";
 styleInject(css_248z);
 
 var SvgCalendar = function () { return (React__default.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },

package/dist/Datepicker/types/components/Select/Label.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 interface LabelProps {
-    isFloating: boolean;
-    label: string;
+    label?: string;
 }
 declare const Label: React.FC<React.PropsWithChildren<LabelProps>>;
 export default Label;

package/dist/Datepicker/types/components/Select/customComponents.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
 import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
-import { CustomControlProps } from './types';
 declare const _default: {
     DropdownIndicator: (props: DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
     LoadingIndicator: () => React.JSX.Element;
     IndicatorSeparator: () => null;
     ClearIndicator: (props: ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
-    Control: (props: CustomControlProps) => React.JSX.Element;
 };
 export default _default;

package/dist/Menu/types/components/Select/Label.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 interface LabelProps {
-    isFloating: boolean;
-    label: string;
+    label?: string;
 }
 declare const Label: React.FC<React.PropsWithChildren<LabelProps>>;
 export default Label;

package/dist/Menu/types/components/Select/customComponents.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
 import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
-import { CustomControlProps } from './types';
 declare const _default: {
     DropdownIndicator: (props: DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
     LoadingIndicator: () => React.JSX.Element;
     IndicatorSeparator: () => null;
     ClearIndicator: (props: ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
-    Control: (props: CustomControlProps) => React.JSX.Element;
 };
 export default _default;

package/dist/ProjectsPopover/types/components/Select/Label.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 interface LabelProps {
-    isFloating: boolean;
-    label: string;
+    label?: string;
 }
 declare const Label: React.FC<React.PropsWithChildren<LabelProps>>;
 export default Label;

package/dist/ProjectsPopover/types/components/Select/customComponents.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
 import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
-import { CustomControlProps } from './types';
 declare const _default: {
     DropdownIndicator: (props: DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
     LoadingIndicator: () => React.JSX.Element;
     IndicatorSeparator: () => null;
     ClearIndicator: (props: ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
-    Control: (props: CustomControlProps) => React.JSX.Element;
 };
 export default _default;

package/dist/Select/index.cjs.js

@@ -4621,7 +4621,7 @@ var css$1 = function css(_ref, unstyled) {
     }
   });
 };
-var Control$1 = function Control(props) {
+var Control = function Control(props) {
   var children = props.children,
     isDisabled = props.isDisabled,
     isFocused = props.isFocused,
@@ -4639,7 +4639,7 @@ var Control$1 = function Control(props) {
     "aria-disabled": isDisabled || undefined
   }), children);
 };
-var Control$1$1 = Control$1;
+var Control$1 = Control;
 
 var _excluded$1 = ["data"];
 var groupCSS = function groupCSS(_ref, unstyled) {
@@ -4971,7 +4971,7 @@ var SingleValue$1 = SingleValue;
 
 var components = {
   ClearIndicator: ClearIndicator$1,
-  Control: Control$1$1,
+  Control: Control$1,
   DropdownIndicator: DropdownIndicator$1,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
@@ -7715,19 +7715,9 @@ var InputMeta = function (_a) {
         error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
 };
 
-var css_248z$2 = ".vchasno-ui-spinner {\n    position: relative;\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n}\n\n.vchasno-ui-spinner__svg {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: auto;\n    animation: spinner-rotate 1.3s linear infinite;\n    inset: 0;\n    transform-origin: center center;\n}\n\n.vchasno-ui-spinner__svg__circle {\n    animation: spinner-rotate-dash 2s ease-in-out infinite;\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n    stroke-linecap: round;\n    stroke-width: 5px;\n}\n\n@keyframes spinner-rotate {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n@keyframes spinner-rotate-dash {\n    0% {\n        stroke-dasharray: 1, 200;\n        stroke-dashoffset: 0;\n    }\n\n    50% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -35px;\n    }\n\n    100% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -124px;\n    }\n}\n";
+var css_248z$2 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 1;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 0 4px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    color: var(--vchasno-ui-label-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    gap: 3px;\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    pointer-events: none;\n    text-overflow: ellipsis;\n    transform: translate(0, -50%);\n    transition:\n        color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        top 0.3s,\n        font-size 0.3s;\n    white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n    max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n    cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n    position: relative;\n    top: -0.2em;\n    display: none;\n    color: var(--vchasno-ui-input-color-error);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n    vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n    display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n    display: none;\n    color: var(--vchasno-ui-label-color-default);\n    transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n    display: block;\n}\n\n.vchasno-ui-label-text__content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
 styleInject(css_248z$2);
 
-var Spinner = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
-    return (React.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
-        React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
-            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$1 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 1;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 0 4px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    color: var(--vchasno-ui-label-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    gap: 3px;\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    pointer-events: none;\n    text-overflow: ellipsis;\n    transform: translate(0, -50%);\n    transition:\n        color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        top 0.3s,\n        font-size 0.3s;\n    white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n    max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n    cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n    position: relative;\n    top: -0.2em;\n    display: none;\n    color: var(--vchasno-ui-input-color-error);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n    vertical-align: top;\n}\n\nlabel[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n    display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n    display: none;\n    color: var(--vchasno-ui-label-color-default);\n    transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n    display: block;\n}\n\n.vchasno-ui-label-text__content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
-styleInject(css_248z$1);
-
 var LabelText = function (_a) {
     var className = _a.className, children = _a.children;
     if (!children) {
@@ -7743,8 +7733,18 @@ var LabelText = function (_a) {
 };
 
 var Label = function (_a) {
-    var label = _a.label, isFloating = _a.isFloating;
-    return (React.createElement(LabelText, { className: cn(isFloating && 'vchasno-ui-select__floating-label') }, label));
+    var label = _a.label;
+    return React.createElement(LabelText, null, label);
+};
+
+var css_248z$1 = ".vchasno-ui-spinner {\n    position: relative;\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n}\n\n.vchasno-ui-spinner__svg {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: auto;\n    animation: spinner-rotate 1.3s linear infinite;\n    inset: 0;\n    transform-origin: center center;\n}\n\n.vchasno-ui-spinner__svg__circle {\n    animation: spinner-rotate-dash 2s ease-in-out infinite;\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n    stroke-linecap: round;\n    stroke-width: 5px;\n}\n\n@keyframes spinner-rotate {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n@keyframes spinner-rotate-dash {\n    0% {\n        stroke-dasharray: 1, 200;\n        stroke-dashoffset: 0;\n    }\n\n    50% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -35px;\n    }\n\n    100% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -124px;\n    }\n}\n";
+styleInject(css_248z$1);
+
+var Spinner = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
+    return (React.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
+        React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
+            React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
 };
 
 var IndicatorSeparator = function () { return null; };
@@ -7759,31 +7759,34 @@ var ClearIndicator = function (props) {
         React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M9.41406 8L15.707 1.70703C16.0977 1.31641 16.0977 0.683593 15.707 0.292969C15.3164 -0.0976552 14.6836 -0.0976562 14.293 0.292969L8 6.58594L1.70703 0.292969C1.31641 -0.0976562 0.683593 -0.0976562 0.292969 0.292969C-0.0976552 0.683594 -0.0976562 1.31641 0.292969 1.70703L6.58594 8L0.292969 14.293C-0.0976562 14.6836 -0.0976562 15.3164 0.292969 15.707C0.488281 15.9023 0.744141 16 1 16C1.25586 16 1.51172 15.9023 1.70703 15.707L8 9.41406L14.293 15.707C14.4883 15.9023 14.7441 16 15 16C15.2559 16 15.5117 15.9023 15.707 15.707C16.0977 15.3164 16.0977 14.6836 15.707 14.293L9.41406 8Z", fill: "#333333" }))));
 };
-var Control = function (props) {
-    return (React.createElement(React.Fragment, null,
-        props.label && (React.createElement(Label, { isFloating: props.isFocused || props.hasValue, label: props.label })),
-        React.createElement(components.Control, __assign({}, props))));
-};
-var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator, Control: Control };
+var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator };
 
 var noOptionsMessageDefault = function () { return React.createElement("span", null, "\u041D\u0435 \u043C\u0430\u0454 \u043E\u043F\u0446\u0456\u0439"); };
 var loadingMessageDefault = function () { return React.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
 var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
 
-var css_248z = ".vchasno-ui-select {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n    min-width: 200px;\n    min-height: 50px;\n    border-color: var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n    outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n    opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n    transition:\n        opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n    background-color: #f3f6f8;\n    opacity: 0.8;\n    pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n    z-index: 100;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    margin-top: 4px;\n    margin-bottom: 6px;\n    box-shadow: none;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n    border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n    border: 1px solid #ff5937;\n    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n    border-color: #ff5937;\n}\n\n.vchasno-ui-select\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control:hover\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n    border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n    box-shadow: none;\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n    padding: 3px;\n    border-radius: 3px;\n    color: var(--vchasno-ui-input-font-color);\n    outline: 3px solid transparent;\n    transition:\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n    background-color: rgb(0 0 0 / 10%);\n    cursor: pointer;\n    outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n    transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n    cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n    padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n    padding: 5px 14px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__label {\n    padding: 6px;\n    font-size: 14px;\n}\n\n.vchasno-ui-select .vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n    padding: 6px;\n    font-size: 14px;\n}\n";
+var css_248z = ".vchasno-ui-select {\n    position: relative;\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n    transform: translate(0, -18px);\n    transition:\n        font-size 0.3s,\n        transform 0.3s;\n}\n\n.vchasno-ui-select.--with-value .vchasno-ui-label-text,\n.vchasno-ui-select:focus-within .vchasno-ui-label-text {\n    font-size: 12px;\n    transform: translate(0, -42px);\n}\n\n.vchasno-ui-select.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n    min-width: 200px;\n    min-height: 50px;\n    border-color: var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n    outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n    opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n    transition:\n        opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n    background-color: #f3f6f8;\n    opacity: 0.8;\n    pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n    z-index: 100;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    margin-top: 4px;\n    margin-bottom: 6px;\n    box-shadow: none;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n    border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n    border: 1px solid #ff5937;\n    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n    border-color: #ff5937;\n}\n\n.vchasno-ui-select\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control:hover\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n    border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n    box-shadow: none;\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n    padding: 3px;\n    border-radius: 3px;\n    color: var(--vchasno-ui-input-font-color);\n    outline: 3px solid transparent;\n    transition:\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n    background-color: rgb(0 0 0 / 10%);\n    cursor: pointer;\n    outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n    transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n    cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    outline: 1px solid var(--vchasno-ui-select-menu-border-color, transparent);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n    padding: 0;\n    padding-right: 3px;\n    background-color: transparent;\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove svg {\n    width: 16px;\n    height: 16px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n    background-color: transparent;\n    cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n    padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n    padding: 5px 14px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__label {\n    padding: 6px;\n    font-size: 14px;\n}\n\n.vchasno-ui-select .vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n    padding: 6px;\n    font-size: 14px;\n}\n";
 styleInject(css_248z);
 
 var Select = function (_a) {
     var className = _a.className, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, isDisabled = _a.isDisabled, _b = _a.menuPlacement, menuPlacement = _b === void 0 ? 'auto' : _b, _c = _a.noOptionsMessage, noOptionsMessage = _c === void 0 ? defaultProps.noOptionsMessageDefault : _c, _d = _a.loadingMessage, loadingMessage = _d === void 0 ? defaultProps.loadingMessageDefault : _d, _e = _a.placeholder, placeholder = _e === void 0 ? ' ' : _e, //need "space" for correct label working
     _f = _a.components, //need "space" for correct label working
     components = _f === void 0 ? {} : _f, _g = _a.error, error = _g === void 0 ? '' : _g, dataQa = _a.dataQa, _h = _a.closeMenuOnSelect, closeMenuOnSelect = _h === void 0 ? true : _h, rest = __rest(_a, ["className", "label", "hint", "wide", "required", "loading", "isDisabled", "menuPlacement", "noOptionsMessage", "loadingMessage", "placeholder", "components", "error", "dataQa", "closeMenuOnSelect"]);
+    var _j = React.useState(Boolean(rest.value || rest.defaultValue || rest.inputValue)), internalValueExist = _j[0], setInternalValueExist = _j[1];
     return (React.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-select', {
+            '--with-value': internalValueExist,
             '--required': required,
             '--disabled': isDisabled,
             '--wide': wide,
             '--error': error,
         }, className) },
-        React.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign(__assign({}, CustomComponents), { Control: function (props) { return React.createElement(CustomComponents.Control, __assign({}, props, { label: label })); } }), components), closeMenuOnSelect: closeMenuOnSelect, classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest, { styles: {
+        label && React.createElement(Label, { label: label }),
+        React.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign({}, CustomComponents), components), closeMenuOnSelect: closeMenuOnSelect, classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest, { onChange: function (value, actionMeta) {
+                setInternalValueExist(Boolean(value));
+                if (rest.onChange) {
+                    rest.onChange(value, actionMeta);
+                }
+            }, styles: {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 control: function (_a) {
                     _a.outline; var provided = __rest(_a, ["outline"]);