@vchasno/ui-kit 0.2.14 → 0.3.2

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

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from 'react';
+import './Switch.global.css';
+import { LoadingFeedback } from '../types';
+export interface SwitchProps extends HTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
+    className?: string;
+    label?: string;
+    value?: boolean;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChecked?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+export default Switch;

package/dist/Menu/types/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Switch';
+export type { SwitchProps } from './Switch';

package/dist/Menu/types/components/Tabs/Tabs.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import './Tabs.global.css';
+export interface Tab<T> {
+    key: T;
+    children: React.ReactNode;
+    label: string | React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export interface TabsProps<T> {
+    items: Tab<T>[];
+    activeTab?: T;
+    defaultActiveKey?: T;
+    onChange?: (key: T) => void;
+    className?: string;
+    isPending?: boolean;
+}
+declare const Tabs: <T extends string>({ onChange, items, defaultActiveKey, activeTab, className, isPending, }: TabsProps<T>) => React.JSX.Element;
+export default Tabs;

package/dist/Menu/types/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Tabs';
+export type { Tab, TabsProps } from './Tabs';

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

@@ -0,0 +1,14 @@
+import React, { HTMLAttributes } from 'react';
+import { EllipsisText, TextType } from '../types';
+import './Text.global.css';
+export interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText {
+    type?: TextType;
+    code?: boolean;
+    underline?: boolean;
+    del?: boolean;
+    strong?: boolean;
+    className?: string;
+    required?: boolean;
+}
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
+export default Text;

package/dist/Menu/types/components/Text/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Text';
+export type { TextProps } from './Text';

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

@@ -0,0 +1,10 @@
+import React, { InputHTMLAttributes } from 'react';
+import { TextareaAutosizeProps } from 'react-textarea-autosize';
+import { InputProps } from '../Input';
+import './TextAreaInput.global.css';
+export interface TextAreaInputProps extends TextareaAutosizeProps, Omit<InputProps, 'children'> {
+    textareaClassName?: string;
+    labelProps?: InputHTMLAttributes<HTMLLabelElement>;
+}
+declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextAreaInput;

package/dist/Menu/types/components/TextAreaInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextAreaInput';
+export type { TextAreaInputProps } from './TextAreaInput';

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

@@ -0,0 +1,9 @@
+import React, { InputHTMLAttributes } from 'react';
+import type { InputProps } from '../Input';
+import './TextInput.global.css';
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputProps, 'children'> {
+    inputClassName?: string;
+    labelProps?: InputHTMLAttributes<HTMLLabelElement>;
+}
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+export default TextInput;

package/dist/Menu/types/components/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextInput';
+export type { TextInputProps } from './TextInput';

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

@@ -0,0 +1,9 @@
+import React, { HTMLAttributes } from 'react';
+import type { EllipsisText } from '../types';
+import './Title.global.css';
+export interface TitleProps extends EllipsisText, HTMLAttributes<HTMLHeadingElement> {
+    level?: 1 | 2 | 3 | 4 | 5;
+    className?: string;
+}
+export declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export default Title;

package/dist/Menu/types/components/Title/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Title';
+export type { TitleProps } from './Title';

package/dist/Menu/types/components/index.d.ts

@@ -0,0 +1,42 @@
+export { default as FlexBox } from './FlexBox';
+export type { FlexBoxProps } from './FlexBox';
+export { default as Button } from './Button';
+export type { ButtonProps } from './Button';
+export { default as Input } from './Input';
+export type { InputProps } from './Input';
+export { default as InputMeta } from './InputMeta';
+export type { InputMetaProps } from './InputMeta';
+export { default as MaskInput } from './MaskInput';
+export type { MaskInputProps } from './MaskInput';
+export { default as Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+export { default as TextInput } from './TextInput';
+export type { TextInputProps } from './TextInput';
+export { default as Text } from './Text';
+export type { TextProps } from './Text';
+export { default as Title } from './Title';
+export type { TitleProps } from './Title';
+export { default as Paragraph } from './Paragraph';
+export type { ParagraphProps } from './Paragraph';
+export { default as TextAreaInput } from './TextAreaInput';
+export type { TextAreaInputProps } from './TextAreaInput';
+export { default as Alert } from './Alert';
+export type { AlertProps } from './Alert';
+export { default as Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+export { default as Switch } from './Switch';
+export type { SwitchProps } from './Switch';
+export { default as Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';
+export { default as Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { default as PulseDot } from './PulseDot';
+export type { PulseDotProps } from './PulseDot';
+export { default as BubbleBox, composeBubblePath } from './BubbleBox';
+export type { BubbleBoxProps } from './BubbleBox';
+export { default as SvgBorder, composeRoundedBorderPath } from './SvgBorder';
+export type { SvgBorderProps } from './SvgBorder';
+export { default as SplashLogo } from './SplashLogo';
+export type { SplashLogoProps } from './SplashLogo';
+export { default as BlackTooltip } from './BlackTooltip';
+export type { BlackTooltipProps } from './BlackTooltip';

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

@@ -0,0 +1,24 @@
+export interface Sizable {
+    size: 'sm' | 'md' | 'lg';
+}
+export type TextType = 'secondary' | 'success' | 'warning' | 'danger' | 'default' | 'link' | 'likeLink';
+export interface LoadingFeedback {
+    /** індикатор процесу */
+    loading: boolean;
+}
+export interface ErrorFeedback {
+    /** для виведення тексту помилки */
+    error: string;
+}
+export interface WithLabel {
+    /** Лейбл для інпуту */
+    label: string;
+}
+export interface WithHint {
+    /** для виведення тексту підсказки */
+    hint: string;
+}
+export interface EllipsisText {
+    /** для скорочення тексту і виведення 3 точок */
+    ellipsis?: boolean;
+}

package/dist/Menu/types/hooks/useClientRect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const useClientRect: () => {
+    rect: DOMRect | null;
+    ref: React.RefObject<HTMLDivElement>;
+};

package/dist/Menu/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks/useClientRect';

package/dist/Menu/types/utils/react.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Merges multiple refs into a single ref callback.
+ * @see <https://www.jameskerr.blog/posts/react-useref-and-forward-ref/>
+ */
+export declare function mergeRefs<T = HTMLDivElement>(...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>): React.RefCallback<T>;

package/dist/ProjectsPopover/index.cjs.js

@@ -12617,7 +12617,7 @@ var ProductLink = function (_a) {
                 React$1.createElement("h5", { className: "vchasno-ui-ProjectsPopover__box__title" }, titleMap[product]))))));
 };
 
