@vchasno/ui-kit 0.3.28 → 0.3.30

package/dist/index.d.ts

@@ -5,19 +5,6 @@ import * as _mui_system from '@mui/system';
 import * as _mui_material_styles from '@mui/material/styles';
 import { TooltipProps } from '@mui/material/Tooltip';
 
-interface FlexBoxProps extends HTMLAttributes<HTMLElement> {
-    className?: string;
-    tagName?: keyof HTMLElementTagNameMap;
-    direction?: React.CSSProperties['flexDirection'];
-    gap?: number;
-    grow?: React.CSSProperties['flexGrow'];
-    shrink?: React.CSSProperties['flexShrink'];
-    wrap?: React.CSSProperties['flexWrap'];
-    align?: React.CSSProperties['alignItems'];
-    justify?: React.CSSProperties['justifyContent'];
-}
-declare const FlexBox: React.ForwardRefExoticComponent<FlexBoxProps & React.RefAttributes<HTMLElement>>;
-
 interface Sizable {
     size: 'sm' | 'md' | 'lg';
 }
@@ -42,14 +29,31 @@ interface EllipsisText {
     /** для скорочення тексту і виведення 3 точок */
     ellipsis?: boolean;
 }
+interface DataQa {
+    /** для тестування */
+    dataQa?: string;
+}
 interface TextAlign {
     /** для центрування тексту **/
     textAlign?: 'center' | 'start' | 'end' | 'justify';
 }
 type VchasnoProduct = 'edo' | 'kep' | 'kasa' | 'edi' | 'ttn' | 'dm';
 
