@vchasno/ui-kit 0.3.14 → 0.3.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15644,6 +15644,9 @@ styleInject(css_248z$2);
15644
15644
 
15645
15645
  var LabelText = function (_a) {
15646
15646
  var className = _a.className, children = _a.children;
15647
+ if (!children) {
15648
+ return null;
15649
+ }
15647
15650
  return (React.createElement("span", { className: cn('vchasno-ui-label-text', className) },
15648
15651
  React.createElement("svg", { className: "vchasno-ui-label-text__title-icon", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
15649
15652
  React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15 7.5C15 11.6422 11.6423 15 7.5 15C3.3577 15 0 11.6422 0 7.5C0 3.35781 3.3577 0 7.5 0C11.6423 0 15 3.35781 15 7.5ZM5.87799 5.82184H8.52997V11.4711C8.52997 12.0179 8.08667 12.4612 7.53983 12.4612C6.99299 12.4612 6.54968 12.0179 6.54968 11.4711V7.57782H5.87799C5.39309 7.57782 5 7.18473 5 6.69983C5 6.21493 5.39309 5.82184 5.87799 5.82184ZM6.26221 3.66559C6.26221 3.50973 6.2899 3.36436 6.34483 3.22949C6.40431 3.09045 6.48466 2.97036 6.58636 2.86924C6.68805 2.76812 6.80655 2.6881 6.94229 2.62907C7.00404 2.603 7.06759 2.58269 7.13342 2.56813C7.21696 2.54984 7.30367 2.54059 7.39356 2.54059C7.54611 2.54059 7.69002 2.57004 7.82577 2.62907C7.86254 2.64499 7.89795 2.66248 7.932 2.68144C8.02416 2.73279 8.10724 2.79543 8.1817 2.86924C8.28339 2.97036 8.36375 3.09045 8.42322 3.22949C8.4541 3.29981 8.47725 3.37294 8.49178 3.44889C8.5054 3.51876 8.51221 3.59099 8.51221 3.66559C8.51221 3.74956 8.50358 3.83116 8.48633 3.91027C8.4718 3.97799 8.45046 4.0439 8.42322 4.108C8.36375 4.24287 8.28339 4.36081 8.1817 4.46194C8.12949 4.51374 8.07319 4.56001 8.01236 4.60076C7.95425 4.63947 7.89205 4.67333 7.82577 4.70211C7.69002 4.76113 7.54611 4.79059 7.39356 4.79059C7.31411 4.79059 7.23739 4.78348 7.16339 4.76914C7.08666 4.75447 7.01311 4.73213 6.94229 4.70211C6.80655 4.64308 6.68805 4.56306 6.58636 4.46194C6.48466 4.36081 6.40431 4.24287 6.34483 4.108C6.2899 3.96896 6.26221 3.82145 6.26221 3.66559Z", fill: "currentColor" })),
@@ -15663,7 +15666,7 @@ var Spinner = function (_a) {
15663
15666
  React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
15664
15667
  };
15665
15668
 
15666
- 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__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";
15669
+ 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";
15667
15670
  styleInject(css_248z);
15668
15671
 
15669
15672
  var SvgCalendar = function () { return (React.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },