npm - @vchasno/ui-kit - Versions diffs - 0.3.20 → 0.3.22 - Mend

@vchasno/ui-kit 0.3.20 → 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 (44) hide show

package/CHANGELOG.md +12 -0
package/dist/Datepicker/index.cjs.js +1 -1
package/dist/Datepicker/index.js +1 -1
package/dist/Datepicker/types/components/Button/Button.d.ts +1 -1
package/dist/Menu/types/components/Button/Button.d.ts +1 -1
package/dist/ProjectsPopover/types/components/Button/Button.d.ts +1 -1
package/dist/Select/types/components/Button/Button.d.ts +1 -1
package/dist/SelectCreatable/types/components/Button/Button.d.ts +1 -1
package/dist/Snackbar/index.cjs.js +1 -1
package/dist/Snackbar/index.js +1 -1
package/dist/Snackbar/types/components/Button/Button.d.ts +1 -1
package/dist/css/Alert.global.css +79 -0
package/dist/css/BubbleBox.global.css +47 -0
package/dist/css/Button.global.css +189 -0
package/dist/css/Checkbox.global.css +74 -0
package/dist/css/DatePicker.global.css +625 -0
package/dist/css/FollowUs.global.css +25 -0
package/dist/css/Input.global.css +89 -0
package/dist/css/InputMeta.global.css +25 -0
package/dist/css/LabelText.global.css +75 -0
package/dist/css/MaskInput.global.css +16 -0
package/dist/css/Menu.global.css +117 -0
package/dist/css/MenuButton.global.css +18 -0
package/dist/css/MenuItem.global.css +30 -0
package/dist/css/MobileAppLinks.global.css +22 -0
package/dist/css/Pagination.global.css +51 -0
package/dist/css/Paragraph.global.css +9 -0
package/dist/css/ProjectsPopover.global.css +111 -0
package/dist/css/Select.global.css +190 -0
package/dist/css/Snackbar.global.css +31 -0
package/dist/css/Spinner.global.css +47 -0
package/dist/css/SplashLogo.global.css +29 -0
package/dist/css/SvgBorder.global.css +32 -0
package/dist/css/Switch.global.css +82 -0
package/dist/css/Tabs.global.css +122 -0
package/dist/css/Text.global.css +73 -0
package/dist/css/TextAreaInput.global.css +41 -0
package/dist/css/TextInput.global.css +22 -0
package/dist/css/Title.global.css +44 -0
package/dist/css/_theme.css +2 -0
package/dist/index.d.ts +1 -1
package/dist/index.js +1 -1
package/dist/types/components/Button/Button.d.ts +1 -1
package/package.json +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
+## [0.3.22] - 2024-08-14
+## Added
+-   Ability to import css files per component with direct import from `@vchasno/ui-kit/css/{component-name}.global.css`
+## [0.3.21] - 2024-08-14
+## Added
+-   Button - theme pink
 ## [0.3.20] - 2024-08-13
 ## Added

package/dist/Datepicker/index.cjs.js CHANGED Viewed

@@ -15666,7 +15666,7 @@ var Spinner = function (_a) {
             React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
 };
