@vchasno/ui-kit 0.2.13 → 0.3.0

package/CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.0] - 2024-03-25
+
+## Changed
+
+-   change inputs ui to new design
+-   change select ui to new design
+
 ## [0.2.13] - 2024-03-24
 
 ## Added

package/dist/Datepicker/index.cjs.js

@@ -10305,7 +10305,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) {
@@ -10315,7 +10315,7 @@ var InputMeta = function (_a) {
         error && e.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-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$2);
 
 var LabelText = function (_a) {

package/dist/Datepicker/index.js

@@ -10285,7 +10285,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) {
@@ -10295,7 +10295,7 @@ var InputMeta = function (_a) {
         error && e__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-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$2);
 
 var LabelText = function (_a) {

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

@@ -1,4 +1,8 @@
+import { ControlProps } from 'react-select';
 export interface Option {
     readonly label: string;
     readonly value: string;
 }
+export interface CustomControlProps extends ControlProps {
+    label?: string;
+}

package/dist/Select/index.cjs.js

@@ -4612,7 +4612,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,
@@ -4628,7 +4628,7 @@ var Control = function Control(props) {
     'control--menu-is-open': menuIsOpen
   }), innerProps), children);
 };
-var Control$1 = Control;
+var Control$1$1 = Control$1;
 
 var _excluded$1 = ["data"];
 var groupCSS = function groupCSS(_ref, unstyled) {
@@ -4960,7 +4960,7 @@ var SingleValue$1 = SingleValue;
 
 var components = {
   ClearIndicator: ClearIndicator$1,
-  Control: Control$1,
+  Control: Control$1$1,
   DropdownIndicator: DropdownIndicator$1,
   DownChevron: DownChevron,
   CrossIcon: CrossIcon,
@@ -7676,7 +7676,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) {
@@ -7686,9 +7686,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) },
@@ -7700,14 +7710,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; };
@@ -7722,13 +7727,18 @@ 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) {
@@ -7739,8 +7749,13 @@ var Select = function (_a) {
             '--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;