@vchasno/ui-kit 0.3.23 → 0.3.25

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

@@ -5,6 +5,7 @@ import './Paragraph.global.css';
 export interface ParagraphProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLParagraphElement> {
     className?: string;
     children: React.ReactNode;
+    ellipsisLine?: number;
 }
 declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
 export default Paragraph;

package/dist/Snackbar/types/components/Select/utils.d.ts

@@ -0,0 +1,2 @@
+import { Props as ReactSelectProps } from 'react-select';
+export declare const composeStyles: ReactSelectProps['styles'];

package/dist/css/Input.global.css

@@ -24,7 +24,7 @@
 .vchasno-ui-input__wrapper {
     position: relative;
     display: flex;
-    height: 50px;
+    min-height: 50px;
     box-sizing: border-box;
     align-items: center;
     padding-right: 33px;

package/dist/css/LabelText.global.css

@@ -7,6 +7,7 @@
     max-width: calc(100% - 20px);
     align-self: flex-start;
     padding: 0 4px;
+    border-radius: 4px;
     background-color: var(--vchasno-ui-input-bg-color);
     color: var(--vchasno-ui-label-color-default);
     font-size: var(--vchasno-ui-input-font-size);

package/dist/css/Paragraph.global.css

@@ -7,3 +7,11 @@
     text-overflow: ellipsis;
     white-space: nowrap;
 }
+
+.vchasno-ui-paragraph.--ellipsis-line {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    white-space: unset;
+}

package/dist/css/Select.global.css

@@ -12,7 +12,7 @@
         transform 0.3s;
 }
 
-.vchasno-ui-select.--with-value .vchasno-ui-label-text,
+.vchasno-ui-select:has(.vchasno-ui-select__value-container--has-value) .vchasno-ui-label-text,
 .vchasno-ui-select:focus-within .vchasno-ui-label-text {
     font-size: 12px;
     transform: translate(0, -42px);

package/dist/css/Text.global.css

@@ -71,3 +71,7 @@
     color: var(--vchasno-ui-text-error-color, #ff5937);
     content: '*';
 }
+
+strong.vchasno-ui-text {
+    font-weight: 700;
+}

package/dist/css/TextAreaInput.global.css

@@ -31,11 +31,15 @@
 }
 
 .vchasno-ui-textarea-input + .vchasno-ui-label-text {
-    top: 10px;
-    transform: none;
+    top: 0;
+    transform: translateY(10px);
+    transition:
+        transform var(--vchasno-ui-transition-duration-sec, 0.3s),
+        font-size var(--vchasno-ui-transition-duration-sec, 0.3s);
 }
 
 .vchasno-ui-textarea-input:not(:placeholder-shown) + .vchasno-ui-label-text,
 .vchasno-ui-textarea-input:focus:not(.--disabled) + .vchasno-ui-label-text {
-    top: -12px;
+    top: 0;
+    transform: translateY(-12px);
 }

package/dist/index.d.ts

@@ -122,6 +122,7 @@ declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttri
 interface ParagraphProps extends EllipsisText, TextAlign, HTMLAttributes<HTMLParagraphElement> {
     className?: string;
     children: React.ReactNode;
+    ellipsisLine?: number;
 }
 declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
 

package/dist/index.js

@@ -261,7 +261,7 @@ var InputMeta = function (_a) {
         error && React$1.createElement("span", { className: "vchasno-ui-meta__error" }, error)));
 };
 
