@vchasno/ui-kit 0.3.28 → 0.3.30

package/dist/Snackbar/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/Snackbar/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/Snackbar/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/Snackbar/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/Snackbar/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/Snackbar/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/Snackbar/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/Snackbar/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/Snackbar/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/Snackbar/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/Snackbar/types/components/Select/customComponents.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
+import { ClearIndicatorProps, DropdownIndicatorProps, MultiValueRemoveProps } from 'react-select';
 declare const _default: {
+    MultiValueRemove: (props: MultiValueRemoveProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
     DropdownIndicator: (props: DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
     LoadingIndicator: () => React.JSX.Element;
     IndicatorSeparator: () => null;

package/dist/Snackbar/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/Snackbar/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/Snackbar/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/Snackbar/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/Snackbar/types/components/Title/Title.d.ts

@@ -1,10 +1,11 @@
 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;
 }
 export declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
 export default Title;

package/dist/Snackbar/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/css/Button.global.css

@@ -11,6 +11,8 @@
     font-weight: 700;
     gap: 5px;
     transition:
+        min-height var(--vchasno-ui-transition-duration-sec, 0.3s),
+        padding var(--vchasno-ui-transition-duration-sec, 0.3s),
         background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
         color var(--vchasno-ui-transition-duration-sec, 0.3s);
     user-select: none;
@@ -33,14 +35,14 @@
 }
 
 .vchasno-ui-button.--md {
-    min-width: 145px;
-    padding: 0 20px;
+    min-width: 40px;
+    padding: 0 24px;
 }
 
 .vchasno-ui-button.--lg {
-    min-width: 200px;
+    min-width: 50px;
     min-height: 50px;
-    padding: 0 20px;
+    padding: 0 32px;
 }
 
 .vchasno-ui-button.--wide {
@@ -61,15 +63,23 @@
 }
 
 .vchasno-ui-button.--secondary {
+    border: 1px solid var(--vchasno-ui-btn-secondary-border-color);
     background-color: var(--vchasno-ui-btn-secondary-bg);
     color: var(--vchasno-ui-btn-secondary-color);
 }
 
 .vchasno-ui-button:disabled.--primary,
 .vchasno-ui-button:disabled.--secondary {
-    border-color: #b6cadb;
     background-color: #b6cadb;
-    color: var(--vchasno-ui-btn-primary-color);
+    color: var(--vchasno-ui-btn-disabled-color);
+}
+
+.vchasno-ui-button:disabled.--primary {
+    background-color: var(--vchasno-ui-btn-primary-disabled-bg);
+}
+
+.vchasno-ui-button:disabled.--secondary {
+    background-color: var(--vchasno-ui-btn-secondary-disabled-bg);
 }
 
 .vchasno-ui-button.--primary:not(:disabled):hover {
@@ -96,7 +106,6 @@
 }
 
 .vchasno-ui-button.--secondary.--outline:not(:disabled):hover {
-    border: 1px solid var(--vchasno-ui-btn-secondary-bg);
     background-color: rgb(0 0 0 / 10%);
     color: var(--vchasno-ui-btn-secondary-bg);
 }

package/dist/css/DatePicker.global.css

@@ -3,6 +3,22 @@
     left: 50px;
 }
 
+.react-datepicker-popper[data-placement^='bottom'] {
+    margin-top: -6px;
+}
+
+.react-datepicker-popper[data-placement^='top'] {
+    margin-top: 6px;
+}
+
+.react-datepicker-popper[data-placement^='right'] {
+    margin-left: -6px;
+}
+
+.react-datepicker-popper[data-placement^='left'] {
+    margin-left: 6px;
+}
+
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,
 .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,
 .react-datepicker__year-read-view--down-arrow,
@@ -45,7 +61,7 @@
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle,
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
     border-top: none;
-    border-bottom-color: #fff;
+    border-bottom-color: var(--vchasno-ui-input-bg-color);
 }
 
 .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before {
@@ -60,7 +76,7 @@
     display: block;
     width: 7px;
     height: 7px;
-    background-color: #fff;
+    background-color: var(--vchasno-ui-input-bg-color);
     content: '';
     transform: rotate(45deg);
 }
