mimir-ui-kit 1.49.1 → 1.50.0

package/dist/assets/MiniButton.css

@@ -0,0 +1 @@
+._mini-button_1umad_2{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:var(--asphalt-normal);background:var(--mini-button-background);border-radius:var(--mimir-control-radius-xs)}._mini-button_1umad_2 svg{color:currentcolor;fill:currentcolor}._mini-button_1umad_2 svg path{color:currentcolor;fill:currentcolor}._mini-button_1umad_2._gray_1umad_19{--mini-button-background: var(--gray-normal)}._mini-button_1umad_2._transparent_1umad_22{--mini-button-background: transparent}._mini-button_1umad_2._white_1umad_25{--mini-button-background: var(--white)}._mini-button_1umad_2:hover{color:var(--counter-text);-webkit-box-shadow:none;box-shadow:none}._mini-button_1umad_2:active{color:var(--asphalt-active);-webkit-box-shadow:none;box-shadow:none}._mini-button_1umad_2:disabled{color:var(--disabled);cursor:not-allowed}._mini-button_1umad_2:focus-visible{-webkit-box-shadow:var(--mimir-box-shadow-default);box-shadow:var(--mimir-box-shadow-default)}._mini-button_1umad_2._l_1umad_43{width:var(--button-height-xs);height:var(--button-height-xs)}._mini-button_1umad_2._m-s_1umad_47{width:var(--button-height-ms);height:var(--button-height-ms)}

package/dist/assets/TextArea2.css

@@ -0,0 +1 @@
+._textarea-wrapper_1sytk_2{--textarea-border-radius-l: 8px;--textarea-border-radius-m: 6px;--textarea-border-radius-s: 6px;--textarea-required-mark-size: 8px;--addon-left-space: 0px;--clear-button-space: 0px;--required-mark-space-right: 0px;--base-space: calc(var(--mimir-space-m) * 2);--base-right-space: 0px;position:relative;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;max-width:100%;padding:var(--textarea-space);background-color:var(--textarea-bg-color);border-bottom:1px solid transparent;border-radius:var(--textarea-border-radius);cursor:text;-webkit-transition:all .3s ease;transition:all .3s ease}._textarea-wrapper_1sytk_2:not(:last-child){margin-bottom:var(--mimir-space-2xs)}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;width:auto;max-width:calc(100% - var(--textarea-right-space));height:auto;min-height:var(--textarea-line-height);margin-bottom:0;overflow:auto;font-size:var(--textarea-font-size);line-height:var(--textarea-line-height);white-space:pre-wrap;outline:none;-webkit-transition:all .3s ease;transition:all .3s ease}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2:first-letter,._textarea-wrapper_1sytk_2 ._textarea_1sytk_2:first-line{line-height:var(--textarea-line-height)}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2::-webkit-scrollbar{width:8px;height:8px}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2::-webkit-scrollbar-track{background:var(--white);border-radius:var(--mimir-control-radius)}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2::-webkit-scrollbar-thumb{background:var(--black-80);border:2px solid var(--white);border-radius:var(--mimir-control-radius)}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2::-webkit-scrollbar{width:4px;height:4px}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2::-webkit-scrollbar-track{border-radius:var(--mimir-control-radius-xs2)}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2::-webkit-scrollbar-thumb{border:1px solid var(--white);border-radius:var(--mimir-control-radius-xs2)}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2._disabled_1sytk_68{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;caret-color:transparent}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2._with-value_1sytk_73[data-placeholder]:hover:before,._textarea-wrapper_1sytk_2 ._textarea_1sytk_2:focus[data-placeholder]:hover:before{color:var(--black-60)}._textarea-wrapper_1sytk_2 ._textarea_1sytk_2[data-placeholder]:before{position:absolute;top:var(--textarea-placeholder-top);color:var(--textarea-placeholder-color);font-size:var(--textarea-placeholder-font-size);line-height:var(--textarea-placeholder-line-height);white-space:pre-wrap;-webkit-transform:translate(0%,-50%);transform:translateY(-50%);opacity:1;content:attr(data-placeholder);pointer-events:none}._textarea-wrapper_1sytk_2:hover{background-color:var(--textarea-bg-hover-color)}._textarea-wrapper_1sytk_2:hover ._textarea_1sytk_2[data-placeholder]:before{color:var(--textarea-placeholder-hover-color)}._textarea-wrapper_1sytk_2:focus-within{background-color:var(--textarea-bg-active-color);border-bottom:1px solid var(--textarea-bottom-active-color, var(--citrine-100))}._textarea-wrapper_1sytk_2._disabled_1sytk_68{--input-cursor: not-allowed;--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20);border-bottom:1px solid transparent;cursor:not-allowed;cursor:var(--input-cursor);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}._textarea-wrapper_1sytk_2 svg{color:currentcolor;fill:currentcolor}._textarea-wrapper_1sytk_2 ._clear_1sytk_112[data-minibutton]{color:var(--label-color)}._textarea-wrapper_1sytk_2._has-left-addon_1sytk_115{--addon-left-space: calc(var(--mimir-space-m) * 1.5);--base-right-space: var(--base-space)}._textarea-wrapper_1sytk_2._has-clear_1sytk_119{--clear-button-space: calc(var(--mimir-space-m) * 1.5);--base-right-space: var(--base-space)}._textarea-wrapper_1sytk_2._is-required_1sytk_123{--required-mark-space-right: calc(var(--mimir-space-m) * 1.5);--base-right-space: var(--base-space)}._label_1sytk_128{--textarea-required-mark-size: 6px;--textarea-required-mark-space: 0;position:absolute;top:var(--textarea-placeholder-active-top);left:var(--textarea-placeholder-active-left);display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--mimir-space-2xs);-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--textarea-placeholder-color);font-size:var(--textarea-placeholder-active-font-size);line-height:var(--textarea-placeholder-active-line-height);white-space:pre-wrap;-webkit-transform:translate(0%,-50%);transform:translateY(-50%);opacity:0;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}._label_1sytk_128._is-focused_1sytk_148{opacity:1}._textarea-right-addon_1sytk_152,._textarea-left-addon_1sytk_153{color:var(--textarea-left-addon-color)}._textarea-right-addon_1sytk_152 svg,._textarea-left-addon_1sytk_153 svg{color:var(--textarea-left-addon-color)}._textarea-right-addon_1sytk_152 svg path,._textarea-left-addon_1sytk_153 svg path{fill:var(--textarea-left-addon-color)}._textarea-left-addon_1sytk_153{margin-right:var(--textarea-left-addon-space)}._required-mark_1sytk_169{display:block;-webkit-box-flex:0;-ms-flex:0 0 var(--textarea-required-mark-size);flex:0 0 var(--textarea-required-mark-size);width:var(--textarea-required-mark-size);height:var(--textarea-required-mark-size);margin:var(--textarea-required-mark-space);background-color:var(--citrine-normal);border-radius:50%}._addon-icon_1sytk_179{width:var(--icon-size);height:var(--icon-size)}._message_1sytk_184{font-size:var(--mimir-size-text-s);line-height:var(--mimir-line-height-text-xss1)}._message_1sytk_184._error_1sytk_188{color:var(--error-normal)}._right-addons-content_1sytk_192{display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:auto}._right-addons-content_1sytk_192:empty{margin-left:0}._default-gray_1sytk_201{--textarea-bg-color: var(--black-5);--textarea-bg-hover-color: var(--black-10);--textarea-bg-active-color: var(--black-5);--textarea-placeholder-color: var(--black-60);--textarea-placeholder-hover-color: var(--black-100)}._default-white_1sytk_210{--textarea-bg-color: var(--white);--textarea-bg-hover-color: var(--black-10);-textarea-bg-active-color:var(--white);--textarea-placeholder-color: var(--black-60);--textarea-placeholder-hover-color: var(--black-100)}._default-gray_1sytk_201._success_1sytk_219,._default-white_1sytk_210._success_1sytk_219{--textarea-bg-color: var(--success-bg-active);--textarea-bg-hover-color: var(--success-bg-hover);--textarea-bg-active-color: var(--success-bg-active);--textarea-bottom-active-color: var(--success-normal)}._default-gray_1sytk_201._alarm_1sytk_226,._default-white_1sytk_210._alarm_1sytk_226{--textarea-bg-color: var(--alarm-bg-active);--textarea-bg-hover-color: var(--alarm-bg-hover);--textarea-bg-active-color: var(--alarm-bg-active);--textarea-bottom-active-color: var(--alarm-normal)}._default-gray_1sytk_201._error_1sytk_188,._default-white_1sytk_210._error_1sytk_188{--textarea-bg-color: var(--error-bg-active);--textarea-bg-hover-color: var(--error-bg-hover);--textarea-bg-active-color: var(--error-bg-active);--textarea-bottom-active-color: var(--error-normal)}._s_1sytk_219{--textarea-border-radius: var(--textarea-border-radius-s);--textarea-space: var(--mimir-space-l) var(--mimir-space-m) var(--mimir-space-2s) var(--mimir-space-m);--textarea-font-size: var(--mimir-size-text-m);--textarea-line-height: var(--mimir-line-height-text-xl);--textarea-right-space: calc( var(--addon-left-space) + var(--clear-button-space) + var(--required-mark-space-right) );--textarea-placeholder-active-left: var(--mimir-space-m);--textarea-placeholder-top: var(--mimir-space-xs);--textarea-placeholder-active-top: var(--mimir-space-2s);--textarea-placeholder-font-size: var(--mimir-size-text-m);--textarea-placeholder-line-height: var(--mimir-line-height-text-xxs);--textarea-placeholder-active-font-size: var(--mimir-size-text-xs);--textarea-placeholder-active-line-height: var(--mimir-line-height-text-s);--textarea-required-mark-space: var(--mimir-space-2xs);--textarea-required-mark-size: 5px;--textarea-left-addon-space: var(--mimir-space-2xs)}._m_1sytk_184{--textarea-border-radius: var(--textarea-border-radius-m);--textarea-space: var(--mimir-space-l) var(--mimir-space-m) var(--mimir-space-2s) var(--mimir-space-m);--textarea-font-size: var(--mimir-size-text-l);--textarea-line-height: var(--mimir-line-height-text-s1);--textarea-right-space: calc( var(--addon-left-space) + var(--clear-button-space) + var(--required-mark-space-right) );--textarea-placeholder-active-left: var(--mimir-space-m);--textarea-placeholder-top: var(--mimir-space-xs);--textarea-placeholder-active-top: var(--mimir-space-2s);--textarea-placeholder-font-size: var(--mimir-size-text-l);--textarea-placeholder-line-height: var(--mimir-line-height-text-s1);--textarea-placeholder-active-font-size: var(--mimir-size-text-s);--textarea-placeholder-active-line-height: var(--mimir-line-height-text-2xs);--textarea-required-mark-space: var(--mimir-space-2xs);--textarea-required-mark-size: 5px;--textarea-left-addon-space: var(--mimir-space-2xs)}._l_1sytk_128{--textarea-border-radius: var(--textarea-border-radius-l);--textarea-space: var(--mimir-space-xl) var(--mimir-space-m) var(--mimir-space-2m) var(--mimir-space-m);--textarea-font-size: var(--mimir-size-text-xl);--textarea-line-height: var(--mimir-line-height-text-l);--textarea-right-space: calc( var(--addon-left-space) + var(--clear-button-space) + var(--required-mark-space-right) );--textarea-placeholder-active-left: var(--mimir-space-m);--textarea-placeholder-top: var(--mimir-space-xs);--textarea-placeholder-active-top: var(--mimir-space-m);--textarea-placeholder-font-size: var(--mimir-size-text-xl);--textarea-placeholder-active-font-size: var(--mimir-size-text-s);--textarea-placeholder-line-height: var(--mimir-line-height-text-l);--textarea-placeholder-active-line-height: var(--mimir-line-height-text-2xs);--textarea-required-mark-space: var(--mimir-space-xs);--textarea-left-addon-space: var(--mimir-space-xs)}._disabled_1sytk_68{--textarea-placeholder-color: var(--light-text);--textarea-left-addon-color: var(--light-text)}

