@namuna-nur/ui-kit 1.10.5 → 1.10.7

package/lib/atoms/index.js

@@ -1,19 +1,18 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import * as F from "react";
-import { forwardRef as z, useState as re, useRef as U } from "react";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import * as W from "react";
+import { forwardRef as F, useState as te, useRef as G } from "react";
 import { cn as n } from "../utils/index.js";
-import { S as X, a as te, b as oe, c as E } from "../shared/assets-icons-4.js";
-import { S as G, a as ae, b as ne, c as ie, d as de } from "../shared/assets-icons-0.js";
-import { T as le, a as se, P as be, b as ce, c as pe } from "../shared/shared.js";
-import { format as ue } from "date-fns";
+import { S as X, a as H, b as oe } from "../shared/assets-icons-4.js";
+import { S as U, a as ie, b as ae, c as ne, d as de } from "../shared/assets-icons-0.js";
+import { T as le, a as se, P as be, b as ce, c as ue } from "../shared/shared.js";
 import * as Y from "@radix-ui/react-switch";
-import { S as fe, a as ge } from "../shared/assets-icons-3.js";
-import * as he from "@radix-ui/react-tooltip";
-import { S as xe, a as ve } from "../shared/assets-icons-2.js";
-import { useOption as ye } from "../hooks/index.js";
-import { Avatar as me, AvatarImage as ke, AvatarFallback as we } from "@radix-ui/react-avatar";
-import * as _ from "@radix-ui/react-tabs";
-const O = {
+import { S as pe, a as fe } from "../shared/assets-icons-3.js";
+import * as ge from "@radix-ui/react-tooltip";
+import { S as he, a as xe } from "../shared/assets-icons-2.js";
+import { useOption as ve } from "../hooks/index.js";
+import { Avatar as ye, AvatarImage as me, AvatarFallback as ke } from "@radix-ui/react-avatar";
+import * as V from "@radix-ui/react-tabs";
+const L = {
   base: "group inline-flex items-center justify-center transition-colors rounded-[10px] border outline-none",
   icon: {
     disabled: {
@@ -64,30 +63,30 @@ const O = {
       hover: "hover:bg-transparent hover:text-primary-20 hover:border-transparent"
     }
   }
-}, Ze = z(
+}, Xe = F(
   ({
     children: e,
     classNames: r,
     disabled: a = !1,
-    icon: t,
+    icon: o,
     iconDimensions: d = { height: 15, width: 15 },
     iconPosition: s = "right",
     size: l = "medium",
-    variant: i = "primary",
+    variant: t = "primary",
     isShadow: b = !1,
-    ...p
-  }, u) => {
-    const f = O.icon, g = O.sizes[l], h = O.variants[i] || O.variants.primary, v = f.variants[i], x = f.disabled[i];
+    ...u
+  }, p) => {
+    const f = L.icon, g = L.sizes[l], h = L.variants[t] || L.variants.primary, y = f.variants[t], x = f.disabled[t];
     return /* @__PURE__ */ c(
       "button",
       {
         role: "button",
-        ...p,
-        type: p.type || "button",
-        ref: u,
+        ...u,
+        type: u.type || "button",
+        ref: p,
         disabled: a,
         className: n(
-          O.base,
+          L.base,
           g.padding,
           g.fontSize,
           h.base,
@@ -95,19 +94,19 @@ const O = {
           !a && h.hover,
           !a && h.active,
           a && h.disabled,
-          !!t && f.parent,
-          !!t && !e && "min-w-0",
-          i === "primary" && b && "shadow-3xl",
+          !!o && f.parent,
+          !!o && !e && "min-w-0",
+          t === "primary" && b && "shadow-3xl",
           r == null ? void 0 : r.base
         ),
         children: [
-          !!t && s === "left" && /* @__PURE__ */ o(
-            t,
+          !!o && s === "left" && /* @__PURE__ */ i(
+            o,
             {
               "aria-label": "icon",
               "aria-hidden": !0,
               className: n(
-                !a && v,
+                !a && y,
                 a && x,
                 r == null ? void 0 : r.icon
               ),
@@ -117,13 +116,13 @@ const O = {
             }
           ),
           e,
-          !!t && s === "right" && /* @__PURE__ */ o(
-            t,
+          !!o && s === "right" && /* @__PURE__ */ i(
+            o,
             {
               "aria-label": "icon",
               "aria-hidden": !0,
               className: n(
-                !a && v,
+                !a && y,
                 a && x,
                 r == null ? void 0 : r.icon
               ),
@@ -136,27 +135,27 @@ const O = {
       }
     );
   }
-), Me = z(
+), we = F(
   ({
     classNames: e,
     disabled: r = !1,
     icon: a,
-    variant: t = "default",
+    variant: o = "default",
     shape: d,
     badge: s,
     iconSizes: l,
-    text: i,
+    text: t,
     ...b
-  }, p) => {
+  }, u) => {
     var x;
-    const u = R.icon, f = R.variants[t], g = u.variants[t], h = (x = R.shape) == null ? void 0 : x[d], v = u.disabled[t];
+    const p = R.icon, f = R.variants[o], g = p.variants[o], h = (x = R.shape) == null ? void 0 : x[d], y = p.disabled[o];
     return /* @__PURE__ */ c(
       "button",
       {
         ...b,
         role: "button",
         type: b.type || "button",
-        ref: p,
+        ref: u,
         disabled: r,
         className: n(
           R.base,
@@ -170,16 +169,16 @@ const O = {
           e == null ? void 0 : e.button
         ),
         children: [
-          s && /* @__PURE__ */ o("span", { className: R.badgeStyles.badgeStyles, children: s }),
-          !!a && /* @__PURE__ */ o(
+          s && /* @__PURE__ */ i("span", { className: R.badgeStyles.badgeStyles, children: s }),
+          !!a && /* @__PURE__ */ i(
             a,
             {
               "aria-label": "icon",
               "aria-hidden": !0,
               className: n(
-                u.base,
+                p.base,
                 !r && g,
-                r && v,
+                r && y,
                 e == null ? void 0 : e.icon
               ),
               height: l == null ? void 0 : l.height,
@@ -187,7 +186,7 @@ const O = {
               viewBox: l == null ? void 0 : l.viewBox
             }
           ),
-          !!i && /* @__PURE__ */ o(C, { className: e == null ? void 0 : e.text, children: i })
+          !!t && /* @__PURE__ */ i(w, { className: e == null ? void 0 : e.text, children: t })
         ]
       }
     );
@@ -238,7 +237,7 @@ const O = {
       disabled: "disabled:border-transparent disabled:cursor-default"
     }
   }
-}, A = {
+}, B = {
   active: "active:bg-tertiary-10 active:border-tertiary-10 outline-none",
   base: "border border-secondary-10/[.25] hover:border-primary-10 flex items-center justify-center rounded-[6px] cursor-pointer",
   checked: "bg-primary-10 border-primary-10",
@@ -255,48 +254,48 @@ const O = {
       label: "size-2.5"
     }
   }
-}, Ne = z(
+}, Ye = F(
   ({
     checked: e = !1,
     className: r = "",
     disabled: a,
-    id: t,
+    id: o,
     onChange: d,
     size: s = "large",
     ...l
-  }, i) => {
-    const b = A.base, p = A.sizes[s];
+  }, t) => {
+    const b = B.base, u = B.sizes[s];
     return /* @__PURE__ */ c(
       "label",
       {
         "aria-label": "checkbox-label",
-        htmlFor: t,
+        htmlFor: o,
         tabIndex: 0,
         className: n(
-          p.label,
+          u.label,
           b,
-          e && A.checked,
-          !a && A.active,
-          !a && e && A.hover,
-          a && A.disabled,
+          e && B.checked,
+          !a && B.active,
+          !a && e && B.hover,
+          a && B.disabled,
           r
         ),
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ i(
             "input",
             {
               ...l,
               role: "checkbox",
-              id: t,
+              id: o,
               disabled: a,
               checked: !!e,
               onChange: d,
-              ref: i,
+              ref: t,
               type: "checkbox",
               className: "hidden peer"
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ i(
             X,
             {
               width: 20,
@@ -316,57 +315,57 @@ const O = {
   h4: "text-h4",
   h5: "text-h5",
   h6: "text-h6"
-}, er = ({
+}, Ze = ({
   children: e,
   className: r = "",
   variant: a = "h1",
-  weight: t = "font-regular",
+  weight: o = "font-regular",
   ...d
-}) => /* @__PURE__ */ o(
+}) => /* @__PURE__ */ i(
   a,
   {
     ...d,
-    className: n(Se[a], t, r),
+    className: n(Se[a], o, r),
     children: e
   }
-), rr = z(
+), Ne = F(
   ({
     disabled: e,
     onChange: r,
     placeholder: a,
-    autoFocus: t = !1,
+    autoFocus: o = !1,
     status: d,
     maxLength: s,
     id: l,
-    classNames: i,
+    classNames: t,
     ...b
-  }, p) => {
-    const u = B.parent, f = B.base, g = B.state, h = B.disabled, v = B.styles, x = B.maxLength;
-    return /* @__PURE__ */ c("div", { className: n(u, i == null ? void 0 : i.parent), children: [
-      /* @__PURE__ */ o(
+  }, u) => {
+    const p = z.parent, f = z.base, g = z.state, h = z.disabled, y = z.styles, x = z.maxLength;
+    return /* @__PURE__ */ c("div", { className: n(p, t == null ? void 0 : t.parent), children: [
+      /* @__PURE__ */ i(
         "input",
         {
           ...b,
           role: "textbox",
-          ref: p,
+          ref: u,
           id: l,
           disabled: e,
-          autoFocus: t,
+          autoFocus: o,
           onChange: r,
           maxLength: s,
           className: n(
             f,
             g.focus,
             !e && g.hover,
-            d && (v == null ? void 0 : v[d]),
+            d && (y == null ? void 0 : y[d]),
             e && h,
-            i == null ? void 0 : i.target
+            t == null ? void 0 : t.target
           ),
           placeholder: a
         }
       ),
       s && /* @__PURE__ */ c(
-        C,
+        w,
         {
           variant: "span",
           className: n(
@@ -382,7 +381,7 @@ const O = {
       )
     ] });
   }
-), B = {
+), z = {
   parent: "relative flex flex-col items-start w-full",
   base: "text-dark-10 text-sm leading-none w-full rounded-[10px] bg-gray-50 border border-gray-50 p-[12.5px] placeholder:text-dark-10/[.40]",
   disabled: "bg-secondary-10/[.08] text-gray-30 cursor-not-allowed",
@@ -397,10 +396,10 @@ const O = {
     success: "bg-white border-success-10 ring-2 ring-success-10/[.20] hover:border-success-10"
   },
   maxLength: "ml-auto px-1 mt-1 text-body-10 text-white rounded"
-}, tr = F.forwardRef(
-  ({ htmlFor: e, className: r, children: a, disabled: t, ...d }, s) => {
-    const l = J.base, i = J.disabled;
-    return /* @__PURE__ */ o(
+}, er = W.forwardRef(
+  ({ htmlFor: e, className: r, children: a, disabled: o, ...d }, s) => {
+    const l = J.base, t = J.disabled;
+    return /* @__PURE__ */ i(
       "label",
       {
         ...d,
@@ -408,7 +407,7 @@ const O = {
         "aria-label": "input-label",
         ref: s,
         htmlFor: e,
-        className: n(l, t && i, r),
+        className: n(l, o && t, r),
         children: a
       }
     );
@@ -417,168 +416,71 @@ const O = {
   base: "text-secondary-10 text-sm font-sans font-semibold leading-none",
   disabled: "text-dark-30/25 cursor-not-allowed"
 }, Te = {
-  success: /* @__PURE__ */ o(G, { className: "text-sidebar-10 fill-sidebar-10" }),
-  danger: /* @__PURE__ */ o(ie, { className: "text-sidebar-10 fill-sidebar-10" }),
-  info: /* @__PURE__ */ o(ne, { className: "text-sidebar-10 fill-sidebar-10" }),
-  warning: /* @__PURE__ */ o(ae, { className: "text-sidebar-10 fill-sidebar-10" }),
-  default: /* @__PURE__ */ o(G, { className: "text-sidebar-10 fill-sidebar-10" })
-}, or = ({
+  success: /* @__PURE__ */ i(U, { className: "text-sidebar-10 fill-sidebar-10" }),
+  danger: /* @__PURE__ */ i(ne, { className: "text-sidebar-10 fill-sidebar-10" }),
+  info: /* @__PURE__ */ i(ae, { className: "text-sidebar-10 fill-sidebar-10" }),
+  warning: /* @__PURE__ */ i(ie, { className: "text-sidebar-10 fill-sidebar-10" }),
+  default: /* @__PURE__ */ i(U, { className: "text-sidebar-10 fill-sidebar-10" })
+}, rr = ({
   type: e = "info",
   title: r,
   description: a,
-  withIcon: t = !0
+  withIcon: o = !0
 }) => /* @__PURE__ */ c(
   "div",
   {
     className: n(
-      t ? "items-start" : "justify-center",
+      o ? "items-start" : "justify-center",
       "flex items-center gap-1.5"
     ),
     children: [
-      t && /* @__PURE__ */ o("div", { "data-testid": "notification-icon", children: e && Te[e] }),
+      o && /* @__PURE__ */ i("div", { "data-testid": "notification-icon", children: e && Te[e] }),
       /* @__PURE__ */ c("div", { className: "flex flex-col", children: [
-        /* @__PURE__ */ o(le, { className: t ? "text-left" : "text-center", children: r }),
-        /* @__PURE__ */ o(se, { className: t ? "text-left" : "text-center", children: a })
+        /* @__PURE__ */ i(le, { className: o ? "text-left" : "text-center", children: r }),
+        /* @__PURE__ */ i(se, { className: o ? "text-left" : "text-center", children: a })
       ] })
     ]
   }
-), je = F.forwardRef(
-  ({
-    id: e,
-    text: r,
-    timestamp: a,
-    senderName: t,
-    status: d,
-    isMine: s = !1,
-    selected: l = !1,
-    firstMessage: i = !1,
-    classNames: b,
-    ...p
-  }, u) => {
-    const f = W.base, g = W.wrapper, h = W.sender, v = W.message, x = W.timestamp;
-    return /* @__PURE__ */ c(
-      "div",
-      {
-        ref: u,
-        id: e,
-        "data-testid": "message",
-        className: n(
-          f,
-          s && "bg-primary-10/[.15] border-dark-40/[.25]",
-          l && !s && "bg-dark-40/[.25]",
-          l && s && "bg-primary-10/[.55]",
-          b == null ? void 0 : b.base
-        ),
-        ...p,
-        children: [
-          /* @__PURE__ */ c("div", { className: n(g.above), children: [
-            !s && i && !!t && /* @__PURE__ */ o(
-              "span",
-              {
-                "data-testid": "sender-name",
-                className: n(h, b == null ? void 0 : b.sender),
-                children: t
-              }
-            ),
-            !!r && /* @__PURE__ */ o(
-              "span",
-              {
-                "data-testid": "message-text",
-                className: n(v, b == null ? void 0 : b.message),
-                children: r
-              }
-            )
-          ] }),
-          /* @__PURE__ */ c("div", { className: g.below, children: [
-            !!a && /* @__PURE__ */ o(
-              "span",
-              {
-                "data-testid": "message-timestamp",
-                className: n(
-                  x,
-                  b == null ? void 0 : b.timestamp,
-                  s ? "text-primary-10" : "text-dark-40/50",
-                  l && "text-dark-30"
-                ),
-                children: ue(a, "HH:mm")
-              }
-            ),
-            s && !!d && /* @__PURE__ */ c("div", { "data-testid": "message-status", className: "translate-y-0.5", children: [
-              d === "delivered" && /* @__PURE__ */ o(
-                te,
-                {
-                  className: "fill-primary-10",
-                  width: 16,
-                  height: 16,
-                  viewBox: "0 0 24 24"
-                }
-              ),
-              d === "read" && /* @__PURE__ */ o(
-                oe,
-                {
-                  className: "fill-transparent text-primary-10",
-                  width: 16,
-                  height: 16,
-                  viewBox: "0 0 16 16"
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    );
-  }
-);
-je.displayName = "Message";
-const W = {
-  base: "relative flex gap-3 bg-sidebar-10 border border-dark-40/[.25] rounded-[10px] px-2.5 py-2 min-h-10 w-max",
-  wrapper: {
-    above: "flex flex-col justify-center gap-0.5",
-    below: "flex items-end justify-end gap-px"
-  },
-  sender: "text-primary-10 text-sm font-sans font-medium",
-  message: "text-dark-30 text-sm font-sans font-medium",
-  timestamp: "text-xs leading-none"
-}, Ce = z(
-  ({ checked: e, disabled: r, id: a, onChange: t, size: d = "large", className: s, ...l }, i) => {
-    const b = k.sizes[d];
+), je = F(
+  ({ checked: e, disabled: r, id: a, onChange: o, size: d = "large", className: s, ...l }, t) => {
+    const b = S.sizes[d];
     return /* @__PURE__ */ c(
       "label",
       {
         htmlFor: a,
         "aria-label": "radio-label",
         className: n(
-          k.base,
+          S.base,
           b.label,
-          r && k.disabled,
-          !r && k.active,
-          !e && !r && k.hover,
-          !r && e && k.checked,
+          r && S.disabled,
+          !r && S.active,
+          !e && !r && S.hover,
+          !r && e && S.checked,
           s
         ),
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ i(
             "input",
             {
               ...l,
               id: a,
-              ref: i,
+              ref: t,
               type: "radio",
               role: "radio",
               checked: e,
               disabled: r,
-              onChange: t,
+              onChange: o,
               className: "hidden peer",
               "aria-checked": e,
-              readOnly: !t
+              readOnly: !o
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ i(
             "span",
             {
               "aria-hidden": "true",
               className: n(
-                e ? [k.radio.base, k.radio[d]] : "opacity-0",
+                e ? [S.radio.base, S.radio[d]] : "opacity-0",
                 r && "bg-primary-30"
               )
             }
@@ -588,8 +490,8 @@ const W = {
     );
   }
 );
-Ce.displayName = "Radio";
-const k = {
+je.displayName = "Radio";
+const S = {
   base: "border-2 border-dark-30/[.15] flex items-center justify-center rounded-full cursor-pointer outline-none bg-sidebar-10/[.08]",
   active: "active:border-primary-10",
   hover: "hover:border-primary-20/[.30]",
@@ -608,12 +510,12 @@ const k = {
       label: "size-5 min-w-5"
     }
   }
-}, ar = ({
+}, tr = ({
   text: e,
   variant: r = "default",
   className: a
-}) => /* @__PURE__ */ o(
-  C,
+}) => /* @__PURE__ */ i(
+  w,
   {
     className: n(K.base, K.status[r], a),
     "data-testid": "status",
@@ -628,47 +530,47 @@ const k = {
     warning: "bg-status-30",
     default: "bg-dark-30/[.15]"
   }
-}, { Root: Re, Thumb: Ae } = Y, nr = F.forwardRef(({ classNames: e, ...r }, a) => {
-  const t = r.checked ?? !1;
-  return /* @__PURE__ */ c(Re, { ref: a, className: n(T.base, e == null ? void 0 : e.root), ...r, children: [
-    /* @__PURE__ */ o(
+}, { Root: Ce, Thumb: Ae } = Y, or = W.forwardRef(({ classNames: e, ...r }, a) => {
+  const o = r.checked ?? !1;
+  return /* @__PURE__ */ c(Ce, { ref: a, className: n(C.base, e == null ? void 0 : e.root), ...r, children: [
+    /* @__PURE__ */ i(
       "div",
       {
         className: n(
-          T.iconWrapper.base,
+          C.iconWrapper.base,
           "left-0",
-          !t && T.iconWrapper.checked
+          !o && C.iconWrapper.checked
         ),
-        children: /* @__PURE__ */ o(
-          fe,
+        children: /* @__PURE__ */ i(
+          pe,
           {
             "data-testid": "list-icon",
-            className: n(t ? "fill-dark-30/25" : "fill-dark-30/[.80]")
+            className: n(o ? "fill-dark-30/25" : "fill-dark-30/[.80]")
           }
         )
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ i(
       "div",
       {
         className: n(
-          T.iconWrapper.base,
+          C.iconWrapper.base,
           "right-0",
-          t && T.iconWrapper.checked
+          o && C.iconWrapper.checked
         ),
-        children: /* @__PURE__ */ o(
-          ge,
+        children: /* @__PURE__ */ i(
+          fe,
           {
             "data-testid": "grid-icon",
-            className: n(t ? "fill-dark-30/[.80]" : "fill-dark-30/25")
+            className: n(o ? "fill-dark-30/[.80]" : "fill-dark-30/25")
           }
         )
       }
     ),
-    /* @__PURE__ */ o("div", { className: n(T.borderLine) }),
-    /* @__PURE__ */ o(Ae, { tabIndex: 1, className: n(T.thumb, e == null ? void 0 : e.thumb) })
+    /* @__PURE__ */ i("div", { className: n(C.borderLine) }),
+    /* @__PURE__ */ i(Ae, { tabIndex: 1, className: n(C.thumb, e == null ? void 0 : e.thumb) })
   ] });
-}), T = {
+}), C = {
   base: "group relative inline-flex w-20 h-[38px] shrink-0 cursor-pointer items-center bg-gray-50 rounded-[10px] transition-colors duration-200 transition-colors",
   thumb: "pointer-events-none block z-50 size-10 bg-transparent border border-secondary-10/[.15] transition-transform rounded-[10px] ring-0 data-[state=checked]:translate-x-full data-[state=unchecked]:translate-x-0",
   iconWrapper: {
@@ -676,7 +578,7 @@ const k = {
     checked: "bg-sidebar-10 rounded-[10px] overflow-hidden"
   },
   borderLine: "pointer-events-none absolute z-0 left-0 top-0 w-full h-full group-hover:border group-hover:border-primary-20/[.30] rounded-[10px] transition-colors duration-200"
-}, P = {
+}, O = {
   sizes: {
     small: {
       base: "flex items-center justify-center min-w-32 bg-sidebar-10 text-xs font-medium leading-none border-[1px] rounded-md py-[7px] px-5",
@@ -706,18 +608,18 @@ const k = {
     active: "fill-white",
     disabled: "fill-dark-30/25"
   }
-}, ir = z(
+}, ir = F(
   ({
     variant: e = "small",
     active: r,
     icon: a,
-    disabled: t,
+    disabled: o,
     children: d,
     className: s,
     iconDimensions: l,
-    ...i
+    ...t
   }, b) => {
-    const p = P.sizes[e];
+    const u = O.sizes[e];
     return /* @__PURE__ */ c(
       "button",
       {
@@ -725,25 +627,25 @@ const k = {
         "aria-selected": r,
         ref: b,
         className: n(
-          p.base,
-          p.default,
-          !t && !r && p.hover,
-          r && !t && p.active,
-          r && !t && P.focus,
-          t && p.disabled,
+          u.base,
+          u.default,
+          !o && !r && u.hover,
+          r && !o && u.active,
+          r && !o && O.focus,
+          o && u.disabled,
           s
         ),
-        ...i,
+        ...t,
         children: [
-          !!a && /* @__PURE__ */ o(
+          !!a && /* @__PURE__ */ i(
             a,
             {
               "aria-label": "icon",
               "aria-hidden": !0,
               className: n(
-                P.icon.default,
-                r && P.icon.active,
-                t && P.icon.disabled
+                O.icon.default,
+                r && O.icon.active,
+                o && O.icon.disabled
               ),
               ...l
             }
@@ -753,56 +655,56 @@ const k = {
       }
     );
   }
-), C = ({
+), w = ({
   children: e,
   className: r = "",
   variant: a = "p",
-  ...t
-}) => /* @__PURE__ */ o(a, { ...t, className: n(r), children: e }), dr = F.forwardRef(
+  ...o
+}) => /* @__PURE__ */ i(a, { ...o, className: n(r), children: e }), ar = W.forwardRef(
   ({
     className: e = "",
     disabled: r,
     onChange: a,
-    placeholder: t = "Введите текст",
+    placeholder: o = "Введите текст",
     autoFocus: d = !1,
     status: s,
     maxLength: l,
-    ...i
+    ...t
   }, b) => {
-    var x, y;
-    const p = j.base, u = j.state, f = j.disabled, g = j.styles, h = j.maxLength;
-    return /* @__PURE__ */ c("div", { className: j.root, children: [
-      /* @__PURE__ */ o(
+    var x, v;
+    const u = A.base, p = A.state, f = A.disabled, g = A.styles, h = A.maxLength;
+    return /* @__PURE__ */ c("div", { className: A.root, children: [
+      /* @__PURE__ */ i(
         "textarea",
         {
-          ...i,
+          ...t,
           role: "textbox",
           ref: b,
           maxLength: l,
           disabled: r,
           autoFocus: d,
-          placeholder: t,
+          placeholder: o,
           onChange: a,
           className: n(
-            p,
-            u.focus,
-            !r && u.hover,
+            u,
+            p.focus,
+            !r && p.hover,
             s && (g == null ? void 0 : g[s]),
             r && f,
             e
           )
         }
       ),
-      /* @__PURE__ */ o("div", { className: j.messageContainer, children: l && /* @__PURE__ */ c(
-        C,
+      /* @__PURE__ */ i("div", { className: A.messageContainer, children: l && /* @__PURE__ */ c(
+        w,
         {
           variant: "span",
           className: n(
             h,
-            String(i.value).length === l ? "bg-danger-10 text-sidebar-10" : "bg-transparent"
+            String(t.value).length === l ? "bg-danger-10 text-sidebar-10" : "bg-transparent"
           ),
           children: [
-            (y = (x = i.value || "") == null ? void 0 : x.toString()) == null ? void 0 : y.length,
+            (v = (x = t.value || "") == null ? void 0 : x.toString()) == null ? void 0 : v.length,
             "/",
             l
           ]
@@ -810,7 +712,7 @@ const k = {
       ) })
     ] });
   }
-), j = {
+), A = {
   root: "flex flex-col gap-1 w-full",
   base: "w-full min-h-[60px] bg-gray-50 text-sm text-dark-10 font-sans font-medium leading-none px-3.5 py-3 border border-gray-50 rounded-[10px] placeholder:text-sm placeholder:text-dark-40/50 transition-colors duration-200",
   disabled: "text-dark-40/25 bg-dark-30/[.08] cursor-not-allowed",
@@ -830,8 +732,8 @@ const k = {
   },
   messageContainer: "flex items-center leading-none",
   maxLength: "ml-auto p-1 text-dark-40/50 text-sm font-regular leading-none rounded"
-}, { Root: Be, Thumb: De } = Y, lr = F.forwardRef(
-  ({ label: e = "", labelPosition: r = "right", disabled: a, classNames: t, ...d }, s) => /* @__PURE__ */ c(
+}, { Root: Re, Thumb: Be } = Y, nr = W.forwardRef(
+  ({ label: e = "", labelPosition: r = "right", disabled: a, classNames: o, ...d }, s) => /* @__PURE__ */ c(
     "div",
     {
       className: n(
@@ -839,30 +741,30 @@ const k = {
         r === "right" && "flex-row-reverse"
       ),
       children: [
-        !!e && /* @__PURE__ */ o(
+        !!e && /* @__PURE__ */ i(
           "span",
           {
             className: n(
-              $.label,
+              _.label,
               r === "right" && "ml-2",
               a && "cursor-not-allowed text-dark-30/[.20]",
-              t == null ? void 0 : t.label
+              o == null ? void 0 : o.label
             ),
             children: e
           }
         ),
-        /* @__PURE__ */ o(
-          Be,
+        /* @__PURE__ */ i(
+          Re,
           {
             ref: s,
             disabled: a,
-            className: n($.base, t == null ? void 0 : t.base),
+            className: n(_.base, o == null ? void 0 : o.base),
             ...d,
-            children: /* @__PURE__ */ o(
-              De,
+            children: /* @__PURE__ */ i(
+              Be,
               {
                 tabIndex: 1,
-                className: n($.thumb, t == null ? void 0 : t.thumb)
+                className: n(_.thumb, o == null ? void 0 : o.thumb)
               }
             )
           }
@@ -870,29 +772,29 @@ const k = {
       ]
     }
   )
-), $ = {
+), _ = {
   base: "inline-flex h-8 w-[52px] shrink-0 p-1 cursor-pointer items-center rounded-full border border-success-20 transition-colors focus:outline-none  disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-success-20 data-[state=unchecked]:bg-secondary-10/[.08] data-[state=unchecked]:border-secondary-10/[.30] disabled:data-[state=unchecked]:bg-secondary-10/[.15] disabled:data-[state=unchecked]:border-transparent",
   label: "mr-2 text-dark-30 text-sm",
   thumb: "pointer-events-none block size-6 transition-transform rounded-full ring-0 data-[state=checked]:translate-x-3/4 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-white data-[state=unchecked]:bg-secondary-10/[.30]"
-}, { Provider: Fe, Root: ze, Trigger: Oe, Portal: We, Content: Pe, Arrow: Le } = he, sr = ({
+}, { Provider: ze, Root: De, Trigger: Fe, Portal: Le, Content: Oe, Arrow: We } = ge, dr = ({
   children: e,
   className: r,
   defaultOpen: a,
-  side: t,
+  side: o,
   content: d,
   delayDuration: s = 0,
   isDisabled: l = !1
-}) => /* @__PURE__ */ o(Fe, { children: /* @__PURE__ */ c(ze, { defaultOpen: a, delayDuration: s, children: [
-  /* @__PURE__ */ o(Oe, { asChild: !0, children: /* @__PURE__ */ o("div", { children: e }) }),
-  !l && /* @__PURE__ */ o(We, { children: /* @__PURE__ */ c(
-    Pe,
+}) => /* @__PURE__ */ i(ze, { children: /* @__PURE__ */ c(De, { defaultOpen: a, delayDuration: s, children: [
+  /* @__PURE__ */ i(Fe, { asChild: !0, children: /* @__PURE__ */ i("div", { children: e }) }),
+  !l && /* @__PURE__ */ i(Le, { children: /* @__PURE__ */ c(
+    Oe,
     {
-      side: t,
+      side: o,
       sideOffset: 5,
       className: n(Q.content, r),
       children: [
         d,
-        /* @__PURE__ */ o(Le, { className: Q.arrow })
+        /* @__PURE__ */ i(We, { className: Q.arrow })
       ]
     }
   ) })
@@ -905,38 +807,38 @@ const k = {
     "data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
   ),
   arrow: "fill-dark-30"
-}, br = ({
+}, lr = ({
   classNames: e,
   disabled: r,
   status: a,
-  onChange: t,
+  onChange: o,
   options: d,
   placeholder: s = "Choose",
   value: l,
-  isDotable: i,
+  isDotable: t,
   isLoading: b,
-  autoFocusValue: p
+  autoFocusValue: u
 }) => {
-  const [u, f] = re(!1), h = ye(d)(l), v = U(null), x = U(null), y = D.base, w = D.options, Z = D.status.styles, M = D.disabled.trigger, N = D.disabled.triggerText, H = ({
+  const [p, f] = te(!1), h = ve(d)(l), y = G(null), x = G(null), v = D.base, T = D.options, Z = D.status.styles, N = D.disabled.trigger, ee = D.disabled.triggerText, M = ({
     className: m,
-    text: S = ""
-  }) => /* @__PURE__ */ o(
-    C,
+    text: j = ""
+  }) => /* @__PURE__ */ i(
+    w,
     {
       className: n(
-        y.placeholder,
-        r && N,
+        v.placeholder,
+        r && ee,
         "truncate min-w-0 flex-1",
         m
       ),
-      children: S
+      children: j
     }
-  ), ee = (m) => {
+  ), re = (m) => {
     if (m.preventDefault(), x.current) {
-      const S = l || p;
-      if (S) {
+      const j = l || u;
+      if (j) {
         const q = x.current.querySelector(
-          `[data-value="${S}"]`
+          `[data-value="${j}"]`
         );
         q && q.scrollIntoView({
           block: "center",
@@ -945,48 +847,48 @@ const k = {
       }
     }
   };
-  return /* @__PURE__ */ o("div", { className: n("w-full", e == null ? void 0 : e.parent), children: /* @__PURE__ */ c(be, { open: u, onOpenChange: f, children: [
+  return /* @__PURE__ */ i("div", { className: n("w-full", e == null ? void 0 : e.parent), children: /* @__PURE__ */ c(be, { open: p, onOpenChange: f, children: [
     /* @__PURE__ */ c(
       ce,
       {
         role: "listbox",
         disabled: r,
         className: n(
-          y.trigger,
-          r && M,
-          u && y.focus,
-          !u && !r && y.hover,
-          !u && a && Z[a],
+          v.trigger,
+          r && N,
+          p && v.focus,
+          !p && !r && v.hover,
+          !p && a && Z[a],
           e == null ? void 0 : e.trigger
         ),
         children: [
-          /* @__PURE__ */ o("div", { className: y == null ? void 0 : y.textWrapper, children: l ? /* @__PURE__ */ o(
-            H,
+          /* @__PURE__ */ i("div", { className: v == null ? void 0 : v.textWrapper, children: l ? /* @__PURE__ */ i(
+            M,
             {
               text: h == null ? void 0 : h.label,
               className: n(
-                y.selected,
+                v.selected,
                 r && D.disabled.selectedDisabled,
                 e == null ? void 0 : e.selected
               )
             }
-          ) : /* @__PURE__ */ o(
-            H,
+          ) : /* @__PURE__ */ i(
+            M,
             {
               text: s,
               className: e == null ? void 0 : e.placeholder
             }
           ) }),
-          /* @__PURE__ */ o(
-            xe,
+          /* @__PURE__ */ i(
+            he,
             {
               width: 20,
               height: 20,
               viewBox: "0 0 20 20",
               className: n(
-                y.icon,
-                r && y.iconDisabled,
-                u && "-rotate-180",
+                v.icon,
+                r && v.iconDisabled,
+                p && "-rotate-180",
                 "flex-shrink-0"
               )
             }
@@ -994,39 +896,39 @@ const k = {
         ]
       }
     ),
-    /* @__PURE__ */ o("div", { ref: v, children: /* @__PURE__ */ c(
-      pe,
+    /* @__PURE__ */ i("div", { ref: y, children: /* @__PURE__ */ c(
+      ue,
       {
-        container: v.current,
-        className: n(w.content, e == null ? void 0 : e.content),
+        container: y.current,
+        className: n(T.content, e == null ? void 0 : e.content),
         style: { minWidth: "var(--radix-popper-anchor-width)" },
-        onOpenAutoFocus: ee,
+        onOpenAutoFocus: re,
         ref: x,
         children: [
-          b && /* @__PURE__ */ o(Ie, { width: 30, height: 30 }),
-          !b && (d != null && d.length) ? d.map((m) => /* @__PURE__ */ o(
+          b && /* @__PURE__ */ i(Ve, { width: 30, height: 30 }),
+          !b && (d != null && d.length) ? d.map((m) => /* @__PURE__ */ i(
             "div",
             {
               "data-value": m.value,
-              className: w.items,
-              onClick: (S) => {
-                S.preventDefault(), S.stopPropagation(), t(m.value), f(!1);
+              className: T.items,
+              onClick: (j) => {
+                j.preventDefault(), j.stopPropagation(), o(m.value), f(!1);
               },
-              children: /* @__PURE__ */ o(
-                C,
+              children: /* @__PURE__ */ i(
+                w,
                 {
                   className: n(
-                    w.itemsText,
-                    !i && l === m.value && w.active,
-                    i && w.dot,
-                    i && l === m.value && "before:bg-dark-10 !font-bold"
+                    T.itemsText,
+                    !t && l === m.value && T.active,
+                    t && T.dot,
+                    t && l === m.value && "before:bg-dark-10 !font-bold"
                   ),
                   children: m.label
                 }
               )
             },
             m.value
-          )) : !b && /* @__PURE__ */ o("div", { className: n(w.items, "cursor-default"), children: /* @__PURE__ */ o(C, { className: n(w.itemsText), children: "Нет данных" }) })
+          )) : !b && /* @__PURE__ */ i("div", { className: n(T.items, "cursor-default"), children: /* @__PURE__ */ i(w, { className: n(T.itemsText), children: "Нет данных" }) })
         ]
       }
     ) })
@@ -1064,20 +966,20 @@ const k = {
       success: "border-success-20 ring-2 ring-success-10/[.20] hover:border-success-20"
     }
   }
-}, _e = F.forwardRef(
+}, Ie = W.forwardRef(
   ({
     imageSrc: e,
     alt: r,
     hasBadge: a = !1,
-    iconSize: t,
+    iconSize: o,
     isActive: d,
     isHasCamera: s = !1,
     onAvatarChange: l,
-    classNames: i
+    classNames: t
   }, b) => {
-    const p = L.root, u = L.image, f = L.badge;
+    const u = I.root, p = I.image, f = I.badge;
     return /* @__PURE__ */ c(
-      me,
+      ye,
       {
         role: "group",
         "data-testid": "avatar-root",
@@ -1086,13 +988,13 @@ const k = {
           return (g = b == null ? void 0 : b.current) == null ? void 0 : g.click();
         },
         className: n(
-          p,
+          u,
           a && "bg-dark-30/[.10]",
-          d && L.active,
-          i == null ? void 0 : i.wrapper
+          d && I.active,
+          t == null ? void 0 : t.wrapper
         ),
         children: [
-          !!b && /* @__PURE__ */ o(
+          !!b && /* @__PURE__ */ i(
             "input",
             {
               ref: b,
@@ -1102,43 +1004,43 @@ const k = {
               onChange: l
             }
           ),
-          e ? /* @__PURE__ */ o(
-            ke,
+          e ? /* @__PURE__ */ i(
+            me,
             {
               role: "img",
               "data-testid": "avatar-img",
               src: e,
               alt: r ?? "empty-avatar",
-              className: n(u, i == null ? void 0 : i.img)
+              className: n(p, t == null ? void 0 : t.img)
             }
-          ) : /* @__PURE__ */ o(we, { children: s ? /* @__PURE__ */ o(
-            E,
+          ) : /* @__PURE__ */ i(ke, { children: s ? /* @__PURE__ */ i(
+            H,
             {
               width: 38,
               height: 30,
-              className: n("fill-dark-30/[.20]", i == null ? void 0 : i.badgeIcon),
+              className: n("fill-dark-30/[.20]", t == null ? void 0 : t.badgeIcon),
               viewBox: "0 0 38 30"
             }
-          ) : /* @__PURE__ */ o(
-            ve,
+          ) : /* @__PURE__ */ i(
+            xe,
             {
               "data-testid": "icon-avatar",
               "aria-label": "icon-avatar",
-              height: (t == null ? void 0 : t.height) ?? 17,
-              width: (t == null ? void 0 : t.width) ?? 17,
+              height: (o == null ? void 0 : o.height) ?? 17,
+              width: (o == null ? void 0 : o.width) ?? 17,
               className: n(
                 "fill-sidebar-10",
                 a && "fill-dark-30/[.15]",
-                i == null ? void 0 : i.fallbackIcon
+                t == null ? void 0 : t.fallbackIcon
               )
             }
           ) }),
-          a && /* @__PURE__ */ o(
+          a && /* @__PURE__ */ i(
             "div",
             {
               "data-testid": "avatar-badge",
-              className: n(f.wrapper, i == null ? void 0 : i.badge),
-              children: d ? /* @__PURE__ */ o(
+              className: n(f.wrapper, t == null ? void 0 : t.badge),
+              children: d ? /* @__PURE__ */ i(
                 X,
                 {
                   width: 14,
@@ -1146,13 +1048,13 @@ const k = {
                   viewBox: "0 0 20 20",
                   className: "fill-sidebar-10"
                 }
-              ) : /* @__PURE__ */ o(
-                E,
+              ) : /* @__PURE__ */ i(
+                H,
                 {
                   width: 16,
                   height: 13,
                   viewBox: "0 0 38 30",
-                  className: n("fill-sidebar-10", i == null ? void 0 : i.badgeIcon)
+                  className: n("fill-sidebar-10", t == null ? void 0 : t.badgeIcon)
                 }
               )
             }
@@ -1162,107 +1064,200 @@ const k = {
     );
   }
 );
-_e.displayName = "Avatar";
-const L = {
+Ie.displayName = "Avatar";
+const I = {
   root: "size-9 relative flex items-center justify-center bg-dark-30/[.10] rounded-full",
   image: "size-full object-center object-cover rounded-full",
   badge: {
     wrapper: "absolute bottom-2 right-2 transform translate-x-1/4 translate-y-1/4 flex items-center justify-center bg-primary-10 px-2.5 py-3 border-2 border-sidebar-10 rounded-full"
   },
   active: "ring ring-2 ring-offset-1 ring-primary-10"
-}, cr = ({
+}, sr = ({
   value: e,
   onValueChange: r,
   classNames: a = {},
-  count: t = 3,
+  count: o = 3,
   ...d
-}) => /* @__PURE__ */ o(_.Root, { value: e, onValueChange: r, children: /* @__PURE__ */ o(
-  _.List,
+}) => /* @__PURE__ */ i(V.Root, { value: e, onValueChange: r, children: /* @__PURE__ */ i(
+  V.List,
   {
-    className: n(I.container, a.container),
+    className: n($.container, a.container),
     ...d,
-    children: Array.from({ length: t }).map((s, l) => /* @__PURE__ */ o(
-      _.Trigger,
+    children: Array.from({ length: o }).map((s, l) => /* @__PURE__ */ i(
+      V.Trigger,
       {
         value: String(l),
         className: n(
-          I.dot,
-          l <= Number(e) && I.dotActive,
+          $.dot,
+          l <= Number(e) && $.dotActive,
           a.trigger
         )
       },
       l
     ))
   }
-) }), I = {
+) }), $ = {
   container: "flex items-center gap-1",
   dot: "size-2 rounded-full bg-dark-30/[.20] transition-colors focus:outline-none focus:ring-offset-0 focus:ring-primary-10",
   dotActive: "bg-primary-10"
-}, pr = ({ className: e, children: r, ...a }) => /* @__PURE__ */ o("div", { ...a, "data-slot": "skeleton", className: n($e.base, e), children: r }), $e = {
+}, br = ({ className: e, children: r, ...a }) => /* @__PURE__ */ i("div", { ...a, "data-slot": "skeleton", className: n(Pe.base, e), children: r }), Pe = {
   base: "bg-gray-200 animate-pulse rounded-md"
-}, Ie = ({
+}, Ve = ({
   classNames: e,
   width: r = 73,
   height: a = 73,
-  isBlur: t = !1
-}) => /* @__PURE__ */ o(
+  isBlur: o = !1
+}) => /* @__PURE__ */ i(
   "div",
   {
     "data-testid": "spinner",
-    className: n(t ? V.blur : V.wrapper, e == null ? void 0 : e.wrapper),
-    children: /* @__PURE__ */ o(
+    className: n(o ? E.blur : E.wrapper, e == null ? void 0 : e.wrapper),
+    children: /* @__PURE__ */ i(
       de,
       {
         "data-testid": "spinner-icon",
         height: a,
         width: r,
-        className: n(V.icon, e == null ? void 0 : e.icon)
+        className: n(E.icon, e == null ? void 0 : e.icon)
       }
     )
   }
-), V = {
+), E = {
   wrapper: "flex flex-col gap-1 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 items-center justify-center",
   blur: "absolute inset-0 z-51 flex items-center justify-center bg-background/60 backdrop-blur-sm rounded-[20px]",
   icon: "fill-primary-10"
+}, P = {
+  image: "Photo",
+  video: "Video",
+  audio: "Voice message",
+  file: "Файл"
+}, _e = (e, r, a) => {
+  switch (e) {
+    case "image":
+      return P.image;
+    case "video":
+      return P.video;
+    case "audio":
+      return P.audio;
+    case "file":
+      return r || P.file;
+    default:
+      return a || null;
+  }
+}, cr = ({
+  senderName: e,
+  messageText: r,
+  contentType: a = "text",
+  fileUrl: o,
+  fileName: d,
+  onClose: s,
+  showCloseButton: l = !0,
+  classNames: t
+}) => {
+  const b = _e(a, d, r);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: n(k.wrapper, t == null ? void 0 : t.wrapper),
+      "data-testid": "chat-edit-row",
+      children: [
+        /* @__PURE__ */ c("div", { className: n(k.message, t == null ? void 0 : t.message), children: [
+          (a === "image" || a === "video") && o && /* @__PURE__ */ i(
+            "img",
+            {
+              src: o,
+              alt: d || "thumbnail",
+              "data-testid": "reply-thumbnail",
+              className: n(k.thumbnail, t == null ? void 0 : t.thumbnail)
+            }
+          ),
+          /* @__PURE__ */ c("div", { className: n(k.content, t == null ? void 0 : t.content), children: [
+            /* @__PURE__ */ i(
+              w,
+              {
+                variant: "span",
+                className: n(k.title, t == null ? void 0 : t.title),
+                "data-testid": "chat-edit-title",
+                children: e
+              }
+            ),
+            /* @__PURE__ */ i(
+              w,
+              {
+                variant: "span",
+                className: n(k.subtitle, t == null ? void 0 : t.subtitle),
+                "data-testid": "chat-edit-subtitle",
+                children: a !== "text" ? /* @__PURE__ */ i("span", { className: k.mediaLabel, children: b }) : b
+              }
+            )
+          ] })
+        ] }),
+        l && /* @__PURE__ */ i(
+          we,
+          {
+            "data-testid": "chat-close-edit",
+            shape: "circle",
+            classNames: {
+              button: n(k.closeButton, t == null ? void 0 : t.closeButton),
+              icon: n(k.closeIcon, t == null ? void 0 : t.closeIcon)
+            },
+            icon: oe,
+            iconSizes: { width: 24, height: 24, viewBox: "0 0 20 20" },
+            onClick: s
+          }
+        )
+      ]
+    }
+  );
+}, k = {
+  wrapper: "w-full h-14 flex flex-row justify-between items-center",
+  message: "flex border-s-[3px] border-s-primary-10 w-full pr-2 py-1.5 bg-primary-10/[.10] rounded-[5px]",
+  title: "text-sm text-primary-10 font-medium truncate w-full",
+  content: "flex flex-col items-start gap-1 ml-2 text-sm text-dark-40",
+  subtitle: "text-sm text-dark-30 font-medium",
+  closeButton: "border-0 p-3 shadow-none focus:border-0 active:border-0",
+  closeIcon: "text-primary-10 fill-primary-10",
+  thumbnail: "size-[46px] ml-2 rounded object-cover flex-shrink-0",
+  mediaLabel: "inline-flex items-center gap-1 text-sm text-dark-40 font-medium"
 };
 export {
-  _e as Avatar,
-  Ze as Button,
-  Ne as Checkbox,
-  er as Headline,
-  Me as IconButton,
-  rr as Input,
-  tr as Label,
-  je as Message,
-  or as Notification,
-  Ce as Radio,
-  br as Select,
-  pr as Skeleton,
-  Ie as Spinner,
-  ar as Status,
-  nr as Switch,
+  Ie as Avatar,
+  Xe as Button,
+  Ye as Checkbox,
+  Ze as Headline,
+  we as IconButton,
+  Ne as Input,
+  er as Label,
+  rr as Notification,
+  je as Radio,
+  cr as ReplyMessage,
+  lr as Select,
+  br as Skeleton,
+  Ve as Spinner,
+  tr as Status,
+  or as Switch,
   ir as Tab,
-  cr as TabDots,
-  C as Text,
-  dr as Textarea,
-  lr as Toggle,
-  sr as Tooltip,
-  L as avatarIconTokens,
-  O as buttonTokens,
-  A as checkboxTokens,
+  sr as TabDots,
+  w as Text,
+  ar as Textarea,
+  nr as Toggle,
+  dr as Tooltip,
+  I as avatarIconTokens,
+  L as buttonTokens,
+  B as checkboxTokens,
   R as iconButtonTokens,
-  B as inputTokens,
+  z as inputTokens,
   J as labelTokens,
-  W as messageTokens,
-  k as radioTokens,
+  S as radioTokens,
+  k as replyMessageTokens,
   D as selectTokens,
-  $e as skeletonTokens,
-  V as spinnerTokens,
+  Pe as skeletonTokens,
+  E as spinnerTokens,
   K as statusTokens,
-  T as switchTokens,
-  I as tabDotsTokens,
-  P as tabTokens,
-  j as textareaTokens,
-  $ as toggleTokens,
+  C as switchTokens,
+  $ as tabDotsTokens,
+  O as tabTokens,
+  A as textareaTokens,
+  _ as toggleTokens,
   Q as tooltipTokens
 };