@@ -78,7 +94,7 @@
 .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,
 .react-datepicker__year-read-view--down-arrow::before,
 .react-datepicker__month-read-view--down-arrow::before {
-    border-top-color: #fff;
+    border-top-color: var(--vchasno-ui-input-bg-color);
     border-bottom: none;
 }
 
@@ -96,7 +112,7 @@
     display: block;
     width: 7px;
     height: 7px;
-    background-color: #fff;
+    background-color: var(--vchasno-ui-input-bg-color);
     content: '';
     transform: rotate(45deg);
 }
@@ -107,7 +123,7 @@
     padding: 10px;
     border: 1px solid var(--vchasno-ui-calendar-color);
     border-radius: 8px;
-    background-color: #fff;
+    background-color: var(--vchasno-ui-input-bg-color);
     color: var(--vchasno-ui-input-font-color);
     font-size: 0.8rem;
 }
@@ -162,6 +178,7 @@
     height: 30px;
     padding: 5px 10px;
     border-radius: 8px;
+    line-height: 20px;
     white-space: nowrap;
 }
 
@@ -239,27 +256,11 @@
     z-index: 100;
 }
 
-.react-datepicker-popper[data-placement^='bottom'] {
-    margin-top: 8px;
-}
-
-.react-datepicker-popper[data-placement^='top'] {
-    margin-bottom: 8px;
-}
-
-.react-datepicker-popper[data-placement^='right'] {
-    margin-left: 6px;
-}
-
 .react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {
     right: 42px;
     left: auto;
 }
 
-.react-datepicker-popper[data-placement^='left'] {
-    margin-right: 6px;
-}
-
 .react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {
     right: auto;
     left: 42px;
@@ -392,17 +393,39 @@
     top: 0;
     right: 35px;
     bottom: 0;
-    width: 10px;
-    height: 10px;
+    width: 20px;
+    height: 20px;
     border: 0;
     margin: auto;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIGZpbGw9IiNiNmNhZGIiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjUgNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY1IDY1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTM4LjEsMzIuNEw2My4zLDcuM2MxLjYtMS42LDEuNi00LjIsMC01LjdjLTEuNi0xLjYtNC4yLTEuNi01LjcsMEwzMi40LDI2LjdMNy4zLDEuNkM1LjcsMCwzLjEsMCwxLjUsMS42cy0xLjYsNC4yLDAsNS43bDI1LjEsMjUuMUwxLjUsNTcuNmMtMS42LDEuNi0xLjYsNC4yLDAsNS43YzAuOCwwLjgsMS44LDEuMiwyLjksMS4yczIuMS0wLjQsMi45LTEuMmwyNS4xLTI1LjFsMjUuMSwyNS4xYzAuOCwwLjgsMS44LDEuMiwyLjksMS4yYzEsMCwyLjEtMC40LDIuOS0xLjJjMS42LTEuNiwxLjYtNC4yLDAtNS43TDM4LjEsMzIuNHoiLz48L3N2Zz4=');
-    background-repeat: no-repeat;
-    background-size: contain;
+    background-color: transparent;
     cursor: pointer;
     outline: none;
 }
 
