@namuna-nur/ui-kit 1.9.16 → 1.9.18

package/lib/atoms/index.js

@@ -1,11 +1,11 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import * as P from "react";
-import { forwardRef as z, useState as re, useRef as U } from "react";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import * as z from "react";
+import { forwardRef as O, useState as re, useRef as U } 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 ue } from "../shared/shared.js";
-import { format as pe } from "date-fns";
+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 * 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";
@@ -13,7 +13,7 @@ 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 = {
+const W = {
   base: "group inline-flex items-center justify-center transition-colors rounded-[10px] border outline-none",
   icon: {
     disabled: {
@@ -64,51 +64,51 @@ const O = {
       hover: "hover:bg-transparent hover:text-primary-20 hover:border-transparent"
     }
   }
-}, Ye = z(
+}, Ze = O(
   ({
     children: e,
     classNames: r,
     disabled: a = !1,
-    icon: t,
+    icon: o,
     iconDimensions: d = { height: 15, width: 15 },
-    iconPosition: l = "right",
-    size: i = "medium",
-    variant: b = "primary",
+    iconPosition: b = "right",
+    size: l = "medium",
+    variant: i = "primary",
     isShadow: s = !1,
-    ...u
-  }, p) => {
-    const f = O.icon, v = O.sizes[i], g = O.variants[b] || O.variants.primary, y = f.variants[b], h = f.disabled[b];
+    ...p
+  }, u) => {
+    const f = W.icon, h = W.sizes[l], g = W.variants[i] || W.variants.primary, y = f.variants[i], x = f.disabled[i];
     return /* @__PURE__ */ c(
       "button",
       {
         role: "button",
-        ...u,
-        type: u.type || "button",
-        ref: p,
+        ...p,
+        type: p.type || "button",
+        ref: u,
         disabled: a,
         className: n(
-          O.base,
-          v.padding,
-          v.fontSize,
+          W.base,
+          h.padding,
+          h.fontSize,
           g.base,
           g.focus,
           !a && g.hover,
           !a && g.active,
           a && g.disabled,
-          !!t && f.parent,
-          !!t && !e && "min-w-0",
-          b === "primary" && s && "shadow-3xl",
+          !!o && f.parent,
+          !!o && !e && "min-w-0",
+          i === "primary" && s && "shadow-3xl",
           r == null ? void 0 : r.base
         ),
         children: [
-          !!t && l === "left" && /* @__PURE__ */ o(
-            t,
+          !!o && b === "left" && /* @__PURE__ */ t(
+            o,
             {
               "aria-label": "icon",
               "aria-hidden": !0,
               className: n(
                 !a && y,
-                a && h,
+                a && x,
                 r == null ? void 0 : r.icon
               ),
               height: d.height,
@@ -117,14 +117,14 @@ const O = {
             }
           ),
           e,
-          !!t && l === "right" && /* @__PURE__ */ o(
-            t,
+          !!o && b === "right" && /* @__PURE__ */ t(
+            o,
             {
               "aria-label": "icon",
               "aria-hidden": !0,
               className: n(
                 !a && y,
-                a && h,
+                a && x,
                 r == null ? void 0 : r.icon
               ),
               height: d.height,
@@ -136,58 +136,58 @@ const O = {
       }
     );
   }
-), Ze = z(
+), Me = O(
   ({
     classNames: e,
     disabled: r = !1,
     icon: a,
-    variant: t = "default",
+    variant: o = "default",
     shape: d,
-    badge: l,
-    iconSizes: i,
-    text: b,
+    badge: b,
+    iconSizes: l,
+    text: i,
     ...s
-  }, u) => {
-    var h;
-    const p = R.icon, f = R.variants[t], v = p.variants[t], g = (h = R.shape) == null ? void 0 : h[d], y = p.disabled[t];
+  }, p) => {
+    var x;
+    const u = R.icon, f = R.variants[o], h = u.variants[o], g = (x = R.shape) == null ? void 0 : x[d], y = u.disabled[o];
     return /* @__PURE__ */ c(
       "button",
       {
         ...s,
         role: "button",
         type: s.type || "button",
-        ref: u,
+        ref: p,
         disabled: r,
         className: n(
           R.base,
           f.base,
           f.focus,
           g,
-          l && R.badgeStyles.base,
+          b && R.badgeStyles.base,
           !r && f.hover,
           !r && f.active,
           r && f.disabled,
           e == null ? void 0 : e.button
         ),
         children: [
-          l && /* @__PURE__ */ o("span", { className: R.badgeStyles.badgeStyles, children: l }),
-          !!a && /* @__PURE__ */ o(
+          b && /* @__PURE__ */ t("span", { className: R.badgeStyles.badgeStyles, children: b }),
+          !!a && /* @__PURE__ */ t(
             a,
             {
               "aria-label": "icon",
               "aria-hidden": !0,
               className: n(
-                p.base,
-                !r && v,
+                u.base,
+                !r && h,
                 r && y,
                 e == null ? void 0 : e.icon
               ),
-              height: i == null ? void 0 : i.height,
-              width: i == null ? void 0 : i.width,
-              viewBox: i == null ? void 0 : i.viewBox
+              height: l == null ? void 0 : l.height,
+              width: l == null ? void 0 : l.width,
+              viewBox: l == null ? void 0 : l.viewBox
             }
           ),
-          !!b && /* @__PURE__ */ o(C, { className: e == null ? void 0 : e.text, children: b })
+          !!i && /* @__PURE__ */ t(C, { className: e == null ? void 0 : e.text, children: i })
         ]
       }
     );
@@ -255,25 +255,25 @@ const O = {
       label: "size-2.5"
     }
   }
-}, Me = z(
+}, Ne = O(
   ({
     checked: e = !1,
     className: r = "",
     disabled: a,
-    id: t,
+    id: o,
     onChange: d,
-    size: l = "large",
-    ...i
-  }, b) => {
-    const s = A.base, u = A.sizes[l];
+    size: b = "large",
+    ...l
+  }, i) => {
+    const s = A.base, p = A.sizes[b];
     return /* @__PURE__ */ c(
       "label",
       {
         "aria-label": "checkbox-label",
-        htmlFor: t,
+        htmlFor: o,
         tabIndex: 0,
         className: n(
-          u.label,
+          p.label,
           s,
           e && A.checked,
           !a && A.active,
@@ -282,21 +282,21 @@ const O = {
           r
         ),
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ t(
             "input",
             {
-              ...i,
+              ...l,
               role: "checkbox",
-              id: t,
+              id: o,
               disabled: a,
               checked: !!e,
               onChange: d,
-              ref: b,
+              ref: i,
               type: "checkbox",
               className: "hidden peer"
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ t(
             X,
             {
               width: 20,
@@ -316,67 +316,67 @@ const O = {
   h4: "text-h4",
   h5: "text-h5",
   h6: "text-h6"
-}, Ne = ({
+}, er = ({
   children: e,
   className: r = "",
   variant: a = "h1",
-  weight: t = "font-regular",
+  weight: o = "font-regular",
   ...d
-}) => /* @__PURE__ */ o(
+}) => /* @__PURE__ */ t(
   a,
   {
     ...d,
-    className: n(Se[a], t, r),
+    className: n(Se[a], o, r),
     children: e
   }
-), er = z(
+), rr = O(
   ({
     disabled: e,
     onChange: r,
     placeholder: a,
-    autoFocus: t = !1,
+    autoFocus: o = !1,
     status: d,
-    maxLength: l,
-    id: i,
-    classNames: b,
+    maxLength: b,
+    id: l,
+    classNames: i,
     ...s
-  }, u) => {
-    const p = B.parent, f = B.base, v = B.state, g = B.disabled, y = B.styles, h = B.maxLength;
-    return /* @__PURE__ */ c("div", { className: n(p, b == null ? void 0 : b.parent), children: [
-      /* @__PURE__ */ o(
+  }, p) => {
+    const u = B.parent, f = B.base, h = B.state, g = B.disabled, y = B.styles, x = B.maxLength;
+    return /* @__PURE__ */ c("div", { className: n(u, i == null ? void 0 : i.parent), children: [
+      /* @__PURE__ */ t(
         "input",
         {
           ...s,
           role: "textbox",
-          ref: u,
-          id: i,
+          ref: p,
+          id: l,
           disabled: e,
-          autoFocus: t,
+          autoFocus: o,
           onChange: r,
-          maxLength: l,
+          maxLength: b,
           className: n(
             f,
-            v.focus,
-            !e && v.hover,
+            h.focus,
+            !e && h.hover,
             d && (y == null ? void 0 : y[d]),
             e && g,
-            b == null ? void 0 : b.target
+            i == null ? void 0 : i.target
           ),
           placeholder: a
         }
       ),
-      l && /* @__PURE__ */ c(
+      b && /* @__PURE__ */ c(
         C,
         {
           variant: "span",
           className: n(
-            h,
-            String(s.value).length === l ? "bg-danger-10" : "bg-success-10"
+            x,
+            String(s.value).length === b ? "bg-danger-10" : "bg-success-10"
           ),
           children: [
             (s.value || "").toString().length,
             "/",
-            l
+            b
           ]
         }
       )
@@ -397,18 +397,18 @@ 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"
-}, rr = P.forwardRef(
-  ({ htmlFor: e, className: r, children: a, disabled: t, ...d }, l) => {
-    const i = J.base, b = J.disabled;
-    return /* @__PURE__ */ o(
+}, tr = z.forwardRef(
+  ({ htmlFor: e, className: r, children: a, disabled: o, ...d }, b) => {
+    const l = J.base, i = J.disabled;
+    return /* @__PURE__ */ t(
       "label",
       {
         ...d,
         role: "presentation",
         "aria-label": "input-label",
-        ref: l,
+        ref: b,
         htmlFor: e,
-        className: n(i, t && b, r),
+        className: n(l, o && i, r),
         children: a
       }
     );
@@ -417,87 +417,87 @@ 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" })
-}, tr = ({
+  success: /* @__PURE__ */ t(G, { className: "text-sidebar-10 fill-sidebar-10" }),
+  danger: /* @__PURE__ */ t(ie, { className: "text-sidebar-10 fill-sidebar-10" }),
+  info: /* @__PURE__ */ t(ne, { className: "text-sidebar-10 fill-sidebar-10" }),
+  warning: /* @__PURE__ */ t(ae, { className: "text-sidebar-10 fill-sidebar-10" }),
+  default: /* @__PURE__ */ t(G, { className: "text-sidebar-10 fill-sidebar-10" })
+}, or = ({
   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__ */ t("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__ */ t(le, { className: o ? "text-left" : "text-center", children: r }),
+        /* @__PURE__ */ t(se, { className: o ? "text-left" : "text-center", children: a })
       ] })
     ]
   }
-), je = P.forwardRef(
+), je = z.forwardRef(
   ({
     id: e,
     text: r,
     timestamp: a,
-    senderName: t,
+    senderName: o,
     status: d,
-    isMine: l = !1,
-    firstMessage: i = !1,
-    lastMessage: b = !1,
+    isMine: b = !1,
+    firstMessage: l = !1,
+    lastMessage: i = !1,
     classNames: s,
-    ...u
-  }, p) => {
-    const f = D.base, v = D.bubbleTail, g = D.wrapper, y = D.sender, h = D.message, x = D.timestamp;
+    ...p
+  }, u) => {
+    const f = D.base, h = D.bubbleTail, g = D.wrapper, y = D.sender, x = D.message, v = D.timestamp;
     return /* @__PURE__ */ c(
       "div",
       {
-        ref: p,
+        ref: u,
         id: e,
         "data-testid": "message",
         className: n(
           f,
-          l && "bg-info-20 border-info-20",
+          b && "bg-info-20 border-info-20",
           s == null ? void 0 : s.base
         ),
-        ...u,
+        ...p,
         children: [
           /* @__PURE__ */ c("div", { className: n(g.above), children: [
-            !l && i && !!t && /* @__PURE__ */ o(
+            !b && l && !!o && /* @__PURE__ */ t(
               "span",
               {
                 "data-testid": "sender-name",
                 className: n(y, s == null ? void 0 : s.sender),
-                children: t
+                children: o
               }
             ),
-            !!r && /* @__PURE__ */ o(
+            !!r && /* @__PURE__ */ t(
               "span",
               {
                 "data-testid": "message-text",
-                className: n(h, s == null ? void 0 : s.message),
+                className: n(x, s == null ? void 0 : s.message),
                 children: r
               }
             )
           ] }),
           /* @__PURE__ */ c("div", { className: g.below, children: [
-            !!a && /* @__PURE__ */ o(
+            !!a && /* @__PURE__ */ t(
               "span",
               {
                 "data-testid": "message-timestamp",
-                className: n(x, s == null ? void 0 : s.timestamp),
-                children: pe(a, "HH:mm")
+                className: n(v, s == null ? void 0 : s.timestamp),
+                children: ue(a, "HH:mm")
               }
             ),
-            l && !!d && /* @__PURE__ */ c("div", { "data-testid": "message-status", className: "translate-y-0.5", children: [
-              d === "delivered" && /* @__PURE__ */ o(
+            b && !!d && /* @__PURE__ */ c("div", { "data-testid": "message-status", className: "translate-y-0.5", children: [
+              d === "delivered" && /* @__PURE__ */ t(
                 te,
                 {
                   className: "fill-dark-40/50",
@@ -506,7 +506,7 @@ const O = {
                   viewBox: "0 0 24 24"
                 }
               ),
-              d === "read" && /* @__PURE__ */ o(
+              d === "read" && /* @__PURE__ */ t(
                 oe,
                 {
                   className: "fill-transparent text-dark-40/50",
@@ -517,14 +517,14 @@ const O = {
               )
             ] })
           ] }),
-          b && /* @__PURE__ */ o(
+          i && /* @__PURE__ */ t(
             "span",
             {
               "data-testid": "bubble-tail",
               className: n(
-                v,
-                !l && "-left-3",
-                l && "-right-3 bg-info-20",
+                h,
+                !b && "-left-3",
+                b && "-right-3 bg-info-20",
                 s == null ? void 0 : s.bubbleTail
               )
             }
@@ -545,8 +545,8 @@ const D = {
   sender: "text-primary-10 text-sm font-sans font-medium",
   message: "text-dark-30 text-xs font-sans font-medium",
   timestamp: "text-xs text-dark-40/50 leading-none"
-}, Ce = z(
-  ({ checked: e, disabled: r, id: a, onChange: t, size: d = "large", className: l, ...i }, b) => {
+}, Ce = O(
+  ({ checked: e, disabled: r, id: a, onChange: o, size: d = "large", className: b, ...l }, i) => {
     const s = k.sizes[d];
     return /* @__PURE__ */ c(
       "label",
@@ -560,26 +560,26 @@ const D = {
           !r && k.active,
           !e && !r && k.hover,
           !r && e && k.checked,
-          l
+          b
         ),
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ t(
             "input",
             {
-              ...i,
+              ...l,
               id: a,
-              ref: b,
+              ref: i,
               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__ */ t(
             "span",
             {
               "aria-hidden": "true",
@@ -614,11 +614,11 @@ const k = {
       label: "size-5 min-w-5"
     }
   }
-}, or = ({
+}, ar = ({
   text: e,
   variant: r = "default",
   className: a
-}) => /* @__PURE__ */ o(
+}) => /* @__PURE__ */ t(
   C,
   {
     className: n(K.base, K.status[r], a),
@@ -634,45 +634,45 @@ const k = {
     warning: "bg-status-30",
     default: "bg-dark-30/[.15]"
   }
-}, { Root: Re, Thumb: Ae } = Y, ar = P.forwardRef(({ classNames: e, ...r }, a) => {
-  const t = r.checked ?? !1;
+}, { Root: Re, Thumb: Ae } = Y, nr = z.forwardRef(({ classNames: e, ...r }, a) => {
+  const o = r.checked ?? !1;
   return /* @__PURE__ */ c(Re, { ref: a, className: n(T.base, e == null ? void 0 : e.root), ...r, children: [
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ t(
       "div",
       {
         className: n(
           T.iconWrapper.base,
           "left-0",
-          !t && T.iconWrapper.checked
+          !o && T.iconWrapper.checked
         ),
-        children: /* @__PURE__ */ o(
+        children: /* @__PURE__ */ t(
           fe,
           {
             "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__ */ t(
       "div",
       {
         className: n(
           T.iconWrapper.base,
           "right-0",
-          t && T.iconWrapper.checked
+          o && T.iconWrapper.checked
         ),
-        children: /* @__PURE__ */ o(
+        children: /* @__PURE__ */ t(
           ge,
           {
             "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__ */ t("div", { className: n(T.borderLine) }),
+    /* @__PURE__ */ t(Ae, { tabIndex: 1, className: n(T.thumb, e == null ? void 0 : e.thumb) })
   ] });
 }), T = {
   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",
@@ -682,7 +682,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"
-}, W = {
+}, P = {
   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",
@@ -712,18 +712,18 @@ const k = {
     active: "fill-white",
     disabled: "fill-dark-30/25"
   }
-}, nr = z(
+}, ir = O(
   ({
     variant: e = "small",
     active: r,
     icon: a,
-    disabled: t,
+    disabled: o,
     children: d,
-    className: l,
-    iconDimensions: i,
-    ...b
+    className: b,
+    iconDimensions: l,
+    ...i
   }, s) => {
-    const u = W.sizes[e];
+    const p = P.sizes[e];
     return /* @__PURE__ */ c(
       "button",
       {
@@ -731,27 +731,27 @@ const k = {
         "aria-selected": r,
         ref: s,
         className: n(
-          u.base,
-          u.default,
-          !t && !r && u.hover,
-          r && !t && u.active,
-          r && !t && W.focus,
-          t && u.disabled,
-          l
+          p.base,
+          p.default,
+          !o && !r && p.hover,
+          r && !o && p.active,
+          r && !o && P.focus,
+          o && p.disabled,
+          b
         ),
-        ...b,
+        ...i,
         children: [
-          !!a && /* @__PURE__ */ o(
+          !!a && /* @__PURE__ */ t(
             a,
             {
               "aria-label": "icon",
               "aria-hidden": !0,
               className: n(
-                W.icon.default,
-                r && W.icon.active,
-                t && W.icon.disabled
+                P.icon.default,
+                r && P.icon.active,
+                o && P.icon.disabled
               ),
-              ...i
+              ...l
             }
           ),
           d
@@ -763,54 +763,54 @@ const k = {
   children: e,
   className: r = "",
   variant: a = "p",
-  ...t
-}) => /* @__PURE__ */ o(a, { ...t, className: n(r), children: e }), ir = P.forwardRef(
+  ...o
+}) => /* @__PURE__ */ t(a, { ...o, className: n(r), children: e }), dr = z.forwardRef(
   ({
     className: e = "",
     disabled: r,
     onChange: a,
-    placeholder: t = "Введите текст",
+    placeholder: o = "Введите текст",
     autoFocus: d = !1,
-    status: l,
-    maxLength: i,
-    ...b
+    status: b,
+    maxLength: l,
+    ...i
   }, s) => {
-    var h, x;
-    const u = j.base, p = j.state, f = j.disabled, v = j.styles, g = j.maxLength;
+    var x, v;
+    const p = j.base, u = j.state, f = j.disabled, h = j.styles, g = j.maxLength;
     return /* @__PURE__ */ c("div", { className: j.root, children: [
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ t(
         "textarea",
         {
-          ...b,
+          ...i,
           role: "textbox",
           ref: s,
-          maxLength: i,
+          maxLength: l,
           disabled: r,
           autoFocus: d,
-          placeholder: t,
+          placeholder: o,
           onChange: a,
           className: n(
-            u,
-            p.focus,
-            !r && p.hover,
-            l && (v == null ? void 0 : v[l]),
+            p,
+            u.focus,
+            !r && u.hover,
+            b && (h == null ? void 0 : h[b]),
             r && f,
             e
           )
         }
       ),
-      /* @__PURE__ */ o("div", { className: j.messageContainer, children: i && /* @__PURE__ */ c(
+      /* @__PURE__ */ t("div", { className: j.messageContainer, children: l && /* @__PURE__ */ c(
         C,
         {
           variant: "span",
           className: n(
             g,
-            String(b.value).length === i ? "bg-danger-10 text-sidebar-10" : "bg-transparent"
+            String(i.value).length === l ? "bg-danger-10 text-sidebar-10" : "bg-transparent"
           ),
           children: [
-            (x = (h = b.value || "") == null ? void 0 : h.toString()) == null ? void 0 : x.length,
+            (v = (x = i.value || "") == null ? void 0 : x.toString()) == null ? void 0 : v.length,
             "/",
-            i
+            l
           ]
         }
       ) })
@@ -836,8 +836,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, dr = P.forwardRef(
-  ({ label: e = "", labelPosition: r = "right", disabled: a, classNames: t, ...d }, l) => /* @__PURE__ */ c(
+}, { Root: Be, Thumb: De } = Y, lr = z.forwardRef(
+  ({ label: e = "", labelPosition: r = "right", disabled: a, classNames: o, ...d }, b) => /* @__PURE__ */ c(
     "div",
     {
       className: n(
@@ -845,30 +845,30 @@ const k = {
         r === "right" && "flex-row-reverse"
       ),
       children: [
-        !!e && /* @__PURE__ */ o(
+        !!e && /* @__PURE__ */ t(
           "span",
           {
             className: n(
               $.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(
+        /* @__PURE__ */ t(
           Be,
           {
-            ref: l,
+            ref: b,
             disabled: a,
-            className: n($.base, t == null ? void 0 : t.base),
+            className: n($.base, o == null ? void 0 : o.base),
             ...d,
-            children: /* @__PURE__ */ o(
+            children: /* @__PURE__ */ t(
               De,
               {
                 tabIndex: 1,
-                className: n($.thumb, t == null ? void 0 : t.thumb)
+                className: n($.thumb, o == null ? void 0 : o.thumb)
               }
             )
           }
@@ -880,25 +880,25 @@ 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, lr = ({
+}, { Provider: Fe, Root: ze, Trigger: Oe, Portal: We, Content: Pe, Arrow: Le } = he, sr = ({
   children: e,
   className: r,
   defaultOpen: a,
-  side: t,
+  side: o,
   content: d,
-  delayDuration: l = 0,
-  isDisabled: i = !1
-}) => /* @__PURE__ */ o(Fe, { children: /* @__PURE__ */ c(ze, { defaultOpen: a, delayDuration: l, children: [
-  /* @__PURE__ */ o(Oe, { asChild: !0, children: /* @__PURE__ */ o("div", { children: e }) }),
-  !i && /* @__PURE__ */ o(We, { children: /* @__PURE__ */ c(
+  delayDuration: b = 0,
+  isDisabled: l = !1
+}) => /* @__PURE__ */ t(Fe, { children: /* @__PURE__ */ c(ze, { defaultOpen: a, delayDuration: b, children: [
+  /* @__PURE__ */ t(Oe, { asChild: !0, children: /* @__PURE__ */ t("div", { children: e }) }),
+  !l && /* @__PURE__ */ t(We, { children: /* @__PURE__ */ c(
     Pe,
     {
-      side: t,
+      side: o,
       sideOffset: 5,
       className: n(Q.content, r),
       children: [
         d,
-        /* @__PURE__ */ o(Le, { className: Q.arrow })
+        /* @__PURE__ */ t(Le, { className: Q.arrow })
       ]
     }
   ) })
@@ -911,26 +911,26 @@ const k = {
     "data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
   ),
   arrow: "fill-dark-30"
-}, sr = ({
+}, br = ({
   classNames: e,
   disabled: r,
   status: a,
-  onChange: t,
+  onChange: o,
   options: d,
-  placeholder: l = "Choose",
-  value: i,
-  isDotable: b,
+  placeholder: b = "Choose",
+  value: l,
+  isDotable: i,
   isLoading: s,
-  autoFocusValue: u
+  autoFocusValue: p
 }) => {
-  const [p, f] = re(!1), g = ye(d)(i), y = U(null), h = U(null), x = F.base, w = F.options, Z = F.status.styles, M = F.disabled.trigger, N = F.disabled.triggerText, H = ({
+  const [u, f] = re(!1), g = ye(d)(l), y = U(null), x = U(null), v = F.base, w = F.options, Z = F.status.styles, M = F.disabled.trigger, N = F.disabled.triggerText, H = ({
     className: m,
     text: S = ""
-  }) => /* @__PURE__ */ o(
+  }) => /* @__PURE__ */ t(
     C,
     {
       className: n(
-        x.placeholder,
+        v.placeholder,
         r && N,
         "truncate min-w-0 flex-1",
         m
@@ -938,10 +938,10 @@ const k = {
       children: S
     }
   ), ee = (m) => {
-    if (m.preventDefault(), h.current) {
-      const S = i || u;
+    if (m.preventDefault(), x.current) {
+      const S = l || p;
       if (S) {
-        const q = h.current.querySelector(
+        const q = x.current.querySelector(
           `[data-value="${S}"]`
         );
         q && q.scrollIntoView({
@@ -951,48 +951,48 @@ const k = {
       }
     }
   };
-  return /* @__PURE__ */ o("div", { className: n("w-full", e == null ? void 0 : e.parent), children: /* @__PURE__ */ c(be, { open: p, onOpenChange: f, children: [
+  return /* @__PURE__ */ t("div", { className: n("w-full", e == null ? void 0 : e.parent), children: /* @__PURE__ */ c(be, { open: u, onOpenChange: f, children: [
     /* @__PURE__ */ c(
       ce,
       {
         role: "listbox",
         disabled: r,
         className: n(
-          x.trigger,
+          v.trigger,
           r && M,
-          p && x.focus,
-          !p && !r && x.hover,
-          !p && a && Z[a],
+          u && v.focus,
+          !u && !r && v.hover,
+          !u && a && Z[a],
           e == null ? void 0 : e.trigger
         ),
         children: [
-          /* @__PURE__ */ o("div", { className: x == null ? void 0 : x.textWrapper, children: i ? /* @__PURE__ */ o(
+          /* @__PURE__ */ t("div", { className: v == null ? void 0 : v.textWrapper, children: l ? /* @__PURE__ */ t(
             H,
             {
               text: g == null ? void 0 : g.label,
               className: n(
-                x.selected,
+                v.selected,
                 r && F.disabled.selectedDisabled,
                 e == null ? void 0 : e.selected
               )
             }
-          ) : /* @__PURE__ */ o(
+          ) : /* @__PURE__ */ t(
             H,
             {
-              text: l,
+              text: b,
               className: e == null ? void 0 : e.placeholder
             }
           ) }),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ t(
             xe,
             {
               width: 20,
               height: 20,
               viewBox: "0 0 20 20",
               className: n(
-                x.icon,
-                r && x.iconDisabled,
-                p && "-rotate-180",
+                v.icon,
+                r && v.iconDisabled,
+                u && "-rotate-180",
                 "flex-shrink-0"
               )
             }
@@ -1000,39 +1000,39 @@ const k = {
         ]
       }
     ),
-    /* @__PURE__ */ o("div", { ref: y, children: /* @__PURE__ */ c(
-      ue,
+    /* @__PURE__ */ t("div", { ref: y, children: /* @__PURE__ */ c(
+      pe,
       {
         container: y.current,
         className: n(w.content, e == null ? void 0 : e.content),
         style: { minWidth: "var(--radix-popper-anchor-width)" },
         onOpenAutoFocus: ee,
-        ref: h,
+        ref: x,
         children: [
-          s && /* @__PURE__ */ o($e, { width: 30, height: 30 }),
-          !s && (d != null && d.length) ? d.map((m) => /* @__PURE__ */ o(
+          s && /* @__PURE__ */ t(Ie, { width: 30, height: 30 }),
+          !s && (d != null && d.length) ? d.map((m) => /* @__PURE__ */ t(
             "div",
             {
               "data-value": m.value,
               className: n(w.items),
               onClick: (S) => {
-                S.preventDefault(), S.stopPropagation(), t(m.value), f(!1);
+                S.preventDefault(), S.stopPropagation(), o(m.value), f(!1);
               },
-              children: /* @__PURE__ */ o(
+              children: /* @__PURE__ */ t(
                 C,
                 {
                   className: n(
                     w.itemsText,
-                    !b && i === m.value && w.active,
-                    b && w.dot,
-                    b && i === m.value && "before:bg-dark-10 !font-bold"
+                    !i && l === m.value && w.active,
+                    i && w.dot,
+                    i && l === m.value && "before:bg-dark-10 !font-bold"
                   ),
                   children: m.label
                 }
               )
             },
             m.value
-          )) : !s && /* @__PURE__ */ o("div", { className: n(w.items, "cursor-default"), children: /* @__PURE__ */ o(C, { className: n(w.itemsText), children: "Нет данных" }) })
+          )) : !s && /* @__PURE__ */ t("div", { className: n(w.items, "cursor-default"), children: /* @__PURE__ */ t(C, { className: n(w.itemsText), children: "Нет данных" }) })
         ]
       }
     ) })
@@ -1070,87 +1070,106 @@ const k = {
       success: "border-success-20 ring-2 ring-success-10/[.20] hover:border-success-20"
     }
   }
-}, br = ({
-  imageSrc: e,
-  alt: r,
-  hasBadge: a = !1,
-  iconSize: t,
-  isActive: d,
-  isHasCamera: l = !1,
-  classNames: i
-}) => {
-  const b = L.root, s = L.image, u = L.badge;
-  return /* @__PURE__ */ c(
-    me,
-    {
-      role: "group",
-      "data-testid": "avatar-root",
-      className: n(
-        b,
-        a && "bg-dark-30/[.10]",
-        d && L.active,
-        i == null ? void 0 : i.wrapper
-      ),
-      children: [
-        e ? /* @__PURE__ */ o(
-          ke,
-          {
-            role: "img",
-            "data-testid": "avatar-img",
-            src: e,
-            alt: r ?? "empty-avatar",
-            className: n(s, i == null ? void 0 : i.img)
-          }
-        ) : /* @__PURE__ */ o(we, { children: l ? /* @__PURE__ */ o(
-          E,
-          {
-            width: 38,
-            height: 30,
-            className: n("fill-dark-30/[.20]", i == null ? void 0 : i.badgeIcon),
-            viewBox: "0 0 38 30"
-          }
-        ) : /* @__PURE__ */ o(
-          ve,
-          {
-            "data-testid": "icon-avatar",
-            "aria-label": "icon-avatar",
-            height: (t == null ? void 0 : t.height) ?? 17,
-            width: (t == null ? void 0 : t.width) ?? 17,
-            className: n(
-              "fill-sidebar-10",
-              a && "fill-dark-30/[.15]",
-              i == null ? void 0 : i.fallbackIcon
-            )
-          }
-        ) }),
-        a && /* @__PURE__ */ o(
-          "div",
-          {
-            "data-testid": "avatar-badge",
-            className: n(u.wrapper, i == null ? void 0 : i.badge),
-            children: d ? /* @__PURE__ */ o(
-              X,
-              {
-                width: 14,
-                height: 14,
-                viewBox: "0 0 20 20",
-                className: "fill-sidebar-10"
-              }
-            ) : /* @__PURE__ */ o(
-              E,
-              {
-                width: 16,
-                height: 13,
-                viewBox: "0 0 38 30",
-                className: n("fill-sidebar-10", i == null ? void 0 : i.badgeIcon)
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}, L = {
+}, _e = z.forwardRef(
+  ({
+    imageSrc: e,
+    alt: r,
+    hasBadge: a = !1,
+    iconSize: o,
+    isActive: d,
+    isHasCamera: b = !1,
+    onAvatarChange: l,
+    classNames: i
+  }, s) => {
+    const p = L.root, u = L.image, f = L.badge;
+    return /* @__PURE__ */ c(
+      me,
+      {
+        role: "group",
+        "data-testid": "avatar-root",
+        onClick: () => {
+          var h;
+          return (h = s == null ? void 0 : s.current) == null ? void 0 : h.click();
+        },
+        className: n(
+          p,
+          a && "bg-dark-30/[.10]",
+          d && L.active,
+          i == null ? void 0 : i.wrapper
+        ),
+        children: [
+          !!s && /* @__PURE__ */ t(
+            "input",
+            {
+              ref: s,
+              type: "file",
+              accept: ".png,.jpg,.jpeg,image/png,image/jpeg",
+              className: "hidden",
+              onChange: l
+            }
+          ),
+          e ? /* @__PURE__ */ t(
+            ke,
+            {
+              role: "img",
+              "data-testid": "avatar-img",
+              src: e,
+              alt: r ?? "empty-avatar",
+              className: n(u, i == null ? void 0 : i.img)
+            }
+          ) : /* @__PURE__ */ t(we, { children: b ? /* @__PURE__ */ t(
+            E,
+            {
+              width: 38,
+              height: 30,
+              className: n("fill-dark-30/[.20]", i == null ? void 0 : i.badgeIcon),
+              viewBox: "0 0 38 30"
+            }
+          ) : /* @__PURE__ */ t(
+            ve,
+            {
+              "data-testid": "icon-avatar",
+              "aria-label": "icon-avatar",
+              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
+              )
+            }
+          ) }),
+          a && /* @__PURE__ */ t(
+            "div",
+            {
+              "data-testid": "avatar-badge",
+              className: n(f.wrapper, i == null ? void 0 : i.badge),
+              children: d ? /* @__PURE__ */ t(
+                X,
+                {
+                  width: 14,
+                  height: 14,
+                  viewBox: "0 0 20 20",
+                  className: "fill-sidebar-10"
+                }
+              ) : /* @__PURE__ */ t(
+                E,
+                {
+                  width: 16,
+                  height: 13,
+                  viewBox: "0 0 38 30",
+                  className: n("fill-sidebar-10", i == null ? void 0 : i.badgeIcon)
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+_e.displayName = "Avatar";
+const L = {
   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: {
@@ -1161,43 +1180,43 @@ const k = {
   value: e,
   onValueChange: r,
   classNames: a = {},
-  count: t = 3,
+  count: o = 3,
   ...d
-}) => /* @__PURE__ */ o(_.Root, { value: e, onValueChange: r, children: /* @__PURE__ */ o(
+}) => /* @__PURE__ */ t(_.Root, { value: e, onValueChange: r, children: /* @__PURE__ */ t(
   _.List,
   {
     className: n(I.container, a.container),
     ...d,
-    children: Array.from({ length: t }).map((l, i) => /* @__PURE__ */ o(
+    children: Array.from({ length: o }).map((b, l) => /* @__PURE__ */ t(
       _.Trigger,
       {
-        value: String(i),
+        value: String(l),
         className: n(
           I.dot,
-          i <= Number(e) && I.dotActive,
+          l <= Number(e) && I.dotActive,
           a.trigger
         )
       },
-      i
+      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"
-}, ur = ({ className: e, children: r, ...a }) => /* @__PURE__ */ o("div", { ...a, "data-slot": "skeleton", className: n(_e.base, e), children: r }), _e = {
+}, pr = ({ className: e, children: r, ...a }) => /* @__PURE__ */ t("div", { ...a, "data-slot": "skeleton", className: n($e.base, e), children: r }), $e = {
   base: "bg-gray-200 animate-pulse rounded-md"
-}, $e = ({
+}, Ie = ({
   classNames: e,
   width: r = 73,
   height: a = 73,
-  isBlur: t = !1
-}) => /* @__PURE__ */ o(
+  isBlur: o = !1
+}) => /* @__PURE__ */ t(
   "div",
   {
     "data-testid": "spinner",
-    className: n(t ? V.blur : V.wrapper, e == null ? void 0 : e.wrapper),
-    children: /* @__PURE__ */ o(
+    className: n(o ? V.blur : V.wrapper, e == null ? void 0 : e.wrapper),
+    children: /* @__PURE__ */ t(
       de,
       {
         "data-testid": "spinner-icon",
@@ -1213,29 +1232,29 @@ const k = {
   icon: "fill-primary-10"
 };
 export {
-  br as Avatar,
-  Ye as Button,
-  Me as Checkbox,
-  Ne as Headline,
-  Ze as IconButton,
-  er as Input,
-  rr as Label,
+  _e as Avatar,
+  Ze as Button,
+  Ne as Checkbox,
+  er as Headline,
+  Me as IconButton,
+  rr as Input,
+  tr as Label,
   je as Message,
-  tr as Notification,
+  or as Notification,
   Ce as Radio,
-  sr as Select,
-  ur as Skeleton,
-  $e as Spinner,
-  or as Status,
-  ar as Switch,
-  nr as Tab,
+  br as Select,
+  pr as Skeleton,
+  Ie as Spinner,
+  ar as Status,
+  nr as Switch,
+  ir as Tab,
   cr as TabDots,
   C as Text,
-  ir as Textarea,
-  dr as Toggle,
-  lr as Tooltip,
+  dr as Textarea,
+  lr as Toggle,
+  sr as Tooltip,
   L as avatarIconTokens,
-  O as buttonTokens,
+  W as buttonTokens,
   A as checkboxTokens,
   R as iconButtonTokens,
   B as inputTokens,
@@ -1243,12 +1262,12 @@ export {
   D as messageTokens,
   k as radioTokens,
   F as selectTokens,
-  _e as skeletonTokens,
+  $e as skeletonTokens,
   V as spinnerTokens,
   K as statusTokens,
   T as switchTokens,
   I as tabDotsTokens,
-  W as tabTokens,
+  P as tabTokens,
   j as textareaTokens,
   $ as toggleTokens,
   Q as tooltipTokens