-var css_248z = ".vchasno-ui-ProjectsPopover {\n    display: inline-block;\n    max-width: 440px;\n    padding: 24px 16px 0;\n    border-radius: 3px;\n    background-color: #fff;\n}\n\n.vchasno-ui-ProjectsPopover a:hover {\n    color: unset;\n    text-decoration: none;\n}\n\n.vchasno-ui-ProjectsPopover--border {\n    border: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-ProjectsPopover__title {\n    width: 100%;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n}\n\n.vchasno-ui-ProjectsPopover__box {\n    display: inline-flex;\n    min-width: 198px;\n    min-height: 80px;\n    box-sizing: border-box;\n    align-items: center;\n    padding: 20px;\n    border: 1px solid #dbe5ea;\n    border-radius: 8px;\n    color: var(--vchasno-ui-text-primary-color);\n    gap: 8px;\n    text-decoration: none;\n    transition: background-color 0.3s;\n}\n\n.vchasno-ui-ProjectsPopover__box__icon {\n    width: 40px;\n    height: 40px;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    border-radius: 50%;\n}\n\n.vchasno-ui-ProjectsPopover__box:hover {\n    background-color: #f3f6f8;\n    cursor: pointer;\n}\n\n.vchasno-ui-ProjectsPopover__box__title {\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 26px;\n}\n\n.vchasno-ui-ProjectsPopover__footer {\n    display: flex;\n    min-height: 42px;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0 0 4px 4px;\n    margin: 0 -16px;\n    background: #ecf4ff;\n    color: #6b8091;\n    font-size: 12px;\n    font-weight: 400;\n}\n\n.vchasno-ui-ProjectsPopover .vchasno-ui-ProjectsPopover__footer > a {\n    color: #0890de;\n    text-decoration: none;\n}\n";
+var css_248z = ".vchasno-ui-ProjectsPopover {\n    display: inline-block;\n    max-width: 440px;\n    padding: 24px 16px 0;\n    border-radius: 3px;\n    background-color: #fff;\n}\n\n.vchasno-ui-ProjectsPopover a:hover {\n    color: unset;\n    text-decoration: none;\n}\n\n.vchasno-ui-ProjectsPopover--border {\n    border: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-ProjectsPopover__title {\n    width: 100%;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n}\n\n.vchasno-ui-ProjectsPopover__box {\n    display: inline-flex;\n    min-width: 198px;\n    min-height: 80px;\n    box-sizing: border-box;\n    align-items: center;\n    padding: 20px;\n    border: 1px solid #dbe5ea;\n    border-radius: 8px;\n    color: var(--vchasno-ui-text-primary-color);\n    gap: 8px;\n    text-decoration: none;\n    transition: background-color 0.3s;\n}\n\n.vchasno-ui-ProjectsPopover__box__icon {\n    width: 40px;\n    height: 40px;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    border-radius: 50%;\n}\n\n.vchasno-ui-ProjectsPopover__box:hover {\n    background-color: #f3f6f8;\n    cursor: pointer;\n}\n\n.vchasno-ui-ProjectsPopover__box__title {\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 26px;\n}\n\n.vchasno-ui-ProjectsPopover .vchasno-ui-ProjectsPopover__footer {\n    display: flex;\n    min-height: 42px;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0 0 4px 4px;\n    margin: 0 -16px;\n    background: #ecf4ff;\n    color: #6b8091;\n    font-size: 12px;\n    font-weight: 400;\n}\n\n.vchasno-ui-ProjectsPopover .vchasno-ui-ProjectsPopover__footer > a {\n    color: #0890de;\n    text-decoration: none;\n}\n";
 styleInject(css_248z);
 
 var ProjectsPopover = function (_a) {

package/dist/ProjectsPopover/index.js

@@ -12597,7 +12597,7 @@ var ProductLink = function (_a) {
                 React__default.createElement("h5", { className: "vchasno-ui-ProjectsPopover__box__title" }, titleMap[product]))))));
 };
 