+.vchasno-ui-date-picker__wrapper .vchasno-ui-date-picker__custom-close-icon {
+    position: absolute;
+    top: 50%;
+    right: 35px;
+    width: 20px;
+    height: 20px;
+    color: var(--vchasno-ui-input-border-color-default);
+    pointer-events: none;
+    transform: translateY(-50%) scale(0);
+    transition:
+        color var(--vchasno-ui-transition-duration-sec, 0.3s),
+        transform var(--vchasno-ui-transition-duration-sec, 0.3s);
+}
+
+.vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon)
+    .vchasno-ui-date-picker__custom-close-icon {
+    transform: translateY(-50%) scale(1);
+}
+
+.vchasno-ui-date-picker__wrapper:has(.react-datepicker__close-icon:hover)
+    .vchasno-ui-date-picker__custom-close-icon {
+    color: var(--vchasno-ui-calendar-color);
+}
+
 .react-datepicker__today-button {
     padding: 5px 0;
     border-top: 1px solid #aeaeae;
@@ -518,7 +541,7 @@
     border: 1px solid var(--vchasno-ui-input-border-color-default, #b6cadb);
     border-radius: 8px;
     appearance: none;
-    background: #fff;
+    background: var(--vchasno-ui-input-bg-color);
     font-size: var(--vchasno-ui-input-font-size, 0.8rem);
     line-height: calc(var(--vchasno-ui-input-font-size, 0.8rem) * 2);
     outline: 1px solid transparent;
@@ -566,7 +589,7 @@
     font-size: 12px;
 }
 
-.vchasno-ui-date-picker__wrapper > svg {
+.vchasno-ui-date-picker__wrapper > .vchasno-ui-date-picker__custom-calendar-icon {
     position: absolute;
     top: 50%;
     right: 10px;
@@ -575,7 +598,9 @@
     transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
 }
 
-label[class^='vchasno-ui-']:focus-within .vchasno-ui-date-picker__wrapper > svg {
+label[class^='vchasno-ui-']:focus-within
+    .vchasno-ui-date-picker__wrapper
+    > .vchasno-ui-date-picker__custom-calendar-icon {
     color: var(--vchasno-ui-calendar-color);
 }
 

package/dist/css/Input.global.css

@@ -45,6 +45,7 @@
     flex-grow: 0;
     flex-shrink: 0;
     align-items: center;
+    margin-right: 5px;
     font-size: var(--vchasno-ui-input-font-size, 14px);
     line-height: var(--vchasno-ui-input-font-size, 14px);
 }

package/dist/css/Select.global.css

@@ -88,7 +88,7 @@
 .vchasno-ui-select
     .vchasno-ui-select__control--menu-is-open
     .vchasno-ui-select__dropdown-indicator {
-    color: var(--vchasno-ui-select-menu-border-color, #6b5fff);
+    color: var(--vchasno-ui-input-border-color-focused, #6b5fff);
     transition:
         background-color var(--vchasno-ui-transition-duration-sec, 0.3s),
         color var(--vchasno-ui-transition-duration-sec, 0.3s);
@@ -136,23 +136,13 @@
 }
 
 .vchasno-ui-select .vchasno-ui-select__clear-indicator {
-    padding: 3px;
-    border-radius: 3px;
+    padding: 0;
+    border-radius: 4px;
     color: var(--vchasno-ui-input-font-color);
-    outline: 3px solid transparent;
-    transition:
-        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),
-        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);
 }
 
 .vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {
-    background-color: rgb(0 0 0 / 10%);
     cursor: pointer;
-    outline-color: rgb(0 0 0 / 10%);
-}
-
-.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {
-    transform: scale(0.6);
 }
 
 .vchasno-ui-select .vchasno-ui-select__option--is-selected,
@@ -180,19 +170,21 @@
     padding: 0;
     padding-right: 3px;
     background-color: transparent;
+    color: var(--vchasno-ui-label-color-default);
     transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);
 }
 
-.vchasno-ui-select .vchasno-ui-select__multi-value__remove svg {
-    width: 16px;
-    height: 16px;
-}
-
 .vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {
     background-color: transparent;
+    color: var(--vchasno-ui-input-color-error);
     cursor: pointer;
 }
 
+.vchasno-ui-select .vchasno-ui-select__multi-value__remove svg {
+    width: 20px;
+    height: 20px;
+}
+
 .vchasno-ui-select .vchasno-ui-select__indicators {
     padding-right: 5px;
 }
@@ -202,7 +194,7 @@
 }
 
 .vchasno-ui-select .vchasno-ui-select__multi-value__label {
-    padding: 6px;
+    padding: 6px 0 6px 6px;
     font-size: 14px;
 }
 