+interface FlexBoxProps extends HTMLAttributes<HTMLElement>, DataQa {
+    className?: string;
+    tagName?: keyof HTMLElementTagNameMap;
+    direction?: React.CSSProperties['flexDirection'];
+    gap?: number;
+    grow?: React.CSSProperties['flexGrow'];
+    shrink?: React.CSSProperties['flexShrink'];
+    wrap?: React.CSSProperties['flexWrap'];
+    align?: React.CSSProperties['alignItems'];
+    justify?: React.CSSProperties['justifyContent'];
+}
+declare const FlexBox: React.ForwardRefExoticComponent<FlexBoxProps & React.RefAttributes<HTMLElement>>;
+
 type ButtonTheme = 'primary' | 'secondary' | 'transparent' | 'light' | 'danger' | 'pink';
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable & LoadingFeedback & DataQa> {
     className?: string;
     theme?: ButtonTheme;
     outline?: boolean;
@@ -57,7 +61,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<S
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
-interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback & DataQa> {
     className?: string;
     disabled?: boolean;
     required?: boolean;
@@ -75,7 +79,7 @@ interface InputMetaProps extends Partial<WithHint & ErrorFeedback> {
 }
 declare const InputMeta: React.FC<InputMetaProps>;
 
-interface MaskInputProps extends MaskedInputProps, Omit<InputProps, 'children'> {
+interface MaskInputProps extends MaskedInputProps, Omit<InputProps, 'children'>, DataQa {
     inputClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
 }
@@ -95,13 +99,13 @@ interface PaginationProps {
 }
 declare const Pagination: React.FC<PaginationProps>;
 
-interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputProps, 'children'> {
+interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputProps, 'children'>, DataQa {
     inputClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
 }
 declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 
-interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText {
+interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText, DataQa {
     type?: TextType;
     code?: boolean;
     underline?: boolean;
@@ -112,20 +116,21 @@ interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText {
 }
 declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
 
-interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement> {
+interface TitleProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLHeadingElement>, DataQa {
     level?: 1 | 2 | 3 | 4 | 5;
     className?: string;
+    pretty?: boolean;
 }
 declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
 
-interface ParagraphProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLParagraphElement> {
+interface ParagraphProps extends EllipsisText, TextAlign, DataQa, HTMLAttributes<HTMLParagraphElement> {
     className?: string;
     children: React.ReactNode;
     ellipsisLine?: number;
 }
 declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
 
-interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'>, Omit<InputProps, 'children'> {
+interface TextAreaInputProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'>, Omit<InputProps, 'children'>, DataQa {
     textareaClassName?: string;
     labelProps?: InputHTMLAttributes<HTMLLabelElement>;
     minRows?: number;
@@ -135,7 +140,7 @@ declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps
 
 type AlertType = 'error' | 'warning' | 'success' | 'info' | 'config';
 type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success' | 'config';
-interface AlertProps {
+interface AlertProps extends DataQa {
     type?: AlertType;
     icon?: IconType;
     customIcon?: React.ReactNode;
@@ -166,7 +171,7 @@ interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare const Spinner: React.FC<SpinnerProps>;
 
-interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback>, Partial<Sizable> {
+interface SwitchProps extends HTMLAttributes<HTMLInputElement>, DataQa, Partial<LoadingFeedback>, Partial<Sizable> {
     className?: string;
     label?: string;
     value?: boolean;
@@ -194,7 +199,7 @@ interface TabsProps<T> {
 }
 declare const Tabs: <T extends string>({ onChange, items, defaultActiveKey, activeTab, className, isPending, }: TabsProps<T>) => React.JSX.Element;
 
-interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback & DataQa> {
     className?: string;
     label?: string;
     disabled?: boolean;

package/dist/index.js

@@ -221,8 +221,8 @@ var css_248z$n = ".vchasno-ui-flex-box {\n    display: flex;\n    max-width: 100
 styleInject(css_248z$n);
 
 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';
 
@@ -236,12 +236,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$l = ".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$l = ".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$l);
 
 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,
@@ -278,19 +278,19 @@ var LabelText = function (_a) {
         React$1.createElement("sup", null, "*")));
 };
 
-var css_248z$i = ".vchasno-ui-input {\n    display: inline-flex;\n    max-width: 100%;\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    min-height: 50px;\n    box-sizing: border-box;\n    align-items: center;\n    padding-right: 33px;\n    padding-left: 16px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    outline: solid 3px transparent;\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: var(--vchasno-ui-input-bg-color-disabled);\n    color: var(--vchasno-ui-input-font-color-disabled);\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    outline-color: var(--vchasno-ui-input-outline-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    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
+var css_248z$i = ".vchasno-ui-input {\n    display: inline-flex;\n    max-width: 100%;\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    min-height: 50px;\n    box-sizing: border-box;\n    align-items: center;\n    padding-right: 33px;\n    padding-left: 16px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    outline: solid 3px transparent;\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    margin-right: 5px;\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: var(--vchasno-ui-input-bg-color-disabled);\n    color: var(--vchasno-ui-input-font-color-disabled);\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    outline-color: var(--vchasno-ui-input-outline-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    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
 styleInject(css_248z$i);
 
 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,
             '--error': error,
         }, className) }, labelProps),
         React$1.createElement("span", { className: "vchasno-ui-input__wrapper" },
-            React$1.createElement("span", { className: "vchasno-ui-input__wrapper__start-element" }, startElement),
+            startElement && (React$1.createElement("span", { className: "vchasno-ui-input__wrapper__start-element" }, startElement)),
             children,
             React$1.createElement(LabelText, null, label),
             React$1.createElement("span", { className: "vchasno-ui-input__feedback" }, loading && React$1.createElement(Spinner, { height: "100%" })),
@@ -312,8 +312,8 @@ var css_248z$h = ".vchasno-ui-mask-input {\n    position: relative;\n    font-si
 styleInject(css_248z$h);
 
 var MaskInput = 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, inputClassName = _a.inputClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps"]);
-    return (React$1.createElement(Input, { required: required, wide: wide, className: className, 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, inputClassName = _a.inputClassName, labelProps = _a.labelProps, dataQa = _a.dataQa, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "inputClassName", "labelProps", "dataQa"]);
+    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, labelProps: labelProps, startElement: startElement },
         React$1.createElement(MaskedInput, __assign({}, rest, { required: required, disabled: disabled, className: cn('vchasno-ui-mask-input', inputClassName) }))));
 };
 
@@ -398,9 +398,9 @@ var css_248z$f = ".vchasno-ui-text-input {\n    font-size: var(--vchasno-ui-inpu
 styleInject(css_248z$f);
 
 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';
@@ -418,7 +418,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';
@@ -432,7 +432,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,
@@ -443,24 +443,24 @@ Text.displayName = 'Text';
 var css_248z$d = ".--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$d);
 
-var css_248z$c = ".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";
+var css_248z$c = ".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";
 styleInject(css_248z$c);
 
 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, rest = __rest(_a, ["level", "className", "ellipsis", "textAlign"]);
-    var classes = cn('vchasno-ui-title', className, { '--ellipsis': ellipsis }, textAlign && "--text-".concat(textAlign));
+    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';
@@ -469,8 +469,8 @@ var css_248z$b = ".vchasno-ui-paragraph {\n    color: var(--vchasno-ui-text-prim
 styleInject(css_248z$b);
 
 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';
 
@@ -2872,8 +2872,8 @@ var css_248z$a = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrappe
 styleInject(css_248z$a);
 
 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';
@@ -2890,7 +2890,7 @@ var iconMap = {
     config: function () { return React$1.createElement(React$1.Fragment, null, "\u2699\uFE0F"); },
 };
 var Alert = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'info' : _b, _c = _a.leftBorder, leftBorder = _c === void 0 ? true : _c, _d = _a.hideIcon, hideIcon = _d === void 0 ? false : _d, _e = _a.scrollIntoView, scrollIntoView = _e === void 0 ? false : _e, icon = _a.icon, className = _a.className, children = _a.children, onClose = _a.onClose, wide = _a.wide, _f = _a.close, close = _f === void 0 ? false : _f, customIcon = _a.customIcon;
+    var _b = _a.type, type = _b === void 0 ? 'info' : _b, _c = _a.leftBorder, leftBorder = _c === void 0 ? true : _c, _d = _a.hideIcon, hideIcon = _d === void 0 ? false : _d, _e = _a.scrollIntoView, scrollIntoView = _e === void 0 ? false : _e, icon = _a.icon, className = _a.className, children = _a.children, onClose = _a.onClose, wide = _a.wide, _f = _a.close, close = _f === void 0 ? false : _f, dataQa = _a.dataQa, customIcon = _a.customIcon;
     var iconNode = null;
     if (customIcon) {
         iconNode = React$1.createElement("span", { className: "vchasno-ui-alert__icon-wrapper" }, customIcon);
@@ -2915,7 +2915,7 @@ var Alert = function (_a) {
             });
         }
     }, [scrollIntoView]);
-    return (React$1.createElement("span", { ref: rootRef, className: cn('vchasno-ui-alert', "--".concat(type), { '--close': close }, { '--wide': wide }, { '--left-border': leftBorder }, className) },
+    return (React$1.createElement("span", { "data-qa": dataQa, ref: rootRef, className: cn('vchasno-ui-alert', "--".concat(type), { '--close': close }, { '--wide': wide }, { '--left-border': leftBorder }, className) },
         !hideIcon && iconNode,
         React$1.createElement("div", null, children),
         closeNode));
@@ -2930,7 +2930,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;
@@ -2941,7 +2941,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) },
@@ -3026,8 +3026,8 @@ var css_248z$6 = ".vchasno-ui-checkbox {\n    display: inline-flex;\n    align-i
 styleInject(css_248z$6);
 
 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,
         }) },
@@ -13284,10 +13284,10 @@ var BlackTooltip = 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',