-var css_248z = ".react-datepicker__triangle {\n    position: absolute;\n    left: 50px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    position: absolute;\n    margin-left: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    position: absolute;\n    width: 1px;\n    height: 0;\n    box-sizing: content-box;\n    border: 6px solid transparent;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    z-index: -1;\n    left: -6px;\n    border-width: 6px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n    content: '';\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n    top: 0;\n    margin-top: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    border-top: none;\n    border-bottom-color: #fff;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    top: -1px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {\n    position: absolute;\n    top: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    bottom: 0;\n    margin-bottom: -6px;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    border-top-color: #fff;\n    border-bottom: none;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    bottom: -1px;\n    border-top-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {\n    position: absolute;\n    bottom: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker {\n    position: relative;\n    display: inline-flex;\n    padding: 10px;\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    background-color: #fff;\n    box-shadow: 0 2px 2px 0 rgb(28 54 72 / 11%);\n    color: var(--vchasno-ui-input-font-color);\n    font-size: 0.8rem;\n}\n\n.react-datepicker__time-container {\n    width: 85px;\n    float: right;\n}\n\n.react-datepicker__time-container--with-today-button {\n    position: absolute;\n    top: 0;\n    right: -87px;\n    display: inline;\n    border: 1px solid #aeaeae;\n    border-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time {\n    position: relative;\n    background: white;\n    border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n    width: 85px;\n    margin: 0 auto;\n    border-bottom-right-radius: 0.3rem;\n    overflow-x: hidden;\n    text-align: center;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list {\n    width: 100%;\n    height: calc(195px + (1.7rem / 2));\n    box-sizing: content-box;\n    padding-right: 0;\n    padding-left: 0;\n    margin: 0;\n    list-style: none;\n    overflow-y: scroll;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item {\n    height: 30px;\n    padding: 5px 10px;\n    border-radius: 8px;\n    white-space: nowrap;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected {\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled {\n    color: #ccc;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled:hover {\n    background-color: transparent;\n    cursor: default;\n}\n\n.react-datepicker__header--time {\n    padding-right: 5px;\n    padding-bottom: 8px;\n    padding-left: 5px;\n}\n\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n    border-top-left-radius: 0;\n}\n\n.react-datepicker__header {\n    position: relative;\n    padding-top: 5px;\n    text-align: center;\n}\n\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    border-top-right-radius: 0.3rem;\n}\n\n@media all and (width <= 480px) {\n    .react-datepicker {\n        padding: 0;\n    }\n}\n\n.react-datepicker-popper {\n    z-index: 100;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] {\n    margin-top: 8px;\n}\n\n.react-datepicker-popper[data-placement^='top'] {\n    margin-bottom: 8px;\n}\n\n.react-datepicker-popper[data-placement^='right'] {\n    margin-left: 6px;\n}\n\n.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {\n    right: 42px;\n    left: auto;\n}\n\n.react-datepicker-popper[data-placement^='left'] {\n    margin-right: 6px;\n}\n\n.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {\n    right: auto;\n    left: 42px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header {\n    padding: 8px 0 15px;\n    margin-top: 0;\n    color: var(--vchasno-ui-input-font-color);\n    font-weight: bold;\n    text-transform: capitalize;\n}\n\n.react-datepicker__month-container {\n    float: left;\n}\n\n.react-datepicker__aria-live {\n    display: none;\n}\n\n.react-datepicker__month {\n    margin: 0;\n    text-align: center;\n}\n\n.react-datepicker__day-names,\n.react-datepicker__week {\n    white-space: nowrap;\n}\n\n.react-datepicker__day-name {\n    text-transform: none;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n    display: inline-block;\n    width: 34px;\n    color: var(--vchasno-ui-input-font-color);\n    cursor: pointer;\n    line-height: 34px;\n    text-align: center;\n    transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.react-datepicker__day-names .react-datepicker__day-name {\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.react-datepicker__day-name:nth-child(6),\n.react-datepicker__day-name:nth-child(7) {\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: 700;\n}\n\n.react-datepicker__day:hover {\n    border-radius: 8px;\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__day--today {\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: bold;\n}\n\n.react-datepicker__day--weekend {\n    font-weight: bold;\n}\n\n.react-datepicker__day--outside-month {\n    color: #6b8091;\n}\n\n.react-datepicker__day--disabled {\n    color: #b6cadb;\n    cursor: not-allowed;\n}\n\n.react-datepicker__day--disabled:hover {\n    background-color: transparent;\n}\n\n.react-datepicker__day--selected,\n.react-datepicker__day--in-selecting-range,\n.react-datepicker__day--in-range {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__day--selected:hover,\n.react-datepicker__day--in-selecting-range:hover,\n.react-datepicker__day--in-range:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected) {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n    background-color: rgb(33 107 165 / 50%);\n}\n\n.react-datepicker__month--selecting-range\n    .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n    background-color: #f0f0f0;\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.react-datepicker__input-container {\n    position: relative;\n}\n\n.react-datepicker__close-icon {\n    position: absolute;\n    top: 0;\n    right: 35px;\n    bottom: 0;\n    width: 10px;\n    height: 10px;\n    border: 0;\n    margin: auto;\n    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIGZpbGw9IiNiNmNhZGIiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTM4LjEsMzIuNEw2My4zLDcuM2MxLjYtMS42LDEuNi00LjIsMC01LjdjLTEuNi0xLjYtNC4yLTEuNi01LjcsMEwzMi40LDI2LjdMNy4zLDEuNkM1LjcsMCwzLjEsMCwxLjUsMS42cy0xLjYsNC4yLDAsNS43bDI1LjEsMjUuMUwxLjUsNTcuNmMtMS42LDEuNi0xLjYsNC4yLDAsNS43YzAuOCwwLjgsMS44LDEuMiwyLjksMS4yczIuMS0wLjQsMi45LTEuMmwyNS4xLTI1LjFsMjUuMSwyNS4xYzAuOCwwLjgsMS44LDEuMiwyLjksMS4yYzEsMCwyLjEtMC40LDIuOS0xLjJjMS42LTEuNiwxLjYtNC4yLDAtNS43TDM4LjEsMzIuNHoiLz48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-size: contain;\n    cursor: pointer;\n    outline: none;\n}\n\n.react-datepicker__today-button {\n    padding: 5px 0;\n    border-top: 1px solid #aeaeae;\n    background: #f0f0f0;\n    clear: left;\n    cursor: pointer;\n    font-weight: bold;\n    text-align: center;\n}\n\n.react-datepicker__portal {\n    position: fixed;\n    z-index: 2147483647;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100vw;\n    height: 100vh;\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(0 0 0 / 80%);\n}\n\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n    width: 3rem;\n    line-height: 3rem;\n}\n\n@media (width <= 400px), (height <= 550px) {\n    .react-datepicker__portal .react-datepicker__day-name,\n    .react-datepicker__portal .react-datepicker__day,\n    .react-datepicker__portal .react-datepicker__time-name {\n        width: 2rem;\n        line-height: 2rem;\n    }\n}\n\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n    font-size: 1.44rem;\n}\n\n.react-datepicker__navigation {\n    position: absolute;\n    z-index: 1;\n    top: 15px;\n    display: flex;\n    width: 30px;\n    height: 30px;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 8px;\n    background-size: cover;\n    cursor: pointer;\n    line-height: 1;\n}\n\n.react-datepicker__navigation:hover {\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__navigation--previous {\n    left: 20px;\n}\n\n.react-datepicker__navigation-icon {\n    display: none;\n}\n\n.react-datepicker__navigation--previous::before,\n.react-datepicker__navigation--next::before {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    margin: auto;\n    inset: 0;\n}\n\n.react-datepicker__navigation--previous::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTQyLjcsNjVjMi4xLDAsNC4zLTAuOCw1LjktMi40YzMuMi0zLjIsMy4yLTguNSwwLTExLjdMMzAuNCwzMi43bDE4LjEtMTguNWMzLjItMy4yLDMuMi04LjUsMC0xMS43Yy0zLjItMy4yLTguNS0zLjItMTEuNywwTDE4LjcsMjAuNmMtNi42LDYuNi02LjYsMTcuMywwLDIzLjhsMTguMSwxOC4xQzM4LjQsNjQuMiw0MC42LDY1LDQyLjcsNjV6Ii8+PC9nPjwvc3ZnPg==');\n}\n\n.react-datepicker__navigation--next {\n    right: 20px;\n}\n\n.react-datepicker__day:focus,\n.react-datepicker__navigation--previous:focus,\n.react-datepicker__navigation--next:focus {\n    border-radius: 8px;\n    outline: 1px solid var(--vchasno-ui-calendar-color);\n    outline-offset: 1px;\n}\n\n.react-datepicker__navigation--next--with-time:not(\n        .react-datepicker__navigation--next--with-today-button\n    ) {\n    right: 110px;\n}\n\n.react-datepicker__navigation--next::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTIyLDY1Yy0yLjEsMC00LjMtMC44LTUuOS0yLjRjLTMuMi0zLjItMy4yLTguNSwwLTExLjdsMTguMS0xOC4xTDE2LjIsMTQuMmMtMy4yLTMuMi0zLjItOC41LDAtMTEuN3M4LjUtMy4yLDExLjcsMGwxOC4xLDE4LjFjNi42LDYuNiw2LjYsMTcuMywwLDIzLjhMMjcuOSw2Mi42QzI2LjMsNjQuMiwyNC4yLDY1LDIyLDY1eiIvPjwvZz48L3N2Zz4=');\n}\n\n.react-datepicker__input-container input {\n    width: 100%;\n    height: 30px;\n    box-sizing: border-box;\n    padding: 10px 15px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default, #b6cadb);\n    border-radius: 8px;\n    appearance: none;\n    background: #fff;\n    font-size: var(--vchasno-ui-input-font-size, 0.8rem);\n    line-height: calc(var(--vchasno-ui-input-font-size, 0.8rem) * 2);\n    outline: 1px solid transparent;\n    transition:\n        border var(--vchasno-ui-transition-duration-sec, 0.3s),\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    vertical-align: middle;\n}\n\n.react-datepicker__input-container input:disabled {\n    background: #f3f6f8;\n    color: #b6cadb;\n}\n\n.react-datepicker__input-container input:hover {\n    cursor: default;\n}\n\n.react-datepicker__input-container input:focus {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n/**\n Own component styles\n */\n\n.vchasno-ui-date-picker {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-date-picker .vchasno-ui-date-picker__picker {\n    height: 50px;\n}\n\n.vchasno-ui-date-picker__wrapper {\n    position: relative;\n}\n\n.vchasno-ui-date-picker__wrapper:focus-within .vchasno-ui-label-text,\n.vchasno-ui-date-picker.--not-empty .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\n.vchasno-ui-date-picker__wrapper > svg {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    color: var(--vchasno-ui-input-border-color-default);\n    transform: translateY(-50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\nlabel[class^='vchasno-ui-']:focus-within .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper > .vchasno-ui-spinner {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    transform: translateY(-50%);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper .vchasno-ui-spinner circle {\n    stroke: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker .react-datepicker__input-container input {\n    color: var(--vchasno-ui-input-font-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n}\n\n.vchasno-ui-date-picker .react-datepicker__aria-live {\n    display: none;\n}\n\n.vchasno-ui-date-picker.--disabled,\n.vchasno-ui-date-picker.--disabled\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover,\n.vchasno-ui-date-picker:not(.--disabled):hover\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: pointer;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .react-datepicker__input-container input {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n";
+var css_248z = ".react-datepicker__triangle {\n    position: absolute;\n    left: 50px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    position: absolute;\n    margin-left: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    position: absolute;\n    width: 1px;\n    height: 0;\n    box-sizing: content-box;\n    border: 6px solid transparent;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    z-index: -1;\n    left: -6px;\n    border-width: 6px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n    content: '';\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n    top: 0;\n    margin-top: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    border-top: none;\n    border-bottom-color: #fff;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    top: -1px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {\n    position: absolute;\n    top: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    bottom: 0;\n    margin-bottom: -6px;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    border-top-color: #fff;\n    border-bottom: none;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    bottom: -1px;\n    border-top-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {\n    position: absolute;\n    bottom: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker {\n    position: relative;\n    display: inline-flex;\n    padding: 10px;\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    background-color: #fff;\n    color: var(--vchasno-ui-input-font-color);\n    font-size: 0.8rem;\n}\n\n.react-datepicker__time-container {\n    width: 85px;\n    float: right;\n}\n\n.react-datepicker__time-container--with-today-button {\n    position: absolute;\n    top: 0;\n    right: -87px;\n    display: inline;\n    border: 1px solid #aeaeae;\n    border-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time {\n    position: relative;\n    background: white;\n    border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n    width: 85px;\n    margin: 0 auto;\n    border-bottom-right-radius: 0.3rem;\n    overflow-x: hidden;\n    text-align: center;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list {\n    width: 100%;\n    height: calc(195px + (1.7rem / 2));\n    box-sizing: content-box;\n    padding-right: 0;\n    padding-left: 0;\n    margin: 0;\n    list-style: none;\n    overflow-y: scroll;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item {\n    height: 30px;\n    padding: 5px 10px;\n    border-radius: 8px;\n    white-space: nowrap;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected {\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled {\n    color: #ccc;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled:hover {\n    background-color: transparent;\n    cursor: default;\n}\n\n.react-datepicker__header--time {\n    padding-right: 5px;\n    padding-bottom: 8px;\n    padding-left: 5px;\n}\n\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n    border-top-left-radius: 0;\n}\n\n.react-datepicker__header {\n    position: relative;\n    padding-top: 5px;\n    text-align: center;\n}\n\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    border-top-right-radius: 0.3rem;\n}\n\n@media all and (width <= 480px) {\n    .react-datepicker {\n        padding: 0;\n    }\n}\n\n.react-datepicker-popper {\n    z-index: 100;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] {\n    margin-top: 8px;\n}\n\n.react-datepicker-popper[data-placement^='top'] {\n    margin-bottom: 8px;\n}\n\n.react-datepicker-popper[data-placement^='right'] {\n    margin-left: 6px;\n}\n\n.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {\n    right: 42px;\n    left: auto;\n}\n\n.react-datepicker-popper[data-placement^='left'] {\n    margin-right: 6px;\n}\n\n.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {\n    right: auto;\n    left: 42px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header {\n    padding: 8px 0 15px;\n    margin-top: 0;\n    color: var(--vchasno-ui-input-font-color);\n    font-weight: bold;\n    text-transform: capitalize;\n}\n\n.react-datepicker__month-container {\n    float: left;\n}\n\n.react-datepicker__aria-live {\n    display: none;\n}\n\n.react-datepicker__month {\n    margin: 0;\n    text-align: center;\n}\n\n.react-datepicker__day-names,\n.react-datepicker__week {\n    white-space: nowrap;\n}\n\n.react-datepicker__day-name {\n    text-transform: none;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n    display: inline-block;\n    width: 34px;\n    color: var(--vchasno-ui-input-font-color);\n    cursor: pointer;\n    line-height: 34px;\n    text-align: center;\n    transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.react-datepicker__day-names .react-datepicker__day-name {\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.react-datepicker__day-name:nth-child(6),\n.react-datepicker__day-name:nth-child(7) {\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: 700;\n}\n\n.react-datepicker__day:hover {\n    border-radius: 8px;\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__day--today {\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: bold;\n}\n\n.react-datepicker__day--weekend {\n    font-weight: bold;\n}\n\n.react-datepicker__day--outside-month {\n    color: #6b8091;\n}\n\n.react-datepicker__day--disabled {\n    color: #b6cadb;\n    cursor: not-allowed;\n}\n\n.react-datepicker__day--disabled:hover {\n    background-color: transparent;\n}\n\n.react-datepicker__day--selected,\n.react-datepicker__day--in-selecting-range,\n.react-datepicker__day--in-range {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__day--selected:hover,\n.react-datepicker__day--in-selecting-range:hover,\n.react-datepicker__day--in-range:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected) {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n    background-color: rgb(33 107 165 / 50%);\n}\n\n.react-datepicker__month--selecting-range\n    .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n    background-color: #f0f0f0;\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.react-datepicker__input-container {\n    position: relative;\n}\n\n.react-datepicker__close-icon {\n    position: absolute;\n    top: 0;\n    right: 35px;\n    bottom: 0;\n    width: 10px;\n    height: 10px;\n    border: 0;\n    margin: auto;\n    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIGZpbGw9IiNiNmNhZGIiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTM4LjEsMzIuNEw2My4zLDcuM2MxLjYtMS42LDEuNi00LjIsMC01LjdjLTEuNi0xLjYtNC4yLTEuNi01LjcsMEwzMi40LDI2LjdMNy4zLDEuNkM1LjcsMCwzLjEsMCwxLjUsMS42cy0xLjYsNC4yLDAsNS43bDI1LjEsMjUuMUwxLjUsNTcuNmMtMS42LDEuNi0xLjYsNC4yLDAsNS43YzAuOCwwLjgsMS44LDEuMiwyLjksMS4yczIuMS0wLjQsMi45LTEuMmwyNS4xLTI1LjFsMjUuMSwyNS4xYzAuOCwwLjgsMS44LDEuMiwyLjksMS4yYzEsMCwyLjEtMC40LDIuOS0xLjJjMS42LTEuNiwxLjYtNC4yLDAtNS43TDM4LjEsMzIuNHoiLz48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-size: contain;\n    cursor: pointer;\n    outline: none;\n}\n\n.react-datepicker__today-button {\n    padding: 5px 0;\n    border-top: 1px solid #aeaeae;\n    background: #f0f0f0;\n    clear: left;\n    cursor: pointer;\n    font-weight: bold;\n    text-align: center;\n}\n\n.react-datepicker__portal {\n    position: fixed;\n    z-index: 2147483647;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100vw;\n    height: 100vh;\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(0 0 0 / 80%);\n}\n\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n    width: 3rem;\n    line-height: 3rem;\n}\n\n@media (width <= 400px), (height <= 550px) {\n    .react-datepicker__portal .react-datepicker__day-name,\n    .react-datepicker__portal .react-datepicker__day,\n    .react-datepicker__portal .react-datepicker__time-name {\n        width: 2rem;\n        line-height: 2rem;\n    }\n}\n\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n    font-size: 1.44rem;\n}\n\n.react-datepicker__navigation {\n    position: absolute;\n    z-index: 1;\n    top: 15px;\n    display: flex;\n    width: 30px;\n    height: 30px;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 8px;\n    background-size: cover;\n    cursor: pointer;\n    line-height: 1;\n}\n\n.react-datepicker__navigation:hover {\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__navigation--previous {\n    left: 20px;\n}\n\n.react-datepicker__navigation-icon {\n    display: none;\n}\n\n.react-datepicker__navigation--previous::before,\n.react-datepicker__navigation--next::before {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    margin: auto;\n    inset: 0;\n}\n\n.react-datepicker__navigation--previous::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTQyLjcsNjVjMi4xLDAsNC4zLTAuOCw1LjktMi40YzMuMi0zLjIsMy4yLTguNSwwLTExLjdMMzAuNCwzMi43bDE4LjEtMTguNWMzLjItMy4yLDMuMi04LjUsMC0xMS43Yy0zLjItMy4yLTguNS0zLjItMTEuNywwTDE4LjcsMjAuNmMtNi42LDYuNi02LjYsMTcuMywwLDIzLjhsMTguMSwxOC4xQzM4LjQsNjQuMiw0MC42LDY1LDQyLjcsNjV6Ii8+PC9nPjwvc3ZnPg==');\n}\n\n.react-datepicker__navigation--next {\n    right: 20px;\n}\n\n.react-datepicker__day:focus,\n.react-datepicker__navigation--previous:focus,\n.react-datepicker__navigation--next:focus {\n    border-radius: 8px;\n    outline: 1px solid var(--vchasno-ui-calendar-color);\n    outline-offset: 1px;\n}\n\n.react-datepicker__navigation--next--with-time:not(\n        .react-datepicker__navigation--next--with-today-button\n    ) {\n    right: 110px;\n}\n\n.react-datepicker__navigation--next::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTIyLDY1Yy0yLjEsMC00LjMtMC44LTUuOS0yLjRjLTMuMi0zLjItMy4yLTguNSwwLTExLjdsMTguMS0xOC4xTDE2LjIsMTQuMmMtMy4yLTMuMi0zLjItOC41LDAtMTEuN3M4LjUtMy4yLDExLjcsMGwxOC4xLDE4LjFjNi42LDYuNiw2LjYsMTcuMywwLDIzLjhMMjcuOSw2Mi42QzI2LjMsNjQuMiwyNC4yLDY1LDIyLDY1eiIvPjwvZz48L3N2Zz4=');\n}\n\n.react-datepicker__input-container input {\n    width: 100%;\n    height: 30px;\n    box-sizing: border-box;\n    padding: 10px 15px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default, #b6cadb);\n    border-radius: 8px;\n    appearance: none;\n    background: #fff;\n    font-size: var(--vchasno-ui-input-font-size, 0.8rem);\n    line-height: calc(var(--vchasno-ui-input-font-size, 0.8rem) * 2);\n    outline: 1px solid transparent;\n    transition:\n        border var(--vchasno-ui-transition-duration-sec, 0.3s),\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    vertical-align: middle;\n}\n\n.react-datepicker__input-container input:disabled {\n    background: #f3f6f8;\n    color: #b6cadb;\n}\n\n.react-datepicker__input-container input:hover {\n    cursor: default;\n}\n\n.react-datepicker__input-container input:focus {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n/**\n Own component styles\n */\n\n.vchasno-ui-date-picker {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-date-picker .vchasno-ui-date-picker__picker {\n    height: 50px;\n}\n\n.vchasno-ui-date-picker__wrapper {\n    position: relative;\n}\n\n.vchasno-ui-date-picker__wrapper:focus-within .vchasno-ui-label-text,\n.vchasno-ui-date-picker.--not-empty .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\n.vchasno-ui-date-picker__wrapper > svg {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    color: var(--vchasno-ui-input-border-color-default);\n    transform: translateY(-50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\nlabel[class^='vchasno-ui-']:focus-within .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper > .vchasno-ui-spinner {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    transform: translateY(-50%);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper .vchasno-ui-spinner circle {\n    stroke: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker .react-datepicker__input-container input {\n    color: var(--vchasno-ui-input-font-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n}\n\n.vchasno-ui-date-picker .react-datepicker__aria-live {\n    display: none;\n}\n\n.vchasno-ui-date-picker.--disabled,\n.vchasno-ui-date-picker.--disabled\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover,\n.vchasno-ui-date-picker:not(.--disabled):hover\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: pointer;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .react-datepicker__input-container input {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n";
 styleInject(css_248z);
 var SvgCalendar = function () { return (React.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },

package/dist/Datepicker/index.js CHANGED Viewed

@@ -15646,7 +15646,7 @@ var Spinner = function (_a) {
             React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
 };
-var css_248z = ".react-datepicker__triangle {\n    position: absolute;\n    left: 50px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    position: absolute;\n    margin-left: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    position: absolute;\n    width: 1px;\n    height: 0;\n    box-sizing: content-box;\n    border: 6px solid transparent;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    z-index: -1;\n    left: -6px;\n    border-width: 6px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n    content: '';\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n    top: 0;\n    margin-top: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    border-top: none;\n    border-bottom-color: #fff;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    top: -1px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {\n    position: absolute;\n    top: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    bottom: 0;\n    margin-bottom: -6px;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    border-top-color: #fff;\n    border-bottom: none;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    bottom: -1px;\n    border-top-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {\n    position: absolute;\n    bottom: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker {\n    position: relative;\n    display: inline-flex;\n    padding: 10px;\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    background-color: #fff;\n    box-shadow: 0 2px 2px 0 rgb(28 54 72 / 11%);\n    color: var(--vchasno-ui-input-font-color);\n    font-size: 0.8rem;\n}\n\n.react-datepicker__time-container {\n    width: 85px;\n    float: right;\n}\n\n.react-datepicker__time-container--with-today-button {\n    position: absolute;\n    top: 0;\n    right: -87px;\n    display: inline;\n    border: 1px solid #aeaeae;\n    border-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time {\n    position: relative;\n    background: white;\n    border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n    width: 85px;\n    margin: 0 auto;\n    border-bottom-right-radius: 0.3rem;\n    overflow-x: hidden;\n    text-align: center;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list {\n    width: 100%;\n    height: calc(195px + (1.7rem / 2));\n    box-sizing: content-box;\n    padding-right: 0;\n    padding-left: 0;\n    margin: 0;\n    list-style: none;\n    overflow-y: scroll;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item {\n    height: 30px;\n    padding: 5px 10px;\n    border-radius: 8px;\n    white-space: nowrap;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected {\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled {\n    color: #ccc;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled:hover {\n    background-color: transparent;\n    cursor: default;\n}\n\n.react-datepicker__header--time {\n    padding-right: 5px;\n    padding-bottom: 8px;\n    padding-left: 5px;\n}\n\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n    border-top-left-radius: 0;\n}\n\n.react-datepicker__header {\n    position: relative;\n    padding-top: 5px;\n    text-align: center;\n}\n\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    border-top-right-radius: 0.3rem;\n}\n\n@media all and (width <= 480px) {\n    .react-datepicker {\n        padding: 0;\n    }\n}\n\n.react-datepicker-popper {\n    z-index: 100;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] {\n    margin-top: 8px;\n}\n\n.react-datepicker-popper[data-placement^='top'] {\n    margin-bottom: 8px;\n}\n\n.react-datepicker-popper[data-placement^='right'] {\n    margin-left: 6px;\n}\n\n.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {\n    right: 42px;\n    left: auto;\n}\n\n.react-datepicker-popper[data-placement^='left'] {\n    margin-right: 6px;\n}\n\n.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {\n    right: auto;\n    left: 42px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header {\n    padding: 8px 0 15px;\n    margin-top: 0;\n    color: var(--vchasno-ui-input-font-color);\n    font-weight: bold;\n    text-transform: capitalize;\n}\n\n.react-datepicker__month-container {\n    float: left;\n}\n\n.react-datepicker__aria-live {\n    display: none;\n}\n\n.react-datepicker__month {\n    margin: 0;\n    text-align: center;\n}\n\n.react-datepicker__day-names,\n.react-datepicker__week {\n    white-space: nowrap;\n}\n\n.react-datepicker__day-name {\n    text-transform: none;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n    display: inline-block;\n    width: 34px;\n    color: var(--vchasno-ui-input-font-color);\n    cursor: pointer;\n    line-height: 34px;\n    text-align: center;\n    transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.react-datepicker__day-names .react-datepicker__day-name {\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.react-datepicker__day-name:nth-child(6),\n.react-datepicker__day-name:nth-child(7) {\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: 700;\n}\n\n.react-datepicker__day:hover {\n    border-radius: 8px;\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__day--today {\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: bold;\n}\n\n.react-datepicker__day--weekend {\n    font-weight: bold;\n}\n\n.react-datepicker__day--outside-month {\n    color: #6b8091;\n}\n\n.react-datepicker__day--disabled {\n    color: #b6cadb;\n    cursor: not-allowed;\n}\n\n.react-datepicker__day--disabled:hover {\n    background-color: transparent;\n}\n\n.react-datepicker__day--selected,\n.react-datepicker__day--in-selecting-range,\n.react-datepicker__day--in-range {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__day--selected:hover,\n.react-datepicker__day--in-selecting-range:hover,\n.react-datepicker__day--in-range:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected) {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n    background-color: rgb(33 107 165 / 50%);\n}\n\n.react-datepicker__month--selecting-range\n    .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n    background-color: #f0f0f0;\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.react-datepicker__input-container {\n    position: relative;\n}\n\n.react-datepicker__close-icon {\n    position: absolute;\n    top: 0;\n    right: 35px;\n    bottom: 0;\n    width: 10px;\n    height: 10px;\n    border: 0;\n    margin: auto;\n    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIGZpbGw9IiNiNmNhZGIiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTM4LjEsMzIuNEw2My4zLDcuM2MxLjYtMS42LDEuNi00LjIsMC01LjdjLTEuNi0xLjYtNC4yLTEuNi01LjcsMEwzMi40LDI2LjdMNy4zLDEuNkM1LjcsMCwzLjEsMCwxLjUsMS42cy0xLjYsNC4yLDAsNS43bDI1LjEsMjUuMUwxLjUsNTcuNmMtMS42LDEuNi0xLjYsNC4yLDAsNS43YzAuOCwwLjgsMS44LDEuMiwyLjksMS4yczIuMS0wLjQsMi45LTEuMmwyNS4xLTI1LjFsMjUuMSwyNS4xYzAuOCwwLjgsMS44LDEuMiwyLjksMS4yYzEsMCwyLjEtMC40LDIuOS0xLjJjMS42LTEuNiwxLjYtNC4yLDAtNS43TDM4LjEsMzIuNHoiLz48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-size: contain;\n    cursor: pointer;\n    outline: none;\n}\n\n.react-datepicker__today-button {\n    padding: 5px 0;\n    border-top: 1px solid #aeaeae;\n    background: #f0f0f0;\n    clear: left;\n    cursor: pointer;\n    font-weight: bold;\n    text-align: center;\n}\n\n.react-datepicker__portal {\n    position: fixed;\n    z-index: 2147483647;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100vw;\n    height: 100vh;\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(0 0 0 / 80%);\n}\n\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n    width: 3rem;\n    line-height: 3rem;\n}\n\n@media (width <= 400px), (height <= 550px) {\n    .react-datepicker__portal .react-datepicker__day-name,\n    .react-datepicker__portal .react-datepicker__day,\n    .react-datepicker__portal .react-datepicker__time-name {\n        width: 2rem;\n        line-height: 2rem;\n    }\n}\n\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n    font-size: 1.44rem;\n}\n\n.react-datepicker__navigation {\n    position: absolute;\n    z-index: 1;\n    top: 15px;\n    display: flex;\n    width: 30px;\n    height: 30px;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 8px;\n    background-size: cover;\n    cursor: pointer;\n    line-height: 1;\n}\n\n.react-datepicker__navigation:hover {\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__navigation--previous {\n    left: 20px;\n}\n\n.react-datepicker__navigation-icon {\n    display: none;\n}\n\n.react-datepicker__navigation--previous::before,\n.react-datepicker__navigation--next::before {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    margin: auto;\n    inset: 0;\n}\n\n.react-datepicker__navigation--previous::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTQyLjcsNjVjMi4xLDAsNC4zLTAuOCw1LjktMi40YzMuMi0zLjIsMy4yLTguNSwwLTExLjdMMzAuNCwzMi43bDE4LjEtMTguNWMzLjItMy4yLDMuMi04LjUsMC0xMS43Yy0zLjItMy4yLTguNS0zLjItMTEuNywwTDE4LjcsMjAuNmMtNi42LDYuNi02LjYsMTcuMywwLDIzLjhsMTguMSwxOC4xQzM4LjQsNjQuMiw0MC42LDY1LDQyLjcsNjV6Ii8+PC9nPjwvc3ZnPg==');\n}\n\n.react-datepicker__navigation--next {\n    right: 20px;\n}\n\n.react-datepicker__day:focus,\n.react-datepicker__navigation--previous:focus,\n.react-datepicker__navigation--next:focus {\n    border-radius: 8px;\n    outline: 1px solid var(--vchasno-ui-calendar-color);\n    outline-offset: 1px;\n}\n\n.react-datepicker__navigation--next--with-time:not(\n        .react-datepicker__navigation--next--with-today-button\n    ) {\n    right: 110px;\n}\n\n.react-datepicker__navigation--next::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTIyLDY1Yy0yLjEsMC00LjMtMC44LTUuOS0yLjRjLTMuMi0zLjItMy4yLTguNSwwLTExLjdsMTguMS0xOC4xTDE2LjIsMTQuMmMtMy4yLTMuMi0zLjItOC41LDAtMTEuN3M4LjUtMy4yLDExLjcsMGwxOC4xLDE4LjFjNi42LDYuNiw2LjYsMTcuMywwLDIzLjhMMjcuOSw2Mi42QzI2LjMsNjQuMiwyNC4yLDY1LDIyLDY1eiIvPjwvZz48L3N2Zz4=');\n}\n\n.react-datepicker__input-container input {\n    width: 100%;\n    height: 30px;\n    box-sizing: border-box;\n    padding: 10px 15px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default, #b6cadb);\n    border-radius: 8px;\n    appearance: none;\n    background: #fff;\n    font-size: var(--vchasno-ui-input-font-size, 0.8rem);\n    line-height: calc(var(--vchasno-ui-input-font-size, 0.8rem) * 2);\n    outline: 1px solid transparent;\n    transition:\n        border var(--vchasno-ui-transition-duration-sec, 0.3s),\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    vertical-align: middle;\n}\n\n.react-datepicker__input-container input:disabled {\n    background: #f3f6f8;\n    color: #b6cadb;\n}\n\n.react-datepicker__input-container input:hover {\n    cursor: default;\n}\n\n.react-datepicker__input-container input:focus {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n/**\n Own component styles\n */\n\n.vchasno-ui-date-picker {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-date-picker .vchasno-ui-date-picker__picker {\n    height: 50px;\n}\n\n.vchasno-ui-date-picker__wrapper {\n    position: relative;\n}\n\n.vchasno-ui-date-picker__wrapper:focus-within .vchasno-ui-label-text,\n.vchasno-ui-date-picker.--not-empty .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\n.vchasno-ui-date-picker__wrapper > svg {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    color: var(--vchasno-ui-input-border-color-default);\n    transform: translateY(-50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\nlabel[class^='vchasno-ui-']:focus-within .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper > .vchasno-ui-spinner {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    transform: translateY(-50%);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper .vchasno-ui-spinner circle {\n    stroke: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker .react-datepicker__input-container input {\n    color: var(--vchasno-ui-input-font-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n}\n\n.vchasno-ui-date-picker .react-datepicker__aria-live {\n    display: none;\n}\n\n.vchasno-ui-date-picker.--disabled,\n.vchasno-ui-date-picker.--disabled\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover,\n.vchasno-ui-date-picker:not(.--disabled):hover\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: pointer;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .react-datepicker__input-container input {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n";
+var css_248z = ".react-datepicker__triangle {\n    position: absolute;\n    left: 50px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    position: absolute;\n    margin-left: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    position: absolute;\n    width: 1px;\n    height: 0;\n    box-sizing: content-box;\n    border: 6px solid transparent;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    z-index: -1;\n    left: -6px;\n    border-width: 6px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n    content: '';\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n    top: 0;\n    margin-top: -6px;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    border-top: none;\n    border-bottom-color: #fff;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {\n    top: -1px;\n    border-bottom-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {\n    position: absolute;\n    top: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow {\n    bottom: 0;\n    margin-bottom: -6px;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,\n.react-datepicker__year-read-view--down-arrow,\n.react-datepicker__month-read-view--down-arrow,\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    border-top-color: #fff;\n    border-bottom: none;\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,\n.react-datepicker__year-read-view--down-arrow::before,\n.react-datepicker__month-read-view--down-arrow::before {\n    bottom: -1px;\n    border-top-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after {\n    position: absolute;\n    bottom: 1px;\n    left: -3px;\n    display: block;\n    width: 7px;\n    height: 7px;\n    background-color: #fff;\n    content: '';\n    transform: rotate(45deg);\n}\n\n.react-datepicker {\n    position: relative;\n    display: inline-flex;\n    padding: 10px;\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    background-color: #fff;\n    color: var(--vchasno-ui-input-font-color);\n    font-size: 0.8rem;\n}\n\n.react-datepicker__time-container {\n    width: 85px;\n    float: right;\n}\n\n.react-datepicker__time-container--with-today-button {\n    position: absolute;\n    top: 0;\n    right: -87px;\n    display: inline;\n    border: 1px solid #aeaeae;\n    border-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time {\n    position: relative;\n    background: white;\n    border-bottom-right-radius: 0.3rem;\n}\n\n.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {\n    width: 85px;\n    margin: 0 auto;\n    border-bottom-right-radius: 0.3rem;\n    overflow-x: hidden;\n    text-align: center;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list {\n    width: 100%;\n    height: calc(195px + (1.7rem / 2));\n    box-sizing: content-box;\n    padding-right: 0;\n    padding-left: 0;\n    margin: 0;\n    list-style: none;\n    overflow-y: scroll;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item {\n    height: 30px;\n    padding: 5px 10px;\n    border-radius: 8px;\n    white-space: nowrap;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected {\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--selected:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled {\n    color: #ccc;\n}\n\n.react-datepicker__time-container\n    .react-datepicker__time\n    .react-datepicker__time-box\n    ul.react-datepicker__time-list\n    li.react-datepicker__time-list-item--disabled:hover {\n    background-color: transparent;\n    cursor: default;\n}\n\n.react-datepicker__header--time {\n    padding-right: 5px;\n    padding-bottom: 8px;\n    padding-left: 5px;\n}\n\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n    border-top-left-radius: 0;\n}\n\n.react-datepicker__header {\n    position: relative;\n    padding-top: 5px;\n    text-align: center;\n}\n\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n    border-top-right-radius: 0.3rem;\n}\n\n@media all and (width <= 480px) {\n    .react-datepicker {\n        padding: 0;\n    }\n}\n\n.react-datepicker-popper {\n    z-index: 100;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] {\n    margin-top: 8px;\n}\n\n.react-datepicker-popper[data-placement^='top'] {\n    margin-bottom: 8px;\n}\n\n.react-datepicker-popper[data-placement^='right'] {\n    margin-left: 6px;\n}\n\n.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {\n    right: 42px;\n    left: auto;\n}\n\n.react-datepicker-popper[data-placement^='left'] {\n    margin-right: 6px;\n}\n\n.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {\n    right: auto;\n    left: 42px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header {\n    padding: 8px 0 15px;\n    margin-top: 0;\n    color: var(--vchasno-ui-input-font-color);\n    font-weight: bold;\n    text-transform: capitalize;\n}\n\n.react-datepicker__month-container {\n    float: left;\n}\n\n.react-datepicker__aria-live {\n    display: none;\n}\n\n.react-datepicker__month {\n    margin: 0;\n    text-align: center;\n}\n\n.react-datepicker__day-names,\n.react-datepicker__week {\n    white-space: nowrap;\n}\n\n.react-datepicker__day-name {\n    text-transform: none;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n    display: inline-block;\n    width: 34px;\n    color: var(--vchasno-ui-input-font-color);\n    cursor: pointer;\n    line-height: 34px;\n    text-align: center;\n    transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.react-datepicker__day-names .react-datepicker__day-name {\n    font-weight: 700;\n    text-transform: capitalize;\n}\n\n.react-datepicker__day-name:nth-child(6),\n.react-datepicker__day-name:nth-child(7) {\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: 700;\n}\n\n.react-datepicker__day:hover {\n    border-radius: 8px;\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__day--today {\n    border: 1px solid var(--vchasno-ui-calendar-color);\n    border-radius: 8px;\n    color: var(--vchasno-ui-calendar-color);\n    font-weight: bold;\n}\n\n.react-datepicker__day--weekend {\n    font-weight: bold;\n}\n\n.react-datepicker__day--outside-month {\n    color: #6b8091;\n}\n\n.react-datepicker__day--disabled {\n    color: #b6cadb;\n    cursor: not-allowed;\n}\n\n.react-datepicker__day--disabled:hover {\n    background-color: transparent;\n}\n\n.react-datepicker__day--selected,\n.react-datepicker__day--in-selecting-range,\n.react-datepicker__day--in-range {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n    font-weight: bold;\n}\n\n.react-datepicker__day--selected:hover,\n.react-datepicker__day--in-selecting-range:hover,\n.react-datepicker__day--in-range:hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected) {\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-calendar-color);\n    color: #fff;\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover {\n    background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {\n    background-color: rgb(33 107 165 / 50%);\n}\n\n.react-datepicker__month--selecting-range\n    .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {\n    background-color: #f0f0f0;\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.react-datepicker__input-container {\n    position: relative;\n}\n\n.react-datepicker__close-icon {\n    position: absolute;\n    top: 0;\n    right: 35px;\n    bottom: 0;\n    width: 10px;\n    height: 10px;\n    border: 0;\n    margin: auto;\n    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIGZpbGw9IiNiNmNhZGIiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTM4LjEsMzIuNEw2My4zLDcuM2MxLjYtMS42LDEuNi00LjIsMC01LjdjLTEuNi0xLjYtNC4yLTEuNi01LjcsMEwzMi40LDI2LjdMNy4zLDEuNkM1LjcsMCwzLjEsMCwxLjUsMS42cy0xLjYsNC4yLDAsNS43bDI1LjEsMjUuMUwxLjUsNTcuNmMtMS42LDEuNi0xLjYsNC4yLDAsNS43YzAuOCwwLjgsMS44LDEuMiwyLjksMS4yczIuMS0wLjQsMi45LTEuMmwyNS4xLTI1LjFsMjUuMSwyNS4xYzAuOCwwLjgsMS44LDEuMiwyLjksMS4yYzEsMCwyLjEtMC40LDIuOS0xLjJjMS42LTEuNiwxLjYtNC4yLDAtNS43TDM4LjEsMzIuNHoiLz48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-size: contain;\n    cursor: pointer;\n    outline: none;\n}\n\n.react-datepicker__today-button {\n    padding: 5px 0;\n    border-top: 1px solid #aeaeae;\n    background: #f0f0f0;\n    clear: left;\n    cursor: pointer;\n    font-weight: bold;\n    text-align: center;\n}\n\n.react-datepicker__portal {\n    position: fixed;\n    z-index: 2147483647;\n    top: 0;\n    left: 0;\n    display: flex;\n    width: 100vw;\n    height: 100vh;\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(0 0 0 / 80%);\n}\n\n.react-datepicker__portal .react-datepicker__day-name,\n.react-datepicker__portal .react-datepicker__day,\n.react-datepicker__portal .react-datepicker__time-name {\n    width: 3rem;\n    line-height: 3rem;\n}\n\n@media (width <= 400px), (height <= 550px) {\n    .react-datepicker__portal .react-datepicker__day-name,\n    .react-datepicker__portal .react-datepicker__day,\n    .react-datepicker__portal .react-datepicker__time-name {\n        width: 2rem;\n        line-height: 2rem;\n    }\n}\n\n.react-datepicker__portal .react-datepicker__current-month,\n.react-datepicker__portal .react-datepicker-time__header {\n    font-size: 1.44rem;\n}\n\n.react-datepicker__navigation {\n    position: absolute;\n    z-index: 1;\n    top: 15px;\n    display: flex;\n    width: 30px;\n    height: 30px;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    border-radius: 8px;\n    background-size: cover;\n    cursor: pointer;\n    line-height: 1;\n}\n\n.react-datepicker__navigation:hover {\n    background-color: #f2f6f7;\n}\n\n.react-datepicker__navigation--previous {\n    left: 20px;\n}\n\n.react-datepicker__navigation-icon {\n    display: none;\n}\n\n.react-datepicker__navigation--previous::before,\n.react-datepicker__navigation--next::before {\n    position: absolute;\n    width: 10px;\n    height: 10px;\n    margin: auto;\n    inset: 0;\n}\n\n.react-datepicker__navigation--previous::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTQyLjcsNjVjMi4xLDAsNC4zLTAuOCw1LjktMi40YzMuMi0zLjIsMy4yLTguNSwwLTExLjdMMzAuNCwzMi43bDE4LjEtMTguNWMzLjItMy4yLDMuMi04LjUsMC0xMS43Yy0zLjItMy4yLTguNS0zLjItMTEuNywwTDE4LjcsMjAuNmMtNi42LDYuNi02LjYsMTcuMywwLDIzLjhsMTguMSwxOC4xQzM4LjQsNjQuMiw0MC42LDY1LDQyLjcsNjV6Ii8+PC9nPjwvc3ZnPg==');\n}\n\n.react-datepicker__navigation--next {\n    right: 20px;\n}\n\n.react-datepicker__day:focus,\n.react-datepicker__navigation--previous:focus,\n.react-datepicker__navigation--next:focus {\n    border-radius: 8px;\n    outline: 1px solid var(--vchasno-ui-calendar-color);\n    outline-offset: 1px;\n}\n\n.react-datepicker__navigation--next--with-time:not(\n        .react-datepicker__navigation--next--with-today-button\n    ) {\n    right: 110px;\n}\n\n.react-datepicker__navigation--next::before {\n    content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzhhYTNiNyI+PGc+PHBhdGggZD0iTTIyLDY1Yy0yLjEsMC00LjMtMC44LTUuOS0yLjRjLTMuMi0zLjItMy4yLTguNSwwLTExLjdsMTguMS0xOC4xTDE2LjIsMTQuMmMtMy4yLTMuMi0zLjItOC41LDAtMTEuN3M4LjUtMy4yLDExLjcsMGwxOC4xLDE4LjFjNi42LDYuNiw2LjYsMTcuMywwLDIzLjhMMjcuOSw2Mi42QzI2LjMsNjQuMiwyNC4yLDY1LDIyLDY1eiIvPjwvZz48L3N2Zz4=');\n}\n\n.react-datepicker__input-container input {\n    width: 100%;\n    height: 30px;\n    box-sizing: border-box;\n    padding: 10px 15px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default, #b6cadb);\n    border-radius: 8px;\n    appearance: none;\n    background: #fff;\n    font-size: var(--vchasno-ui-input-font-size, 0.8rem);\n    line-height: calc(var(--vchasno-ui-input-font-size, 0.8rem) * 2);\n    outline: 1px solid transparent;\n    transition:\n        border var(--vchasno-ui-transition-duration-sec, 0.3s),\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    vertical-align: middle;\n}\n\n.react-datepicker__input-container input:disabled {\n    background: #f3f6f8;\n    color: #b6cadb;\n}\n\n.react-datepicker__input-container input:hover {\n    cursor: default;\n}\n\n.react-datepicker__input-container input:focus {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n/**\n Own component styles\n */\n\n.vchasno-ui-date-picker {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-date-picker .vchasno-ui-date-picker__picker {\n    height: 50px;\n}\n\n.vchasno-ui-date-picker__wrapper {\n    position: relative;\n}\n\n.vchasno-ui-date-picker__wrapper:focus-within .vchasno-ui-label-text,\n.vchasno-ui-date-picker.--not-empty .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\n.vchasno-ui-date-picker__wrapper > svg {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    color: var(--vchasno-ui-input-border-color-default);\n    transform: translateY(-50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\nlabel[class^='vchasno-ui-']:focus-within .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper > .vchasno-ui-spinner {\n    position: absolute;\n    top: 50%;\n    right: 10px;\n    transform: translateY(-50%);\n}\n\n.vchasno-ui-date-picker.--loading .vchasno-ui-date-picker__wrapper .vchasno-ui-spinner circle {\n    stroke: var(--vchasno-ui-calendar-color);\n}\n\n.vchasno-ui-date-picker .react-datepicker__input-container input {\n    color: var(--vchasno-ui-input-font-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n}\n\n.vchasno-ui-date-picker .react-datepicker__aria-live {\n    display: none;\n}\n\n.vchasno-ui-date-picker.--disabled,\n.vchasno-ui-date-picker.--disabled\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover,\n.vchasno-ui-date-picker:not(.--disabled):hover\n    .vchasno-ui-date-picker__wrapper\n    .vchasno-ui-date-picker__picker {\n    cursor: pointer;\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .react-datepicker__input-container input {\n    border-color: var(--vchasno-ui-calendar-color);\n    outline: 2px solid var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper > svg {\n    color: var(--vchasno-ui-calendar-color);\n}\n";
 styleInject(css_248z);
 var SvgCalendar = function () { return (React__default.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },

package/dist/Datepicker/types/components/Button/Button.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { LoadingFeedback, Sizable } from '../types';
 import './Button.global.css';
-type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
+type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
     className?: string;
     theme?: ButtonTheme;

package/dist/Menu/types/components/Button/Button.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { LoadingFeedback, Sizable } from '../types';
 import './Button.global.css';
-type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
+type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
     className?: string;
     theme?: ButtonTheme;

package/dist/ProjectsPopover/types/components/Button/Button.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { LoadingFeedback, Sizable } from '../types';
 import './Button.global.css';
-type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
+type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
     className?: string;
     theme?: ButtonTheme;

package/dist/Select/types/components/Button/Button.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { LoadingFeedback, Sizable } from '../types';
 import './Button.global.css';
-type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
+type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
     className?: string;
     theme?: ButtonTheme;

package/dist/SelectCreatable/types/components/Button/Button.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { LoadingFeedback, Sizable } from '../types';
 import './Button.global.css';
-type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
+type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
     className?: string;
     theme?: ButtonTheme;

package/dist/Snackbar/index.cjs.js CHANGED Viewed

@@ -240,7 +240,7 @@ var Spinner = function (_a) {
             React$1.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
 };
-var css_248z$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.--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";
+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";
 styleInject(css_248z$n);
 var Button = React$1.forwardRef(function (_a, ref) {

package/dist/Snackbar/index.js CHANGED Viewed

@@ -218,7 +218,7 @@ var Spinner = function (_a) {
             React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
 };
-var css_248z$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.--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";
+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";
 styleInject(css_248z$n);
 var Button = React__default.forwardRef(function (_a, ref) {

package/dist/Snackbar/types/components/Button/Button.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 import { LoadingFeedback, Sizable } from '../types';
 import './Button.global.css';
-type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger';
+type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
     className?: string;
     theme?: ButtonTheme;

package/dist/css/Alert.global.css ADDED Viewed

@@ -0,0 +1,79 @@
+.vchasno-ui-alert {
+    display: inline-flex;
+    min-height: 40px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    align-items: center;
+    padding: 12px 16px;
+    border-radius: 4px;
+    border-left: 3px solid transparent;
+    font-size: 14px;
+    gap: 12px;
+    line-height: 20px;
+}
+.vchasno-ui-alert strong,
+.vchasno-ui-alert b {
+    font-weight: 700;
+}
+.vchasno-ui-alert.--wide {
+    width: 100%;
+}
+.vchasno-ui-alert.--left-border {
+    border-left-width: 4px;
+}
+.vchasno-ui-alert__icon-wrapper,
+.vchasno-ui-alert__close-icon {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    line-height: 20px;
+}
+.vchasno-ui-alert.--info {
+    border-color: var(--vchasno-ui-alert-info-color, #006be9);
+    background-color: var(--vchasno-ui-alert-info-bg, #ecf4ff);
+}
+.vchasno-ui-alert.--warning {
+    border-color: var(--vchasno-ui-alert-warning-color, #ffb200);
+    background-color: var(--vchasno-ui-alert-warning-bg, #fff2d6);
+}
+.vchasno-ui-alert.--error {
+    border-color: var(--vchasno-ui-alert-error-color, #e73434);
+    background-color: var(--vchasno-ui-alert-error-bg, #ffeded);
+}
+.vchasno-ui-alert.--success {
+    border-color: var(--vchasno-ui-alert-success-color, #00b700);
+    background-color: var(--vchasno-ui-alert-success-bg, #e7f3d9);
+}
+.vchasno-ui-alert.--config {
+    border-color: var(--vchasno-ui-alert-config-color, #006be9);
+    background-color: var(--vchasno-ui-alert-config-bg, #f3f6f8);
+}
+.vchasno-ui-alert__close-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 4px;
+    transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);
+}
+.vchasno-ui-alert__close-icon:hover {
+    background-color: rgb(255 255 255 / 50%);
+    cursor: pointer;
+}
+.vchasno-ui-alert.--close {
+    display: none;
+}

package/dist/css/BubbleBox.global.css ADDED Viewed

@@ -0,0 +1,47 @@
+.vchasno-ui-BubbleBox {
+    --vchasno-ui-bubble-height: 40px;
+    --vchasno-ui-bubble-width: 40px;
+    --vchasno-ui-bubble-shadow: 2px 4px 6px rgb(0 0 0 / 20%);
+    position: relative;
+    min-height: calc(var(--vchasno-ui-bubble-height) * 2);
+    box-sizing: border-box;
+    transition: var(--vchasno-ui-transition-duration-sec);
+}
+.vchasno-ui-BubbleBox__svg {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    overflow: visible;
+    pointer-events: none;
+    transform: translateZ(0);
+    transition: var(--vchasno-ui-transition-duration-sec);
+}
+.vchasno-ui-BubbleBox__svg path {
+    transition: var(--vchasno-ui-transition-duration-sec);
+}
+.vchasno-ui-BubbleBox__svg.vchasno-ui-BubbleBox__shadow {
+    filter: drop-shadow(var(--vchasno-ui-bubble-shadow));
+}
+.vchasno-ui-BubbleBox__bubble {
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    width: var(--vchasno-ui-bubble-width);
+    height: var(--vchasno-ui-bubble-height);
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--vchasno-ui-bubble-width);
+    margin: 0;
+    cursor: pointer;
+    transition: var(--vchasno-ui-transition-duration-sec);
+}