-var css_248z$j = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 1;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 0 4px;\n    background-color: var(--vchasno-ui-input-bg-color);\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:\n        color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        top 0.3s,\n        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\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[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\nlabel[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$j = ".vchasno-ui-label-text {\n    position: absolute;\n    z-index: 1;\n    top: 50%;\n    left: 12px;\n    display: inline-flex;\n    max-width: calc(100% - 20px);\n    align-self: flex-start;\n    padding: 0 4px;\n    border-radius: 4px;\n    background-color: var(--vchasno-ui-input-bg-color);\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:\n        color var(--vchasno-ui-transition-duration-sec, 0.3s),\n        top 0.3s,\n        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\nlabel[class^='vchasno-ui-']:not(.--error):focus-within .vchasno-ui-label-text {\n    color: var(--vchasno-ui-label-color-focused);\n}\n\nlabel[class^='vchasno-ui-']:not(.--disabled).--error .vchasno-ui-label-text {\n    color: var(--vchasno-ui-input-color-error);\n}\n\nlabel[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\nlabel[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$j);
 
 var LabelText = function (_a) {
@@ -278,7 +278,7 @@ var LabelText = function (_a) {
         React$1.createElement("sup", null, "*")));
 };
 
-var css_248z$i = ".vchasno-ui-input {\n    display: inline-flex;\n    max-width: 100%;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n    flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n    position: relative;\n    display: flex;\n    height: 50px;\n    box-sizing: border-box;\n    align-items: center;\n    padding-right: 33px;\n    padding-left: 16px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    outline: solid 3px transparent;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n    max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n    display: flex;\n    flex-grow: 0;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: var(--vchasno-ui-input-font-size, 14px);\n    line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: block;\n    width: 18px;\n    height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n    background-color: var(--vchasno-ui-input-bg-color-disabled);\n    color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n    cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-color-error);\n    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
+var css_248z$i = ".vchasno-ui-input {\n    display: inline-flex;\n    max-width: 100%;\n    flex-direction: column;\n    gap: 5px;\n}\n\n.vchasno-ui-input input::placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input .vchasno-ui-text-input,\n.vchasno-ui-input .vchasno-ui-mask-input {\n    flex-grow: 1;\n}\n\n.vchasno-ui-input.--wide {\n    width: 100%;\n}\n\n.vchasno-ui-input__wrapper {\n    position: relative;\n    display: flex;\n    min-height: 50px;\n    box-sizing: border-box;\n    align-items: center;\n    padding-right: 33px;\n    padding-left: 16px;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 8px;\n    background-color: var(--vchasno-ui-input-bg-color);\n    outline: solid 3px transparent;\n    transition: border var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-input__wrapper > input {\n    max-width: 100%;\n}\n\n.vchasno-ui-input__wrapper__start-element {\n    display: flex;\n    flex-grow: 0;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: var(--vchasno-ui-input-font-size, 14px);\n    line-height: var(--vchasno-ui-input-font-size, 14px);\n}\n\n.vchasno-ui-input__feedback {\n    position: absolute;\n    top: 10px;\n    right: 10px;\n    display: block;\n    width: 18px;\n    height: 18px;\n}\n\n.vchasno-ui-input .vchasno-ui-spinner__svg__circle {\n    stroke: var(--vchasno-ui-input-border-color-focused);\n}\n\n.vchasno-ui-input.--disabled .vchasno-ui-input__wrapper {\n    background-color: var(--vchasno-ui-input-bg-color-disabled);\n    color: var(--vchasno-ui-input-font-color-disabled);\n}\n\n.vchasno-ui-input:not(.--disabled) .vchasno-ui-input__wrapper:hover {\n    cursor: text;\n}\n\n.vchasno-ui-input:not(.--disabled):hover .vchasno-ui-input__wrapper,\n.vchasno-ui-input:not(.--disabled):focus-within .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-border-color-focused);\n    outline-color: var(--vchasno-ui-input-outline-color-focused);\n}\n\n.vchasno-ui-input:not(.--disabled).--error .vchasno-ui-input__wrapper {\n    border-color: var(--vchasno-ui-input-color-error);\n    outline-color: var(--vchasno-ui-input-outline-color-error);\n}\n\n.vchasno-ui-input.--disabled,\n.vchasno-ui-input.--disabled * {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
 styleInject(css_248z$i);
 
 var Input = function (_a) {
@@ -405,7 +405,7 @@ var TextInput = React$1.forwardRef(function (_a, ref) {
 });
 TextInput.displayName = 'TextInput';
 
-var css_248z$e = ".vchasno-ui-text {\n    color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-text.--ellipsis {\n    display: inline-block;\n    overflow: hidden;\n    max-width: 100%;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.vchasno-ui-text.--secondary {\n    color: var(--vchasno-ui-text-secondary-color, #6b8091);\n}\n\n.vchasno-ui-text.--success {\n    color: var(--vchasno-ui-text-success-color, #1cb800);\n}\n\n.vchasno-ui-text.--warning {\n    color: var(--vchasno-ui-text-warning-color, #ffb200);\n}\n\n.vchasno-ui-text.--danger {\n    color: var(--vchasno-ui-text-error-color, #ff5937);\n}\n\n.vchasno-ui-text.--code {\n    padding: 0.2em 0.4em 0.1em;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 3px;\n    margin: 0 0.2em;\n    background: hsl(0deg 0% 58.8% / 10%);\n    font-size: 85%;\n}\n\n.vchasno-ui-text.--inherit {\n    font-size: inherit;\n}\n\n.vchasno-ui-text.--link,\n.vchasno-ui-text.--like-link {\n    color: #087dc1;\n    cursor: pointer;\n}\n\n.vchasno-ui-text.--link {\n    text-decoration-line: underline;\n}\n\n.vchasno-ui-text.--normal {\n    font-size: 1rem;\n    line-height: 1.1rem;\n}\n\n.vchasno-ui-text.--small {\n    font-size: 0.8rem;\n    line-height: 0.9rem;\n}\n\n.vchasno-ui-text.--large {\n    font-size: 1.2rem;\n    line-height: 1.3rem;\n}\n\n.vchasno-ui-text.--required::after {\n    position: relative;\n    top: -3px;\n    right: -2px;\n    color: var(--vchasno-ui-text-error-color, #ff5937);\n    content: '*';\n}\n";
+var css_248z$e = ".vchasno-ui-text {\n    color: var(--vchasno-ui-text-primary-color, #333);\n}\n\n.vchasno-ui-text.--ellipsis {\n    display: inline-block;\n    overflow: hidden;\n    max-width: 100%;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.vchasno-ui-text.--secondary {\n    color: var(--vchasno-ui-text-secondary-color, #6b8091);\n}\n\n.vchasno-ui-text.--success {\n    color: var(--vchasno-ui-text-success-color, #1cb800);\n}\n\n.vchasno-ui-text.--warning {\n    color: var(--vchasno-ui-text-warning-color, #ffb200);\n}\n\n.vchasno-ui-text.--danger {\n    color: var(--vchasno-ui-text-error-color, #ff5937);\n}\n\n.vchasno-ui-text.--code {\n    padding: 0.2em 0.4em 0.1em;\n    border: 1px solid var(--vchasno-ui-input-border-color-default);\n    border-radius: 3px;\n    margin: 0 0.2em;\n    background: hsl(0deg 0% 58.8% / 10%);\n    font-size: 85%;\n}\n\n.vchasno-ui-text.--inherit {\n    font-size: inherit;\n}\n\n.vchasno-ui-text.--link,\n.vchasno-ui-text.--like-link {\n    color: #087dc1;\n    cursor: pointer;\n}\n\n.vchasno-ui-text.--link {\n    text-decoration-line: underline;\n}\n\n.vchasno-ui-text.--normal {\n    font-size: 1rem;\n    line-height: 1.1rem;\n}\n\n.vchasno-ui-text.--small {\n    font-size: 0.8rem;\n    line-height: 0.9rem;\n}\n\n.vchasno-ui-text.--large {\n    font-size: 1.2rem;\n    line-height: 1.3rem;\n}\n\n.vchasno-ui-text.--required::after {\n    position: relative;\n    top: -3px;\n    right: -2px;\n    color: var(--vchasno-ui-text-error-color, #ff5937);\n    content: '*';\n}\n\nstrong.vchasno-ui-text {\n    font-weight: 700;\n}\n";
 styleInject(css_248z$e);
 
 var typeToCN = {
@@ -419,24 +419,24 @@ var typeToCN = {
 };
 var Text = React$1.forwardRef(function (_a, ref) {
     var _b = _a.type, type = _b === void 0 ? 'default' : _b, className = _a.className, _c = _a.code, code = _c === void 0 ? false : _c, _d = _a.del, del = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, _f = _a.strong, strong = _f === void 0 ? false : _f, children = _a.children, ellipsis = _a.ellipsis, _g = _a.required, required = _g === void 0 ? false : _g, rest = __rest(_a, ["type", "className", "code", "del", "underline", "strong", "children", "ellipsis", "required"]);
-    var content = children;
+    var element = 'span';
     if (del) {
-        content = React$1.createElement("del", null, content);
+        element = 'del';
     }
     if (strong) {
-        content = React$1.createElement("strong", null, content);
+        element = 'strong';
     }
     if (underline) {
-        content = React$1.createElement("u", null, content);
+        element = 'u';
     }
     if (code) {
-        content = React$1.createElement("code", null, children);
+        element = 'code';
     }
-    return (React$1.createElement("span", __assign({ ref: ref, className: cn('vchasno-ui-text', className, typeToCN[type], {
+    return React$1.createElement(element, __assign({ ref: ref, className: cn('vchasno-ui-text', className, typeToCN[type], {
             '--code': code,
             '--ellipsis': ellipsis,
             '--required': required,
-        }), title: ellipsis && typeof children === 'string' ? children : undefined }, rest), content));
+        }), title: ellipsis && typeof children === 'string' ? children : undefined }, rest), children);
 });
 Text.displayName = 'Text';
 
@@ -465,12 +465,12 @@ var Title = React$1.forwardRef(function (_a, ref) {
 });
 Title.displayName = 'Title';
 
-var css_248z$b = ".vchasno-ui-paragraph {\n    color: var(--vchasno-ui-text-primary-color);\n}\n\n.vchasno-ui-paragraph.--ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n";
+var css_248z$b = ".vchasno-ui-paragraph {\n    color: var(--vchasno-ui-text-primary-color);\n}\n\n.vchasno-ui-paragraph.--ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.vchasno-ui-paragraph.--ellipsis-line {\n    display: -webkit-box;\n    overflow: hidden;\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    white-space: unset;\n}\n";
 styleInject(css_248z$b);
 
 var Paragraph = React$1.forwardRef(function (_a, ref) {
-    var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, textAlign = _a.textAlign, rest = __rest(_a, ["ellipsis", "children", "className", "textAlign"]);
-    return (React$1.createElement("p", __assign({ ref: ref, title: ellipsis && typeof children === 'string' ? children : undefined, className: cn('vchasno-ui-paragraph', className, { '--ellipsis': ellipsis }, textAlign && "--text-".concat(textAlign)) }, rest), children));
+    var _b = _a.ellipsis, ellipsis = _b === void 0 ? false : _b, children = _a.children, className = _a.className, textAlign = _a.textAlign, ellipsisLine = _a.ellipsisLine, rest = __rest(_a, ["ellipsis", "children", "className", "textAlign", "ellipsisLine"]);
+    return (React$1.createElement("p", __assign({ ref: ref, title: ellipsis && typeof children === 'string' ? children : undefined, className: cn('vchasno-ui-paragraph', className, { '--ellipsis': ellipsis, '--ellipsis-line': ellipsisLine !== undefined }, textAlign && "--text-".concat(textAlign)) }, rest, { style: ellipsisLine ? { WebkitLineClamp: ellipsisLine } : undefined }), children));
 });
 Paragraph.displayName = 'Paragraph';
 
@@ -551,14 +551,13 @@ var TextareaAutosize = function TextareaAutosize(_ref, userRef) {
 };
 var index = /* #__PURE__ */React__namespace.forwardRef(TextareaAutosize);
 
-var css_248z$a = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n    height: auto;\n    min-height: 40px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n}\n\n.vchasno-ui-textarea-input {\n    width: 100%;\n    border: 0;\n    color: var(--vchasno-ui-text-primary-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    resize: none;\n}\n\n.vchasno-ui-textarea-input::placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    visibility: hidden;\n}\n\n.vchasno-ui-textarea-input:focus::placeholder {\n    visibility: visible;\n}\n\n.vchasno-ui-input__wrapper__label {\n    transform: none;\n}\n\n.vchasno-ui-textarea-input + .vchasno-ui-label-text {\n    top: 10px;\n    transform: none;\n}\n\n.vchasno-ui-textarea-input:not(:placeholder-shown) + .vchasno-ui-label-text,\n.vchasno-ui-textarea-input:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: -12px;\n}\n";
+var css_248z$a = ".vchasno-ui-textarea-input-container .vchasno-ui-input__wrapper {\n    height: auto;\n    min-height: 40px;\n    padding-top: 10px;\n    padding-bottom: 10px;\n}\n\n.vchasno-ui-textarea-input {\n    width: 100%;\n    border: 0;\n    color: var(--vchasno-ui-text-primary-color);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    resize: none;\n}\n\n.vchasno-ui-textarea-input::placeholder {\n    color: var(--vchasno-ui-input-border-color-default);\n    font-size: var(--vchasno-ui-input-font-size);\n    line-height: calc(var(--vchasno-ui-input-font-size) * 1.2);\n    transition: color var(--vchasno-ui-transition-duration-sec, 0.3s);\n    visibility: hidden;\n}\n\n.vchasno-ui-textarea-input:focus::placeholder {\n    visibility: visible;\n}\n\n.vchasno-ui-input__wrapper__label {\n    transform: none;\n}\n\n.vchasno-ui-textarea-input + .vchasno-ui-label-text {\n    top: 0;\n    transform: translateY(10px);\n    transition:\n        transform var(--vchasno-ui-transition-duration-sec, 0.3s),\n        font-size var(--vchasno-ui-transition-duration-sec, 0.3s);\n}\n\n.vchasno-ui-textarea-input:not(:placeholder-shown) + .vchasno-ui-label-text,\n.vchasno-ui-textarea-input:focus:not(.--disabled) + .vchasno-ui-label-text {\n    top: 0;\n    transform: translateY(-12px);\n}\n";
 styleInject(css_248z$a);
 
 var TextAreaInput = React$1.forwardRef(function (_a, ref) {
-    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, textareaClassName = _a.textareaClassName, labelProps = _a.labelProps, _b = _a.placeholder, placeholder = _b === void 0 ? ' ' : _b, //need "space" for correct label working
-    rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "textareaClassName", "labelProps", "placeholder"]);
+    var className = _a.className, disabled = _a.disabled, startElement = _a.startElement, endElement = _a.endElement, error = _a.error, label = _a.label, hint = _a.hint, wide = _a.wide, required = _a.required, loading = _a.loading, textareaClassName = _a.textareaClassName, labelProps = _a.labelProps, rest = __rest(_a, ["className", "disabled", "startElement", "endElement", "error", "label", "hint", "wide", "required", "loading", "textareaClassName", "labelProps"]);
     return (React$1.createElement(Input, { required: required, wide: wide, className: cn(className, 'vchasno-ui-textarea-input-container'), loading: loading, disabled: disabled, label: label, error: error, hint: hint, endElement: endElement, labelProps: labelProps, startElement: startElement },
-        React$1.createElement(index, __assign({}, rest, { placeholder: placeholder, title: rest.title || 'Введіть текст', ref: ref, required: required, disabled: disabled, className: cn('vchasno-ui-textarea-input', textareaClassName) }))));
+        React$1.createElement(index, __assign({}, rest, { title: rest.title, ref: ref, required: required, disabled: disabled, className: cn('vchasno-ui-textarea-input', textareaClassName) }))));
 });
 TextAreaInput.displayName = 'TextAreaInput';