-var css_248z = ".vchasno-ui-ProjectsPopover {\n    display: inline-block;\n    max-width: 440px;\n    padding: 24px 16px 0;\n    border-radius: 3px;\n    background-color: #fff;\n}\n\n.vchasno-ui-ProjectsPopover a:hover {\n    color: unset;\n    text-decoration: none;\n}\n\n.vchasno-ui-ProjectsPopover--border {\n    border: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-ProjectsPopover__title {\n    width: 100%;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n}\n\n.vchasno-ui-ProjectsPopover__box {\n    display: inline-flex;\n    min-width: 198px;\n    min-height: 80px;\n    box-sizing: border-box;\n    align-items: center;\n    padding: 20px;\n    border: 1px solid #dbe5ea;\n    border-radius: 8px;\n    color: var(--vchasno-ui-text-primary-color);\n    gap: 8px;\n    text-decoration: none;\n    transition: background-color 0.3s;\n}\n\n.vchasno-ui-ProjectsPopover__box__icon {\n    width: 40px;\n    height: 40px;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    border-radius: 50%;\n}\n\n.vchasno-ui-ProjectsPopover__box:hover {\n    background-color: #f3f6f8;\n    cursor: pointer;\n}\n\n.vchasno-ui-ProjectsPopover__box__title {\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 26px;\n}\n\n.vchasno-ui-ProjectsPopover__footer {\n    display: flex;\n    min-height: 42px;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0 0 4px 4px;\n    margin: 0 -16px;\n    background: #ecf4ff;\n    color: #6b8091;\n    font-size: 12px;\n    font-weight: 400;\n}\n\n.vchasno-ui-ProjectsPopover .vchasno-ui-ProjectsPopover__footer > a {\n    color: #0890de;\n    text-decoration: none;\n}\n";
+var css_248z = ".vchasno-ui-ProjectsPopover {\n    display: inline-block;\n    max-width: 440px;\n    padding: 24px 16px 0;\n    border-radius: 3px;\n    background-color: #fff;\n}\n\n.vchasno-ui-ProjectsPopover a:hover {\n    color: unset;\n    text-decoration: none;\n}\n\n.vchasno-ui-ProjectsPopover--border {\n    border: 1px solid #dbe5ea;\n}\n\n.vchasno-ui-ProjectsPopover__title {\n    width: 100%;\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n}\n\n.vchasno-ui-ProjectsPopover__box {\n    display: inline-flex;\n    min-width: 198px;\n    min-height: 80px;\n    box-sizing: border-box;\n    align-items: center;\n    padding: 20px;\n    border: 1px solid #dbe5ea;\n    border-radius: 8px;\n    color: var(--vchasno-ui-text-primary-color);\n    gap: 8px;\n    text-decoration: none;\n    transition: background-color 0.3s;\n}\n\n.vchasno-ui-ProjectsPopover__box__icon {\n    width: 40px;\n    height: 40px;\n    box-sizing: border-box;\n    flex-shrink: 0;\n    border-radius: 50%;\n}\n\n.vchasno-ui-ProjectsPopover__box:hover {\n    background-color: #f3f6f8;\n    cursor: pointer;\n}\n\n.vchasno-ui-ProjectsPopover__box__title {\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 26px;\n}\n\n.vchasno-ui-ProjectsPopover .vchasno-ui-ProjectsPopover__footer {\n    display: flex;\n    min-height: 42px;\n    align-items: center;\n    justify-content: center;\n    border-radius: 0 0 4px 4px;\n    margin: 0 -16px;\n    background: #ecf4ff;\n    color: #6b8091;\n    font-size: 12px;\n    font-weight: 400;\n}\n\n.vchasno-ui-ProjectsPopover .vchasno-ui-ProjectsPopover__footer > a {\n    color: #0890de;\n    text-decoration: none;\n}\n";
 styleInject(css_248z);
 
 var ProjectsPopover = function (_a) {

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

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

package/dist/ProjectsPopover/types/components/Menu/Menu.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { MenuProps as ReactMenuProps } from '@szhsin/react-menu';
+import './Menu.global.css';
+export interface MenuProps extends ReactMenuProps {
+}
+export declare const Menu: React.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
+    Button: React.ForwardRefExoticComponent<Omit<import("../MenuButton").MenuButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<import("../MenuItem").MenuItemProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+};
+export default _default;

