@vchasno/ui-kit 0.3.21 → 0.3.22

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.
Files changed (35) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/Datepicker/index.cjs.js +1 -1
  3. package/dist/Datepicker/index.js +1 -1
  4. package/dist/Snackbar/index.cjs.js +1 -1
  5. package/dist/Snackbar/index.js +1 -1
  6. package/dist/css/Alert.global.css +79 -0
  7. package/dist/css/BubbleBox.global.css +47 -0
  8. package/dist/css/Button.global.css +189 -0
  9. package/dist/css/Checkbox.global.css +74 -0
  10. package/dist/css/DatePicker.global.css +625 -0
  11. package/dist/css/FollowUs.global.css +25 -0
  12. package/dist/css/Input.global.css +89 -0
  13. package/dist/css/InputMeta.global.css +25 -0
  14. package/dist/css/LabelText.global.css +75 -0
  15. package/dist/css/MaskInput.global.css +16 -0
  16. package/dist/css/Menu.global.css +117 -0
  17. package/dist/css/MenuButton.global.css +18 -0
  18. package/dist/css/MenuItem.global.css +30 -0
  19. package/dist/css/MobileAppLinks.global.css +22 -0
  20. package/dist/css/Pagination.global.css +51 -0
  21. package/dist/css/Paragraph.global.css +9 -0
  22. package/dist/css/ProjectsPopover.global.css +111 -0
  23. package/dist/css/Select.global.css +190 -0
  24. package/dist/css/Snackbar.global.css +31 -0
  25. package/dist/css/Spinner.global.css +47 -0
  26. package/dist/css/SplashLogo.global.css +29 -0
  27. package/dist/css/SvgBorder.global.css +32 -0
  28. package/dist/css/Switch.global.css +82 -0
  29. package/dist/css/Tabs.global.css +122 -0
  30. package/dist/css/Text.global.css +73 -0
  31. package/dist/css/TextAreaInput.global.css +41 -0
  32. package/dist/css/TextInput.global.css +22 -0
  33. package/dist/css/Title.global.css +44 -0
  34. package/dist/index.js +1 -1
  35. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [0.3.22] - 2024-08-14
11
+
12
+ ## Added
13
+
14
+ - Ability to import css files per component with direct import from `@vchasno/ui-kit/css/{component-name}.global.css`
15
+
10
16
  ## [0.3.21] - 2024-08-14
11
17
 
12
18
  ## Added
package/dist/Datepicker/index.cjs.js CHANGED
@@ -15666,7 +15666,7 @@ var Spinner = function (_a) {
15666
15666
  React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
15667
15667
  };
15668
15668
 
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";
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 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";
15670
15670
  styleInject(css_248z);
15671
15671
 
15672
15672
  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 CHANGED
@@ -15646,7 +15646,7 @@ var Spinner = function (_a) {
15646
15646
  React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
15647
15647
  };
15648
15648
 
15649
- 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";
15649
+ 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";
15650
15650
  styleInject(css_248z);
15651
15651
 
