@vchasno/ui-kit 0.3.29 → 0.3.31

package/dist/SelectCreatable/types/components/Alert/Alert.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { DataQa } from '../types';
 import './Alert.global.css';
 type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
 type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
-export interface AlertProps {
+export interface AlertProps extends DataQa {
     type?: AlertType;
     icon?: IconType;
     customIcon?: React.ReactNode;

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

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

package/dist/SelectCreatable/types/components/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes } from 'react';
-import type { LoadingFeedback } from '../types';
+import type { DataQa, LoadingFeedback } from '../types';
 import './Checkbox.global.css';
-export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback & DataQa> {
     className?: string;
     label?: string;
     disabled?: boolean;

package/dist/SelectCreatable/types/components/Datepicker/DatePicker.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { ReactDatePickerProps } from 'react-datepicker';
 import { MaskedInputProps } from 'react-text-mask';
-import type { ErrorFeedback, LoadingFeedback, WithHint } from '../types';
+import type { DataQa, ErrorFeedback, LoadingFeedback, WithHint } from '../types';
 import './DatePicker.global.css';
-export interface DatePickerProps extends ReactDatePickerProps, Partial<LoadingFeedback & WithHint & ErrorFeedback> {
+export interface DatePickerProps extends ReactDatePickerProps, Partial<LoadingFeedback & WithHint & ErrorFeedback & DataQa> {
     label?: string;
     className?: string;
     showMask?: boolean;

package/dist/SelectCreatable/types/components/FlexBox/FlexBox.d.ts

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from 'react';
+import { DataQa } from '../types';
 import './FlexBox.css';
-export interface FlexBoxProps extends HTMLAttributes<HTMLElement> {
+export interface FlexBoxProps extends HTMLAttributes<HTMLElement>, DataQa {
     className?: string;
     tagName?: keyof HTMLElementTagNameMap;
     direction?: React.CSSProperties['flexDirection'];

package/dist/SelectCreatable/types/components/Input/Input.d.ts

@@ -1,7 +1,7 @@
 import React, { InputHTMLAttributes } from 'react';
-import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import type { DataQa, ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
 import './Input.global.css';
-export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+export interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
     className?: string;
     disabled?: boolean;
     required?: boolean;

package/dist/SelectCreatable/types/components/MaskInput/MaskInput.d.ts

@@ -1,8 +1,9 @@
 import React, { InputHTMLAttributes } from 'react';
 import { MaskedInputProps } from 'react-text-mask';
 import { InputProps } from '../Input';
+import { DataQa } from '../types';
 import './MaskInput.global.css';
-export interface MaskInputProps extends MaskedInputProps, Omit<InputProps, 'children'> {
+export interface MaskInputProps extends MaskedInputProps, Omit<InputProps, 'children'>, DataQa {
     inputClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
 }

package/dist/SelectCreatable/types/components/Paragraph/Paragraph.d.ts

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes } from 'react';
-import { EllipsisText, TextAlign } from '../types';
+import { DataQa, EllipsisText, TextAlign } from '../types';
 import '../../styles/typography.global.css';
 import './Paragraph.global.css';
-export interface ParagraphProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLParagraphElement> {
+export interface ParagraphProps extends EllipsisText, TextAlign, DataQa, HTMLAttributes<HTMLParagraphElement> {
     className?: string;
     children: React.ReactNode;
     ellipsisLine?: number;

package/dist/SelectCreatable/types/components/Select/Select.d.ts

@@ -1,13 +1,12 @@
 import React from 'react';
 import { Props as ReactSelectProps } from 'react-select';
 import type { GroupBase } from 'react-select/dist/declarations/src/types';
-import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { DataQa, ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
 import { Option } from './types';
 import './Select.global.css';
 export type SelectOption = Option;
-export interface SelectProps extends ReactSelectProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+export interface SelectProps extends ReactSelectProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
     wide?: boolean;
-    dataQa?: string;
 }
 declare const Select: React.FC<SelectProps>;
 export declare const SelectComponents: {

package/dist/SelectCreatable/types/components/Select/SelectCreatable.d.ts

@@ -1,14 +1,13 @@
 import React, { InputHTMLAttributes } from 'react';
 import { CreatableProps } from 'react-select/creatable';
 import type { GroupBase } from 'react-select/dist/declarations/src/types';
-import type { ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
+import { DataQa, ErrorFeedback, LoadingFeedback, WithHint, WithLabel } from '../types';
 import { Option } from './types';
 import './Select.global.css';
 export type SelectOption = Option;
-export interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+export interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
     wide?: boolean;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
-    dataQa?: string;
 }
 declare const SelectCreatable: React.FC<SelectCreatableProps>;
 export default SelectCreatable;

package/dist/SelectCreatable/types/components/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
-import { LoadingFeedback, Sizable } from '../types';
+import { DataQa, LoadingFeedback, Sizable } from '../types';
 import './Switch.global.css';
-export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
+export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, DataQa, Partial<LoadingFeedback>, Partial<Sizable> {
     className?: string;
     label?: string;
     value?: boolean;

package/dist/SelectCreatable/types/components/Text/Text.d.ts

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes } from 'react';
-import { EllipsisText, TextType } from '../types';
+import { DataQa, EllipsisText, TextType } from '../types';
 import './Text.global.css';
-export interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText {
+export interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText, DataQa {
     type?: TextType;
     code?: boolean;
     underline?: boolean;

package/dist/SelectCreatable/types/components/TextAreaInput/TextAreaInput.d.ts

@@ -1,7 +1,8 @@
 import React, { InputHTMLAttributes } from 'react';
 import { InputProps } from '../Input';
+import { DataQa } from '../types';
 import './TextAreaInput.global.css';
-export interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'>, Omit<InputProps, 'children'> {
+export interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'>, Omit<InputProps, 'children'>, DataQa {
     textareaClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
     minRows?: number;

package/dist/SelectCreatable/types/components/TextInput/TextInput.d.ts

@@ -1,7 +1,8 @@
 import React, { InputHTMLAttributes } from 'react';
 import type { InputProps } from '../Input';
+import { DataQa } from '../types';
 import './TextInput.global.css';
-export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputProps, 'children'> {
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputProps, 'children'>, DataQa {
     inputClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
 }

package/dist/SelectCreatable/types/components/Title/Title.d.ts

@@ -1,8 +1,8 @@
 import React, { HTMLAttributes } from 'react';
-import { EllipsisText, TextAlign } from '../types';
+import { DataQa, EllipsisText, TextAlign } from '../types';
 import '../../styles/typography.global.css';
 import './Title.global.css';
-export interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement> {
+export interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement>, DataQa {
     level?: 1 | 2 | 3 | 4 | 5;
     className?: string;
     pretty?: boolean;

package/dist/SelectCreatable/types/components/types.d.ts

@@ -22,6 +22,10 @@ export interface EllipsisText {
     /** для скорочення тексту і виведення 3 точок */
     ellipsis?: boolean;
 }
+export interface DataQa {
+    /** для тестування */
+    dataQa?: string;
+}
 export interface TextAlign {
     /** для центрування тексту **/
     textAlign?: 'center' | 'start' | 'end' | 'justify';

package/dist/Snackbar/index.cjs.js

@@ -225,8 +225,8 @@ var css_248z$p = ".vchasno-ui-flex-box {\n    display: flex;\n    max-width: 100
 styleInject(css_248z$p);
 
 var FlexBox = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.tagName, tagName = _b === void 0 ? 'div' : _b, children = _a.children, direction = _a.direction, gap = _a.gap, wrap = _a.wrap, align = _a.align, justify = _a.justify, grow = _a.grow, shrink = _a.shrink, _c = _a.style, style = _c === void 0 ? {} : _c, rest = __rest(_a, ["className", "tagName", "children", "direction", "gap", "wrap", "align", "justify", "grow", "shrink", "style"]);
-    return React$1.createElement(tagName, __assign({ ref: ref, className: cn('vchasno-ui-flex-box', className), style: __assign(__assign({}, style), { flexDirection: direction, gap: gap, flexWrap: wrap, justifyContent: justify, alignItems: align, alignContent: align, flexGrow: grow, flexShrink: shrink }) }, rest), children);
+    var className = _a.className, _b = _a.tagName, tagName = _b === void 0 ? 'div' : _b, children = _a.children, direction = _a.direction, gap = _a.gap, wrap = _a.wrap, align = _a.align, justify = _a.justify, grow = _a.grow, shrink = _a.shrink, _c = _a.style, style = _c === void 0 ? {} : _c, dataQa = _a.dataQa, rest = __rest(_a, ["className", "tagName", "children", "direction", "gap", "wrap", "align", "justify", "grow", "shrink", "style", "dataQa"]);
+    return React$1.createElement(tagName, __assign({ ref: ref, className: cn('vchasno-ui-flex-box', className), 'data-qa': dataQa, style: __assign(__assign({}, style), { flexDirection: direction, gap: gap, flexWrap: wrap, justifyContent: justify, alignItems: align, alignContent: align, flexGrow: grow, flexShrink: shrink }) }, rest), children);
 });
 FlexBox.displayName = 'FlexBox';
 
@@ -240,12 +240,12 @@ var Spinner = function (_a) {
             React$1.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
 };
 
-var css_248z$n = ".vchasno-ui-button {\n    display: inline-flex;\n    min-height: 40px;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-btn-default-bg);\n    color: var(--vchasno-ui-btn-default-color);\n    font-size: var(--vchasno-ui-btn-font-size);\n    font-weight: 700;\n    gap: 5px;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-default-hover-bg);\n    color: var(--vchasno-ui-btn-default-hover-color);\n    cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n    min-width: 40px;\n    padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n    min-width: 145px;\n    padding: 0 20px;\n}\n\n.vchasno-ui-button.--lg {\n    min-width: 200px;\n    min-height: 50px;\n    padding: 0 20px;\n}\n\n.vchasno-ui-button.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n    border: 1px solid transparent;\n    background-color: var(--vchasno-ui-btn-primary-bg);\n    color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n    border: 1px solid var(--vchasno-ui-btn-primary-bg);\n    background-color: transparent;\n    box-shadow: none;\n    color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n    background-color: var(--vchasno-ui-btn-secondary-bg);\n    color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n    border-color: #b6cadb;\n    background-color: #b6cadb;\n    color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-primary-hover-bg);\n    color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n    border: 1px solid var(--vchasno-ui-btn-primary-bg);\n    background-color: var(--vchasno-ui-btn-default-hover-bg);\n    color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n    border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n    background-color: transparent;\n    box-shadow: none;\n    color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n    color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n    border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n    background-color: rgb(0 0 0 / 10%);\n    color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--pink {\n    background-color: var(--vchasno-ui-btn-pink-bg);\n    color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline {\n    border: 1px solid var(--vchasno-ui-btn-pink-bg);\n    background-color: transparent;\n    color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--pink:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-pink-hover-bg);\n    color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline:not(:disabled):hover {\n    border: 1px solid var(--vchasno-ui-btn-pink-bg);\n    background-color: transparent;\n    color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--danger {\n    border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n    background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n    color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n    border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n    background-color: transparent;\n    color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n    border: 1px solid #b6cadb;\n    background-color: rgb(182 202 219 / 20%);\n    color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n    color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n    border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n    background-color: rgb(0 0 0 / 10%);\n    color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-btn-default-color);\n    transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n    color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n    border: 1px solid transparent;\n    background-color: var(--vchasno-ui-btn-light-bg, #fff);\n    color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n    border: none;\n    background-color: rgb(182 202 219 / 20%);\n    color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n    border: 1px solid var(--vchasno-ui-btn-primary-bg);\n    background-color: var(--vchasno-ui-btn-primary-color);\n    color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-light-hover-bg);\n    color: var(--vchasno-ui-btn-primary-bg);\n}\n";
+var css_248z$n = ".vchasno-ui-button {\n    display: inline-flex;\n    min-height: 40px;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-btn-default-bg);\n    color: var(--vchasno-ui-btn-default-color);\n    font-size: var(--vchasno-ui-btn-font-size);\n    font-weight: 700;\n    gap: 5px;\n    transition:\n        min-height var(--vchasno-ui-transition-duration-sec, 0.3s),\n        padding var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    user-select: none;\n}\n\n.vchasno-ui-button:disabled {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n\n.vchasno-ui-button:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-default-hover-bg);\n    color: var(--vchasno-ui-btn-default-hover-color);\n    cursor: pointer;\n}\n\n.vchasno-ui-button.--sm {\n    min-width: 40px;\n    padding: 0 15px;\n}\n\n.vchasno-ui-button.--md {\n    min-width: 40px;\n    padding: 0 24px;\n}\n\n.vchasno-ui-button.--lg {\n    min-width: 50px;\n    min-height: 50px;\n    padding: 0 32px;\n}\n\n.vchasno-ui-button.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-button.--primary {\n    border: 1px solid transparent;\n    background-color: var(--vchasno-ui-btn-primary-bg);\n    color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline {\n    border: 1px solid var(--vchasno-ui-btn-primary-bg);\n    background-color: transparent;\n    box-shadow: none;\n    color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary {\n    border: 1px solid var(--vchasno-ui-btn-secondary-border-color);\n    background-color: var(--vchasno-ui-btn-secondary-bg);\n    color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button:disabled.--primary,\n.vchasno-ui-button:disabled.--secondary {\n    background-color: #b6cadb;\n    color: var(--vchasno-ui-btn-disabled-color);\n}\n\n.vchasno-ui-button:disabled.--primary {\n    background-color: var(--vchasno-ui-btn-primary-disabled-bg);\n}\n\n.vchasno-ui-button:disabled.--secondary {\n    background-color: var(--vchasno-ui-btn-secondary-disabled-bg);\n}\n\n.vchasno-ui-button.--primary:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-primary-hover-bg);\n    color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--primary.--outline:not(:disabled):hover {\n    border: 1px solid var(--vchasno-ui-btn-primary-bg);\n    background-color: var(--vchasno-ui-btn-default-hover-bg);\n    color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--secondary.--outline {\n    border: 1px solid var(--vchasno-ui-btn-secondary-bg);\n    background-color: transparent;\n    box-shadow: none;\n    color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--secondary:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-secondary-hover-bg);\n    color: var(--vchasno-ui-btn-secondary-color);\n}\n\n.vchasno-ui-button.--secondary.--outline:not(:disabled):hover {\n    background-color: rgb(0 0 0 / 10%);\n    color: var(--vchasno-ui-btn-secondary-bg);\n}\n\n.vchasno-ui-button.--pink {\n    background-color: var(--vchasno-ui-btn-pink-bg);\n    color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline {\n    border: 1px solid var(--vchasno-ui-btn-pink-bg);\n    background-color: transparent;\n    color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--pink:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-pink-hover-bg);\n    color: var(--vchasno-ui-btn-primary-color);\n}\n\n.vchasno-ui-button.--pink.--outline:not(:disabled):hover {\n    border: 1px solid var(--vchasno-ui-btn-pink-bg);\n    background-color: transparent;\n    color: var(--vchasno-ui-btn-pink-bg);\n}\n\n.vchasno-ui-button.--danger {\n    border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n    background-color: var(--vchasno-ui-btn-danger-bg, rgb(239 101 98 / 20%));\n    color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--danger.--outline {\n    border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n    background-color: transparent;\n    color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button:disabled.--danger {\n    border: 1px solid #b6cadb;\n    background-color: rgb(182 202 219 / 20%);\n    color: #b6cadb;\n}\n\n.vchasno-ui-button.--danger:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-danger-hover-bg, #ef6562);\n    color: var(--vchasno-ui-btn-danger-hover-color, #fff);\n}\n\n.vchasno-ui-button.--danger.--outline:not(:disabled):hover {\n    border: 1px solid var(--vchasno-ui-btn-danger-color, #ef6562);\n    background-color: rgb(0 0 0 / 10%);\n    color: var(--vchasno-ui-btn-danger-color, #ef6562);\n}\n\n.vchasno-ui-button.--transparent .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-btn-default-color);\n    transition: stroke var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-button.--transparent:hover .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-btn-default-hover-color);\n}\n\n.vchasno-ui-button:disabled.--transparent {\n    color: #b6cadb;\n}\n\n.vchasno-ui-button.--light {\n    border: 1px solid transparent;\n    background-color: var(--vchasno-ui-btn-light-bg, #fff);\n    color: var(--vchasno-ui-btn-light-color);\n}\n\n.vchasno-ui-button:disabled.--light {\n    border: none;\n    background-color: rgb(182 202 219 / 20%);\n    color: #b6cadb;\n}\n\n.vchasno-ui-button.--light.--outline {\n    border: 1px solid var(--vchasno-ui-btn-primary-bg);\n    background-color: var(--vchasno-ui-btn-primary-color);\n    color: var(--vchasno-ui-btn-primary-bg);\n}\n\n.vchasno-ui-button.--light:not(:disabled):hover {\n    background-color: var(--vchasno-ui-btn-light-hover-bg);\n    color: var(--vchasno-ui-btn-primary-bg);\n}\n";
 styleInject(css_248z$n);
 
 var Button = React$1.forwardRef(function (_a, ref) {
-    var _b = _a.theme, theme = _b === void 0 ? 'primary' : _b, _c = _a.type, type = _c === void 0 ? 'button' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.outline, outline = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, _g = _a.wide, wide = _g === void 0 ? false : _g, className = _a.className, children = _a.children, rest = __rest(_a, ["theme", "type", "size", "outline", "loading", "wide", "className", "children"]);
-    return (React$1.createElement("button", __assign({ ref: ref, type: type, className: cn('vchasno-ui-button', "--".concat(theme), "--".concat(size), {
+    var _b = _a.theme, theme = _b === void 0 ? 'primary' : _b, _c = _a.type, type = _c === void 0 ? 'button' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.outline, outline = _e === void 0 ? false : _e, _f = _a.loading, loading = _f === void 0 ? false : _f, _g = _a.wide, wide = _g === void 0 ? false : _g, className = _a.className, dataQa = _a.dataQa, children = _a.children, rest = __rest(_a, ["theme", "type", "size", "outline", "loading", "wide", "className", "dataQa", "children"]);
+    return (React$1.createElement("button", __assign({ "data-qa": dataQa, ref: ref, type: type, className: cn('vchasno-ui-button', "--".concat(theme), "--".concat(size), {
             '--outline': outline,
             '--wide': wide,
             '--loading': loading,
@@ -286,8 +286,8 @@ var css_248z$k = ".vchasno-ui-input {\n    display: inline-flex;\n    max-width:
 styleInject(css_248z$k);
 
 var Input = function (_a) {
-    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, labelProps = _a.labelProps, _b = _a.hideEmptyMeta, hideEmptyMeta = _b === void 0 ? false : _b, children = _a.children;
-    return (React$1.createElement("label", __assign({ className: cn('vchasno-ui-input', {
+    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, labelProps = _a.labelProps, _b = _a.hideEmptyMeta, hideEmptyMeta = _b === void 0 ? false : _b, dataQa = _a.dataQa, children = _a.children;
+    return (React$1.createElement("label", __assign({ "data-qa": dataQa, className: cn('vchasno-ui-input', {
             '--required': required,
             '--disabled': disabled,
             '--wide': wide,
@@ -309,19 +309,19 @@ var reactTextMask = {exports: {}};
 	!function(e,t){module.exports=t(React$1);}(commonjsGlobal,function(e){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return !t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t);}Object.defineProperty(t,"__esModule",{value:!0}),t.conformToMask=void 0;var s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},l=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n);}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),f=r(3);Object.defineProperty(t,"conformToMask",{enumerable:!0,get:function(){return n(f).default}});var c=r(11),p=n(c),d=r(9),h=n(d),v=r(5),y=n(v),m=r(2),b=function(e){function t(){var e;i(this,t);for(var r=arguments.length,n=Array(r),o=0;o<r;o++)n[o]=arguments[o];var u=a(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(n)));return u.setRef=u.setRef.bind(u),u.onBlur=u.onBlur.bind(u),u.onChange=u.onChange.bind(u),u}return u(t,e),l(t,[{key:"setRef",value:function(e){this.inputElement=e;}},{key:"initTextMask",value:function(){var e=this.props,t=this.props.value;this.textMaskInputElement=(0, y.default)(s({inputElement:this.inputElement},e)),this.textMaskInputElement.update(t);}},{key:"componentDidMount",value:function(){this.initTextMask();}},{key:"componentDidUpdate",value:function(e){var t=this.props,r=t.value,n=t.pipe,o=t.mask,i=t.guide,a=t.placeholderChar,u=t.showMask,s={guide:i,placeholderChar:a,showMask:u},l="function"==typeof n&&"function"==typeof e.pipe?n.toString()!==e.pipe.toString():(0, m.isNil)(n)&&!(0, m.isNil)(e.pipe)||!(0, m.isNil)(n)&&(0, m.isNil)(e.pipe),f=o.toString()!==e.mask.toString(),c=Object.keys(s).some(function(t){return s[t]!==e[t]})||f||l,p=r!==this.inputElement.value;(p||c)&&this.initTextMask();}},{key:"render",value:function e(){var t=this.props,e=t.render,r=o(t,["render"]);return delete r.mask,delete r.guide,delete r.pipe,delete r.placeholderChar,delete r.keepCharPositions,delete r.value,delete r.onBlur,delete r.onChange,delete r.showMask,e(this.setRef,s({onBlur:this.onBlur,onChange:this.onChange,defaultValue:this.props.value},r))}},{key:"onChange",value:function(e){this.textMaskInputElement.update(),"function"==typeof this.props.onChange&&this.props.onChange(e);}},{key:"onBlur",value:function(e){"function"==typeof this.props.onBlur&&this.props.onBlur(e);}}]),t}(p.default.PureComponent);t.default=b,b.propTypes={mask:h.default.oneOfType([h.default.array,h.default.func,h.default.bool,h.default.shape({mask:h.default.oneOfType([h.default.array,h.default.func]),pipe:h.default.func})]).isRequired,guide:h.default.bool,value:h.default.oneOfType([h.default.string,h.default.number]),pipe:h.default.func,placeholderChar:h.default.string,keepCharPositions:h.default.bool,showMask:h.default.bool},b.defaultProps={render:function(e,t){return p.default.createElement("input",s({ref:e},t))}};},function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.placeholderChar="_",t.strFunction="function";},function(e,t,r){function n(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:f,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l.placeholderChar;if(!o(e))throw new Error("Text-mask:convertMaskToPlaceholder; The mask property must be an array.");if(e.indexOf(t)!==-1)throw new Error("Placeholder character must not be used as part of the mask. Please specify a character that is not present in your mask as your placeholder character.\n\n"+("The placeholder character that was received is: "+JSON.stringify(t)+"\n\n")+("The mask that was received is: "+JSON.stringify(e)));return e.map(function(e){return e instanceof RegExp?t:e}).join("")}function o(e){return Array.isArray&&Array.isArray(e)||e instanceof Array}function i(e){return "string"==typeof e||e instanceof String}function a(e){return "number"==typeof e&&void 0===e.length&&!isNaN(e)}function u(e){return "undefined"==typeof e||null===e}function s(e){for(var t=[],r=void 0;r=e.indexOf(c),r!==-1;)t.push(r),e.splice(r,1);return {maskWithoutCaretTraps:e,indexes:t}}Object.defineProperty(t,"__esModule",{value:!0}),t.convertMaskToPlaceholder=n,t.isArray=o,t.isString=i,t.isNumber=a,t.isNil=u,t.processCaretTraps=s;var l=r(1),f=[],c="[]";},function(e,t,r){function n(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:s,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:u,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(!(0, i.isArray)(t)){if(("undefined"==typeof t?"undefined":o(t))!==a.strFunction)throw new Error("Text-mask:conformToMask; The mask property must be an array.");t=t(e,r),t=(0, i.processCaretTraps)(t).maskWithoutCaretTraps;}var n=r.guide,l=void 0===n||n,f=r.previousConformedValue,c=void 0===f?s:f,p=r.placeholderChar,d=void 0===p?a.placeholderChar:p,h=r.placeholder,v=void 0===h?(0, i.convertMaskToPlaceholder)(t,d):h,y=r.currentCaretPosition,m=r.keepCharPositions,b=l===!1&&void 0!==c,g=e.length,k=c.length,C=v.length,O=t.length,T=g-k,P=T>0,x=y+(P?-T:0),w=x+Math.abs(T);if(m===!0&&!P){for(var S=s,_=x;_<w;_++)v[_]===d&&(S+=d);e=e.slice(0,x)+S+e.slice(x,g);}for(var M=e.split(s).map(function(e,t){return {char:e,isNew:t>=x&&t<w}}),j=g-1;j>=0;j--){var E=M[j].char;if(E!==d){var R=j>=x&&k===O;E===v[R?j-T:j]&&M.splice(j,1);}}var V=s,N=!1;e:for(var A=0;A<C;A++){var B=v[A];if(B===d){if(M.length>0)for(;M.length>0;){var I=M.shift(),F=I.char,q=I.isNew;if(F===d&&b!==!0){V+=d;continue e}if(t[A].test(F)){if(m===!0&&q!==!1&&c!==s&&l!==!1&&P){for(var D=M.length,L=null,W=0;W<D;W++){var J=M[W];if(J.char!==d&&J.isNew===!1)break;if(J.char===d){L=W;break}}null!==L?(V+=F,M.splice(L,1)):A--;}else V+=F;continue e}N=!0;}b===!1&&(V+=v.substr(A,C));break}V+=B;}if(b&&P===!1){for(var U=null,H=0;H<V.length;H++)v[H]===d&&(U=H);V=null!==U?V.substr(0,U+1):s;}return {conformedValue:V,meta:{someCharsRejected:N}}}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=n;var i=r(2),a=r(1),u=[],s="";},function(e,t){function r(e){var t=e.previousConformedValue,r=void 0===t?o:t,i=e.previousPlaceholder,a=void 0===i?o:i,u=e.currentCaretPosition,s=void 0===u?0:u,l=e.conformedValue,f=e.rawValue,c=e.placeholderChar,p=e.placeholder,d=e.indexesOfPipedChars,h=void 0===d?n:d,v=e.caretTrapIndexes,y=void 0===v?n:v;if(0===s||!f.length)return 0;var m=f.length,b=r.length,g=p.length,k=l.length,C=m-b,O=C>0,T=0===b,P=C>1&&!O&&!T;if(P)return s;var x=O&&(r===l||l===p),w=0,S=void 0,_=void 0;if(x)w=s-C;else {var M=l.toLowerCase(),j=f.toLowerCase(),E=j.substr(0,s).split(o),R=E.filter(function(e){return M.indexOf(e)!==-1});_=R[R.length-1];var V=a.substr(0,R.length).split(o).filter(function(e){return e!==c}).length,N=p.substr(0,R.length).split(o).filter(function(e){return e!==c}).length,A=N!==V,B=void 0!==a[R.length-1]&&void 0!==p[R.length-2]&&a[R.length-1]!==c&&a[R.length-1]!==p[R.length-1]&&a[R.length-1]===p[R.length-2];!O&&(A||B)&&V>0&&p.indexOf(_)>-1&&void 0!==f[s]&&(S=!0,_=f[s]);for(var I=h.map(function(e){return M[e]}),F=I.filter(function(e){return e===_}).length,q=R.filter(function(e){return e===_}).length,D=p.substr(0,p.indexOf(c)).split(o).filter(function(e,t){return e===_&&f[t]!==e}).length,L=D+q+F+(S?1:0),W=0,J=0;J<k;J++){var U=M[J];if(w=J+1,U===_&&W++,W>=L)break}}if(O){for(var H=w,Y=w;Y<=g;Y++)if(p[Y]===c&&(H=Y),p[Y]===c||y.indexOf(Y)!==-1||Y===g)return H}else if(S){for(var z=w-1;z>=0;z--)if(l[z]===_||y.indexOf(z)!==-1||0===z)return z}else for(var G=w;G>=0;G--)if(p[G-1]===c||y.indexOf(G)!==-1||0===G)return G}Object.defineProperty(t,"__esModule",{value:!0}),t.default=r;var n=[],o="";},function(e,t,r){function n(e){return e&&e.__esModule?e:{default:e}}function o(e){var t={previousConformedValue:void 0,previousPlaceholder:void 0};return {state:t,update:function(r){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:e,o=n.inputElement,l=n.mask,c=n.guide,y=n.pipe,b=n.placeholderChar,g=void 0===b?h.placeholderChar:b,k=n.keepCharPositions,C=void 0!==k&&k,O=n.showMask,T=void 0!==O&&O;if("undefined"==typeof r&&(r=o.value),r!==t.previousConformedValue){("undefined"==typeof l?"undefined":s(l))===m&&void 0!==l.pipe&&void 0!==l.mask&&(y=l.pipe,l=l.mask);var P=void 0,x=void 0;if(l instanceof Array&&(P=(0, d.convertMaskToPlaceholder)(l,g)),l!==!1){var w=a(r),S=o.selectionEnd,_=t.previousConformedValue,M=t.previousPlaceholder,j=void 0;if(("undefined"==typeof l?"undefined":s(l))===h.strFunction){if(x=l(w,{currentCaretPosition:S,previousConformedValue:_,placeholderChar:g}),x===!1)return;var E=(0, d.processCaretTraps)(x),R=E.maskWithoutCaretTraps,V=E.indexes;x=R,j=V,P=(0, d.convertMaskToPlaceholder)(x,g);}else x=l;var N={previousConformedValue:_,guide:c,placeholderChar:g,pipe:y,placeholder:P,currentCaretPosition:S,keepCharPositions:C},A=(0, p.default)(w,x,N),B=A.conformedValue,I=("undefined"==typeof y?"undefined":s(y))===h.strFunction,F={};I&&(F=y(B,u({rawValue:w},N)),F===!1?F={value:_,rejected:!0}:(0, d.isString)(F)&&(F={value:F}));var q=I?F.value:B,D=(0, f.default)({previousConformedValue:_,previousPlaceholder:M,conformedValue:q,placeholder:P,rawValue:w,currentCaretPosition:S,placeholderChar:g,indexesOfPipedChars:F.indexesOfPipedChars,caretTrapIndexes:j}),L=q===P&&0===D,W=T?P:v,J=L?W:q;t.previousConformedValue=J,t.previousPlaceholder=P,o.value!==J&&(o.value=J,i(o,D));}}}}}function i(e,t){document.activeElement===e&&(b?g(function(){return e.setSelectionRange(t,t,y)},0):e.setSelectionRange(t,t,y));}function a(e){if((0, d.isString)(e))return e;if((0, d.isNumber)(e))return String(e);if(void 0===e||null===e)return v;throw new Error("The 'value' provided to Text Mask needs to be a string or a number. The value received was:\n\n "+JSON.stringify(e))}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=o;var l=r(4),f=n(l),c=r(3),p=n(c),d=r(2),h=r(1),v="",y="none",m="object",b="undefined"!=typeof navigator&&/Android/i.test(navigator.userAgent),g="undefined"!=typeof requestAnimationFrame?requestAnimationFrame:setTimeout;},function(e,t){function r(e){return function(){return e}}var n=function(){};n.thatReturns=r,n.thatReturnsFalse=r(!1),n.thatReturnsTrue=r(!0),n.thatReturnsNull=r(null),n.thatReturnsThis=function(){return this},n.thatReturnsArgument=function(e){return e},e.exports=n;},function(e,t,r){function n(e,t,r,n,i,a,u,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else {var f=[r,n,i,a,u,s],c=0;l=new Error(t.replace(/%s/g,function(){return f[c++]})),l.name="Invariant Violation";}throw l.framesToPop=1,l}}e.exports=n;},function(e,t,r){var n=r(6),o=r(7),i=r(10);e.exports=function(){function e(e,t,r,n,a,u){u!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r};},function(e,t,r){e.exports=r(8)();},function(e,t){var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=r;},function(t,r){t.exports=e;}])}); 
 } (reactTextMask));
 
-var css_248z$j = ".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";
+var css_248z$j = ".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:not(:focus-within)::placeholder {\n    visibility: hidden;\n}\n";
 styleInject(css_248z$j);
 
 var css_248z$i = ".vchasno-ui-pagination {\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    display: flex;\n    min-width: var(--vchasno-ui-pagination-size);\n    height: var(--vchasno-ui-pagination-size);\n    flex-grow: 0;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    background-color: #fff;\n    cursor: pointer;\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: var(--vchasno-ui-pagination-hover-bg-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\n.vchasno-ui-pagination__item-hidden {\n    display: none;\n}\n";
 styleInject(css_248z$i);
 
-var css_248z$h = ".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";
+var css_248z$h = ".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:not(:focus-within)::placeholder {\n    visibility: hidden;\n}\n";
 styleInject(css_248z$h);
 
 var TextInput = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, inputClassName = _a.inputClassName, labelProps = _a.labelProps, hideEmptyMeta = _a.hideEmptyMeta, _b = _a.placeholder, placeholder = _b === void 0 ? ' ' : _b, //need "space" for correct label working
-    rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps", "hideEmptyMeta", "placeholder"]);
-    return (React$1.createElement(Input, { required: required, wide: wide, className: className, loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, startElement: startElement, labelProps: labelProps, hideEmptyMeta: hideEmptyMeta },
+    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, inputClassName = _a.inputClassName, labelProps = _a.labelProps, hideEmptyMeta = _a.hideEmptyMeta, dataQa = _a.dataQa, _b = _a.placeholder, placeholder = _b === void 0 ? ' ' : _b, //need "space" for correct label working
+    rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps", "hideEmptyMeta", "dataQa", "placeholder"]);
+    return (React$1.createElement(Input, { dataQa: dataQa, required: required, wide: wide, className: className, loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, startElement: startElement, labelProps: labelProps, hideEmptyMeta: hideEmptyMeta },
         React$1.createElement("input", __assign({ disabled: disabled, className: cn('vchasno-ui-text-input', inputClassName), required: required, ref: ref, placeholder: placeholder }, rest))));
 });
 TextInput.displayName = 'TextInput';
@@ -339,7 +339,7 @@ var typeToCN = {
     likeLink: '--like-link',
 };
 var Text = React$1.forwardRef(function (_a, ref) {
-    var _b = _a.type, type = _b === void 0 ? 'default' : _b, className = _a.className, _c = _a.code, code = _c === void 0 ? false : _c, _d = _a.del, del = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, _f = _a.strong, strong = _f === void 0 ? false : _f, children = _a.children, ellipsis = _a.ellipsis, _g = _a.required, required = _g === void 0 ? false : _g, rest = __rest(_a, ["type", "className", "code", "del", "underline", "strong", "children", "ellipsis", "required"]);
+    var _b = _a.type, type = _b === void 0 ? 'default' : _b, className = _a.className, _c = _a.code, code = _c === void 0 ? false : _c, _d = _a.del, del = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, _f = _a.strong, strong = _f === void 0 ? false : _f, children = _a.children, ellipsis = _a.ellipsis, _g = _a.required, required = _g === void 0 ? false : _g, dataQa = _a.dataQa, rest = __rest(_a, ["type", "className", "code", "del", "underline", "strong", "children", "ellipsis", "required", "dataQa"]);
     var element = 'span';
     if (del) {
         element = 'del';
@@ -353,7 +353,7 @@ var Text = React$1.forwardRef(function (_a, ref) {
     if (code) {
         element = 'code';
     }
-    return React$1.createElement(element, __assign({ ref: ref, className: cn('vchasno-ui-text', className, typeToCN[type], {
+    return React$1.createElement(element, __assign({ ref: ref, 'data-qa': dataQa, className: cn('vchasno-ui-text', className, typeToCN[type], {
             '--code': code,
             '--ellipsis': ellipsis,
             '--required': required,
@@ -364,24 +364,24 @@ Text.displayName = 'Text';
 var css_248z$f = ".--text-start {\n  text-align: start;\n}\n\n.--text-center {\n  text-align: center;\n}\n\n.--text-end {\n  text-align: end;\n}\n\n.--text-justify {\n  text-align: justify;\n}\n";
 styleInject(css_248z$f);
 
-var css_248z$e = ".vchasno-ui-title {\n    color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-title.--pretty {\n    text-wrap: pretty;\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";
+var css_248z$e = ".vchasno-ui-title {\n    color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-title.--pretty {\n    text-wrap: pretty;\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: 700;\n    line-height: 40px;\n}\n\nh2.vchasno-ui-title,\n.vchasno-ui-title h2 {\n    font-size: 24px;\n    font-weight: 700;\n    line-height: 28px;\n}\n\nh3.vchasno-ui-title,\n.vchasno-ui-title h3 {\n    font-size: 20px;\n    font-weight: 500;\n    line-height: 24px;\n}\n\nh4.vchasno-ui-title,\n.vchasno-ui-title h4 {\n    font-size: 16px;\n    font-weight: 400;\n    line-height: 20px;\n}\n\nh5.vchasno-ui-title,\n.vchasno-ui-title h5 {\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 14px;\n}\n";
 styleInject(css_248z$e);
 
 var Title = React$1.forwardRef(function (_a, ref) {
-    var _b = _a.level, level = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.ellipsis, ellipsis = _c === void 0 ? false : _c, textAlign = _a.textAlign, _d = _a.pretty, pretty = _d === void 0 ? true : _d, rest = __rest(_a, ["level", "className", "ellipsis", "textAlign", "pretty"]);
+    var _b = _a.level, level = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.ellipsis, ellipsis = _c === void 0 ? false : _c, textAlign = _a.textAlign, _d = _a.pretty, pretty = _d === void 0 ? true : _d, dataQa = _a.dataQa, rest = __rest(_a, ["level", "className", "ellipsis", "textAlign", "pretty", "dataQa"]);
     var classes = cn('vchasno-ui-title', className, { '--ellipsis': ellipsis, '--pretty': pretty }, textAlign && "--text-".concat(textAlign));
     switch (level) {
         case 2:
-            return React$1.createElement("h2", __assign({}, rest, { ref: ref, className: classes }));
+            return React$1.createElement("h2", __assign({}, rest, { ref: ref, "data-qa": dataQa, className: classes }));
         case 3:
-            return React$1.createElement("h3", __assign({}, rest, { ref: ref, className: classes }));
+            return React$1.createElement("h3", __assign({}, rest, { ref: ref, "data-qa": dataQa, className: classes }));
         case 4:
-            return React$1.createElement("h4", __assign({}, rest, { ref: ref, className: classes }));
+            return React$1.createElement("h4", __assign({}, rest, { ref: ref, "data-qa": dataQa, className: classes }));
         case 5:
-            return React$1.createElement("h5", __assign({}, rest, { ref: ref, className: classes }));
+            return React$1.createElement("h5", __assign({}, rest, { ref: ref, "data-qa": dataQa, className: classes }));
         case 1:
         default:
-            return React$1.createElement("h1", __assign({}, rest, { ref: ref, className: classes }));
+            return React$1.createElement("h1", __assign({}, rest, { ref: ref, "data-qa": dataQa, className: classes }));
     }
 });
 Title.displayName = 'Title';
@@ -390,8 +390,8 @@ var css_248z$d = ".vchasno-ui-paragraph {\n    color: var(--vchasno-ui-text-prim
 styleInject(css_248z$d);
 
 var Paragraph = React$1.forwardRef(function (_a, ref) {
-    var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, textAlign = _a.textAlign, ellipsisLine = _a.ellipsisLine, rest = __rest(_a, ["ellipsis", "children", "className", "textAlign", "ellipsisLine"]);
-    return (React$1.createElement("p", __assign({ ref: ref, title: ellipsis && typeof children === 'string' ? children : undefined, className: cn('vchasno-ui-paragraph', className, { '--ellipsis': ellipsis, '--ellipsis-line': ellipsisLine !== undefined }, textAlign && "--text-".concat(textAlign)) }, rest, { style: ellipsisLine ? { WebkitLineClamp: ellipsisLine } : undefined }), children));
+    var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, textAlign = _a.textAlign, ellipsisLine = _a.ellipsisLine, dataQa = _a.dataQa, rest = __rest(_a, ["ellipsis", "children", "className", "textAlign", "ellipsisLine", "dataQa"]);
+    return (React$1.createElement("p", __assign({ "data-qa": dataQa, ref: ref, title: ellipsis && typeof children === 'string' ? children : undefined, className: cn('vchasno-ui-paragraph', className, { '--ellipsis': ellipsis, '--ellipsis-line': ellipsisLine !== undefined }, textAlign && "--text-".concat(textAlign)) }, rest, { style: ellipsisLine ? { WebkitLineClamp: ellipsisLine } : undefined }), children));
 });
 Paragraph.displayName = 'Paragraph';
 
@@ -2793,8 +2793,8 @@ var css_248z$c = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrappe
 styleInject(css_248z$c);
 
 var TextAreaInput = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, minRows = _a.minRows, maxRows = _a.maxRows, textareaClassName = _a.textareaClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "minRows", "maxRows", "textareaClassName", "labelProps"]);
-    return (React$1.createElement(Input, { required: required, wide: wide, className: cn(className, 'vchasno-ui-textarea-input-container'), loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, labelProps: labelProps, startElement: startElement },
+    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, minRows = _a.minRows, maxRows = _a.maxRows, textareaClassName = _a.textareaClassName, labelProps = _a.labelProps, dataQa = _a.dataQa, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "minRows", "maxRows", "textareaClassName", "labelProps", "dataQa"]);
+    return (React$1.createElement(Input, { dataQa: dataQa, required: required, wide: wide, className: cn(className, 'vchasno-ui-textarea-input-container'), loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, labelProps: labelProps, startElement: startElement },
         React$1.createElement(TextareaAutosize, __assign({}, rest, { ref: ref, minRows: minRows, maxRows: maxRows, required: required, disabled: disabled, className: cn('vchasno-ui-textarea-input', textareaClassName) }))));
 });
 TextAreaInput.displayName = 'TextAreaInput';
@@ -2811,7 +2811,7 @@ var spinnerSizeMap = {
     lg: 36,
 };
 var Switch = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, label = _a.label, onChange = _a.onChange, onChecked = _a.onChecked, value = _a.value, _b = _a.defaultChecked, defaultChecked = _b === void 0 ? false : _b, disabled = _a.disabled, loading = _a.loading, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, rest = __rest(_a, ["className", "label", "onChange", "onChecked", "value", "defaultChecked", "disabled", "loading", "id", "size"]);
+    var className = _a.className, label = _a.label, onChange = _a.onChange, onChecked = _a.onChecked, value = _a.value, _b = _a.defaultChecked, defaultChecked = _b === void 0 ? false : _b, disabled = _a.disabled, loading = _a.loading, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, dataQa = _a.dataQa, rest = __rest(_a, ["className", "label", "onChange", "onChecked", "value", "defaultChecked", "disabled", "loading", "id", "size", "dataQa"]);
     var _d = React$1.useState(defaultChecked), checked = _d[0], setChecked = _d[1];
     var isFullParentControlled = typeof value === 'boolean';
     var inputChecked = isFullParentControlled ? value : checked;
@@ -2822,7 +2822,7 @@ var Switch = React$1.forwardRef(function (_a, ref) {
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
         onChecked === null || onChecked === void 0 ? void 0 : onChecked(event.target.checked, event);
     };
-    return (React$1.createElement("label", { className: cn('vchasno-ui-switch', "--".concat(size), {
+    return (React$1.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-switch', "--".concat(size), {
             'vchasno-ui-switch__active': inputChecked,
             'vchasno-ui-switch__disabled': disabled,
         }, className) },
@@ -2836,12 +2836,12 @@ Switch.displayName = 'Switch';
 var css_248z$9 = ".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(--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(--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(--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";
 styleInject(css_248z$9);
 
-var css_248z$8 = ".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, #3069fe);\n    outline: 2px solid var(--vchasno-ui-checkbox-outline-color, #d9eaff);\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";
+var css_248z$8 = ".vchasno-ui-checkbox {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n    gap: 8px;\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: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, #3069fe);\n    outline: 2px solid var(--vchasno-ui-checkbox-outline-color, #d9eaff);\n}\n\n.vchasno-ui-checkbox > input:disabled:checked + .vchasno-ui-checkbox__box {\n    border-color: var(--vchasno-ui-checkbox-disabled-bg, #b6cadb);\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";
 styleInject(css_248z$8);
 
 var Checkbox = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, label = _a.label, partial = _a.partial, disabled = _a.disabled, loading = _a.loading, rest = __rest(_a, ["className", "label", "partial", "disabled", "loading"]);
-    return (React$1.createElement("label", { className: cn('vchasno-ui-checkbox', className, {
+    var className = _a.className, label = _a.label, partial = _a.partial, disabled = _a.disabled, loading = _a.loading, dataQa = _a.dataQa, rest = __rest(_a, ["className", "label", "partial", "disabled", "loading", "dataQa"]);
+    return (React$1.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-checkbox', className, {
             '--loading': loading,
             '--disabled': disabled,
         }) },
@@ -13055,10 +13055,10 @@ styled(function (_a) {
     var _a;
     return (_a = {},
         _a["& .".concat(tooltipClasses.arrow)] = {
-            color: '#333',
+            color: 'rgba(0, 0, 0, 0.9)',
         },
         _a["& .".concat(tooltipClasses.tooltip)] = {
-            backgroundColor: '#333',
+            backgroundColor: 'rgba(0, 0, 0, 0.9)',
             fontSize: '14px',
             color: '#fff',
             padding: '10px',