package/dist/components/MiniButton/MiniButton.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+import { TIcon } from '../../icons';
+
+export type TMiniButton = {
+    /**
+     * Класс, применяемый к корневому элементу кнопки.
+     */
+    className?: string;
+    /**
+     * Выключен ли miniButton или нет
+     */
+    disabled?: boolean;
+    /**
+     * Вариант кнопки загрузки файла
+     */
+    variant?: 'gray' | 'white' | 'transparent';
+    /**
+     * Размер кнопки загрузки файла
+     */
+    size?: 'l' | 'm-s';
+    /**
+     * Класс для кнопки
+     */
+    miniButtonClassName?: string;
+    /**
+     * Название иконки
+     */
+    iconName: TIcon;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const MiniButton: React.ForwardRefExoticComponent<{
+    /**
+     * Класс, применяемый к корневому элементу кнопки.
+     */
+    className?: string;
+    /**
+     * Выключен ли miniButton или нет
+     */
+    disabled?: boolean;
+    /**
+     * Вариант кнопки загрузки файла
+     */
+    variant?: "gray" | "white" | "transparent";
+    /**
+     * Размер кнопки загрузки файла
+     */
+    size?: "l" | "m-s";
+    /**
+     * Класс для кнопки
+     */
+    miniButtonClassName?: string;
+    /**
+     * Название иконки
+     */
+    iconName: TIcon;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/MiniButton/MiniButton.js

@@ -0,0 +1,44 @@
+import { jsx as n } from "react/jsx-runtime";
+import { c as l } from "../../index-DIxK0V-G.js";
+import { forwardRef as p } from "react";
+import { EMiniButtonSize as a, EMiniButtonVariant as d } from "./constants.js";
+import { Icon as f } from "../../icons/Icon.js";
+import '../../assets/MiniButton.css';const b = "_gray_1umad_19", y = "_transparent_1umad_22", N = "_white_1umad_25", h = "_l_1umad_43", t = {
+  "mini-button": "_mini-button_1umad_2",
+  gray: b,
+  transparent: y,
+  white: N,
+  l: h,
+  "m-s": "_m-s_1umad_47"
+}, M = p(
+  (o, s) => {
+    const {
+      disabled: i = !1,
+      size: r = a.MS,
+      variant: m = d.Gray,
+      className: e,
+      iconName: _,
+      ...u
+    } = o, c = l(
+      t["mini-button"],
+      r === a.L ? t.l : t["m-s"],
+      t[m],
+      e
+    );
+    return /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        ref: s,
+        ...u,
+        disabled: i,
+        className: c,
+        children: /* @__PURE__ */ n(f, { iconName: _ })
+      }
+    );
+  }
+);
+M.displayName = "MiniButton";
+export {
+  M as MiniButton
+};

package/dist/components/MiniButton/constants.d.ts

@@ -0,0 +1,9 @@
+export declare enum EMiniButtonVariant {
+    Gray = "gray",
+    White = "white",
+    Transparent = "transparent"
+}
+export declare enum EMiniButtonSize {
+    L = "l",
+    MS = "m-s"
+}

package/dist/components/MiniButton/constants.js

@@ -0,0 +1,5 @@
+var e = /* @__PURE__ */ ((r) => (r.Gray = "gray", r.White = "white", r.Transparent = "transparent", r))(e || {}), a = /* @__PURE__ */ ((r) => (r.L = "l", r.MS = "m-s", r))(a || {});
+export {
+  a as EMiniButtonSize,
+  e as EMiniButtonVariant
+};

package/dist/components/MiniButton/index.d.ts

@@ -0,0 +1,3 @@
+export { MiniButton } from './MiniButton.tsx';
+export type { TMiniButton } from './MiniButton.tsx';
+export { EMiniButtonVariant, EMiniButtonSize } from './constants.ts';

package/dist/components/MiniButton/index.js

@@ -0,0 +1,7 @@
+import { MiniButton as n } from "./MiniButton.js";
+import { EMiniButtonSize as r, EMiniButtonVariant as e } from "./constants.js";
+export {
+  r as EMiniButtonSize,
+  e as EMiniButtonVariant,
+  n as MiniButton
+};

package/dist/components/TextAreaV2/TextArea.d.ts

@@ -0,0 +1,3 @@
+import { TProps } from './types';
+
+export declare const TextArea: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TProps & import('react').RefAttributes<HTMLDivElement>>>;

package/dist/components/TextAreaV2/TextArea.js

