@vchasno/ui-kit 0.1.2 → 0.1.4
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.
- package/CHANGELOG.md +27 -0
- package/README.md +12 -5
- package/dist/css/_theme.css +52 -55
- package/dist/index.d.ts +5 -2
- package/dist/index.js +29 -30
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +3 -3
- package/dist/types/components/Switcher/Switcher.d.ts +5 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,33 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.1.4] - 2023-10-19
|
|
11
|
+
|
|
12
|
+
## Changed
|
|
13
|
+
|
|
14
|
+
- add prefix --vchasno-ui for css variables (--{VARIABLE} -> --vchasno-ui-{VARIABLE})
|
|
15
|
+
- delete unused css variables
|
|
16
|
+
- update README.md (how to override css variables with new prefix)
|
|
17
|
+
|
|
18
|
+
## [0.1.3] - 2023-10-11
|
|
19
|
+
|
|
20
|
+
## Added
|
|
21
|
+
|
|
22
|
+
- update README.md (how to add new component, how to publish new version)
|
|
23
|
+
- improve Switch component, add more stories
|
|
24
|
+
|
|
25
|
+
## [0.1.2] - 2023-10-11
|
|
26
|
+
|
|
27
|
+
### Added
|
|
28
|
+
|
|
29
|
+
- export SelectOption type
|
|
30
|
+
|
|
31
|
+
## [0.1.1] - 2023-10-11
|
|
32
|
+
|
|
33
|
+
### Fixed
|
|
34
|
+
|
|
35
|
+
- remove package.json engine version
|
|
36
|
+
|
|
10
37
|
## [0.1.0] - 2023-10-10
|
|
11
38
|
|
|
12
39
|
### Added
|
package/README.md
CHANGED
|
@@ -44,13 +44,14 @@ import "src/styles/_theme-override.css"; // yuor own css file with theme variabl
|
|
|
44
44
|
### Styling and customization
|
|
45
45
|
|
|
46
46
|
`vchasno-ui` is using global styles with prefix `vchasno-ui-`
|
|
47
|
+
css variables start with the prefix `--vchasno-ui-`
|
|
47
48
|
|
|
48
49
|
To customize styles you can use CSS variables and override them
|
|
49
50
|
|
|
50
51
|
```css
|
|
51
52
|
/* theme-override.css */
|
|
52
53
|
:root {
|
|
53
|
-
--transition-duration-sec: 0.5s; // default 0.3s
|
|
54
|
+
--vchasno-ui-transition-duration-sec: 0.5s; // default 0.3s
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
```
|
|
@@ -111,9 +112,15 @@ npm run build-storybook
|
|
|
111
112
|
npm run build
|
|
112
113
|
```
|
|
113
114
|
|
|
114
|
-
### Publish
|
|
115
|
+
### Publish new version
|
|
115
116
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
117
|
+
Publish new version to npm registry can only be done with CI/CD
|
|
118
|
+
|
|
119
|
+
To publish new version:
|
|
119
120
|
|
|
121
|
+
1. Make changes in new branch (e.g. `feature/new-component`)
|
|
122
|
+
2. Add changes to CHANGELOG.md (see [Keep a Changelog](https://keepachangelog.com/en/1.0.0/))
|
|
123
|
+
3. Commit changes
|
|
124
|
+
4. Create tag with version (e.g. `v0.1.2`) run `npm version patch|minor|major`
|
|
125
|
+
5. Push changes to remote and create MR to `master` branch
|
|
126
|
+
6. Merge changes to `master` branch (CI/CD will publish new version to npm registry)
|
package/dist/css/_theme.css
CHANGED
|
@@ -1,57 +1,54 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--transition-duration-sec: 0.3s;
|
|
3
|
-
--btn-default-bg: transparent;
|
|
4
|
-
--btn-default-hover-bg: #e1e4ff;
|
|
5
|
-
--btn-default-color: #6b8091;
|
|
6
|
-
--btn-default-hover-color: #604adf;
|
|
7
|
-
--btn-primary-bg: #604adf;
|
|
8
|
-
--btn-primary-hover-bg: #3f328c;
|
|
9
|
-
--btn-primary-color: #fff;
|
|
10
|
-
--btn-secondary-bg: #ffb200;
|
|
11
|
-
--btn-secondary-hover-bg: #f39300;
|
|
12
|
-
--btn-secondary-color: #fff;
|
|
13
|
-
--btn-light-bg: #fff;
|
|
14
|
-
--btn-light-hover-bg: rgb(96 74 223 / 20%);
|
|
15
|
-
--btn-light-color: #604adf;
|
|
16
|
-
--btn-font-size: 14px;
|
|
17
|
-
--btn-danger-color: #ef6562;
|
|
18
|
-
--btn-danger-bg: rgb(239 101 98 / 20%);
|
|
19
|
-
--btn-danger-hover-bg: #ef6562;
|
|
20
|
-
--btn-danger-hover-color: #fff;
|
|
21
|
-
--input-border-color-default: #b6cadb;
|
|
22
|
-
--input-border-color-focused: #6b5fff;
|
|
23
|
-
--input-color-error: #ff5937;
|
|
24
|
-
--input-bg-error: rgb(239 101 98 / 10%);
|
|
25
|
-
--input-font-size: 14px;
|
|
26
|
-
--input-font-color: #333;
|
|
27
|
-
--label-color-default: #6b8091;
|
|
28
|
-
--label-color-focused: #6b5fff;
|
|
29
|
-
--checkbox-bg-color: #604adf;
|
|
30
|
-
--checkbox-disabled-bg: #b6cadb;
|
|
31
|
-
--checkbox-border-color: #b6cadb;
|
|
32
|
-
--checkbox-icon-color: #fff;
|
|
33
|
-
--checkbox-font-size: 12px;
|
|
34
|
-
--select-option-bg-selected: #f3f6f8;
|
|
35
|
-
--select-option-color-selected: #333;
|
|
36
|
-
--select-menu-border-color: #6b5fff;
|
|
37
|
-
--calendar-color: #6b5fff;
|
|
38
|
-
--calendar-bg-hover: #ffb200;
|
|
39
|
-
--
|
|
40
|
-
--
|
|
41
|
-
--text-
|
|
42
|
-
--text-
|
|
43
|
-
--text-
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
--alert-
|
|
47
|
-
--alert-
|
|
48
|
-
--alert-
|
|
49
|
-
--alert-
|
|
50
|
-
--alert-
|
|
51
|
-
--alert-
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
--tabs-active-color: #087dc1;
|
|
55
|
-
--pagination-border-color: #6b5fff;
|
|
56
|
-
--pagination-hover-bg: #e4e0ff;
|
|
2
|
+
--vchasno-ui-transition-duration-sec: 0.3s;
|
|
3
|
+
--vchasno-ui-btn-default-bg: transparent;
|
|
4
|
+
--vchasno-ui-btn-default-hover-bg: #e1e4ff;
|
|
5
|
+
--vchasno-ui-btn-default-color: #6b8091;
|
|
6
|
+
--vchasno-ui-btn-default-hover-color: #604adf;
|
|
7
|
+
--vchasno-ui-btn-primary-bg: #604adf;
|
|
8
|
+
--vchasno-ui-btn-primary-hover-bg: #3f328c;
|
|
9
|
+
--vchasno-ui-btn-primary-color: #fff;
|
|
10
|
+
--vchasno-ui-btn-secondary-bg: #ffb200;
|
|
11
|
+
--vchasno-ui-btn-secondary-hover-bg: #f39300;
|
|
12
|
+
--vchasno-ui-btn-secondary-color: #fff;
|
|
13
|
+
--vchasno-ui-btn-light-bg: #fff;
|
|
14
|
+
--vchasno-ui-btn-light-hover-bg: rgb(96 74 223 / 20%);
|
|
15
|
+
--vchasno-ui-btn-light-color: #604adf;
|
|
16
|
+
--vchasno-ui-btn-font-size: 14px;
|
|
17
|
+
--vchasno-ui-btn-danger-color: #ef6562;
|
|
18
|
+
--vchasno-ui-btn-danger-bg: rgb(239 101 98 / 20%);
|
|
19
|
+
--vchasno-ui-btn-danger-hover-bg: #ef6562;
|
|
20
|
+
--vchasno-ui-btn-danger-hover-color: #fff;
|
|
21
|
+
--vchasno-ui-input-border-color-default: #b6cadb;
|
|
22
|
+
--vchasno-ui-input-border-color-focused: #6b5fff;
|
|
23
|
+
--vchasno-ui-input-color-error: #ff5937;
|
|
24
|
+
--vchasno-ui-input-bg-error: rgb(239 101 98 / 10%);
|
|
25
|
+
--vchasno-ui-input-font-size: 14px;
|
|
26
|
+
--vchasno-ui-input-font-color: #333;
|
|
27
|
+
--vchasno-ui-label-color-default: #6b8091;
|
|
28
|
+
--vchasno-ui-label-color-focused: #6b5fff;
|
|
29
|
+
--vchasno-ui-checkbox-bg-color: #604adf;
|
|
30
|
+
--vchasno-ui-checkbox-disabled-bg: #b6cadb;
|
|
31
|
+
--vchasno-ui-checkbox-border-color: #b6cadb;
|
|
32
|
+
--vchasno-ui-checkbox-icon-color: #fff;
|
|
33
|
+
--vchasno-ui-checkbox-font-size: 12px;
|
|
34
|
+
--vchasno-ui-select-option-bg-selected: #f3f6f8;
|
|
35
|
+
--vchasno-ui-select-option-color-selected: #333;
|
|
36
|
+
--vchasno-ui-select-menu-border-color: #6b5fff;
|
|
37
|
+
--vchasno-ui-calendar-color: #6b5fff;
|
|
38
|
+
--vchasno-ui-calendar-bg-hover: #ffb200;
|
|
39
|
+
--vchasno-ui-text-primary-color: #333;
|
|
40
|
+
--vchasno-ui-text-secondary-color: #6b8091;
|
|
41
|
+
--vchasno-ui-text-success-color: #1cb800;
|
|
42
|
+
--vchasno-ui-text-warning-color: #ffb200;
|
|
43
|
+
--vchasno-ui-text-error-color: #ff5937;
|
|
44
|
+
--vchasno-ui-alert-info-color: #087dc1;
|
|
45
|
+
--vchasno-ui-alert-info-bg: #e9f4ff;
|
|
46
|
+
--vchasno-ui-alert-warning-color: #ffb200;
|
|
47
|
+
--vchasno-ui-alert-warning-bg: rgb(255 201 123 / 20%);
|
|
48
|
+
--vchasno-ui-alert-error-color: #ef6562;
|
|
49
|
+
--vchasno-ui-alert-error-bg: rgb(239 101 98 / 10%);
|
|
50
|
+
--vchasno-ui-alert-success-color: #1cb800;
|
|
51
|
+
--vchasno-ui-alert-success-bg: rgb(28 184 0 / 10%);
|
|
52
|
+
--vchasno-ui-tabs-active-color: #087dc1;
|
|
53
|
+
--vchasno-ui-pagination-border-color: #6b5fff;
|
|
57
54
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -179,10 +179,13 @@ declare const Spinner: React.FC<SpinnerProps>;
|
|
|
179
179
|
|
|
180
180
|
interface SwitcherProps {
|
|
181
181
|
className?: string;
|
|
182
|
-
height?: number;
|
|
183
182
|
color?: string;
|
|
183
|
+
size?: string | number;
|
|
184
184
|
checked?: boolean;
|
|
185
|
-
onChecked?: (checked: boolean) => void;
|
|
185
|
+
onChecked?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
186
|
+
disabled?: boolean;
|
|
187
|
+
defaultChecked?: boolean;
|
|
188
|
+
lazy?: boolean;
|
|
186
189
|
}
|
|
187
190
|
declare const Switcher: React.ForwardRefExoticComponent<SwitcherProps & React.RefAttributes<HTMLInputElement>>;
|
|
188
191
|
|
package/dist/index.js
CHANGED
|
@@ -172,7 +172,7 @@ var Spinner = function (_a) {
|
|
|
172
172
|
React__default.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
|
|
173
173
|
};
|
|
174
174
|
|
|
175
|
-
var css_248z$g = ".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: 3px;\n background-color: var(--btn-default-bg);\n color: var(--btn-default-color);\n font-size: var(--btn-font-size);\n font-weight: 700;\n gap: 5px;\n transition:\n background-color var(--transition-duration-sec, 0.3s),\n color var(--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(--btn-default-hover-bg);\n color: var(--btn-default-hover-color);\n cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\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 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(--btn-primary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n border: 1px solid var(--btn-primary-bg);\n background-color: var(--btn-primary-color);\n box-shadow: none;\n color: var(--btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n background-color: var(--btn-secondary-bg);\n box-shadow: inset 0 -2px 0 rgb(0 0 0 / 10%);\n color: var(--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(--btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n background-color: var(--btn-primary-hover-bg);\n color: var(--btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n border: 1px solid var(--btn-primary-bg);\n background-color: var(--btn-default-hover-bg);\n color: var(--btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n border: 1px solid var(--btn-secondary-bg);\n background-color: var(--btn-secondary-color);\n box-shadow: none;\n color: var(--btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n background-color: var(--btn-secondary-hover-bg);\n color: var(--btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n border: 1px solid var(--btn-secondary-bg);\n background-color: rgb(0 0 0 / 10%);\n color: var(--btn-secondary-bg);\n}\n\n.vchasno-ui-button.--danger {\n border: 1px solid var(--btn-danger-color, #ef6562);\n background-color: var(--btn-danger-bg, rgb(239 101 98 / 20%));\n box-shadow: none;\n color: var(--btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n border: 1px solid var(--btn-danger-color, #ef6562);\n background-color: transparent;\n box-shadow: none;\n color: var(--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(--btn-danger-hover-bg, #ef6562);\n color: var(--btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n border: 1px solid var(--btn-danger-color, #ef6562);\n background-color: rgb(0 0 0 / 10%);\n color: var(--btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n stroke: var(--btn-default-color);\n transition: stroke var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n stroke: var(--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(--btn-light-bg, #fff);\n box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n color: var(--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(--btn-primary-bg);\n background-color: var(--btn-primary-color);\n box-shadow: none;\n color: var(--btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n background-color: var(--btn-light-hover-bg);\n color: var(--btn-primary-bg);\n}\n";
|
|
175
|
+
var css_248z$g = ".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: 3px;\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 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 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: var(--vchasno-ui-btn-primary-color);\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: var(--vchasno-ui-btn-secondary-color);\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";
|
|
176
176
|
styleInject(css_248z$g);
|
|
177
177
|
|
|
178
178
|
var Button = React__default.forwardRef(function (_a, ref) {
|
|
@@ -187,7 +187,7 @@ var Button = React__default.forwardRef(function (_a, ref) {
|
|
|
187
187
|
});
|
|
188
188
|
Button.displayName = "Button";
|
|
189
189
|
|
|
190
|
-
var css_248z$f = ".vchasno-ui-meta {\n display: block;\n width: 100%;\n height: calc(var(--input-font-size) * 0.9);\n font-size: calc(var(--input-font-size) * 0.8);\n line-height: calc(var(--input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint {\n color: var(--label-color-default);\n}\n\n.vchasno-ui-meta__error {\n color: var(--input-color-error);\n}\n";
|
|
190
|
+
var css_248z$f = ".vchasno-ui-meta {\n display: block;\n width: 100%;\n height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint {\n color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n color: var(--vchasno-ui-input-color-error);\n}\n";
|
|
191
191
|
styleInject(css_248z$f);
|
|
192
192
|
|
|
193
193
|
var InputMeta = function (_a) {
|
|
@@ -197,7 +197,7 @@ var InputMeta = function (_a) {
|
|
|
197
197
|
error && React__default.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
|
|
198
198
|
};
|
|
199
199
|
|
|
200
|
-
var css_248z$e = ".vchasno-ui-label-text {\n position: relative;\n display: inline-flex;\n height: calc(var(--input-font-size) * 1.2);\n align-self: flex-start;\n color: var(--label-color-default);\n font-size: var(--input-font-size);\n gap: 3px;\n line-height: calc(var(--input-font-size) * 1.2);\n text-overflow: ellipsis;\n transition: color var(--transition-duration-sec, 0.3s);\n white-space: nowrap;\n}\n\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--input-color-error);\n font-size: calc(var(--input-font-size) * 1.4);\n vertical-align: top;\n}\n\n[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n";
|
|
200
|
+
var css_248z$e = ".vchasno-ui-label-text {\n position: relative;\n display: inline-flex;\n height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n align-self: flex-start;\n color: var(--vchasno-ui-label-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n gap: 3px;\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n text-overflow: ellipsis;\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n white-space: nowrap;\n}\n\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n color: var(--vchasno-ui-label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-label-text sup {\n position: relative;\n top: -0.2em;\n display: none;\n color: var(--vchasno-ui-input-color-error);\n font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n vertical-align: top;\n}\n\n[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n display: none;\n color: var(--vchasno-ui-label-color-default);\n transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n display: block;\n}\n";
|
|
201
201
|
styleInject(css_248z$e);
|
|
202
202
|
|
|
203
203
|
var LabelText = function (_a) {
|
|
@@ -211,7 +211,7 @@ var LabelText = function (_a) {
|
|
|
211
211
|
React__default.createElement("sup", null, "*")));
|
|
212
212
|
};
|
|
213
213
|
|
|
214
|
-
var css_248z$d = ".vchasno-ui-input {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--input-border-color-default);\n font-size: var(--input-font-size);\n line-height: calc(var(--input-font-size) * 1.2);\n transition: color var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n position: relative;\n display: flex;\n height: 40px;\n align-items: center;\n padding-right: 33px;\n padding-left: 10px;\n border: 1px solid var(--input-border-color-default);\n border-radius: 4px;\n background-color: #fff;\n gap: 5px;\n transition: border var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n font-size: var(--input-font-size, 14px);\n line-height: var(--input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n position: absolute;\n top: 10px;\n right: 10px;\n display: block;\n width: 18px;\n height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n stroke: var(--input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n background-color: #f3f6f8;\n color: #b6cadb;\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n border-color: var(--input-border-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--input-color-error);\n background-color: var(--input-bg-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
214
|
+
var css_248z$d = ".vchasno-ui-input {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n position: relative;\n display: flex;\n height: 40px;\n align-items: center;\n padding-right: 33px;\n padding-left: 10px;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 4px;\n background-color: #fff;\n gap: 5px;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n display: flex;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n font-size: var(--vchasno-ui-input-font-size, 14px);\n line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n position: absolute;\n top: 10px;\n right: 10px;\n display: block;\n width: 18px;\n height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n background-color: #f3f6f8;\n color: #b6cadb;\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n border-color: var(--vchasno-ui-input-color-error);\n background-color: var(--vchasno-ui-input-bg-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
215
215
|
styleInject(css_248z$d);
|
|
216
216
|
|
|
217
217
|
var Input$2 = function (_a) {
|
|
@@ -241,7 +241,7 @@ var reactTextMask = {exports: {}};
|
|
|
241
241
|
var reactTextMaskExports = reactTextMask.exports;
|
|
242
242
|
var MaskedInput = /*@__PURE__*/getDefaultExportFromCjs(reactTextMaskExports);
|
|
243
243
|
|
|
244
|
-
var css_248z$c = ".vchasno-ui-mask-input {\n position: relative;\n font-size: var(--input-font-size);\n line-height: var(--input-font-size);\n}\n\n.vchasno-ui-mask-input::placeholder {\n color: var(--input-border-color-default);\n font-size: var(--input-font-size);\n line-height: calc(var(--input-font-size) * 1.2);\n transition: color var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-mask-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
244
|
+
var css_248z$c = ".vchasno-ui-mask-input {\n position: relative;\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-mask-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-mask-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
245
245
|
styleInject(css_248z$c);
|
|
246
246
|
|
|
247
247
|
var MaskInput = function (_a) {
|
|
@@ -265,7 +265,7 @@ var composePaginationSteps = function (total, current) {
|
|
|
265
265
|
return display;
|
|
266
266
|
};
|
|
267
267
|
|
|
268
|
-
var css_248z$b = ".vchasno-ui-pagination {\n --size: 32px;\n\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n min-width: var(--size);\n height: var(--size);\n flex-grow: 0;\n flex-shrink: 0;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n line-height: calc(var(--size) - 2px);\n outline: 0;\n text-align: center;\n transition
|
|
268
|
+
var css_248z$b = ".vchasno-ui-pagination {\n --pagination-size: 32px;\n\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n min-width: var(--vchasno-ui-pagination-size);\n height: var(--vchasno-ui-pagination-size);\n flex-grow: 0;\n flex-shrink: 0;\n border: 1px solid transparent;\n border-radius: 6px;\n background-color: #fff;\n cursor: pointer;\n line-height: calc(var(--vchasno-ui-pagination-size) - 2px);\n outline: 0;\n text-align: center;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s);\n user-select: none;\n vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n border-color: var(--vchasno-ui-pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n cursor: not-allowed;\n opacity: 0.8;\n}\n";
|
|
269
269
|
styleInject(css_248z$b);
|
|
270
270
|
|
|
271
271
|
var Pagination = function (_a) {
|
|
@@ -7846,7 +7846,7 @@ var noOptionsMessageDefault = function () { return React__default.createElement(
|
|
|
7846
7846
|
var loadingMessageDefault = function () { return React__default.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
|
|
7847
7847
|
var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
|
|
7848
7848
|
|
|
7849
|
-
var css_248z$a = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 40px;\n border-color: var(--input-border-color-default);\n border-radius: 3px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--transition-duration-sec, 0.3s),\n background-color var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n border: 1px solid var(--input-border-color-default);\n border-radius: 3px;\n margin-top: -1px;\n margin-bottom: -1px;\n box-shadow: none;\n transition: border var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n border-color: var(--select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n border-color: var(--select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n border: 1px solid #ff5937;\n background-color: var(--input-bg-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n border-color: var(--input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n color: var(--input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n border-color: #ff5937;\n}\n\n.vchasno-ui-select\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: var(--select-menu-border-color, #6b5fff);\n transition:\n background-color var(--transition-duration-sec, 0.3s),\n color var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n transition:\n background-color var(--transition-duration-sec, 0.3s),\n color var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n .vchasno-ui-select__control:hover\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n border-color: var(--input-border-color-focused);\n box-shadow: none;\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n stroke: var(--input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n color: var(--input-border-color-default);\n font-size: var(--input-font-size);\n font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n padding: 3px;\n border-radius: 3px;\n color: var(--input-font-color);\n outline: 3px solid transparent;\n transition:\n outline-color var(--transition-duration-sec, 0.3s),\n background-color var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n background-color: var(--select-option-bg-selected);\n color: var(--select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n background-color: var(--select-option-bg-selected);\n outline: 1px solid var(--select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n transition:\n background-color var(--transition-duration-sec, 0.3s),\n color var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n padding-right: 5px;\n}\n";
|
|
7849
|
+
var css_248z$a = ".vchasno-ui-select {\n display: inline-flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n min-width: 200px;\n min-height: 40px;\n border-color: var(--vchasno-ui-input-border-color-default);\n border-radius: 3px;\n font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n transition:\n opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n background-color: #f3f6f8;\n opacity: 0.8;\n pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 3px;\n margin-top: -1px;\n margin-bottom: -1px;\n box-shadow: none;\n transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n border: 1px solid #ff5937;\n background-color: var(--vchasno-ui-input-bg-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n border-color: #ff5937;\n}\n\n.vchasno-ui-select\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n .vchasno-ui-select__control--menu-is-open\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n .vchasno-ui-select__control:hover\n .vchasno-ui-select__dropdown-indicator {\n color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n border-color: var(--vchasno-ui-input-border-color-focused);\n box-shadow: none;\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n padding: 3px;\n border-radius: 3px;\n color: var(--vchasno-ui-input-font-color);\n outline: 3px solid transparent;\n transition:\n outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n background-color: var(--vchasno-ui-select-option-bg-selected);\n outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n padding-right: 5px;\n}\n";
|
|
7850
7850
|
styleInject(css_248z$a);
|
|
7851
7851
|
|
|
7852
7852
|
var Select = function (_a) {
|
|
@@ -7972,7 +7972,7 @@ var SelectCreatable = function (_a) {
|
|
|
7972
7972
|
React__default.createElement(InputMeta, { error: error, hint: hint })));
|
|
7973
7973
|
};
|
|
7974
7974
|
|
|
7975
|
-
var css_248z$9 = ".vchasno-ui-text-input {\n font-size: var(--input-font-size);\n line-height: var(--input-font-size);\n}\n\n.vchasno-ui-text-input::-webkit-outer-spin-button,\n.vchasno-ui-text-input::-webkit-inner-spin-button {\n margin: 0;\n appearance: none;\n}\n\n/* Firefox */\n.vchasno-ui-text-input[type='number'] {\n appearance: textfield;\n}\n\n.vchasno-ui-text-input::placeholder {\n color: var(--input-border-color-default);\n font-size: var(--input-font-size);\n line-height: var(--input-font-size);\n transition: color var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-text-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
7975
|
+
var css_248z$9 = ".vchasno-ui-text-input {\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n}\n\n.vchasno-ui-text-input::-webkit-outer-spin-button,\n.vchasno-ui-text-input::-webkit-inner-spin-button {\n margin: 0;\n appearance: none;\n}\n\n/* Firefox */\n.vchasno-ui-text-input[type='number'] {\n appearance: textfield;\n}\n\n.vchasno-ui-text-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: var(--vchasno-ui-input-font-size);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-text-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
7976
7976
|
styleInject(css_248z$9);
|
|
7977
7977
|
|
|
7978
7978
|
var TextInput = React__default.forwardRef(function (_a, ref) {
|
|
@@ -7982,7 +7982,7 @@ var TextInput = React__default.forwardRef(function (_a, ref) {
|
|
|
7982
7982
|
});
|
|
7983
7983
|
TextInput.displayName = 'TextInput';
|
|
7984
7984
|
|
|
7985
|
-
var css_248z$8 = ".vchasno-ui-text {\n color: var(--text-primary-color, #333);\n}\n\n.vchasno-ui-text.--ellipsis {\n display: inline-block;\n overflow: hidden;\n max-width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-text.--secondary {\n color: var(--text-secondary-color, #6b8091);\n}\n\n.vchasno-ui-text.--success {\n color: var(--text-success-color, #1cb800);\n}\n\n.vchasno-ui-text.--warning {\n color: var(--text-warning-color, #ffb200);\n}\n\n.vchasno-ui-text.--danger {\n color: var(--text-error-color, #ff5937);\n}\n\n.vchasno-ui-text.--code {\n padding: 0.2em 0.4em 0.1em;\n border: 1px solid var(--input-border-color-default);\n border-radius: 3px;\n margin: 0 0.2em;\n background: hsl(0deg 0% 58.8% / 10%);\n font-size: 85%;\n}\n\n.vchasno-ui-text.--inherit {\n font-size: inherit;\n}\n\n.vchasno-ui-text.--link,\n.vchasno-ui-text.--like-link {\n color: #087dc1;\n cursor: pointer;\n}\n\n.vchasno-ui-text.--link {\n text-decoration-line: underline;\n}\n\n.vchasno-ui-text.--normal {\n font-size: 1rem;\n line-height: 1.1rem;\n}\n\n.vchasno-ui-text.--small {\n font-size: 0.8rem;\n line-height: 0.9rem;\n}\n\n.vchasno-ui-text.--large {\n font-size: 1.2rem;\n line-height: 1.3rem;\n}\n\n.vchasno-ui-text.--required::after {\n position: relative;\n top: -3px;\n right: -2px;\n color: var(--text-error-color, #ff5937);\n content: '*';\n}\n";
|
|
7985
|
+
var css_248z$8 = ".vchasno-ui-text {\n color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-text.--ellipsis {\n display: inline-block;\n overflow: hidden;\n max-width: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.vchasno-ui-text.--secondary {\n color: var(--vchasno-ui-text-secondary-color, #6b8091);\n}\n\n.vchasno-ui-text.--success {\n color: var(--vchasno-ui-text-success-color, #1cb800);\n}\n\n.vchasno-ui-text.--warning {\n color: var(--vchasno-ui-text-warning-color, #ffb200);\n}\n\n.vchasno-ui-text.--danger {\n color: var(--vchasno-ui-text-error-color, #ff5937);\n}\n\n.vchasno-ui-text.--code {\n padding: 0.2em 0.4em 0.1em;\n border: 1px solid var(--vchasno-ui-input-border-color-default);\n border-radius: 3px;\n margin: 0 0.2em;\n background: hsl(0deg 0% 58.8% / 10%);\n font-size: 85%;\n}\n\n.vchasno-ui-text.--inherit {\n font-size: inherit;\n}\n\n.vchasno-ui-text.--link,\n.vchasno-ui-text.--like-link {\n color: #087dc1;\n cursor: pointer;\n}\n\n.vchasno-ui-text.--link {\n text-decoration-line: underline;\n}\n\n.vchasno-ui-text.--normal {\n font-size: 1rem;\n line-height: 1.1rem;\n}\n\n.vchasno-ui-text.--small {\n font-size: 0.8rem;\n line-height: 0.9rem;\n}\n\n.vchasno-ui-text.--large {\n font-size: 1.2rem;\n line-height: 1.3rem;\n}\n\n.vchasno-ui-text.--required::after {\n position: relative;\n top: -3px;\n right: -2px;\n color: var(--vchasno-ui-text-error-color, #ff5937);\n content: '*';\n}\n";
|
|
7986
7986
|
styleInject(css_248z$8);
|
|
7987
7987
|
|
|
7988
7988
|
var typeToCN = {
|
|
@@ -8017,7 +8017,7 @@ var Text = React__default.forwardRef(function (_a, ref) {
|
|
|
8017
8017
|
});
|
|
8018
8018
|
Text.displayName = 'Text';
|
|
8019
8019
|
|
|
8020
|
-
var css_248z$7 = ".vchasno-ui-title {\n color: var(--text-primary-color, #333);\n}\n\n.vchasno-ui-title.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nh1.vchasno-ui-title,\n.vchasno-ui-title h1 {\n font-size: 32px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh2.vchasno-ui-title,\n.vchasno-ui-title h2 {\n font-size: 30px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh3.vchasno-ui-title,\n.vchasno-ui-title h3 {\n font-size: 24px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh4.vchasno-ui-title,\n.vchasno-ui-title h4 {\n font-size: 20px;\n font-weight: 400;\n line-height: 1.4;\n}\n\nh5.vchasno-ui-title,\n.vchasno-ui-title h5 {\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n}\n";
|
|
8020
|
+
var css_248z$7 = ".vchasno-ui-title {\n color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-title.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\nh1.vchasno-ui-title,\n.vchasno-ui-title h1 {\n font-size: 32px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh2.vchasno-ui-title,\n.vchasno-ui-title h2 {\n font-size: 30px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh3.vchasno-ui-title,\n.vchasno-ui-title h3 {\n font-size: 24px;\n font-weight: 500;\n line-height: 1.35;\n}\n\nh4.vchasno-ui-title,\n.vchasno-ui-title h4 {\n font-size: 20px;\n font-weight: 400;\n line-height: 1.4;\n}\n\nh5.vchasno-ui-title,\n.vchasno-ui-title h5 {\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n}\n";
|
|
8021
8021
|
styleInject(css_248z$7);
|
|
8022
8022
|
|
|
8023
8023
|
var Title = React__default.forwardRef(function (_a, ref) {
|
|
@@ -8039,7 +8039,7 @@ var Title = React__default.forwardRef(function (_a, ref) {
|
|
|
8039
8039
|
});
|
|
8040
8040
|
Title.displayName = 'Title';
|
|
8041
8041
|
|
|
8042
|
-
var css_248z$6 = ".vchasno-ui-paragraph {\n color: var(--text-primary-color);\n}\n\n.vchasno-ui-paragraph.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
8042
|
+
var css_248z$6 = ".vchasno-ui-paragraph {\n color: var(--vchasno-ui-text-primary-color);\n}\n\n.vchasno-ui-paragraph.--ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
|
|
8043
8043
|
styleInject(css_248z$6);
|
|
8044
8044
|
|
|
8045
8045
|
var Paragraph = React__default.forwardRef(function (_a, ref) {
|
|
@@ -8283,7 +8283,7 @@ var index = /* #__PURE__ */forwardRef(TextareaAutosize);
|
|
|
8283
8283
|
|
|
8284
8284
|
var TextareaAutosize$1 = index;
|
|
8285
8285
|
|
|
8286
|
-
var css_248z$5 = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n height: auto;\n min-height: 40px;\n padding-top: 10px;\n padding-bottom: 10px;\n}\n\n.vchasno-ui-textarea-input {\n width: 100%;\n border: 0;\n font-size: 1rem;\n resize: none;\n}\n\n.vchasno-ui-textarea-input::placeholder {\n color: var(--input-border-color-default);\n font-size: var(--input-font-size);\n line-height: calc(var(--input-font-size) * 1.2);\n transition: color var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-textarea-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
8286
|
+
var css_248z$5 = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n height: auto;\n min-height: 40px;\n padding-top: 10px;\n padding-bottom: 10px;\n}\n\n.vchasno-ui-textarea-input {\n width: 100%;\n border: 0;\n font-size: 1rem;\n resize: none;\n}\n\n.vchasno-ui-textarea-input::placeholder {\n color: var(--vchasno-ui-input-border-color-default);\n font-size: var(--vchasno-ui-input-font-size);\n line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-textarea-input:focus::placeholder {\n color: transparent;\n}\n";
|
|
8287
8287
|
styleInject(css_248z$5);
|
|
8288
8288
|
|
|
8289
8289
|
var TextAreaInput = React__default.forwardRef(function (_a, ref) {
|
|
@@ -8293,7 +8293,7 @@ var TextAreaInput = React__default.forwardRef(function (_a, ref) {
|
|
|
8293
8293
|
});
|
|
8294
8294
|
TextAreaInput.displayName = 'TextAreaInput';
|
|
8295
8295
|
|
|
8296
|
-
var css_248z$4 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 10px;\n border: 1px solid transparent;\n border-radius: 3px;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 3px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--alert-info-color, #087dc1);\n background-color: var(--alert-info-bg, #e9f4ff);\n}\n\n.vchasno-ui-alert.--info .vchasno-ui-alert__icon-wrapper {\n color: var(--alert-info-color, #087dc1);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--alert-warning-color, #ffb200);\n background-color: var(--alert-warning-bg, rgb(255 201 123 / 20%));\n}\n\n.vchasno-ui-alert.--warning .vchasno-ui-alert__icon-wrapper {\n color: var(--alert-warning-color, #ffb200);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--alert-error-color, #ef6562);\n background-color: var(--alert-error-bg, rgb(239 101 98 / 10%));\n}\n\n.vchasno-ui-alert.--error .vchasno-ui-alert__icon-wrapper {\n color: var(--alert-error-color, #ef6562);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--alert-success-color, #1cb800);\n background-color: var(--alert-success-bg, rgb(28 184 0 / 10%));\n}\n\n.vchasno-ui-alert.--success .vchasno-ui-alert__icon-wrapper {\n color: var(--alert-success-color, #1cb800);\n}\n\n.vchasno-ui-alert__close-icon {\n border-radius: 3px;\n transition: background-color var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
|
|
8296
|
+
var css_248z$4 = ".vchasno-ui-alert {\n display: inline-flex;\n min-height: 40px;\n box-sizing: border-box;\n align-items: center;\n padding: 10px;\n border: 1px solid transparent;\n border-radius: 3px;\n font-size: 14px;\n gap: 10px;\n}\n\n.vchasno-ui-alert.--wide {\n width: 100%;\n}\n\n.vchasno-ui-alert.--left-border {\n border-left-width: 3px;\n}\n\n.vchasno-ui-alert__icon-wrapper,\n.vchasno-ui-alert__close-icon {\n display: flex;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n}\n\n.vchasno-ui-alert.--info {\n border-color: var(--vchasno-ui-alert-info-color, #087dc1);\n background-color: var(--vchasno-ui-alert-info-bg, #e9f4ff);\n}\n\n.vchasno-ui-alert.--info .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-info-color, #087dc1);\n}\n\n.vchasno-ui-alert.--warning {\n border-color: var(--vchasno-ui-alert-warning-color, #ffb200);\n background-color: var(--vchasno-ui-alert-warning-bg, rgb(255 201 123 / 20%));\n}\n\n.vchasno-ui-alert.--warning .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-warning-color, #ffb200);\n}\n\n.vchasno-ui-alert.--error {\n border-color: var(--vchasno-ui-alert-error-color, #ef6562);\n background-color: var(--vchasno-ui-alert-error-bg, rgb(239 101 98 / 10%));\n}\n\n.vchasno-ui-alert.--error .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-error-color, #ef6562);\n}\n\n.vchasno-ui-alert.--success {\n border-color: var(--vchasno-ui-alert-success-color, #1cb800);\n background-color: var(--vchasno-ui-alert-success-bg, rgb(28 184 0 / 10%));\n}\n\n.vchasno-ui-alert.--success .vchasno-ui-alert__icon-wrapper {\n color: var(--vchasno-ui-alert-success-color, #1cb800);\n}\n\n.vchasno-ui-alert__close-icon {\n border-radius: 3px;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-alert__close-icon:hover {\n background-color: rgb(0 0 0 / 10%);\n cursor: pointer;\n}\n\n.vchasno-ui-alert.--close {\n display: none;\n}\n";
|
|
8297
8297
|
styleInject(css_248z$4);
|
|
8298
8298
|
|
|
8299
8299
|
var iconMap = {
|
|
@@ -18309,7 +18309,7 @@ var locale = {
|
|
|
18309
18309
|
};
|
|
18310
18310
|
var uk = locale;
|
|
18311
18311
|
|
|
18312
|
-
var css_248z$3 = ".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(--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(--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(--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(--calendar-color);\n border-radius: 3px;\n background-color: #fff;\n box-shadow: 0 2px 2px 0 rgb(28 54 72 / 11%);\n color: var(--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: 3px;\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(--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(--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(--input-font-color);\n font-weight: bold;\n text-transform: capitalize;\n}\n\n.react-datepicker__month-container {\n float: left;\n}\n\n.react-datepicker__month {\n margin: 0;\n text-align: center;\n}\n\n.react-datepicker__day-names,\n.react-datepicker__week {\n white-space: nowrap;\n}\n\n.react-datepicker__day-name {\n text-transform: none;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n display: inline-block;\n width: 34px;\n color: var(--input-font-color);\n cursor: pointer;\n line-height: 34px;\n text-align: center;\n transition: background-color var(--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(--calendar-color);\n font-weight: 700;\n}\n\n.react-datepicker__day:hover {\n border-radius: 3px;\n background-color: #f2f6f7;\n}\n\n.react-datepicker__day--today {\n border: 1px solid var(--calendar-color);\n border-radius: 3px;\n color: var(--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: 3px;\n background-color: var(--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(--calendar-color);\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected) {\n border-radius: 3px;\n background-color: var(--calendar-color);\n color: #fff;\n}\n\n.react-datepicker__day--keyboard-selected:not(.react-datepicker__day--keyboard-selected):hover {\n background-color: var(--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(--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: 3px;\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: 3px;\n outline: 1px solid var(--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(--input-border-color-default, #b6cadb);\n border-radius: 3px;\n appearance: none;\n background: #fff;\n font-size: var(--input-font-size, 0.8rem);\n line-height: calc(var(--input-font-size, 0.8rem) * 2);\n transition: border var(--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(--calendar-color);\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: 40px;\n}\n\n.vchasno-ui-date-picker__wrapper {\n position: relative;\n}\n\n.vchasno-ui-date-picker__wrapper > svg {\n position: absolute;\n top: 50%;\n right: 10px;\n color: var(--input-border-color-default);\n transform: translateY(-50%);\n transition: color var(--transition-duration-sec, 0.3s);\n}\n\nlabel[class^='vchasno-ui-']:focus-within .vchasno-ui-date-picker__wrapper > svg {\n color: var(--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(--calendar-color);\n}\n\n.vchasno-ui-date-picker .react-datepicker__input-container input {\n color: var(--input-font-color);\n font-size: var(--input-font-size);\n line-height: calc(var(--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(--calendar-color);\n}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper > svg {\n color: var(--calendar-color);\n}\n";
|
|
18312
|
+
var css_248z$3 = ".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: 3px;\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: 3px;\n white-space: nowrap;\n}\n\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n background-color: #f0f0f0;\n cursor: pointer;\n}\n\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n background-color: var(--vchasno-ui-calendar-color);\n color: #fff;\n font-weight: bold;\n}\n\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected:hover {\n background-color: var(--vchasno-ui-calendar-color);\n}\n\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--disabled {\n color: #ccc;\n}\n\n.react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--disabled:hover {\n background-color: transparent;\n cursor: default;\n}\n\n.react-datepicker__header--time {\n padding-right: 5px;\n padding-bottom: 8px;\n padding-left: 5px;\n}\n\n.react-datepicker__header--time:not(.react-datepicker__header--time--only) {\n border-top-left-radius: 0;\n}\n\n.react-datepicker__header {\n position: relative;\n padding-top: 5px;\n text-align: center;\n}\n\n.react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n border-top-right-radius: 0.3rem;\n}\n\n@media all and (width <= 480px) {\n .react-datepicker {\n padding: 0;\n }\n}\n\n.react-datepicker-popper {\n z-index: 100;\n}\n\n.react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 8px;\n}\n\n.react-datepicker-popper[data-placement^='top'] {\n margin-bottom: 8px;\n}\n\n.react-datepicker-popper[data-placement^='right'] {\n margin-left: 6px;\n}\n\n.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {\n right: 42px;\n left: auto;\n}\n\n.react-datepicker-popper[data-placement^='left'] {\n margin-right: 6px;\n}\n\n.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {\n right: auto;\n left: 42px;\n}\n\n.react-datepicker__current-month,\n.react-datepicker-time__header {\n padding: 8px 0 15px;\n margin-top: 0;\n color: var(--vchasno-ui-input-font-color);\n font-weight: bold;\n text-transform: capitalize;\n}\n\n.react-datepicker__month-container {\n float: left;\n}\n\n.react-datepicker__month {\n margin: 0;\n text-align: center;\n}\n\n.react-datepicker__day-names,\n.react-datepicker__week {\n white-space: nowrap;\n}\n\n.react-datepicker__day-name {\n text-transform: none;\n}\n\n.react-datepicker__day-name,\n.react-datepicker__day,\n.react-datepicker__time-name {\n display: inline-block;\n width: 34px;\n color: var(--vchasno-ui-input-font-color);\n cursor: pointer;\n line-height: 34px;\n text-align: center;\n transition: background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.react-datepicker__day-names .react-datepicker__day-name {\n font-weight: 700;\n text-transform: capitalize;\n}\n\n.react-datepicker__day-name:nth-child(6),\n.react-datepicker__day-name:nth-child(7) {\n color: var(--vchasno-ui-calendar-color);\n font-weight: 700;\n}\n\n.react-datepicker__day:hover {\n border-radius: 3px;\n background-color: #f2f6f7;\n}\n\n.react-datepicker__day--today {\n border: 1px solid var(--vchasno-ui-calendar-color);\n border-radius: 3px;\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: 3px;\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: 3px;\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: 3px;\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: 3px;\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: 3px;\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 transition: border 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}\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: 40px;\n}\n\n.vchasno-ui-date-picker__wrapper {\n position: relative;\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}\n\n.vchasno-ui-date-picker:not(.--disabled):hover .vchasno-ui-date-picker__wrapper > svg {\n color: var(--vchasno-ui-calendar-color);\n}\n";
|
|
18313
18313
|
styleInject(css_248z$3);
|
|
18314
18314
|
|
|
18315
18315
|
var SvgCalendar = function () { return (React__default.createElement("svg", { width: "20", height: "20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
@@ -18329,32 +18329,31 @@ var DatePicker = function (_a) {
|
|
|
18329
18329
|
React__default.createElement(InputMeta, { hint: hint, error: error })));
|
|
18330
18330
|
};
|
|
18331
18331
|
|
|
18332
|
-
var css_248z$2 = ".vchasno-ui-switcher {\n --
|
|
18332
|
+
var css_248z$2 = ".vchasno-ui-switcher {\n --switcher-size: 2em;\n --button-width: calc(var(--vchasno-ui-switcher-size) * 1.75);\n --button-height: var(--vchasno-ui-switcher-size);\n --toggle-diameter: calc(var(--vchasno-ui-switcher-size) * 0.75);\n --button-toggle-offset: calc((var(--vchasno-ui-button-height) - var(--vchasno-ui-toggle-diameter)) / 2);\n --toggle-shadow-offset: 10px;\n --toggle-wider: calc(var(--vchasno-ui-switcher-size) * 1.5);\n --switcher-default-color: #b6cadb;\n --switcher-active-color: #6b5fff;\n}\n\n.vchasno-ui-switcher.--disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.vchasno-ui-slider {\n position: relative;\n display: inline-block;\n width: var(--vchasno-ui-button-width);\n height: var(--vchasno-ui-button-height);\n border-radius: calc(var(--vchasno-ui-button-height) / 2);\n background-color: var(--vchasno-ui-switcher-default-color);\n cursor: pointer;\n transition: var(--vchasno-ui-transition-duration-sec) all ease-in-out;\n}\n\n.vchasno-ui-slider::after {\n position: absolute;\n top: var(--vchasno-ui-button-toggle-offset);\n display: inline-block;\n width: var(--vchasno-ui-toggle-diameter);\n height: var(--vchasno-ui-toggle-diameter);\n border-radius: calc(var(--vchasno-ui-toggle-diameter) / 2);\n background-color: #fff;\n box-shadow: var(--vchasno-ui-toggle-shadow-offset) 0 calc(var(--vchasno-ui-toggle-shadow-offset) * 4) rgb(0 0 0 / 10%);\n content: '';\n transform: translateX(var(--vchasno-ui-button-toggle-offset));\n transition: var(--vchasno-ui-transition-duration-sec) all ease-in-out;\n}\n\n.vchasno-ui-switcher input[type='checkbox']:checked + .vchasno-ui-slider {\n background-color: var(--vchasno-ui-switcher-active-color);\n}\n\n.vchasno-ui-switcher input[type='checkbox']:checked + .vchasno-ui-slider::after {\n box-shadow: calc(var(--vchasno-ui-toggle-shadow-offset) * -1) 0 calc(var(--vchasno-ui-toggle-shadow-offset) * 4)\n rgb(0 0 0 / 10%);\n transform: translateX(\n calc(var(--vchasno-ui-button-width) - var(--vchasno-ui-toggle-diameter) - var(--vchasno-ui-button-toggle-offset))\n );\n}\n\n.vchasno-ui-switcher input[type='checkbox'] {\n display: none;\n}\n\n.vchasno-ui-switcher.--lazy input[type='checkbox']:active + .vchasno-ui-slider::after {\n width: var(--vchasno-ui-toggle-wider);\n}\n\n.vchasno-ui-switcher.--lazy input[type='checkbox']:checked:active + .vchasno-ui-slider::after {\n transform: translateX(\n calc(var(--vchasno-ui-button-width) - var(--vchasno-ui-toggle-wider) - var(--vchasno-ui-button-toggle-offset))\n );\n}\n";
|
|
18333
18333
|
styleInject(css_248z$2);
|
|
18334
18334
|
|
|
18335
18335
|
var composeStyles = function (_a) {
|
|
18336
|
-
var
|
|
18336
|
+
var color = _a.color, size = _a.size;
|
|
18337
18337
|
var style = {};
|
|
18338
|
-
if (typeof
|
|
18339
|
-
style['--
|
|
18338
|
+
if (typeof color !== 'undefined') {
|
|
18339
|
+
style['--switcher-active-color'] = color;
|
|
18340
18340
|
}
|
|
18341
|
-
if (typeof
|
|
18342
|
-
style['--
|
|
18341
|
+
if (typeof size !== 'undefined') {
|
|
18342
|
+
style['--switcher-size'] = typeof size === 'number' ? "".concat(size, "px") : size;
|
|
18343
18343
|
}
|
|
18344
18344
|
return style;
|
|
18345
18345
|
};
|
|
18346
18346
|
var Switcher = React__default.forwardRef(function (_a, ref) {
|
|
18347
|
-
var className = _a.className,
|
|
18348
|
-
return (React__default.createElement("label", { className: cn('vchasno-ui-switcher', className), style: composeStyles({
|
|
18349
|
-
React__default.createElement("input", { ref: ref, checked: checked, onChange: function (event) {
|
|
18350
|
-
onChecked === null || onChecked === void 0 ? void 0 : onChecked(event.currentTarget.checked);
|
|
18351
|
-
}
|
|
18352
|
-
React__default.createElement("span", { className: "vchasno-ui-
|
|
18353
|
-
React__default.createElement("span", { className: "vchasno-ui-switcher__mask" })));
|
|
18347
|
+
var className = _a.className, size = _a.size, lazy = _a.lazy, color = _a.color, defaultChecked = _a.defaultChecked, disabled = _a.disabled, checked = _a.checked, onChecked = _a.onChecked;
|
|
18348
|
+
return (React__default.createElement("label", { className: cn('vchasno-ui-switcher', { '--disabled': disabled, '--lazy': lazy }, className), style: composeStyles({ color: color, size: size }) },
|
|
18349
|
+
React__default.createElement("input", { ref: ref, type: "checkbox", checked: checked, defaultChecked: defaultChecked, onChange: function (event) {
|
|
18350
|
+
onChecked === null || onChecked === void 0 ? void 0 : onChecked(event.currentTarget.checked, event);
|
|
18351
|
+
} }),
|
|
18352
|
+
React__default.createElement("span", { className: "vchasno-ui-slider" })));
|
|
18354
18353
|
});
|
|
18355
18354
|
Switcher.displayName = 'Switcher';
|
|
18356
18355
|
|
|
18357
|
-
var css_248z$1 = ".vchasno-ui-tabs-wrapper {\n position: relative;\n width: 100%;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.vchasno-ui-tabs-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n.--h-scroll {\n overflow: auto;\n}\n\n.vchasno-ui-tabs-wrapper-root {\n position: relative;\n}\n\n.vchasno-ui-tabs-wrapper-root::after,\n.vchasno-ui-tabs-wrapper-root::before {\n position: absolute;\n top: 0;\n bottom: 0;\n display: block;\n width: 30px;\n content: '';\n pointer-events: none;\n}\n\n.--ping-right::after {\n right: 0;\n box-shadow: inset -12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.--ping-left::before {\n left: 0;\n box-shadow: inset 12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.vchasno-ui-tabs {\n --active-color: var(--tabs-active-color, #087dc1);\n\n position: relative;\n display: flex;\n font-size: 16px;\n font-weight: 500;\n}\n\n.vchasno-ui-tabs__indicator {\n position: absolute;\n z-index: 1;\n bottom: -1px;\n left: 0;\n display: block;\n width: 10px;\n height: 3px;\n border-radius: 3px;\n background-color: var(--active-color);\n transition:\n width var(--transition-duration-sec, 0.3s),\n left var(--transition-duration-sec, 0.3s);\n}\n\n.--h-scroll .vchasno-ui-tabs__indicator {\n display: none;\n}\n\n.vchasno-ui-tabs-wrapper-root.--skip-animation .vchasno-ui-tabs__indicator {\n transition: none;\n}\n\n.vchasno-ui-tabs__label-item {\n position: relative;\n display: inline-flex;\n height: 50px;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n padding: 0 15px;\n color: #333;\n cursor: pointer;\n transition:\n color var(--transition-duration-sec),\n background-color var(--transition-duration-sec);\n user-select: none;\n}\n\n.vchasno-ui-tabs__label-item::after {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n height: 0;\n border-radius: 3px;\n background-color: var(--active-color);\n content: '';\n transition: height var(--transition-duration-sec);\n}\n\n.--h-scroll .vchasno-ui-tabs__label-item.--active::after {\n height: 3px;\n}\n\n.vchasno-ui-tabs-wrapper:not(.--h-scroll) .vchasno-ui-tabs {\n border-bottom: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-tabs__label-item.--active {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item:not(.--disabled):hover {\n color: var(--active-color);\n}\n\n.vchasno-ui-tabs__label-item.--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n";
|
|
18356
|
+
var css_248z$1 = ".vchasno-ui-tabs-wrapper {\n position: relative;\n width: 100%;\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n\n.vchasno-ui-tabs-wrapper::-webkit-scrollbar {\n display: none;\n}\n\n.--h-scroll {\n overflow: auto;\n}\n\n.vchasno-ui-tabs-wrapper-root {\n position: relative;\n}\n\n.vchasno-ui-tabs-wrapper-root::after,\n.vchasno-ui-tabs-wrapper-root::before {\n position: absolute;\n top: 0;\n bottom: 0;\n display: block;\n width: 30px;\n content: '';\n pointer-events: none;\n}\n\n.--ping-right::after {\n right: 0;\n box-shadow: inset -12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.--ping-left::before {\n left: 0;\n box-shadow: inset 12px 0 8px -8px rgb(0 0 0 / 8%);\n}\n\n.vchasno-ui-tabs {\n --active-color: var(--vchasno-ui-tabs-active-color, #087dc1);\n\n position: relative;\n display: flex;\n font-size: 16px;\n font-weight: 500;\n}\n\n.vchasno-ui-tabs__indicator {\n position: absolute;\n z-index: 1;\n bottom: -1px;\n left: 0;\n display: block;\n width: 10px;\n height: 3px;\n border-radius: 3px;\n background-color: var(--vchasno-ui-active-color);\n transition:\n width var(--vchasno-ui-transition-duration-sec, 0.3s),\n left var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.--h-scroll .vchasno-ui-tabs__indicator {\n display: none;\n}\n\n.vchasno-ui-tabs-wrapper-root.--skip-animation .vchasno-ui-tabs__indicator {\n transition: none;\n}\n\n.vchasno-ui-tabs__label-item {\n position: relative;\n display: inline-flex;\n height: 50px;\n flex-grow: 0;\n flex-shrink: 0;\n align-items: center;\n padding: 0 15px;\n color: #333;\n cursor: pointer;\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n background-color var(--vchasno-ui-transition-duration-sec);\n user-select: none;\n}\n\n.vchasno-ui-tabs__label-item::after {\n position: absolute;\n z-index: 1;\n right: 0;\n bottom: 0;\n left: 0;\n display: block;\n height: 0;\n border-radius: 3px;\n background-color: var(--vchasno-ui-active-color);\n content: '';\n transition: height var(--vchasno-ui-transition-duration-sec);\n}\n\n.--h-scroll .vchasno-ui-tabs__label-item.--active::after {\n height: 3px;\n}\n\n.vchasno-ui-tabs-wrapper:not(.--h-scroll) .vchasno-ui-tabs {\n border-bottom: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-tabs__label-item.--active {\n color: var(--vchasno-ui-active-color);\n}\n\n.vchasno-ui-tabs__label-item:not(.--disabled):hover {\n color: var(--vchasno-ui-active-color);\n}\n\n.vchasno-ui-tabs__label-item.--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n";
|
|
18358
18357
|
styleInject(css_248z$1);
|
|
18359
18358
|
|
|
18360
18359
|
var Tabs = function (_a) {
|
|
@@ -18421,10 +18420,10 @@ var Tabs = function (_a) {
|
|
|
18421
18420
|
React__default.createElement("span", { ref: uiIndicatorRef, className: "vchasno-ui-tabs__indicator" })))),
|
|
18422
18421
|
!isPending && (activeTabItem === null || activeTabItem === void 0 ? void 0 : activeTabItem.children),
|
|
18423
18422
|
isPending && (React__default.createElement(FlexBox, { justify: "center", align: "center", style: { minHeight: 300 } },
|
|
18424
|
-
React__default.createElement(Spinner, { color: "var(--tabs-active-color, #087dc1)" })))));
|
|
18423
|
+
React__default.createElement(Spinner, { color: "var(--vchasno-ui-tabs-active-color, #087dc1)" })))));
|
|
18425
18424
|
};
|
|
18426
18425
|
|
|
18427
|
-
var css_248z = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--transition-duration-sec, 0.3s),\n border var(--transition-duration-sec, 0.3s),\n outline var(--transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--transition-duration-sec),\n transform var(--transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--checkbox-bg-color, #604adf);\n background-color: var(--checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--checkbox-bg-color, #604adf);\n outline: 1.5px solid #ab9eff;\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
18426
|
+
var css_248z = ".vchasno-ui-checkbox {\n display: inline-flex;\n align-items: center;\n cursor: pointer;\n gap: 10px;\n user-select: none;\n}\n\n.vchasno-ui-checkbox__box {\n display: inline-flex;\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--vchasno-ui-checkbox-border-color, #b6cadb);\n border-radius: 3px;\n outline: 2px solid transparent;\n transition:\n background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n border var(--vchasno-ui-transition-duration-sec, 0.3s),\n outline var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-checkbox .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-bg-color);\n}\n\n.vchasno-ui-checkbox__svg {\n color: transparent;\n transform: scale(0) translateZ(0);\n transition:\n color var(--vchasno-ui-transition-duration-sec),\n transform var(--vchasno-ui-transition-duration-sec) cubic-bezier(0.12, 0.4, 0.29, 1.46);\n}\n\n.vchasno-ui-checkbox.--loading .vchasno-ui-checkbox__svg {\n display: none;\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n background-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-checkbox__svg {\n color: var(--vchasno-ui-checkbox-icon-color);\n transform: scale(1) translateZ(0);\n}\n\n.vchasno-ui-checkbox:hover > input:not(:disabled) + .vchasno-ui-checkbox__box,\n.vchasno-ui-checkbox > input:not(:disabled):active + .vchasno-ui-checkbox__box {\n border-color: var(--vchasno-ui-checkbox-bg-color, #604adf);\n outline: 1.5px solid #ab9eff;\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n background-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n}\n\n.vchasno-ui-checkbox > input:checked + .vchasno-ui-checkbox__box .vchasno-ui-spinner__svg__circle {\n stroke: var(--vchasno-ui-checkbox-icon-color);\n}\n\n.vchasno-ui-checkbox__label {\n font-size: var(--vchasno-ui-checkbox-font-size);\n line-height: 1;\n user-select: none;\n}\n\n.vchasno-ui-checkbox.--disabled {\n color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\n cursor: not-allowed;\n}\n";
|
|
18428
18427
|
styleInject(css_248z);
|
|
18429
18428
|
|
|
18430
18429
|
var Checkbox = React__default.forwardRef(function (_a, ref) {
|