package/dist/ProjectsPopover/types/components/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Menu';
+export type { MenuProps } from './Menu';

package/dist/ProjectsPopover/types/components/MenuButton/MenuButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MenuButtonProps as ReactMenuButtonProps } from '@szhsin/react-menu';
+import './MenuButton.global.css';
+export interface MenuButtonProps extends ReactMenuButtonProps {
+}
+export declare const MenuButton: React.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default MenuButton;

package/dist/ProjectsPopover/types/components/MenuButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MenuButton';
+export type { MenuButtonProps } from './MenuButton';

package/dist/ProjectsPopover/types/components/MenuItem/MenuItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MenuItemProps as ReactMenuItemProps } from '@szhsin/react-menu';
+import './MenuItem.global.css';
+export interface MenuItemProps extends ReactMenuItemProps {
+}
+export declare const MenuItem: React.ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export default MenuItem;

package/dist/ProjectsPopover/types/components/MenuItem/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './MenuItem';
+export type { MenuItemProps } from './MenuItem';

package/dist/ProjectsPopover/types/components/Select/Label.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LabelProps {
+    isFloating: boolean;
+    label: string;
+}
+declare const Label: React.FC<React.PropsWithChildren<LabelProps>>;
+export default Label;

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

@@ -1,39 +1,40 @@
 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 { Option } from './types';
 import './Select.global.css';
 export type SelectOption = Option;