@@ -0,0 +1,255 @@
+import { jsxs as k, jsx as u } from "react/jsx-runtime";
+import { c as f } from "../../index-DIxK0V-G.js";
+import { memo as L, forwardRef as R, useId as b, useRef as I, useState as q, useEffect as tt, useCallback as x } from "react";
+import { ETextAreaSize as g, ETextAreaVariant as et } from "./constants.js";
+import { getCurrentText as D, setEditableText as V, placeCaretAtEnd as B, clampByMaxLength as rt, getMaxHeightStyle as at } from "./utils.js";
+import { useMergeRefs as nt } from "../../hooks/useMergeRefs/useMergeRefs.js";
+import { Icon as st } from "../../icons/Icon.js";
+import { MiniButton as ot } from "../MiniButton/MiniButton.js";
+import '../../assets/TextArea2.css';const ct = "_textarea_1sytk_2", lt = "_disabled_1sytk_68", ut = "_clear_1sytk_112", it = "_label_1sytk_128", dt = "_message_1sytk_184", _t = "_error_1sytk_188", ft = "_success_1sytk_219", mt = "_alarm_1sytk_226", pt = "_s_1sytk_219", xt = "_m_1sytk_184", yt = "_l_1sytk_128", e = {
+  "textarea-wrapper": "_textarea-wrapper_1sytk_2",
+  textarea: ct,
+  disabled: lt,
+  "with-value": "_with-value_1sytk_73",
+  clear: ut,
+  "has-left-addon": "_has-left-addon_1sytk_115",
+  "has-clear": "_has-clear_1sytk_119",
+  "is-required": "_is-required_1sytk_123",
+  label: it,
+  "is-focused": "_is-focused_1sytk_148",
+  "textarea-right-addon": "_textarea-right-addon_1sytk_152",
+  "textarea-left-addon": "_textarea-left-addon_1sytk_153",
+  "required-mark": "_required-mark_1sytk_169",
+  "addon-icon": "_addon-icon_1sytk_179",
+  message: dt,
+  error: _t,
+  "right-addons-content": "_right-addons-content_1sytk_192",
+  "default-gray": "_default-gray_1sytk_201",
+  "default-white": "_default-white_1sytk_210",
+  success: ft,
+  alarm: mt,
+  s: pt,
+  m: xt,
+  l: yt
+}, kt = (i, c) => {
+  if (!i)
+    return null;
+  switch (i.addonType) {
+    case "icon": {
+      const d = c === g.L, h = c === g.M, r = c === g.S;
+      return /* @__PURE__ */ u(
+        st,
+        {
+          style: {
+            "--icon-size": f({
+              "16px": h || r,
+              "24px": d
+            })
+          },
+          className: e["addon-icon"],
+          iconName: i.addonContent
+        }
+      );
+    }
+    case "text":
+      return i.addonContent;
+    default:
+      return null;
+  }
+}, gt = L(
+  R(
+    ({
+      className: i,
+      label: c,
+      required: d,
+      leftAddon: h,
+      disabled: r,
+      autofocus: F,
+      withClearButton: C,
+      value: S,
+      onChange: y,
+      maxLength: _,
+      maxRows: $,
+      message: A,
+      size: m = g.M,
+      status: M,
+      variant: j = et.DefaultGray,
+      containerClassName: H,
+      wrapperClassName: K
+    }, P) => {
+      const w = b(), N = kt(h, m), a = I(null), v = I(!1), W = nt(P, a), [p, E] = q(
+        F
+      ), [G, U] = q(""), T = S !== void 0, n = T ? S ?? "" : G, z = at(m, $);
+      tt(() => {
+        const t = a.current;
+        if (t) {
+          if (v.current) {
+            v.current = !1;
+            return;
+          }
+          D(t) !== n && (V(n, t), B(t));
+        }
+      }, [n]);
+      const l = x(
+        (t, o = !1) => {
+          const s = rt(t, _);
+          T ? y == null || y(s) : U(s), o && (v.current = !0, V(s, a == null ? void 0 : a.current), B(a == null ? void 0 : a.current));
+        },
+        [T, y, _]
+      ), J = x(() => {
+        if (r) return;
+        const t = D(a == null ? void 0 : a.current);
+        typeof _ == "number" && _ >= 0 && t.length > _ ? l(t, !0) : t.length === 0 ? l("", !0) : l(t);
+      }, [l, _, r]), O = x(
+        (t) => {
+          if (r)
+            return;
+          t.preventDefault();
+          const o = (t.clipboardData.getData("text/plain") || "").replace(/\r\n|\r/g, `
+`), s = window.getSelection();
+          s != null && s.rangeCount && (s.deleteFromDocument(), s.getRangeAt(0).insertNode(document.createTextNode(o)), s.collapseToEnd());
+          const Z = D(a == null ? void 0 : a.current);
+          l(Z, !0);
+        },
+        [l, r]
+      ), Q = x(
+        (t) => {
+          r && t.preventDefault();
+        },
+        [r]
+      ), X = x(() => {
+        var t;
+        l("", !0), (t = a.current) == null || t.focus();
+      }, [l]), Y = f(
+        e["textarea-wrapper"],
+        e[j],
+        e[m],
+        e[M ?? ""],
+        d && e.required,
+        r && e.disabled,
+        !!n && e["with-value"],
+        N && e["has-left-addon"],
+        C && !!n && e["has-clear"],
+        d && !p && e["is-required"],
+        K
+      );
+      return /* @__PURE__ */ k(
+        "div",
+        {
+          id: `textarea-container-${w}`,
+          className: f(e["textarea-container"], H),
+          children: [
+            /* @__PURE__ */ k(
+              "div",
+              {
+                "data-testid": "textarea-wrapper",
+                id: `textarea-wrapper-${w}`,
+                tabIndex: r ? -1 : 0,
+                className: Y,
+                onMouseDown: (t) => {
+                  var o;
+                  r || t.target === t.currentTarget && (t.preventDefault(), (o = a.current) == null || o.focus());
+                },
+                onFocusCapture: (t) => {
+                  var o;
+                  r || (t.target === t.currentTarget && ((o = a.current) == null || o.focus()), t.currentTarget.contains(t.relatedTarget) || E(!0));
+                },
+                onBlurCapture: (t) => {
+                  r || t.currentTarget.contains(t.relatedTarget) || E(!1);
+                },
+                children: [
+                  N && /* @__PURE__ */ u(
+                    "div",
+                    {
+                      "data-testid": "left-addon",
+                      className: e["textarea-left-addon"],
+                      children: N
+                    }
+                  ),
+                  c && /* @__PURE__ */ k(
+                    "span",
+                    {
+                      className: f(e.label, {
+                        [e["is-focused"]]: !!n || p
+                      }),
+                      children: [
+                        c,
+                        d && (!!n || p) && /* @__PURE__ */ u(
+                          "span",
+                          {
+                            className: e["required-mark"],
+                            "data-testid": "required-mark"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ u(
+                    "div",
+                    {
+                      id: `textarea-${w}`,
+                      className: f(
+                        e.textarea,
+                        i,
+                        r && e.disabled,
+                        {
+                          [e["with-value"]]: !!n
+                        }
+                      ),
+                      role: "textbox",
+                      "aria-multiline": !0,
+                      "aria-label": c,
+                      "aria-disabled": r,
+                      onInput: J,
+                      onKeyDown: Q,
+                      onBeforeInput: (t) => {
+                        r && t.preventDefault();
+                      },
+                      contentEditable: !0,
+                      suppressContentEditableWarning: !0,
+                      onPaste: O,
+                      ref: W,
+                      style: z,
+                      tabIndex: -1,
+                      "data-placeholder": n || p ? void 0 : c
+                    }
+                  ),
+                  /* @__PURE__ */ k("div", { className: e["right-addons-content"], children: [
+                    d && !n && !p && /* @__PURE__ */ u(
+                      "span",
+                      {
+                        className: e["required-mark"],
+                        "data-testid": "required-mark"
+                      }
+                    ),
+                    C && !!n && /* @__PURE__ */ u(
+                      ot,
+                      {
+                        className: e.clear,
+                        iconName: m === "l" ? "Close16px" : "Close12px",
+                        size: m === "l" ? "l" : "m-s",
+                        variant: "transparent",
+                        disabled: r,
+                        "data-testid": "clear-button",
+                        "data-minibutton": !0,
+                        onMouseDown: (t) => {
+                          t.preventDefault();
+                        },
+                        onClick: X
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            A && /* @__PURE__ */ u("div", { className: f(e.message, e[M ?? ""]), children: A })
+          ]
+        }
+      );
+    }
+  )
+);
+gt.displayName = "TextArea";
+export {
+  gt as TextArea
+};

package/dist/components/TextAreaV2/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const enum ETextAreaSize {
+    S = "s",
+    M = "m",
+    L = "l"
+}
+export declare const enum ETextAreaStatus {
+    Alarm = "alarm",
+    Success = "success",
+    Error = "error"
+}
+export declare enum ETextAreaVariant {
+    DefaultGray = "default-gray",
+    DefaultWhite = "default-white"
+}
+export declare const LINE_HEIGHTS_MAP: Record<ETextAreaSize, number>;
+export declare const PADDINGS_MAP: Record<ETextAreaSize, number>;

package/dist/components/TextAreaV2/constants.js

@@ -0,0 +1,17 @@
+var l = /* @__PURE__ */ ((r) => (r.S = "s", r.M = "m", r.L = "l", r))(l || {}), s = /* @__PURE__ */ ((r) => (r.Alarm = "alarm", r.Success = "success", r.Error = "error", r))(s || {}), u = /* @__PURE__ */ ((r) => (r.DefaultGray = "default-gray", r.DefaultWhite = "default-white", r))(u || {});
+const c = {
+  s: 1.5,
+  m: 1.2,
+  l: 1.4
+}, m = {
+  s: 14,
+  m: 14,
+  l: 18
+};
+export {
+  l as ETextAreaSize,
+  s as ETextAreaStatus,
+  u as ETextAreaVariant,
+  c as LINE_HEIGHTS_MAP,
+  m as PADDINGS_MAP
+};

package/dist/components/TextAreaV2/index.d.ts

@@ -0,0 +1,3 @@
+export { TextArea } from './TextArea';
+export type { TProps as TextAreaV2Props } from './types';
+export { ETextAreaSize, ETextAreaStatus, ETextAreaVariant } from './constants';

package/dist/components/TextAreaV2/index.js

@@ -0,0 +1,8 @@
+import { TextArea as t } from "./TextArea.js";
+import { ETextAreaSize as x, ETextAreaStatus as o, ETextAreaVariant as A } from "./constants.js";
+export {
+  x as ETextAreaSize,
+  o as ETextAreaStatus,
+  A as ETextAreaVariant,
+  t as TextArea
+};

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

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+import { ETextAreaSize, ETextAreaStatus, ETextAreaVariant } from './constants';
+import { TIcon } from '../../icons';
+
+type TTextAddon = {
+    addonType?: 'text';
+    addonContent: string;
+};
+export type TIconAddon = {
+    addonType?: 'icon';
+    addonContent: TIcon;
+};
+export type TReactNodeAddon = {
+    addonType?: 'react-node';
+    addonContent: ReactNode;
+};
+export type TTextAreaV2Addon = TTextAddon | TIconAddon | TReactNodeAddon;
+export type TProps = {
+    /**
+     * Дополнительный класс.
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для обертки текстового поля.
+     */
+    wrapperClassName?: string;
+    /**
+     * Дополнительный класс для контейнера текстового поля.
+     */
+    containerClassName?: string;
+    /**
+     * Текстовое описание поля ввода.
+     */
+    label?: string;
+    /**
+     * Варианты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.
+     */
+    variant?: ETextAreaVariant | `${ETextAreaVariant}`;
+    /**
+     * Статус ввода. Может быть 'alarm', 'success', 'error'.
+     */
+    status?: ETextAreaStatus | `${ETextAreaStatus}`;
+    /**
+     * Размер текстового поля.
+     */
+    size?: ETextAreaSize | `${ETextAreaSize}`;
+    /**
+     * Флаг, опредляющий, что поле ввода обязательно для заполнения.
+     */
+    required?: boolean;
+    /**
+     * Флаг, опредляющий, что поле ввода недоступно для заполнения и манипуляций.
+     */
+    disabled?: boolean;
+    /**
+     * Флаг, опредляющий, что при первом рендере будет установлен фокус.
+     */
+    autofocus?: boolean;
+    /**
+     * Флаг, опредляющий показ кнопки для очистки текстового поля.
+     */
+    withClearButton?: boolean;
+    /**
+     * Информационное сообщение под текстовым полем.
+     */
+    message?: ReactNode;
+    /**
+     * Значение текстового поля (контролируемый режим)
+     */
+    value?: string;
+    /**
+     * Колбэк изменения значения (контролируемый режим)
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Максимальное количество символов
+     */
+    maxLength?: number;
+    /**
+     * Максимальное количество строк (ограничение по высоте)
+     */
+    maxRows?: number;
+    /**
+     * Дополнительный слот слева.
+     */
+    leftAddon?: TIconAddon;
+};
+export {};

package/dist/components/TextAreaV2/utils.d.ts

@@ -0,0 +1,10 @@
+import { ETextAreaSize } from './constants';
+
+export declare const escapeHtml: (str: string) => string;
+export declare const clampByMaxLength: (text: string, maxLength?: number) => string;
+export declare const placeCaretAtEnd: (editableNode?: HTMLDivElement | null) => void;
+export declare const getMaxHeightStyle: (size: ETextAreaSize | `${ETextAreaSize}`, maxRows?: number) => {
+    readonly maxHeight: `calc(${number}em + ${number}px)`;
+} | undefined;
+export declare const getCurrentText: (editableNode?: HTMLDivElement | null) => string;
+export declare const setEditableText: (next: string, editableNode?: HTMLDivElement | null) => void;

package/dist/components/TextAreaV2/utils.js

@@ -0,0 +1,36 @@
+import { LINE_HEIGHTS_MAP as c, PADDINGS_MAP as l } from "./constants.js";
+const g = (n) => n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), o = (n, e) => typeof e == "number" && e >= 0 ? n.slice(0, e) : n, s = (n) => {
+  if (!n) return;
+  const e = document.createRange();
+  e.selectNodeContents(n), e.collapse(!1);
+  const r = window.getSelection();
+  r && (r.removeAllRanges(), r.addRange(e));
+}, i = (n, e) => {
+  if (!e) return;
+  const r = c[n], t = l[n];
+  return {
+    maxHeight: `calc(${e * r}em + ${t}px)`
+  };
+}, p = (n) => {
+  if (!n) return "";
+  let e = (n.innerText || "").replace(/\r\n|\r/g, `
+`);
+  return (e === `
+` || n.innerHTML === "<br>") && (e = ""), e;
+}, u = (n, e) => {
+  if (!e) return;
+  if (n.length === 0) {
+    e.innerHTML = "";
+    return;
+  }
+  const r = g(n).replace(/\n/g, "<br>");
+  e.innerHTML = r;
+};
+export {
+  o as clampByMaxLength,
+  g as escapeHtml,
+  p as getCurrentText,
+  i as getMaxHeightStyle,
+  s as placeCaretAtEnd,
+  u as setEditableText
+};

package/dist/components/index.d.ts

@@ -80,3 +80,8 @@ export { CardTrail } from './CardTrail';
 export { ClearButton } from './InputClearButton';
 export { CopyText } from './CopyText';
 export type { TCopyTextProps } from './CopyText';
+export { TextArea as TextAreaV2 } from './TextAreaV2';
+export type { ETextAreaSize, ETextAreaStatus, ETextAreaVariant, TextAreaV2Props } from './TextAreaV2';
+export { MiniButton } from './MiniButton';
+export { EMiniButtonSize, EMiniButtonVariant } from './MiniButton';
+export type { TMiniButton } from './MiniButton';

package/dist/components/index.js

@@ -1,16 +1,16 @@
 import { Button as e } from "./Button/Button.js";
-import { EButtonForm as p, EButtonSize as a, EButtonVariantBorderless as i, EButtonVariantDefault as m, EButtonVariantOutline as n, EButtonVariantRound as x } from "./Button/constants.js";
+import { EButtonForm as a, EButtonSize as p, EButtonVariantBorderless as i, EButtonVariantDefault as m, EButtonVariantOutline as n, EButtonVariantRound as x } from "./Button/constants.js";
 import { I as l } from "../Input-DgWOCNwP.js";
 import { EInputSize as S, EInputStatus as d, EInputVariant as s } from "./Input/constants.js";
 import { TextArea as c } from "./TextArea/TextArea.js";
-import { ETextAreaInputSize as g } from "./TextArea/constants.js";
-import { InputPassword as P } from "./InputPassword/InputPassword.js";
-import { InputPhoneNumber as B } from "./InputPhoneNumber/InputPhoneNumber.js";
-import { getMaskedInputPhoneValue as z, getUnmaskedInputValue as k } from "./InputPhoneNumber/utils.js";
-import { OtpInput as D } from "./OtpInput/OtpInput.js";
-import { RadioGroup as b } from "./RadioGroup/RadioGroup.js";
-import { DatePicker as C } from "./DatePicker/DatePicker.js";
-import { EDatePickerBorderRadius as M } from "./DatePicker/constants.js";
+import { ETextAreaInputSize as V } from "./TextArea/constants.js";
+import { InputPassword as B } from "./InputPassword/InputPassword.js";
+import { InputPhoneNumber as P } from "./InputPhoneNumber/InputPhoneNumber.js";
+import { getMaskedInputPhoneValue as h, getUnmaskedInputValue as k } from "./InputPhoneNumber/utils.js";
+import { OtpInput as A } from "./OtpInput/OtpInput.js";
+import { RadioGroup as M } from "./RadioGroup/RadioGroup.js";
+import { DatePicker as b } from "./DatePicker/DatePicker.js";
+import { EDatePickerBorderRadius as R } from "./DatePicker/constants.js";
 import { MergedButton as U } from "./MergedButton/MergedButton.js";
 import { EMergedButtonVariantRound as F } from "./MergedButton/constants.js";
 import { AppImage as N } from "./Image/Image.js";
@@ -22,19 +22,19 @@ import { EDrawerPosition as X } from "./Drawer/constants.js";
 import { Dropdown as _ } from "./Dropdown/Dropdown.js";
 import { EDropdownAlign as oo, EDropdownPlacement as ro } from "./Dropdown/constants.js";
 import { DropdownSelect as to } from "./DropdownSelect/DropdownSelect.js";
-import { EDropdownSelectSize as ao } from "./DropdownSelect/constants.js";
+import { EDropdownSelectSize as po } from "./DropdownSelect/constants.js";
 import { Steps as mo } from "./Steps/Steps.js";
 import { EStepColor as xo, EStepsSize as fo } from "./Steps/constants.js";
 import { Vote as Eo } from "./Vote/Vote.js";
 import { EVoteSize as so } from "./Vote/constants.js";
 import { SelectSearch as co } from "./SelectSearch/SelectSearch.js";
-import { ELoadingIndicatorPlacement as go, ESelectSearchBorderRadius as Io, ESelectSearchSize as Po } from "./SelectSearch/constants.js";
-import { CheckboxMimir as Bo } from "./CheckboxMimir/CheckboxMimir.js";
-import { Tag as zo } from "./Tag/Tag.js";
-import { ETagSize as Lo, ETagType as Do } from "./Tag/constants.js";
-import { Timer as bo } from "./Timer/Timer.js";
-import { Accordion as Co } from "./Accordion/Accordion.js";
-import { EAccordionSize as Mo } from "./Accordion/constants.js";
+import { ELoadingIndicatorPlacement as Vo, ESelectSearchBorderRadius as go, ESelectSearchSize as Bo } from "./SelectSearch/constants.js";
+import { CheckboxMimir as Po } from "./CheckboxMimir/CheckboxMimir.js";
+import { Tag as ho } from "./Tag/Tag.js";
+import { ETagSize as Lo, ETagType as Ao } from "./Tag/constants.js";
+import { Timer as Mo } from "./Timer/Timer.js";
+import { Accordion as bo } from "./Accordion/Accordion.js";
+import { EAccordionSize as Ro } from "./Accordion/constants.js";
 import { AccordionItem as Uo } from "./Accordion/AccordionItem/AccordionItem.js";
 import { TabTrail as Fo } from "./TabTrail/TabTrail.js";
 import { ETabTrailSize as No } from "./TabTrail/constants.js";
@@ -46,20 +46,20 @@ import { EToastPosition as Xo, EToastVariant as Yo } from "./Toasts/constants.js
 import { UploaderPhotos as $o } from "./UploaderPhotos/UploaderPhotos.js";
 import { ListPhoto as rr } from "./ListPhotos/ListPhoto/ListPhoto.js";
 import { UploaderFiles as tr } from "./UploaderFiles/UploaderFiles.js";
-import { EUploaderFilesVariant as ar } from "./UploaderFiles/constants.js";
+import { EUploaderFilesVariant as pr } from "./UploaderFiles/constants.js";
 import { Uploader as mr } from "./Uploader/Uploader.js";
 import { Link as xr } from "./AnchorLink/Link.js";
 import { ELinkSize as lr, ELinkVariant as Er } from "./AnchorLink/constants.js";
 import { NotificationBadge as dr } from "./NotificationBadge/NotificationBadge.js";
 import { ENotificationBadgeSize as ur } from "./NotificationBadge/constants.js";
 import { Chip as Tr } from "./Chip/Chip.js";
-import { EChipSize as Ir, EChipVariant as Pr } from "./Chip/constants.js";
-import { UniversalUploader as Br } from "./UniversalUploader/UniversalUploader.js";
-import { EUploaderType as zr } from "./UniversalUploader/constants.js";
+import { EChipSize as gr, EChipVariant as Br } from "./Chip/constants.js";
+import { UniversalUploader as Pr } from "./UniversalUploader/UniversalUploader.js";
+import { EUploaderType as hr } from "./UniversalUploader/constants.js";
 import { InputRangeSlider as Lr } from "./InputRangeSlider/InputRangeSlider.js";
-import { EInputRangeSliderBorderState as wr, EInputRangeSliderPositions as br } from "./InputRangeSlider/constants.js";
-import { GosZnak as Cr } from "./GosZnak/GosZnak.js";
-import { EGosZnakSize as Mr, EGosZnakType as yr } from "./GosZnak/constants.js";
+import { EInputRangeSliderBorderState as Dr, EInputRangeSliderPositions as Mr } from "./InputRangeSlider/constants.js";
+import { GosZnak as br } from "./GosZnak/GosZnak.js";
+import { EGosZnakSize as Rr, EGosZnakType as yr } from "./GosZnak/constants.js";
 import { Switcher as vr } from "./Switcher/Switcher.js";
 import { ELabelPositions as Gr } from "./Switcher/constants.js";
 import { TwinSwitcher as Zr } from "./TwinSwitcher/TwinSwitcher.js";
@@ -70,56 +70,59 @@ import { ESkeletonVariant as Wr } from "./Skeleton/constants.js";
 import { Avatar as Yr } from "./Avatar/Avatar.js";
 import { EAvatarSize as $r, EAvatarVariant as oe } from "./Avatar/constants.js";
 import { MultiSelectSearch as ee } from "./MultiSelectSearch/MultiSelectSearch.js";
-import { ELoadingIndicatorPlacement as pe, EMultiSelectSearchSize as ae } from "./MultiSelectSearch/constants.js";
+import { ELoadingIndicatorPlacement as ae, EMultiSelectSearchSize as pe } from "./MultiSelectSearch/constants.js";
 import { ListFiles as me } from "./ListFiles/ListFiles.js";
 import { EFileItemVariant as xe } from "./ListFiles/constants.js";
 import { ListPhotos as le } from "./ListPhotos/ListPhotos.js";
 import { MessageShortReply as Se } from "./MessageShortReply/MessageShortReply.js";
 import { EMessageShortReplyVariant as se } from "./MessageShortReply/constants.js";
 import { Table as ce } from "./Table/Table.js";
-import { ESortDirection as ge, ETableDisplayMode as Ie, ETableScrollButtonVariant as Pe, ETableScrollIconName as Ve, ETableVariant as Be } from "./Table/constants.js";
-import { PromoSlider as ze } from "./PromoSlider/PromoSlider.js";
+import { ESortDirection as Ve, ETableDisplayMode as ge, ETableScrollButtonVariant as Be, ETableScrollIconName as Ie, ETableVariant as Pe } from "./Table/constants.js";
+import { PromoSlider as he } from "./PromoSlider/PromoSlider.js";
 import { CardTrail as Le } from "./CardTrail/CardTrail.js";
-import { ClearButton as we } from "./InputClearButton/ClearButton.js";
-import { CopyText as Ae } from "./CopyText/CopyText.js";
-import { default as Re } from "./Slider/Slider.js";
-import { EProgressBarPosition as ye } from "./Slider/constants.js";
+import { ClearButton as De } from "./InputClearButton/ClearButton.js";
+import { CopyText as we } from "./CopyText/CopyText.js";
+import { TextArea as Ce } from "./TextAreaV2/TextArea.js";
+import { MiniButton as ye } from "./MiniButton/MiniButton.js";
+import { EMiniButtonSize as ve, EMiniButtonVariant as Fe } from "./MiniButton/constants.js";
+import { default as Ne } from "./Slider/Slider.js";
+import { EProgressBarPosition as Oe } from "./Slider/constants.js";
 export {
-  Co as Accordion,
+  bo as Accordion,
   Uo as AccordionItem,
   Yr as Avatar,
   e as Button,
   Le as CardTrail,
-  Bo as CheckboxMimir,
+  Po as CheckboxMimir,
   Tr as Chip,
-  we as ClearButton,
-  Ae as CopyText,
-  C as DatePicker,
+  De as ClearButton,
+  we as CopyText,
+  b as DatePicker,
   Q as Drawer,
   _ as Dropdown,
   to as DropdownSelect,
-  Mo as EAccordionSize,
+  Ro as EAccordionSize,
   $r as EAvatarSize,
   oe as EAvatarVariant,
-  p as EButtonForm,
-  a as EButtonSize,
+  a as EButtonForm,
+  p as EButtonSize,
   i as EButtonVariantBorderless,
   m as EButtonVariantDefault,
   n as EButtonVariantOutline,
   x as EButtonVariantRound,
-  Ir as EChipSize,
-  Pr as EChipVariant,
+  gr as EChipSize,
+  Br as EChipVariant,
   qo as ECounterVariant,
-  M as EDatePickerBorderRadius,
+  R as EDatePickerBorderRadius,
   X as EDrawerPosition,
   oo as EDropdownAlign,
   ro as EDropdownPlacement,
-  ao as EDropdownSelectSize,
+  po as EDropdownSelectSize,
   xe as EFileItemVariant,
-  Mr as EGosZnakSize,
+  Rr as EGosZnakSize,
   yr as EGosZnakType,
-  wr as EInputRangeSliderBorderState,
-  br as EInputRangeSliderPositions,
+  Dr as EInputRangeSliderBorderState,
+  Mr as EInputRangeSliderPositions,
   S as EInputSize,
   d as EInputStatus,
   s as EInputVariant,
@@ -127,37 +130,39 @@ export {
   lr as ELinkSize,
   Er as ELinkVariant,
   q as ELoaderSize,
-  pe as ELoadingIndicatorPlacement,
+  ae as ELoadingIndicatorPlacement,
   F as EMergedButtonVariantRound,
   se as EMessageShortReplyVariant,
-  ae as EMultiSelectSearchSize,
+  ve as EMiniButtonSize,
+  Fe as EMiniButtonVariant,
+  pe as EMultiSelectSearchSize,
   ur as ENotificationBadgeSize,
-  ye as EProgressBarPosition,
-  go as ESSLoadingPlacement,
-  Io as ESelectSearchBorderRadius,
-  Po as ESelectSearchSize,
+  Oe as EProgressBarPosition,
+  Vo as ESSLoadingPlacement,
+  go as ESelectSearchBorderRadius,
+  Bo as ESelectSearchSize,
   Wr as ESkeletonVariant,
-  ge as ESortDirection,
+  Ve as ESortDirection,
   xo as EStepColor,
   fo as EStepsSize,
   No as ETabTrailSize,
-  Ie as ETableDisplayMode,
-  Pe as ETableScrollButtonVariant,
-  Ve as ETableScrollIconName,
-  Be as ETableVariant,
+  ge as ETableDisplayMode,
+  Be as ETableScrollButtonVariant,
+  Ie as ETableScrollIconName,
+  Pe as ETableVariant,
   Lo as ETagSize,
-  Do as ETagType,
-  g as ETextAreaInputSize,
+  Ao as ETagType,
+  V as ETextAreaInputSize,
   Xo as EToastPosition,
   Yo as EToastVariant,
-  ar as EUploaderFilesVariant,
-  zr as EUploaderType,
+  pr as EUploaderFilesVariant,
+  hr as EUploaderType,
   so as EVoteSize,
-  Cr as GosZnak,
+  br as GosZnak,
   N as Image,
   l as Input,
-  P as InputPassword,
-  B as InputPhoneNumber,
+  B as InputPassword,
+  P as InputPhoneNumber,
   Lr as InputRangeSlider,
   xr as Link,
   me as ListFiles,
@@ -166,33 +171,35 @@ export {
   O as Loader,
   U as MergedButton,
   Se as MessageShortReply,
+  ye as MiniButton,
   ee as MultiSelectSearch,
   dr as NotificationBadge,
-  D as OtpInput,
+  A as OtpInput,
   Oo as Pagination,
-  ze as PromoSlider,
-  b as RadioGroup,
+  he as PromoSlider,
+  M as RadioGroup,
   co as SelectSearch,
   jr as SkeletonBrick,
   Kr as SkeletonCircle,
   Hr as SkeletonText,
-  Re as Slider,
+  Ne as Slider,
   J as SliderLazy,
   mo as Steps,
   vr as Switcher,
   Fo as TabTrail,
   ce as Table,
-  zo as Tag,
+  ho as Tag,
   c as TextArea,
-  bo as Timer,
+  Ce as TextAreaV2,
+  Mo as Timer,
   Jo as ToastProvider,
   Zr as TwinSwitcher,
-  Br as UniversalUploader,
+  Pr as UniversalUploader,
   mr as Uploader,
   tr as UploaderFiles,
   $o as UploaderPhotos,
   Eo as Vote,
-  z as getMaskedInputPhoneValue,
+  h as getMaskedInputPhoneValue,
   k as getUnmaskedInputValue,
   Qo as useToast
 };

package/dist/hooks/useLockBodyScroll/useLockBodyScroll.js

@@ -1,16 +1,13 @@
-import { useLayoutEffect as l } from "react";
-function i({ on: e, paddingRight: o }) {
-  l(() => {
-    const t = document.documentElement.scrollHeight > document.documentElement.clientHeight;
-    if (!e || !t) return;
-    const d = window.getComputedStyle(document.body).overflow, n = window.getComputedStyle(
-      document.body
-    ).paddingRight;
-    return document.body.style.overflow = "hidden", document.body.style.paddingRight = `${o}px`, () => {
-      document.body.style.overflow = d, document.body.style.paddingRight = n;
-    };
-  }, [e, o]);
+import { useLayoutEffect as c } from "react";
+function n({ on: e, paddingRight: t }) {
+  c(() => {
+    const o = document.documentElement.scrollHeight > document.documentElement.clientHeight;
+    if (!(!e || !o))
+      return document.body.style.overflow = "hidden", document.body.style.paddingRight = `${t}px`, () => {
+        document.body.style.overflow = "", document.body.style.paddingRight = "";
+      };
+  }, [e, t]);
 }
 export {
-  i as useLockBodyScroll
+  n as useLockBodyScroll
 };

package/dist/index.js

@@ -1,16 +1,16 @@
 import { Button as e } from "./components/Button/Button.js";
-import { EButtonForm as p, EButtonSize as a, EButtonVariantBorderless as m, EButtonVariantDefault as i, EButtonVariantOutline as f, EButtonVariantRound as x } from "./components/Button/constants.js";
+import { EButtonForm as p, EButtonSize as a, EButtonVariantBorderless as i, EButtonVariantDefault as m, EButtonVariantOutline as f, EButtonVariantRound as x } from "./components/Button/constants.js";
 import { I as l } from "./Input-DgWOCNwP.js";
-import { EInputSize as E, EInputStatus as S, EInputVariant as d } from "./components/Input/constants.js";
+import { EInputSize as E, EInputStatus as u, EInputVariant as S } from "./components/Input/constants.js";
 import { TextArea as c } from "./components/TextArea/TextArea.js";
 import { ETextAreaInputSize as g } from "./components/TextArea/constants.js";
-import { InputPassword as P } from "./components/InputPassword/InputPassword.js";
-import { InputPhoneNumber as B } from "./components/InputPhoneNumber/InputPhoneNumber.js";
-import { getMaskedInputPhoneValue as k, getUnmaskedInputValue as z } from "./components/InputPhoneNumber/utils.js";
-import { OtpInput as C } from "./components/OtpInput/OtpInput.js";
-import { RadioGroup as M } from "./components/RadioGroup/RadioGroup.js";
+import { InputPassword as I } from "./components/InputPassword/InputPassword.js";
+import { InputPhoneNumber as P } from "./components/InputPhoneNumber/InputPhoneNumber.js";
+import { getMaskedInputPhoneValue as h, getUnmaskedInputValue as k } from "./components/InputPhoneNumber/utils.js";
+import { OtpInput as b } from "./components/OtpInput/OtpInput.js";
+import { RadioGroup as L } from "./components/RadioGroup/RadioGroup.js";
 import { DatePicker as D } from "./components/DatePicker/DatePicker.js";
-import { EDatePickerBorderRadius as w } from "./components/DatePicker/constants.js";
+import { EDatePickerBorderRadius as A } from "./components/DatePicker/constants.js";
 import { MergedButton as U } from "./components/MergedButton/MergedButton.js";
 import { EMergedButtonVariantRound as F } from "./components/MergedButton/constants.js";
 import { AppImage as N } from "./components/Image/Image.js";
@@ -23,18 +23,18 @@ import { Dropdown as _ } from "./components/Dropdown/Dropdown.js";
 import { EDropdownAlign as oo, EDropdownPlacement as ro } from "./components/Dropdown/constants.js";
 import { DropdownSelect as to } from "./components/DropdownSelect/DropdownSelect.js";
 import { EDropdownSelectSize as ao } from "./components/DropdownSelect/constants.js";
-import { Steps as io } from "./components/Steps/Steps.js";
+import { Steps as mo } from "./components/Steps/Steps.js";
 import { EStepColor as xo, EStepsSize as no } from "./components/Steps/constants.js";
 import { Vote as so } from "./components/Vote/Vote.js";
-import { EVoteSize as So } from "./components/Vote/constants.js";
+import { EVoteSize as uo } from "./components/Vote/constants.js";
 import { SelectSearch as co } from "./components/SelectSearch/SelectSearch.js";
-import { ELoadingIndicatorPlacement as go, ESelectSearchBorderRadius as Io, ESelectSearchSize as Po } from "./components/SelectSearch/constants.js";
-import { CheckboxMimir as Bo } from "./components/CheckboxMimir/CheckboxMimir.js";
-import { Tag as ko } from "./components/Tag/Tag.js";
-import { ETagSize as bo, ETagType as Co } from "./components/Tag/constants.js";
-import { Timer as Mo } from "./components/Timer/Timer.js";
+import { ELoadingIndicatorPlacement as go, ESelectSearchBorderRadius as Bo, ESelectSearchSize as Io } from "./components/SelectSearch/constants.js";
+import { CheckboxMimir as Po } from "./components/CheckboxMimir/CheckboxMimir.js";
+import { Tag as ho } from "./components/Tag/Tag.js";
+import { ETagSize as Mo, ETagType as bo } from "./components/Tag/constants.js";
+import { Timer as Lo } from "./components/Timer/Timer.js";
 import { Accordion as Do } from "./components/Accordion/Accordion.js";
-import { EAccordionSize as wo } from "./components/Accordion/constants.js";
+import { EAccordionSize as Ao } from "./components/Accordion/constants.js";
 import { AccordionItem as Uo } from "./components/Accordion/AccordionItem/AccordionItem.js";
 import { TabTrail as Fo } from "./components/TabTrail/TabTrail.js";
 import { ETabTrailSize as No } from "./components/TabTrail/constants.js";
@@ -47,19 +47,19 @@ import { UploaderPhotos as $o } from "./components/UploaderPhotos/UploaderPhotos
 import { ListPhoto as rr } from "./components/ListPhotos/ListPhoto/ListPhoto.js";
 import { UploaderFiles as tr } from "./components/UploaderFiles/UploaderFiles.js";
 import { EUploaderFilesVariant as ar } from "./components/UploaderFiles/constants.js";
-import { Uploader as ir } from "./components/Uploader/Uploader.js";
+import { Uploader as mr } from "./components/Uploader/Uploader.js";
 import { Link as xr } from "./components/AnchorLink/Link.js";
 import { ELinkSize as lr, ELinkVariant as sr } from "./components/AnchorLink/constants.js";
-import { NotificationBadge as Sr } from "./components/NotificationBadge/NotificationBadge.js";
-import { ENotificationBadgeSize as ur } from "./components/NotificationBadge/constants.js";
+import { NotificationBadge as ur } from "./components/NotificationBadge/NotificationBadge.js";
+import { ENotificationBadgeSize as dr } from "./components/NotificationBadge/constants.js";
 import { Chip as Tr } from "./components/Chip/Chip.js";
-import { EChipSize as Ir, EChipVariant as Pr } from "./components/Chip/constants.js";
-import { UniversalUploader as Br } from "./components/UniversalUploader/UniversalUploader.js";
-import { EUploaderType as kr } from "./components/UniversalUploader/constants.js";
-import { InputRangeSlider as br } from "./components/InputRangeSlider/InputRangeSlider.js";
-import { EInputRangeSliderBorderState as Lr, EInputRangeSliderPositions as Mr } from "./components/InputRangeSlider/constants.js";
+import { EChipSize as Br, EChipVariant as Ir } from "./components/Chip/constants.js";
+import { UniversalUploader as Pr } from "./components/UniversalUploader/UniversalUploader.js";
+import { EUploaderType as hr } from "./components/UniversalUploader/constants.js";
+import { InputRangeSlider as Mr } from "./components/InputRangeSlider/InputRangeSlider.js";
+import { EInputRangeSliderBorderState as Cr, EInputRangeSliderPositions as Lr } from "./components/InputRangeSlider/constants.js";
 import { GosZnak as Dr } from "./components/GosZnak/GosZnak.js";
-import { EGosZnakSize as wr, EGosZnakType as Ar } from "./components/GosZnak/constants.js";
+import { EGosZnakSize as Ar, EGosZnakType as wr } from "./components/GosZnak/constants.js";
 import { Switcher as vr } from "./components/Switcher/Switcher.js";
 import { ELabelPositions as Gr } from "./components/Switcher/constants.js";
 import { TwinSwitcher as Or } from "./components/TwinSwitcher/TwinSwitcher.js";
@@ -71,155 +71,162 @@ import { Avatar as Yr } from "./components/Avatar/Avatar.js";
 import { EAvatarSize as $r, EAvatarVariant as oe } from "./components/Avatar/constants.js";
 import { MultiSelectSearch as ee } from "./components/MultiSelectSearch/MultiSelectSearch.js";
 import { ELoadingIndicatorPlacement as pe, EMultiSelectSearchSize as ae } from "./components/MultiSelectSearch/constants.js";
-import { ListFiles as ie } from "./components/ListFiles/ListFiles.js";
+import { ListFiles as me } from "./components/ListFiles/ListFiles.js";
 import { EFileItemVariant as xe } from "./components/ListFiles/constants.js";
 import { ListPhotos as le } from "./components/ListPhotos/ListPhotos.js";
 import { MessageShortReply as Ee } from "./components/MessageShortReply/MessageShortReply.js";
-import { EMessageShortReplyVariant as de } from "./components/MessageShortReply/constants.js";
+import { EMessageShortReplyVariant as Se } from "./components/MessageShortReply/constants.js";
 import { Table as ce } from "./components/Table/Table.js";
-import { ESortDirection as ge, ETableDisplayMode as Ie, ETableScrollButtonVariant as Pe, ETableScrollIconName as Ve, ETableVariant as Be } from "./components/Table/constants.js";
-import { PromoSlider as ke } from "./components/PromoSlider/PromoSlider.js";
-import { CardTrail as be } from "./components/CardTrail/CardTrail.js";
-import { ClearButton as Le } from "./components/InputClearButton/ClearButton.js";
+import { ESortDirection as ge, ETableDisplayMode as Be, ETableScrollButtonVariant as Ie, ETableScrollIconName as Ve, ETableVariant as Pe } from "./components/Table/constants.js";
+import { PromoSlider as he } from "./components/PromoSlider/PromoSlider.js";
+import { CardTrail as Me } from "./components/CardTrail/CardTrail.js";
+import { ClearButton as Ce } from "./components/InputClearButton/ClearButton.js";
 import { CopyText as ye } from "./components/CopyText/CopyText.js";
-import { useMediaQuery as Re } from "./hooks/useMediaQuery/useMediaQuery.js";
-import { EMediaQuery as Ae, EMinMediaQuery as Ue } from "./hooks/useMediaQuery/constants.js";
-import { useLockBodyScroll as Fe } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
-import { useInterval as Ne } from "./hooks/useInterval/useInterval.js";
-import { useTimer as Qe } from "./hooks/useTimer/index.js";
-import { useCopyToClipboard as je } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
-import { useMergeRefs as He } from "./hooks/useMergeRefs/useMergeRefs.js";
-import { useResizeObserver as Ke } from "./hooks/useResizeObserver/useResizeObserver.js";
-import { useCallbackRef as Xe } from "./hooks/useCallbackRef/index.js";
-import { useThrottledCallback as _e } from "./hooks/useThrottledCallback/index.js";
-import { Icon as ot } from "./icons/Icon.js";
-import { formating as et } from "./utils/index.js";
-import { default as pt } from "./components/Slider/Slider.js";
-import { EProgressBarPosition as mt } from "./components/Slider/constants.js";
-import { parseDate as ft } from "./utils/formating/Date.js";
+import { TextArea as Re } from "./components/TextAreaV2/TextArea.js";
+import { MiniButton as we } from "./components/MiniButton/MiniButton.js";
+import { EMiniButtonSize as ve, EMiniButtonVariant as Fe } from "./components/MiniButton/constants.js";
+import { useMediaQuery as Ne } from "./hooks/useMediaQuery/useMediaQuery.js";
+import { EMediaQuery as Qe, EMinMediaQuery as Ze } from "./hooks/useMediaQuery/constants.js";
+import { useLockBodyScroll as qe } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
+import { useInterval as Je } from "./hooks/useInterval/useInterval.js";
+import { useTimer as We } from "./hooks/useTimer/index.js";
+import { useCopyToClipboard as Ye } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
+import { useMergeRefs as $e } from "./hooks/useMergeRefs/useMergeRefs.js";
+import { useResizeObserver as rt } from "./hooks/useResizeObserver/useResizeObserver.js";
+import { useCallbackRef as tt } from "./hooks/useCallbackRef/index.js";
+import { useThrottledCallback as at } from "./hooks/useThrottledCallback/index.js";
+import { Icon as mt } from "./icons/Icon.js";
+import { formating as xt } from "./utils/index.js";
+import { default as lt } from "./components/Slider/Slider.js";
+import { EProgressBarPosition as Et } from "./components/Slider/constants.js";
+import { parseDate as St } from "./utils/formating/Date.js";
 import './assets/index.css';export {
   Do as Accordion,
   Uo as AccordionItem,
   Yr as Avatar,
   e as Button,
-  be as CardTrail,
-  Bo as CheckboxMimir,
+  Me as CardTrail,
+  Po as CheckboxMimir,
   Tr as Chip,
-  Le as ClearButton,
+  Ce as ClearButton,
   ye as CopyText,
   D as DatePicker,
   K as Drawer,
   _ as Dropdown,
   to as DropdownSelect,
-  wo as EAccordionSize,
+  Ao as EAccordionSize,
   $r as EAvatarSize,
   oe as EAvatarVariant,
   p as EButtonForm,
   a as EButtonSize,
-  m as EButtonVariantBorderless,
-  i as EButtonVariantDefault,
+  i as EButtonVariantBorderless,
+  m as EButtonVariantDefault,
   f as EButtonVariantOutline,
   x as EButtonVariantRound,
-  Ir as EChipSize,
-  Pr as EChipVariant,
+  Br as EChipSize,
+  Ir as EChipVariant,
   jo as ECounterVariant,
-  w as EDatePickerBorderRadius,
+  A as EDatePickerBorderRadius,
   X as EDrawerPosition,
   oo as EDropdownAlign,
   ro as EDropdownPlacement,
   ao as EDropdownSelectSize,
   xe as EFileItemVariant,
-  wr as EGosZnakSize,
-  Ar as EGosZnakType,
-  Lr as EInputRangeSliderBorderState,
-  Mr as EInputRangeSliderPositions,
+  Ar as EGosZnakSize,
+  wr as EGosZnakType,
+  Cr as EInputRangeSliderBorderState,
+  Lr as EInputRangeSliderPositions,
   E as EInputSize,
-  S as EInputStatus,
-  d as EInputVariant,
+  u as EInputStatus,
+  S as EInputVariant,
   Gr as ELabelPositions,
   lr as ELinkSize,
   sr as ELinkVariant,
   j as ELoaderSize,
   pe as ELoadingIndicatorPlacement,
-  Ae as EMediaQuery,
+  Qe as EMediaQuery,
   F as EMergedButtonVariantRound,
-  de as EMessageShortReplyVariant,
-  Ue as EMinMediaQuery,
+  Se as EMessageShortReplyVariant,
+  Ze as EMinMediaQuery,
+  ve as EMiniButtonSize,
+  Fe as EMiniButtonVariant,
   ae as EMultiSelectSearchSize,
-  ur as ENotificationBadgeSize,
-  mt as EProgressBarPosition,
+  dr as ENotificationBadgeSize,
+  Et as EProgressBarPosition,
   go as ESSLoadingPlacement,
-  Io as ESelectSearchBorderRadius,
-  Po as ESelectSearchSize,
+  Bo as ESelectSearchBorderRadius,
+  Io as ESelectSearchSize,
   Wr as ESkeletonVariant,
   ge as ESortDirection,
   xo as EStepColor,
   no as EStepsSize,
   No as ETabTrailSize,
-  Ie as ETableDisplayMode,
-  Pe as ETableScrollButtonVariant,
+  Be as ETableDisplayMode,
+  Ie as ETableScrollButtonVariant,
   Ve as ETableScrollIconName,
-  Be as ETableVariant,
-  bo as ETagSize,
-  Co as ETagType,
+  Pe as ETableVariant,
+  Mo as ETagSize,
+  bo as ETagType,
   g as ETextAreaInputSize,
   Xo as EToastPosition,
   Yo as EToastVariant,
   ar as EUploaderFilesVariant,
-  kr as EUploaderType,
-  So as EVoteSize,
+  hr as EUploaderType,
+  uo as EVoteSize,
   Dr as GosZnak,
-  ot as Icon,
+  mt as Icon,
   N as Image,
   l as Input,
-  P as InputPassword,
-  B as InputPhoneNumber,
-  br as InputRangeSlider,
+  I as InputPassword,
+  P as InputPhoneNumber,
+  Mr as InputRangeSlider,
   xr as Link,
-  ie as ListFiles,
+  me as ListFiles,
   rr as ListPhoto,
   le as ListPhotos,
   Q as Loader,
   U as MergedButton,
   Ee as MessageShortReply,
+  we as MiniButton,
   ee as MultiSelectSearch,
-  Sr as NotificationBadge,
-  C as OtpInput,
+  ur as NotificationBadge,
+  b as OtpInput,
   Qo as Pagination,
-  ke as PromoSlider,
-  M as RadioGroup,
+  he as PromoSlider,
+  L as RadioGroup,
   co as SelectSearch,
   Zr as SkeletonBrick,
   Jr as SkeletonCircle,
   qr as SkeletonText,
-  pt as Slider,
+  lt as Slider,
   H as SliderLazy,
-  io as Steps,
+  mo as Steps,
   vr as Switcher,
   Fo as TabTrail,
   ce as Table,
-  ko as Tag,
+  ho as Tag,
   c as TextArea,
-  Mo as Timer,
+  Re as TextAreaV2,
+  Lo as Timer,
   Ho as ToastProvider,
   Or as TwinSwitcher,
-  Br as UniversalUploader,
-  ir as Uploader,
+  Pr as UniversalUploader,
+  mr as Uploader,
   tr as UploaderFiles,
   $o as UploaderPhotos,
   so as Vote,
-  et as formating,
-  k as getMaskedInputPhoneValue,
-  z as getUnmaskedInputValue,
-  ft as parseDate,
-  Xe as useCallbackRef,
-  je as useCopyToClipboard,
-  Ne as useInterval,
-  Fe as useLockBodyScroll,
-  Re as useMediaQuery,
-  He as useMergeRefs,
-  Ke as useResizeObserver,
-  _e as useThrottledCallback,
-  Qe as useTimer,
+  xt as formating,
+  h as getMaskedInputPhoneValue,
+  k as getUnmaskedInputValue,
+  St as parseDate,
+  tt as useCallbackRef,
+  Ye as useCopyToClipboard,
+  Je as useInterval,
+  qe as useLockBodyScroll,
+  Ne as useMediaQuery,
+  $e as useMergeRefs,
+  rt as useResizeObserver,
+  at as useThrottledCallback,
+  We as useTimer,
   Ko as useToast
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.49.1",
+  "version": "1.50.0",
   "type": "module",
   "exports": {
     ".": {