15652
15652
  var SvgCalendar = function () { return (React__default.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
package/dist/Snackbar/index.cjs.js CHANGED
@@ -240,7 +240,7 @@ var Spinner = function (_a) {
240
240
  React$1.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
241
241
  };
242
242
 
243
- var css_248z$n = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 40px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 8px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n min-width: 40px;\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n min-height: 50px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--vchasno-ui-btn-secondary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n border-color: #b6cadb;\n background-color: #b6cadb;\n box-shadow: inset 0 -2px 0 rgb(139 163 182 / 50%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-primary-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--pink {\n background-color: var(--vchasno-ui-btn-pink-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline {\n border: 1px solid var(--vchasno-ui-btn-pink-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--pink:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-pink-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-pink-bg);\n background-color: transparent;\n color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n border: 1px solid #b6cadb;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-color);\n transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-light-bg, #fff);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n border: none;\n background-color: rgb(182 202 219 / 20%);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-light-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n";
243
+ var css_248z$n = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 40px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 8px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n min-width: 40px;\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n min-height: 50px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--vchasno-ui-btn-secondary-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n border-color: #b6cadb;\n background-color: #b6cadb;\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-primary-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--pink {\n background-color: var(--vchasno-ui-btn-pink-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline {\n border: 1px solid var(--vchasno-ui-btn-pink-bg);\n background-color: transparent;\n color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--pink:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-pink-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-pink-bg);\n background-color: transparent;\n color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: transparent;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n border: 1px solid #b6cadb;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-color);\n transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-light-bg, #fff);\n color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n border: none;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-light-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n";
244
244
  styleInject(css_248z$n);
245
245
 
246
246
  var Button = React$1.forwardRef(function (_a, ref) {
package/dist/Snackbar/index.js CHANGED
@@ -218,7 +218,7 @@ var Spinner = function (_a) {
218
218
  React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
219
219
  };
220
220
 
221
- var css_248z$n = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 40px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 8px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n min-width: 40px;\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n min-height: 50px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--vchasno-ui-btn-secondary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n border-color: #b6cadb;\n background-color: #b6cadb;\n box-shadow: inset 0 -2px 0 rgb(139 163 182 / 50%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-primary-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--pink {\n background-color: var(--vchasno-ui-btn-pink-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline {\n border: 1px solid var(--vchasno-ui-btn-pink-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--pink:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-pink-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-pink-bg);\n background-color: transparent;\n color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n border: 1px solid #b6cadb;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-color);\n transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-light-bg, #fff);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n border: none;\n background-color: rgb(182 202 219 / 20%);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-light-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n";
221
+ var css_248z$n = ".vchasno-ui-button {\n display: inline-flex;\n min-height: 40px;\n align-items: center;\n justify-content: center;\n border: 0;\n border-radius: 8px;\n background-color: var(--vchasno-ui-btn-default-bg);\n color: var(--vchasno-ui-btn-default-color);\n font-size: var(--vchasno-ui-btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n min-width: 40px;\n padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n min-width: 145px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n min-width: 200px;\n min-height: 50px;\n padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-primary-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--vchasno-ui-btn-secondary-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n border-color: #b6cadb;\n background-color: #b6cadb;\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-primary-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-default-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: transparent;\n box-shadow: none;\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--pink {\n background-color: var(--vchasno-ui-btn-pink-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline {\n border: 1px solid var(--vchasno-ui-btn-pink-bg);\n background-color: transparent;\n color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--pink:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-pink-hover-bg);\n color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-pink-bg);\n background-color: transparent;\n color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: transparent;\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n border: 1px solid #b6cadb;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-color);\n transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n border: 1px solid transparent;\n background-color: var(--vchasno-ui-btn-light-bg, #fff);\n color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n border: none;\n background-color: rgb(182 202 219 / 20%);\n color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n border: 1px solid var(--vchasno-ui-btn-primary-bg);\n background-color: var(--vchasno-ui-btn-primary-color);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--vchasno-ui-btn-light-hover-bg);\n color: var(--vchasno-ui-btn-primary-bg);\n}\n";
222
222
  styleInject(css_248z$n);
223
223
 
224
224
  var Button = React__default.forwardRef(function (_a, ref) {
package/dist/css/Alert.global.css ADDED
@@ -0,0 +1,79 @@
1
+ .vchasno-ui-alert {
2
+ display: inline-flex;
3
+ min-height: 40px;
4
+ box-sizing: border-box;
5
+ flex-shrink: 0;
6
+ align-items: center;
7
+ padding: 12px 16px;
8
+ border-radius: 4px;
9
+ border-left: 3px solid transparent;
10
+ font-size: 14px;
11
+ gap: 12px;
12
+ line-height: 20px;
13
+ }
14
+
15
+ .vchasno-ui-alert strong,
16
+ .vchasno-ui-alert b {
17
+ font-weight: 700;
18
+ }
19
+
20
+ .vchasno-ui-alert.--wide {
21
+ width: 100%;
22
+ }
23
+
24
+ .vchasno-ui-alert.--left-border {
25
+ border-left-width: 4px;
26
+ }
27
+
28
+ .vchasno-ui-alert__icon-wrapper,
29
+ .vchasno-ui-alert__close-icon {
30
+ display: flex;
31
+ width: 20px;
32
+ height: 20px;
33
+ flex-shrink: 0;
34
+ align-items: center;
35
+ justify-content: center;
36
+ font-size: 20px;
37
+ line-height: 20px;
38
+ }
39
+
40
+ .vchasno-ui-alert.--info {
41
+ border-color: var(--vchasno-ui-alert-info-color, #006be9);
42
+ background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);
43
+ }
44
+
45
+ .vchasno-ui-alert.--warning {
46
+ border-color: var(--vchasno-ui-alert-warning-color, #ffb200);
47
+ background-color: var(--vchasno-ui-alert-warning-bg, #fff2d6);
48
+ }
49
+
50
+ .vchasno-ui-alert.--error {
51
+ border-color: var(--vchasno-ui-alert-error-color, #e73434);
52
+ background-color: var(--vchasno-ui-alert-error-bg, #ffeded);
53
+ }
54
+
55
+ .vchasno-ui-alert.--success {
56
+ border-color: var(--vchasno-ui-alert-success-color, #00b700);
57
+ background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);
58
+ }
59
+
60
+ .vchasno-ui-alert.--config {
61
+ border-color: var(--vchasno-ui-alert-config-color, #006be9);
62
+ background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);
63
+ }
64
+
65
+ .vchasno-ui-alert__close-icon {
66
+ width: 30px;
67
+ height: 30px;
68
+ border-radius: 4px;
69
+ transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);
70
+ }
71
+
72
+ .vchasno-ui-alert__close-icon:hover {
73
+ background-color: rgb(255 255 255 / 50%);
74
+ cursor: pointer;
75
+ }
76
+
77
+ .vchasno-ui-alert.--close {
78
+ display: none;
79
+ }
package/dist/css/BubbleBox.global.css ADDED
@@ -0,0 +1,47 @@
1
+ .vchasno-ui-BubbleBox {
2
+ --vchasno-ui-bubble-height: 40px;
3
+ --vchasno-ui-bubble-width: 40px;
4
+ --vchasno-ui-bubble-shadow: 2px 4px 6px rgb(0 0 0 / 20%);
5
+
6
+ position: relative;
7
+ min-height: calc(var(--vchasno-ui-bubble-height) * 2);
8
+ box-sizing: border-box;
9
+ transition: var(--vchasno-ui-transition-duration-sec);
10
+ }
11
+
12
+ .vchasno-ui-BubbleBox__svg {
13
+ position: absolute;
14
+ z-index: -1;
15
+ top: 0;
16
+ left: 0;
17
+ overflow: visible;
18
+ pointer-events: none;
19
+ transform: translateZ(0);
20
+ transition: var(--vchasno-ui-transition-duration-sec);
21
+ }
22
+
23
+ .vchasno-ui-BubbleBox__svg path {
24
+ transition: var(--vchasno-ui-transition-duration-sec);
25
+ }
26
+
27
+ .vchasno-ui-BubbleBox__svg.vchasno-ui-BubbleBox__shadow {
28
+ filter: drop-shadow(var(--vchasno-ui-bubble-shadow));
29
+ }
30
+
31
+ .vchasno-ui-BubbleBox__bubble {
32
+ position: absolute;
33
+ z-index: 1;
34
+ right: 0;
35
+ bottom: 0;
36
+ display: flex;
37
+ width: var(--vchasno-ui-bubble-width);
38
+ height: var(--vchasno-ui-bubble-height);
39
+ align-items: center;
40
+ justify-content: center;
41
+ padding: 0;
42
+ border: 0;
43
+ border-radius: var(--vchasno-ui-bubble-width);
44
+ margin: 0;
45
+ cursor: pointer;
46
+ transition: var(--vchasno-ui-transition-duration-sec);
47
+ }
package/dist/css/Button.global.css ADDED
@@ -0,0 +1,189 @@
1
+ .vchasno-ui-button {
2
+ display: inline-flex;
3
+ min-height: 40px;
4
+ align-items: center;
5
+ justify-content: center;
6
+ border: 0;
7
+ border-radius: 8px;
8
+ background-color: var(--vchasno-ui-btn-default-bg);
9
+ color: var(--vchasno-ui-btn-default-color);
10
+ font-size: var(--vchasno-ui-btn-font-size);
11
+ font-weight: 700;
12
+ gap: 5px;
13
+ transition:
14
+ background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
15
+ color var(--vchasno-ui-transition-duration-sec, 0.3s);
16
+ user-select: none;
17
+ }
18
+
19
+ .vchasno-ui-button:disabled {
20
+ cursor: not-allowed;
21
+ opacity: 0.8;
22
+ }
23
+
24
+ .vchasno-ui-button:not(:disabled):hover {
25
+ background-color: var(--vchasno-ui-btn-default-hover-bg);
26
+ color: var(--vchasno-ui-btn-default-hover-color);
27
+ cursor: pointer;
28
+ }
29
+
30
+ .vchasno-ui-button.--sm {
31
+ min-width: 40px;
32
+ padding: 0 15px;
33
+ }
34
+
35
+ .vchasno-ui-button.--md {
36
+ min-width: 145px;
37
+ padding: 0 20px;
38
+ }
39
+
40
+ .vchasno-ui-button.--lg {
41
+ min-width: 200px;
42
+ min-height: 50px;
43
+ padding: 0 20px;
44
+ }
45
+
46
+ .vchasno-ui-button.--wide {
47
+ width: 100%;
48
+ }
49
+
50
+ .vchasno-ui-button.--primary {
51
+ border: 1px solid transparent;
52
+ background-color: var(--vchasno-ui-btn-primary-bg);
53
+ color: var(--vchasno-ui-btn-primary-color);
54
+ }
55
+
56
+ .vchasno-ui-button.--primary.--outline {
57
+ border: 1px solid var(--vchasno-ui-btn-primary-bg);
58
+ background-color: transparent;
59
+ box-shadow: none;
60
+ color: var(--vchasno-ui-btn-primary-bg);
61
+ }
62
+
63
+ .vchasno-ui-button.--secondary {
64
+ background-color: var(--vchasno-ui-btn-secondary-bg);
65
+ color: var(--vchasno-ui-btn-secondary-color);
66
+ }
67
+
68
+ .vchasno-ui-button:disabled.--primary,
69
+ .vchasno-ui-button:disabled.--secondary {
70
+ border-color: #b6cadb;
71
+ background-color: #b6cadb;
72
+ color: var(--vchasno-ui-btn-primary-color);
73
+ }
74
+
75
+ .vchasno-ui-button.--primary:not(:disabled):hover {
76
+ background-color: var(--vchasno-ui-btn-primary-hover-bg);
77
+ color: var(--vchasno-ui-btn-primary-color);
78
+ }
79
+
80
+ .vchasno-ui-button.--primary.--outline:not(:disabled):hover {
81
+ border: 1px solid var(--vchasno-ui-btn-primary-bg);
82
+ background-color: var(--vchasno-ui-btn-default-hover-bg);
83
+ color: var(--vchasno-ui-btn-primary-bg);
84
+ }
85
+
86
+ .vchasno-ui-button.--secondary.--outline {
87
+ border: 1px solid var(--vchasno-ui-btn-secondary-bg);
88
+ background-color: transparent;
89
+ box-shadow: none;
90
+ color: var(--vchasno-ui-btn-secondary-bg);
91
+ }
92
+
93
+ .vchasno-ui-button.--secondary:not(:disabled):hover {
94
+ background-color: var(--vchasno-ui-btn-secondary-hover-bg);
95
+ color: var(--vchasno-ui-btn-secondary-color);
96
+ }
97
+
98
+ .vchasno-ui-button.--secondary.--outline:not(:disabled):hover {
99
+ border: 1px solid var(--vchasno-ui-btn-secondary-bg);
100
+ background-color: rgb(0 0 0 / 10%);
101
+ color: var(--vchasno-ui-btn-secondary-bg);
102
+ }
103
+
104
+ .vchasno-ui-button.--pink {
105
+ background-color: var(--vchasno-ui-btn-pink-bg);
106
+ color: var(--vchasno-ui-btn-primary-color);
107
+ }
108
+
109
+ .vchasno-ui-button.--pink.--outline {
110
+ border: 1px solid var(--vchasno-ui-btn-pink-bg);
111
+ background-color: transparent;
112
+ color: var(--vchasno-ui-btn-pink-bg);
113
+ }
114
+
115
+ .vchasno-ui-button.--pink:not(:disabled):hover {
116
+ background-color: var(--vchasno-ui-btn-pink-hover-bg);
117
+ color: var(--vchasno-ui-btn-primary-color);
118
+ }
119
+
120
+ .vchasno-ui-button.--pink.--outline:not(:disabled):hover {
121
+ border: 1px solid var(--vchasno-ui-btn-pink-bg);
122
+ background-color: transparent;
123
+ color: var(--vchasno-ui-btn-pink-bg);
124
+ }
125
+
126
+ .vchasno-ui-button.--danger {
127
+ border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);
128
+ background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));
129
+ color: var(--vchasno-ui-btn-danger-color, #ef6562);
130
+ }
131
+
132
+ .vchasno-ui-button.--danger.--outline {
133
+ border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);
134
+ background-color: transparent;
135
+ color: var(--vchasno-ui-btn-danger-color, #ef6562);
136
+ }
137
+
138
+ .vchasno-ui-button:disabled.--danger {
139
+ border: 1px solid #b6cadb;
140
+ background-color: rgb(182 202 219 / 20%);
141
+ color: #b6cadb;
142
+ }
143
+
144
+ .vchasno-ui-button.--danger:not(:disabled):hover {
145
+ background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);
146
+ color: var(--vchasno-ui-btn-danger-hover-color, #fff);
147
+ }
148
+
149
+ .vchasno-ui-button.--danger.--outline:not(:disabled):hover {
150
+ border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);
151
+ background-color: rgb(0 0 0 / 10%);
152
+ color: var(--vchasno-ui-btn-danger-color, #ef6562);
153
+ }
154
+
155
+ .vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {
156
+ stroke: var(--vchasno-ui-btn-default-color);
157
+ transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);
158
+ }
159
+
160
+ .vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {
161
+ stroke: var(--vchasno-ui-btn-default-hover-color);
162
+ }
163
+
164
+ .vchasno-ui-button:disabled.--transparent {
165
+ color: #b6cadb;
166
+ }
167
+
168
+ .vchasno-ui-button.--light {
169
+ border: 1px solid transparent;
170
+ background-color: var(--vchasno-ui-btn-light-bg, #fff);
171
+ color: var(--vchasno-ui-btn-light-color);
172
+ }
173
+
174
+ .vchasno-ui-button:disabled.--light {
175
+ border: none;
176
+ background-color: rgb(182 202 219 / 20%);
177
+ color: #b6cadb;
178
+ }
179
+
180
+ .vchasno-ui-button.--light.--outline {
181
+ border: 1px solid var(--vchasno-ui-btn-primary-bg);
182
+ background-color: var(--vchasno-ui-btn-primary-color);
183
+ color: var(--vchasno-ui-btn-primary-bg);
184
+ }
185
+
186
+ .vchasno-ui-button.--light:not(:disabled):hover {
187
+ background-color: var(--vchasno-ui-btn-light-hover-bg);
188
+ color: var(--vchasno-ui-btn-primary-bg);
189
+ }