-export interface SelectProps extends ReactSelectProps, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+export interface SelectProps extends ReactSelectProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
     wide?: boolean;
     dataQa?: string;
 }
 declare const Select: React.FC<SelectProps>;
 export declare const SelectComponents: {
-    ClearIndicator: <Option, IsMulti extends boolean, Group extends import("react-select").GroupBase<Option>>(props: import("react-select").ClearIndicatorProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element;
-    Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends import("react-select").GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
-    DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends import("react-select").GroupBase<Option_2>>(props: import("react-select").DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
+    ClearIndicator: <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(props: import("react-select").ClearIndicatorProps<Option, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element;
+    Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
+    DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends GroupBase<Option_2>>(props: import("react-select").DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
     DownChevron: (props: import("react-select/dist/declarations/src/components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
     CrossIcon: (props: import("react-select/dist/declarations/src/components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
-    Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends import("react-select").GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
-    GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends import("react-select").GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
-    IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends import("react-select").GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
-    IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends import("react-select").GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
-    Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends import("react-select").GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
-    LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends import("react-select").GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
-    Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends import("react-select").GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
-    MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends import("react-select").GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
-    MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends import("react-select").GroupBase<Option_11>>(props: import("react-select/dist/declarations/src/components/Menu").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
-    LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends import("react-select").GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
-    NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends import("react-select").GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
-    MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends import("react-select").GroupBase<Option_14>>(props: import("react-select").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
-    MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("react-select").GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
-    MultiValueLabel: <Option_15_1, IsMulti_15_1 extends boolean, Group_15_1 extends import("react-select").GroupBase<Option_15_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15_1, IsMulti_15_1, Group_15_1>) => import("@emotion/react").jsx.JSX.Element;
+    Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
+    GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
+    IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
+    IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
+    Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
+    LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
+    Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
+    MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
+    MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends GroupBase<Option_11>>(props: import("react-select/dist/declarations/src/components/Menu").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
+    LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
+    NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends GroupBase<Option_14>>(props: import("react-select").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueLabel: <Option_15_1, IsMulti_15_1 extends boolean, Group_15_1 extends GroupBase<Option_15_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15_1, IsMulti_15_1, Group_15_1>) => import("@emotion/react").jsx.JSX.Element;
     MultiValueRemove: typeof import("react-select/dist/declarations/src/components/MultiValue").MultiValueRemove;
-    Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends import("react-select").GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
-    Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends import("react-select").GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
-    SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends import("react-select").GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
-    SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends import("react-select").GroupBase<Option_19>>(props: import("react-select").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
-    ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends import("react-select").GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
+    Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
+    Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
+    SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
+    SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends GroupBase<Option_19>>(props: import("react-select").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
+    ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
 };
 export default Select;

package/dist/ProjectsPopover/types/components/Select/customComponents.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { ClearIndicatorProps, DropdownIndicatorProps } from 'react-select';
+import { CustomControlProps } from './types';
 declare const _default: {
     DropdownIndicator: (props: DropdownIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
     LoadingIndicator: () => React.JSX.Element;
     IndicatorSeparator: () => null;
     ClearIndicator: (props: ClearIndicatorProps<unknown, boolean, import("react-select").GroupBase<unknown>>) => React.JSX.Element;
+    Control: (props: CustomControlProps) => React.JSX.Element;
 };
 export default _default;

package/dist/ProjectsPopover/types/components/Select/index.d.ts

@@ -2,4 +2,4 @@ export { default, SelectComponents } from './Select';
 export type { SelectProps } from './Select';
 export { default as SelectCreatable } from './SelectCreatable';
 export type { SelectCreatableProps } from './SelectCreatable';
-export type { Option } from './types';
+export type { Option, CustomControlProps } from './types';

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

@@ -1,4 +1,9 @@
+import { ControlProps } from 'react-select';
+import type { GroupBase } from 'react-select/dist/declarations/src/types';
 export interface Option {
     readonly label: string;
     readonly value: string;
 }
+export interface CustomControlProps extends ControlProps<Option, boolean, GroupBase<Option>> {
+    label?: string;
+}

package/dist/ProjectsPopover/types/components/Snackbar/ActionButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface ActionButtonProps {
+    onClick: () => void;
+}
+declare const ActionButton: React.FC<React.PropsWithChildren<ActionButtonProps>>;
+export default ActionButton;

package/dist/ProjectsPopover/types/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IconProps as ReactToastifyIconProps, ToastContainerProps, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import './Snackbar.global.css';
+import './overrideToastifyVars.css';
+export interface SnackbarProps extends ToastContainerProps {
+}
+export interface SnackbarIconProps extends ReactToastifyIconProps {
+}
+export declare const snackbarToast: typeof toast;
+declare const _default: React.FC<SnackbarProps> & {
+    ActionButton: React.FC<React.PropsWithChildren<import("./ActionButton").ActionButtonProps>>;
+    WithAction: React.FC<{}>;
+};
+export default _default;

package/dist/ProjectsPopover/types/components/Snackbar/WithAction.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const WithAction: React.FC;
+export default WithAction;

package/dist/ProjectsPopover/types/components/Snackbar/index.d.ts

@@ -0,0 +1,2 @@
+export { default, snackbarToast } from './Snackbar';
+export type { SnackbarProps, SnackbarIconProps } from './Snackbar';

package/dist/Select/index.cjs.js

@@ -4608,7 +4608,7 @@ var css$1 = function css(_ref, unstyled) {
     }
   });
 };
-var Control = function Control(props) {
+var Control$1 = function Control(props) {
   var children = props.children,
     isDisabled = props.isDisabled,
     isFocused = props.isFocused,
@@ -4626,7 +4626,7 @@ var Control = function Control(props) {
     "aria-disabled": isDisabled || undefined
   }), children);
 };
-var Control$1 = Control;
+var Control$1$1 = Control$1;
 
 var _excluded$1 = ["data"];
 var groupCSS = function groupCSS(_ref, unstyled) {
@@ -4958,7 +4958,7 @@ var SingleValue$1 = SingleValue;
 
 var components = {
   ClearIndicator: ClearIndicator$1,
-  Control: Control$1,
+  Control: Control$1$1,
   DropdownIndicator: DropdownIndicator$1,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
@@ -7779,7 +7779,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$3 = ".vchasno-ui-meta {\n    display: block;\n    max-width: 100%;\n    height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint,\n.vchasno-ui-meta__error {\n    display: inline-block;\n    overflow: hidden;\n    max-width: inherit;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.vchasno-ui-meta__hint {\n    color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n    color: var(--vchasno-ui-input-color-error);\n}\n";
+var css_248z$3 = ".vchasno-ui-meta {\n    display: block;\n    max-width: 100%;\n    height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n    padding-left: 16px;\n    font-size: calc(var(--vchasno-ui-input-font-size) * 0.8);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 0.9);\n}\n\n.vchasno-ui-meta__hint,\n.vchasno-ui-meta__error {\n    display: inline-block;\n    overflow: hidden;\n    max-width: inherit;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.vchasno-ui-meta__hint {\n    color: var(--vchasno-ui-label-color-default);\n}\n\n.vchasno-ui-meta__error {\n    color: var(--vchasno-ui-input-color-error);\n}\n";
 styleInject(css_248z$3);
 
 var InputMeta = function (_a) {
@@ -7789,9 +7789,19 @@ var InputMeta = function (_a) {
         error && React.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
 };
 
-var css_248z$2 = ".vchasno-ui-label-text {\n    position: relative;\n    display: inline-flex;\n    max-width: 100%;\n    height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    align-self: flex-start;\n    color: var(--vchasno-ui-label-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    gap: 3px;\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    text-overflow: ellipsis;\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    white-space: nowrap;\n}\n\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-label-text sup {\n    position: relative;\n    top: -0.2em;\n    display: none;\n    color: var(--vchasno-ui-input-color-error);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n    vertical-align: top;\n}\n\n[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n    display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n    display: none;\n    color: var(--vchasno-ui-label-color-default);\n    transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n    display: block;\n}\n\n.vchasno-ui-label-text__content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
+var css_248z$2 = ".vchasno-ui-spinner {\n    position: relative;\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n}\n\n.vchasno-ui-spinner__svg {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: auto;\n    animation: spinner-rotate 1.3s linear infinite;\n    inset: 0;\n    transform-origin: center center;\n}\n\n.vchasno-ui-spinner__svg__circle {\n    animation: spinner-rotate-dash 2s ease-in-out infinite;\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n    stroke-linecap: round;\n    stroke-width: 5px;\n}\n\n@keyframes spinner-rotate {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n@keyframes spinner-rotate-dash {\n    0% {\n        stroke-dasharray: 1, 200;\n        stroke-dashoffset: 0;\n    }\n\n    50% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -35px;\n    }\n\n    100% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -124px;\n    }\n}\n";
 styleInject(css_248z$2);
 
+var Spinner = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
+    return (React.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
+        React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
+            React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
+};
+
+var css_248z$1 = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 4px;\n    background-color: #fff;\n    color: var(--vchasno-ui-label-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    gap: 3px;\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    pointer-events: none;\n    text-overflow: ellipsis;\n    transform: translate(0, -50%);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s), top 0.3s, font-size 0.3s;\n    white-space: nowrap;\n}\n\n.vchasno-ui-select .vchasno-ui-label-text {\n    max-width: calc(100% - 40px);\n}\n\n.vchasno-ui-select__floating-label,\n[class^='vchasno-ui-']:not(:placeholder-shown) + .vchasno-ui-label-text,\n[class^='vchasno-ui-']:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: 0;\n    font-size: 12px;\n}\n\n[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\n[class^='vchasno-ui-']:not(.--disabled).--required .vchasno-ui-label-text:hover {\n    cursor: text;\n}\n\n.vchasno-ui-label-text sup {\n    position: relative;\n    top: -0.2em;\n    display: none;\n    color: var(--vchasno-ui-input-color-error);\n    font-size: calc(var(--vchasno-ui-input-font-size) * 1.4);\n    vertical-align: top;\n}\n\n[class^='vchasno-ui-'].--required .vchasno-ui-label-text sup {\n    display: inline-block;\n}\n\n.vchasno-ui-label-text__title-icon {\n    display: none;\n    color: var(--vchasno-ui-label-color-default);\n    transform: scale(0.8);\n}\n\n.vchasno-ui-input[title] .vchasno-ui-label-text__title-icon {\n    display: block;\n}\n\n.vchasno-ui-label-text__content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
+styleInject(css_248z$1);
+
 var LabelText = function (_a) {
     var className = _a.className, children = _a.children;
     return (React.createElement("span", { className: cn('vchasno-ui-label-text', className) },
@@ -7803,14 +7813,9 @@ var LabelText = function (_a) {
         React.createElement("sup", null, "*")));
 };
 
-var css_248z$1 = ".vchasno-ui-spinner {\n    position: relative;\n    display: inline-block;\n    width: 20px;\n    height: 20px;\n}\n\n.vchasno-ui-spinner__svg {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: auto;\n    animation: spinner-rotate 1.3s linear infinite;\n    inset: 0;\n    transform-origin: center center;\n}\n\n.vchasno-ui-spinner__svg__circle {\n    animation: spinner-rotate-dash 2s ease-in-out infinite;\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n    stroke-linecap: round;\n    stroke-width: 5px;\n}\n\n@keyframes spinner-rotate {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n\n@keyframes spinner-rotate-dash {\n    0% {\n        stroke-dasharray: 1, 200;\n        stroke-dashoffset: 0;\n    }\n\n    50% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -35px;\n    }\n\n    100% {\n        stroke-dasharray: 89, 200;\n        stroke-dashoffset: -124px;\n    }\n}\n";
-styleInject(css_248z$1);
-
-var Spinner = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, width = _a.width, height = _a.height, className = _a.className, style = _a.style;
-    return (React.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
-        React.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
-            React.createElement("circle", { className: "vchasno-ui-spinner__svg__circle", cx: "50", cy: "50", r: "20", fill: "none", stroke: color, strokeWidth: "2", strokeMiterlimit: "10" }))));
+var Label = function (_a) {
+    var label = _a.label, isFloating = _a.isFloating;
+    return (React.createElement(LabelText, { className: cn(isFloating && 'vchasno-ui-select__floating-label') }, label));
 };
 
 var IndicatorSeparator = function () { return null; };
@@ -7825,25 +7830,37 @@ var ClearIndicator = function (props) {
         React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { d: "M9.41406 8L15.707 1.70703C16.0977 1.31641 16.0977 0.683593 15.707 0.292969C15.3164 -0.0976552 14.6836 -0.0976562 14.293 0.292969L8 6.58594L1.70703 0.292969C1.31641 -0.0976562 0.683593 -0.0976562 0.292969 0.292969C-0.0976552 0.683594 -0.0976562 1.31641 0.292969 1.70703L6.58594 8L0.292969 14.293C-0.0976562 14.6836 -0.0976562 15.3164 0.292969 15.707C0.488281 15.9023 0.744141 16 1 16C1.25586 16 1.51172 15.9023 1.70703 15.707L8 9.41406L14.293 15.707C14.4883 15.9023 14.7441 16 15 16C15.2559 16 15.5117 15.9023 15.707 15.707C16.0977 15.3164 16.0977 14.6836 15.707 14.293L9.41406 8Z", fill: "#333333" }))));
 };
-var customComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator };
+var Control = function (props) {
+    return (React.createElement(React.Fragment, null,
+        props.label && (React.createElement(Label, { isFloating: props.isFocused || props.hasValue, label: props.label })),
+        React.createElement(components.Control, __assign({}, props))));
+};
+var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator, Control: Control };
 
 var noOptionsMessageDefault = function () { return React.createElement("span", null, "\u041D\u0435 \u043C\u0430\u0454 \u043E\u043F\u0446\u0456\u0439"); };
 var loadingMessageDefault = function () { return React.createElement("span", null, "\u0417\u0430\u0432\u0430\u043D\u0442\u0430\u0436\u0435\u043D\u043D\u044F..."); };
 var defaultProps = { noOptionsMessageDefault: noOptionsMessageDefault, loadingMessageDefault: loadingMessageDefault };
 
-var css_248z = ".vchasno-ui-select {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n    min-width: 200px;\n    min-height: 40px;\n    border-color: var(--vchasno-ui-input-border-color-default);\n    border-radius: 3px;\n    font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n    opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n    transition:\n        opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n    background-color: #f3f6f8;\n    opacity: 0.8;\n    pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 3px;\n    margin-top: -1px;\n    margin-bottom: -1px;\n    box-shadow: none;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n    border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n    border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n    border: 1px solid #ff5937;\n    background-color: var(--vchasno-ui-input-bg-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n    border-color: #ff5937;\n}\n\n.vchasno-ui-select\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control:hover\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n    border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n    box-shadow: none;\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n    padding: 3px;\n    border-radius: 3px;\n    color: var(--vchasno-ui-input-font-color);\n    outline: 3px solid transparent;\n    transition:\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n    background-color: rgb(0 0 0 / 10%);\n    cursor: pointer;\n    outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n    transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n    cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n    padding-right: 5px;\n}\n";
+var css_248z = ".vchasno-ui-select {\n    display: inline-flex;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-select.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control {\n    min-width: 200px;\n    min-height: 50px;\n    border-color: var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;\n    outline: solid 3px transparent;\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__control {\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    background-color: #f3f6f8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-disabled {\n    opacity: 0.8;\n}\n\n.vchasno-ui-select .vchasno-ui-select__option {\n    transition:\n        opacity var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--disabled .vchasno-ui-select__option {\n    background-color: #f3f6f8;\n    opacity: 0.8;\n    pointer-events: none;\n}\n\n.vchasno-ui-select .vchasno-ui-select__menu {\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    margin-top: 4px;\n    margin-bottom: -1px;\n    box-shadow: none;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control--menu-is-open {\n    border-color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control,\n.vchasno-ui-select.--error:hover .vchasno-ui-select__control--menu-is-open {\n    border: 1px solid #ff5937;\n    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-select .vchasno-ui-select__control:hover {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-input-font-color);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control:hover {\n    border-color: #ff5937;\n}\n\n.vchasno-ui-select\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: var(--vchasno-ui-select-menu-border-color, #6b5fff);\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control--menu-is-open\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__dropdown-indicator:hover,\n.vchasno-ui-select.--error\n    .vchasno-ui-select__control:hover\n    .vchasno-ui-select__dropdown-indicator {\n    color: #ff5937;\n}\n\n.vchasno-ui-select.--error .vchasno-ui-select__control.vchasno-ui-select__control--menu-is-open,\n.vchasno-ui-select.--error .vchasno-ui-select__control--menu-is-open + .vchasno-ui-select__menu {\n    border: 1px solid #ff5937;\n}\n\n.vchasno-ui-select .vchasno-ui-select__control.vchasno-ui-select__control--is-focused {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n    box-shadow: none;\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-select .vchasno-ui-select__placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    font-weight: 400;\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator {\n    padding: 3px;\n    border-radius: 3px;\n    color: var(--vchasno-ui-input-font-color);\n    outline: 3px solid transparent;\n    transition:\n        outline-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator:hover {\n    background-color: rgb(0 0 0 / 10%);\n    cursor: pointer;\n    outline-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-select .vchasno-ui-select__clear-indicator svg {\n    transform: scale(0.6);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option--is-selected,\n.vchasno-ui-select .vchasno-ui-select__option--is-focused,\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    color: var(--vchasno-ui-select-option-color-selected);\n}\n\n.vchasno-ui-select .vchasno-ui-select__option:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select.--disabled {\n    cursor: not-allowed;\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value {\n    background-color: var(--vchasno-ui-select-option-bg-selected);\n    outline: 1px solid var(--vchasno-ui-select-menu-border-color, #6b5fff);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove {\n    transition:\n        background-color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-select .vchasno-ui-select__multi-value__remove:hover {\n    cursor: pointer;\n}\n\n.vchasno-ui-select .vchasno-ui-select__indicators {\n    padding-right: 5px;\n}\n\n.vchasno-ui-select .vchasno-ui-select__value-container {\n    padding: 15px 14px;\n}\n";
 styleInject(css_248z);
 
 var Select = function (_a) {
-    var className = _a.className, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, isDisabled = _a.isDisabled, _b = _a.menuPlacement, menuPlacement = _b === void 0 ? 'auto' : _b, _c = _a.noOptionsMessage, noOptionsMessage = _c === void 0 ? defaultProps.noOptionsMessageDefault : _c, _d = _a.loadingMessage, loadingMessage = _d === void 0 ? defaultProps.loadingMessageDefault : _d, _e = _a.placeholder, placeholder = _e === void 0 ? '' : _e, _f = _a.components, components = _f === void 0 ? {} : _f, _g = _a.error, error = _g === void 0 ? '' : _g, dataQa = _a.dataQa, rest = __rest(_a, ["className", "label", "hint", "wide", "required", "loading", "isDisabled", "menuPlacement", "noOptionsMessage", "loadingMessage", "placeholder", "components", "error", "dataQa"]);
+    var className = _a.className, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, isDisabled = _a.isDisabled, _b = _a.menuPlacement, menuPlacement = _b === void 0 ? 'auto' : _b, _c = _a.noOptionsMessage, noOptionsMessage = _c === void 0 ? defaultProps.noOptionsMessageDefault : _c, _d = _a.loadingMessage, loadingMessage = _d === void 0 ? defaultProps.loadingMessageDefault : _d, _e = _a.placeholder, placeholder = _e === void 0 ? ' ' : _e, //need "space" for correct label working
+    _f = _a.components, //need "space" for correct label working
+    components = _f === void 0 ? {} : _f, _g = _a.error, error = _g === void 0 ? '' : _g, dataQa = _a.dataQa, rest = __rest(_a, ["className", "label", "hint", "wide", "required", "loading", "isDisabled", "menuPlacement", "noOptionsMessage", "loadingMessage", "placeholder", "components", "error", "dataQa"]);
     return (React.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-select', {
             '--required': required,
             '--disabled': isDisabled,
             '--wide': wide,
             '--error': error,
         }, className) },
-        React.createElement(LabelText, null, label),
-        React.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign({}, customComponents), components), classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest)),
+        React.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign(__assign({}, CustomComponents), { Control: function (props) { return React.createElement(CustomComponents.Control, __assign({}, props, { label: label })); } }), components), classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest, { styles: {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                control: function (_a) {
+                    _a.outline; var provided = __rest(_a, ["outline"]);
+                    return provided;
+                }, // Removes `outline` with "!important" from the styling
+            } })),
         React.createElement(InputMeta, { hint: hint, error: error })));
 };
 var SelectComponents = components;