@vchasno/ui-kit 0.2.14 → 0.3.2

package/dist/Select/index.d.ts

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

package/dist/Select/index.js

@@ -4586,7 +4586,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,
@@ -4604,7 +4604,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) {
@@ -4936,7 +4936,7 @@ var SingleValue$1 = SingleValue;
 
 var components = {
   ClearIndicator: ClearIndicator$1,
-  Control: Control$1,
+  Control: Control$1$1,
   DropdownIndicator: DropdownIndicator$1,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
@@ -7757,7 +7757,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) {
@@ -7767,9 +7767,19 @@ var InputMeta = function (_a) {
         error && React__default.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__default.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
+        React__default.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
+            React__default.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__default.createElement("span", { className: cn('vchasno-ui-label-text', className) },
@@ -7781,14 +7791,9 @@ var LabelText = function (_a) {
         React__default.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__default.createElement("span", { className: cn('vchasno-ui-spinner', className), style: __assign({ width: width, height: height }, style) },
-        React__default.createElement("svg", { className: "vchasno-ui-spinner__svg", viewBox: "25 25 50 50" },
-            React__default.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__default.createElement(LabelText, { className: cn(isFloating && 'vchasno-ui-select__floating-label') }, label));
 };
 
 var IndicatorSeparator = function () { return null; };
@@ -7803,25 +7808,37 @@ var ClearIndicator = function (props) {
         React__default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
             React__default.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__default.createElement(React__default.Fragment, null,
+        props.label && (React__default.createElement(Label, { isFloating: props.isFocused || props.hasValue, label: props.label })),
+        React__default.createElement(components.Control, __assign({}, props))));
+};
+var CustomComponents = { DropdownIndicator: DropdownIndicator, LoadingIndicator: LoadingIndicator, IndicatorSeparator: IndicatorSeparator, ClearIndicator: ClearIndicator, Control: Control };
 
 var noOptionsMessageDefault = function () { return React__default.createElement("span", null, "\u041D\u0435 \u043C\u0430\u0454 \u043E\u043F\u0446\u0456\u0439"); };
 var loadingMessageDefault = function () { return React__default.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__default.createElement("label", { "data-qa": dataQa, className: cn('vchasno-ui-select', {
             '--required': required,
             '--disabled': isDisabled,
             '--wide': wide,
             '--error': error,
         }, className) },
-        React__default.createElement(LabelText, null, label),
-        React__default.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__default.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign(__assign({}, CustomComponents), { Control: function (props) { return React__default.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__default.createElement(InputMeta, { hint: hint, error: error })));
 };
 var SelectComponents = components;