package/dist/css/Title.global.css

@@ -2,6 +2,10 @@
     color: var(--vchasno-ui-text-primary-color, #333);
 }
 
+.vchasno-ui-title.--pretty {
+    text-wrap: pretty;
+}
+
 .vchasno-ui-title.--ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/css/_theme.css

@@ -3,15 +3,19 @@
     --vchasno-ui-btn-default-bg: transparent;
     --vchasno-ui-btn-default-hover-bg: #e1e4ff;
     --vchasno-ui-btn-default-color: #6b8091;
+    --vchasno-ui-btn-disabled-color: #b6cadb;
     --vchasno-ui-btn-default-hover-color: #604adf;
     --vchasno-ui-btn-primary-bg: #604adf;
+    --vchasno-ui-btn-primary-disabled-bg: #dbe5ea;
     --vchasno-ui-btn-primary-hover-bg: #3f328c;
     --vchasno-ui-btn-primary-color: #fff;
-    --vchasno-ui-btn-secondary-bg: #ffb200;
+    --vchasno-ui-btn-secondary-bg: rgb(255 255 255 / 4%);
+    --vchasno-ui-btn-secondary-disabled-bg: #f3f6f8;
     --vchasno-ui-btn-pink-bg: #ff9498;
     --vchasno-ui-btn-pink-hover-bg: #f4736f;
-    --vchasno-ui-btn-secondary-hover-bg: #f39300;
-    --vchasno-ui-btn-secondary-color: #fff;
+    --vchasno-ui-btn-secondary-border-color: #dbe5ea;
+    --vchasno-ui-btn-secondary-hover-bg: #ecf4ff;
+    --vchasno-ui-btn-secondary-color: #087dc1;
     --vchasno-ui-btn-light-bg: #fff;
     --vchasno-ui-btn-light-hover-bg: rgb(96 74 223 / 20%);
     --vchasno-ui-btn-light-color: #604adf;
@@ -136,3 +140,39 @@
     --vchasno-ui-snackbar-color-progress-bgo: 0.2;
     --vchasno-ui-snackbar-action-button-color: #0094ff;
 }
+
+:root .vchasno-ui-kit-theme-edo {
+    --vchasno-ui-btn-primary-bg: #ffb200;
+    --vchasno-ui-btn-primary-hover-bg: #ff9c01;
+    --vchasno-ui-input-border-color-focused: #ffb200;
+    --vchasno-ui-checkbox-bg-color: #ffb200;
+    --vchasno-ui-checkbox-outline-color: #fff0ce;
+    --vchasno-ui-select-menu-border-color: #ffb200;
+    --vchasno-ui-calendar-color: #ffb200;
+    --vchasno-ui-pagination-border-color: #ffb200;
+    --vchasno-ui-input-outline-color-focused: #fbf4ea;
+    --vchasno-ui-input-border-color-default: #dbe5ea;
+    --vchasno-ui-label-color-default: #6b8091;
+    --vchasno-ui-label-color-focused: #6b8091;
+    --vchasno-ui-input-font-size: 13px;
+    --vchasno-ui-input-font-color: #333;
+    --vchasno-ui-text-primary-color: #333;
+    --vchasno-ui-input-bg-color: #fff;
+    --vchasno-ui-checkbox-font-size: 13px;
+}
+
+:root .vchasno-ui-kit-theme-edi {
+    --vchasno-ui-btn-primary-bg: #00c5ff;
+    --vchasno-ui-btn-primary-hover-bg: #00aee2;
+}
+
+:root .vchasno-ui-kit-theme-kasa,
+:root .vchasno-ui-kit-theme-dm {
+    --vchasno-ui-btn-primary-bg: #e579ff;
+    --vchasno-ui-btn-primary-hover-bg: #c055da;
+}
+
+:root .vchasno-ui-kit-theme-kep {
+    --vchasno-ui-btn-primary-bg: #ff5a5f;
+    --vchasno-ui-btn-primary-hover-bg: #e75459;
+}