@mci-ui/mci-ui 0.0.87 → 0.0.89

package/dist/shared/ui/mciDrawer/MciDrawer.js

@@ -1,94 +1,114 @@
-import { jsxs as n, Fragment as j, jsx as t } from "react/jsx-runtime";
-import { useRef as h, useCallback as E, useEffect as x, useMemo as C } from "react";
-import { cn as i } from "../../lib/utils.js";
+import { jsxs as n, Fragment as $, jsx as r } from "react/jsx-runtime";
+import { useRef as v, useCallback as A, useEffect as g, useMemo as S } from "react";
+import { cn as s } from "../../lib/utils.js";
 import X from "../../../assets/icons/close.svg.js";
-function D({
+const z = {
+  blue: {
+    close: "hover:bg-blue-100 hover:text-blue-600 focus-visible:ring-2 focus-visible:ring-[rgba(21,93,252,0.25)]",
+    darkClose: "hover:bg-blue-500/20 hover:text-blue-400 focus-visible:ring-2 focus-visible:ring-[rgba(21,93,252,0.25)]"
+  },
+  yellow: {
+    close: "hover:bg-yellow-100 hover:text-yellow-600 focus-visible:ring-2 focus-visible:ring-yellow-200",
+    darkClose: "hover:bg-yellow-500/20 hover:text-yellow-400 focus-visible:ring-2 focus-visible:ring-yellow-300/40"
+  },
+  orange: {
+    close: "hover:bg-orange-100 hover:text-orange-600 focus-visible:ring-2 focus-visible:ring-[rgba(227,98,12,0.25)]",
+    darkClose: "hover:bg-orange-600/20 hover:text-orange-400 focus-visible:ring-2 focus-visible:ring-[rgba(227,98,12,0.25)]"
+  }
+};
+function T({
   isOpen: e,
   onClose: c,
-  position: o = "right",
-  children: p,
-  footer: m,
-  title: a,
-  description: s,
-  showCloseButton: d = !0,
-  drawerClassName: v,
+  position: l = "right",
+  children: x,
+  footer: b,
+  title: o,
+  description: a,
+  showCloseButton: u = !0,
+  drawerClassName: p,
   contentClassName: y,
-  closeOnOverlayClick: g = !0,
-  closeOnEscape: z = !0,
-  width: l = 572,
-  darkMode: r = !1
+  footerClassName: w,
+  closeOnOverlayClick: N = !0,
+  closeOnEscape: D = !0,
+  width: i = 572,
+  darkMode: t = !1,
+  variant: k = "orange"
 }) {
-  const u = h(null), b = h(null), f = E(() => c(), [c]);
-  x(() => {
-    e ? (b.current = document.activeElement, u.current?.focus()) : b.current?.focus();
-  }, [e]), x(() => (e && (document.body.style.overflow = "hidden"), () => {
+  const m = v(null), d = v(null), f = z[k], h = A(() => c(), [c]);
+  g(() => {
+    e ? (d.current = document.activeElement, m.current?.focus()) : d.current?.focus();
+  }, [e]), g(() => (e && (document.body.style.overflow = "hidden"), () => {
     document.body.style.overflow = "unset";
   }), [e]);
-  const w = C(
+  const C = S(
     () => ({
-      "--drawer-w": typeof l == "number" ? `${l}px` : l,
-      transform: e ? "translateX(0)" : o === "right" ? "translateX(calc(100% + 48px))" : "translateX(calc(-100% - 48px))"
+      "--drawer-w": typeof i == "number" ? `${i}px` : i,
+      transform: e ? "translateX(0)" : l === "right" ? "translateX(calc(100% + 48px))" : "translateX(calc(-100% - 48px))"
     }),
-    [e, l, o]
-  ), N = !!(a || s || d), k = o === "right" ? "top-0 bottom-0 right-0 left-3 rounded-l-3xl rounded-r-none" : "top-0 bottom-0 left-0 right-3 rounded-r-3xl rounded-l-none", $ = o === "right" ? "sm:top-6 sm:bottom-6 sm:right-6 sm:left-auto" : "sm:top-6 sm:bottom-6 sm:left-6 sm:right-auto";
-  return /* @__PURE__ */ n(j, { children: [
-    /* @__PURE__ */ t(
+    [e, i, l]
+  ), j = !!(o || a || u), E = l === "right" ? "top-0 bottom-0 right-0 left-3 rounded-l-3xl rounded-r-none" : "top-0 bottom-0 left-0 right-3 rounded-r-3xl rounded-l-none", R = l === "right" ? "sm:top-6 sm:bottom-6 sm:right-6 sm:left-auto" : "sm:top-6 sm:bottom-6 sm:left-6 sm:right-auto";
+  return /* @__PURE__ */ n($, { children: [
+    /* @__PURE__ */ r(
       "div",
       {
-        className: i(
+        className: s(
           "fixed inset-0 z-50 bg-black/40 transition-opacity duration-300",
           e ? "opacity-100 visible cursor-pointer" : "opacity-0 invisible pointer-events-none"
         ),
-        onClick: g ? f : void 0,
+        onClick: N ? h : void 0,
         "aria-hidden": "true"
       }
     ),
     /* @__PURE__ */ n(
       "div",
       {
-        ref: u,
+        ref: m,
         tabIndex: -1,
-        style: w,
-        className: i(
-          `fixed z-50 flex flex-col ${r ? "bg-black" : "bg-white"}  outline-none min-h-0`,
+        style: C,
+        className: s(
+          `fixed z-50 flex flex-col ${t ? "bg-black" : "bg-white"}  outline-none min-h-0`,
           "transition-[transform,opacity,visibility] duration-300 ease-in-out",
           e ? "opacity-100 visible pointer-events-auto shadow-2xl" : "opacity-0 invisible pointer-events-none shadow-none",
-          k,
+          E,
           "h-[100dvh]",
           "pb-[env(safe-area-inset-bottom)]",
-          $,
+          R,
           "sm:h-auto sm:rounded-2xl sm:pb-0",
           "sm:w-[var(--drawer-w)]",
-          v
+          p
         ),
         role: "dialog",
         "aria-modal": "true",
         "aria-hidden": !e,
-        "aria-labelledby": a ? "drawer-title" : void 0,
+        "aria-labelledby": o ? "drawer-title" : void 0,
         children: [
-          N && /* @__PURE__ */ n(
+          j && /* @__PURE__ */ n(
             "div",
             {
-              className: `flex items-start justify-between border-b ${r ? "border-neutral-200" : "border-slate-200"}  shrink-0 px-4 py-4 sm:p-6`,
+              className: `flex items-start justify-between border-b ${t ? "border-neutral-200" : "border-slate-200"}  shrink-0 px-4 py-4 sm:p-6`,
               children: [
-                (a || s) && /* @__PURE__ */ n("div", { className: "block pr-3", children: [
-                  a && /* @__PURE__ */ t(
+                (o || a) && /* @__PURE__ */ n("div", { className: "block pr-3", children: [
+                  o && /* @__PURE__ */ r(
                     "h2",
                     {
                       id: "drawer-title",
-                      className: `font-semibold ${r ? "text-slate-50" : "text-black"} text-xl leading-tight sm:text-h3`,
-                      children: a
+                      className: `font-semibold ${t ? "text-slate-50" : "text-black"} text-xl leading-tight sm:text-h3`,
+                      children: o
                     }
                   ),
-                  s && /* @__PURE__ */ t("p", { className: `text-sm sm:text-base ${r ? "text-neutral-50" : "text-slate-base"} font-normal mt-2`, children: s })
+                  a && /* @__PURE__ */ r("p", { className: `text-sm sm:text-base ${t ? "text-neutral-50" : "text-slate-base"} font-normal mt-2`, children: a })
                 ] }),
-                d && /* @__PURE__ */ t(
+                u && /* @__PURE__ */ r(
                   "button",
                   {
                     type: "button",
-                    onClick: f,
-                    className: `${r ? "bg-neutral-300 text-slate-50" : "bg-slate-100 text-black"} rounded-xl w-11 h-11 sm:w-12 sm:h-12 hover:cursor-pointer transition flex items-center justify-center group active:scale-95`,
-                    children: /* @__PURE__ */ t(
+                    onClick: h,
+                    className: s(
+                      t ? "bg-neutral-300 text-slate-50" : "bg-slate-100 text-black",
+                      t ? f.darkClose : f.close,
+                      "rounded-xl w-11 h-11 sm:w-12 sm:h-12 hover:cursor-pointer transition flex items-center justify-center group active:scale-95"
+                    ),
+                    children: /* @__PURE__ */ r(
                       X,
                       {
                         className: "h-5 w-5 sm:h-6 sm:w-6 transition-transform duration-300 group-hover:rotate-180"
@@ -99,21 +119,25 @@ function D({
               ]
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             "div",
             {
-              className: i(
+              className: s(
                 "flex-1 min-h-0 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-200 px-4 py-4 sm:p-6",
                 y
               ),
-              children: p
+              children: x
             }
           ),
-          m && /* @__PURE__ */ t(
+          b && /* @__PURE__ */ r(
             "div",
             {
-              className: `shrink-0 flex items-center justify-end border-t ${r ? "border-neutral-200" : "border-slate-200"} px-4 py-4 sm:p-6 gap-3 [&>*]:w-fit [&>*]:shrink-0 [&>*]:whitespace-nowrap`,
-              children: m
+              className: s(
+                "shrink-0 flex items-center justify-end border-t px-4 py-4 sm:p-6 gap-3 [&>*]:w-fit [&>*]:shrink-0 [&>*]:whitespace-nowrap",
+                t ? "border-neutral-200" : "border-slate-200",
+                w
+              ),
+              children: b
             }
           )
         ]
@@ -122,5 +146,5 @@ function D({
   ] });
 }
 export {
-  D as default
+  T as default
 };

package/dist/shared/ui/mciInput/MciInput.js

@@ -1,9 +1,9 @@
 import { jsxs as p, jsx as l, Fragment as z } from "react/jsx-runtime";
 import { EyeClosed as ee, Eye as te } from "@solar-icons/react";
 import { forwardRef as le, useState as v, useMemo as h } from "react";
-import se from "../../../assets/icons/close.svg.js";
+import ne from "../../../assets/icons/close.svg.js";
 import { cn as e } from "../../lib/utils.js";
-import { getInputSizes as ne, getInputStateStyles as ae, getInputIconColor as re, getInputRightPaddingClass as ce } from "./mci-input.utils.js";
+import { getInputSizes as se, getInputStateStyles as ae, getInputIconColor as re, getInputRightPaddingClass as ce } from "./mci-input.utils.js";
 const ie = le(
   ({
     label: C,
@@ -30,24 +30,24 @@ const ie = le(
     autoComplete: K = "off",
     ...L
   }, O) => {
-    const [y, S] = v(!1), [Q, W] = v(""), [R, T] = v(!1), B = N ?? Q, o = w === "password", b = H && !!B && !f, g = c && u === "left", j = c && u === "right" || r || o, U = j || b, V = h(() => {
-      let n = 0;
-      return b && (n += 1), o ? (n += 1, r && (n += 1), n) : (r && (n += 1), c && u === "right" && (n += 1), n);
-    }, [b, o, r, c, u]), X = (n) => {
-      S(!0), _?.(n);
-    }, Y = (n) => {
-      S(!1), D?.(n);
-    }, Z = (n) => {
-      let m = n.target.value;
-      w === "number" && x && m.length > x && (m = m.slice(0, x), n.target.value = m), N === void 0 && W(m), P?.(n);
-    }, $ = () => T((n) => !n), q = () => {
+    const [g, S] = v(!1), [Q, W] = v(""), [R, T] = v(!1), B = N ?? Q, o = w === "password", b = H && !!B && !f, y = c && u === "left", j = c && u === "right" || r || o, U = j || b, V = h(() => {
+      let s = 0;
+      return b && (s += 1), o ? (s += 1, r && (s += 1), s) : (r && (s += 1), c && u === "right" && (s += 1), s);
+    }, [b, o, r, c, u]), X = (s) => {
+      S(!0), _?.(s);
+    }, Y = (s) => {
+      S(!1), D?.(s);
+    }, Z = (s) => {
+      let m = s.target.value;
+      w === "number" && x && m.length > x && (m = m.slice(0, x), s.target.value = m), N === void 0 && W(m), P?.(s);
+    }, $ = () => T((s) => !s), q = () => {
       N === void 0 && W(""), G?.();
-    }, s = h(
-      () => ne(!!g, !!j),
-      [g, j]
+    }, n = h(
+      () => se(!!y, !!j),
+      [y, j]
     ), k = h(() => ae(i, a), [i, a]), d = h(
-      () => re(f, i, y, a),
-      [i, y, f, a]
+      () => re(f, i, g, a),
+      [i, g, f, a]
     ), M = h(
       () => ce(t, V),
       [t, V]
@@ -60,7 +60,7 @@ const ie = le(
           className: e(
             "mb-2 block text-base font-medium",
             i ? a ? "text-red-500" : "text-red-600" : a ? "text-neutral-50" : "text-slate-700",
-            s[t].labelFont
+            n[t].labelFont
           ),
           children: [
             C,
@@ -89,30 +89,30 @@ const ie = le(
               "w-full border font-normal transition-all duration-300 ease-in-out outline-none",
               t === "base" ? "rounded-xl" : "rounded-lg",
               a ? "text-neutral-50 placeholder:text-neutral-100 disabled:cursor-not-allowed disabled:border-neutral-200 disabled:bg-neutral-300 disabled:text-neutral-100/50 disabled:placeholder:text-neutral-100/50" : "bg-white disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-400",
-              a && y && !f && "text-white",
+              a && g && !f && "text-white",
               "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
-              s[t].input,
-              s[t].padding,
+              n[t].input,
+              n[t].padding,
               M,
               k
             ),
             maxLength: x
           }
         ),
-        g && /* @__PURE__ */ l(
+        y && /* @__PURE__ */ l(
           "div",
           {
             className: e(
               "absolute top-1/2 flex -translate-y-1/2 items-center justify-center",
               "transition-all duration-300",
-              s[t].leftIcon,
+              n[t].leftIcon,
               d
             ),
             children: /* @__PURE__ */ l(
               "div",
               {
-                className: e("flex items-center justify-center", s[t].iconWrapper),
-                children: /* @__PURE__ */ l("span", { className: e("flex items-center justify-center", s[t].icon), children: c })
+                className: e("flex items-center justify-center", n[t].iconWrapper),
+                children: /* @__PURE__ */ l("span", { className: e("flex items-center justify-center", n[t].icon), children: c })
               }
             )
           }
@@ -123,7 +123,7 @@ const ie = le(
             className: e(
               "absolute top-1/2 flex -translate-y-1/2 items-center justify-center gap-2",
               "transition-all duration-300",
-              s[t].rightIcon
+              n[t].rightIcon
             ),
             children: [
               b && /* @__PURE__ */ l(
@@ -132,24 +132,23 @@ const ie = le(
                   type: "button",
                   onClick: q,
                   className: e(
-                    "flex items-center justify-center",
-                    s[t].iconWrapper,
+                    "flex cursor-pointer items-center justify-center",
+                    n[t].iconWrapper,
                     a ? "text-neutral-100 hover:text-white" : "text-slate-base hover:text-black"
                   ),
-                  style: { cursor: "pointer" },
-                  children: /* @__PURE__ */ l("span", { className: e("flex items-center justify-center", s[t].icon), children: /* @__PURE__ */ l(se, { className: e("h-full w-full") }) })
+                  children: /* @__PURE__ */ l("span", { className: e("flex items-center justify-center", n[t].icon), children: /* @__PURE__ */ l(ne, { className: e("h-full w-full") }) })
                 }
               ),
               r && !o && /* @__PURE__ */ l(
                 "div",
                 {
-                  className: e("flex items-center justify-center", s[t].iconWrapper),
+                  className: e("flex items-center justify-center", n[t].iconWrapper),
                   children: /* @__PURE__ */ l(
                     "span",
                     {
                       className: e(
                         "flex items-center justify-center",
-                        s[t].icon,
+                        n[t].icon,
                         d
                       ),
                       children: r
@@ -163,14 +162,14 @@ const ie = le(
                   {
                     className: e(
                       "flex items-center justify-center",
-                      s[t].iconWrapper
+                      n[t].iconWrapper
                     ),
                     children: /* @__PURE__ */ l(
                       "span",
                       {
                         className: e(
                           "flex items-center justify-center",
-                          s[t].icon,
+                          n[t].icon,
                           d
                         ),
                         children: r
@@ -184,14 +183,14 @@ const ie = le(
                     type: "button",
                     onClick: $,
                     className: e(
-                      "flex items-center justify-center",
-                      s[t].iconWrapper,
+                      "flex cursor-pointer items-center justify-center",
+                      n[t].iconWrapper,
                       d
                     ),
                     children: /* @__PURE__ */ l(
                       "span",
                       {
-                        className: e("flex items-center justify-center cursor-pointer", s[t].icon),
+                        className: e("flex items-center justify-center", n[t].icon),
                         children: R ? /* @__PURE__ */ l(ee, { weight: "Linear", className: e("h-full w-full") }) : /* @__PURE__ */ l(te, { weight: "Linear", className: e("h-full w-full") })
                       }
                     )
@@ -201,13 +200,13 @@ const ie = le(
               c && u === "right" && !o && /* @__PURE__ */ l(
                 "div",
                 {
-                  className: e("flex items-center justify-center", s[t].iconWrapper),
+                  className: e("flex items-center justify-center", n[t].iconWrapper),
                   children: /* @__PURE__ */ l(
                     "span",
                     {
                       className: e(
                         "flex items-center justify-center",
-                        s[t].icon,
+                        n[t].icon,
                         d
                       ),
                       children: c

package/dist/shared/ui/mciLoader/MciLoader.js

@@ -1,31 +1,31 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as l } from "../../lib/utils.js";
+import { jsx as l } from "react/jsx-runtime";
+import { cn as o } from "../../lib/utils.js";
 import a from "../../../assets/icons/loaderIcon.svg.js";
 function d({
-  className: o,
+  className: n,
   size: e = 150,
-  iconClassName: t,
+  iconClassName: r,
   isLoading: i = !1,
-  isFullPage: n = !0,
-  variant: u = "yellow"
+  isFullPage: u = !0,
+  variant: t = "orange"
 }) {
-  return i ? /* @__PURE__ */ r(
+  return i ? /* @__PURE__ */ l(
     "div",
     {
-      className: l(
+      className: o(
         "z-[99px] flex flex-col items-center justify-center transition-all duration-300",
-        n ? "fixed inset-0 backdrop-blur-[2px]" : "absolute inset-0 w-full h-full rounded-[inherit]",
-        o
+        u ? "fixed inset-0 backdrop-blur-[2px]" : "absolute inset-0 w-full h-full rounded-[inherit]",
+        n
       ),
-      children: /* @__PURE__ */ r(
+      children: /* @__PURE__ */ l(
         a,
         {
           width: e,
           height: e,
-          className: l(
+          className: o(
             "animate-spin",
-            !t && (u === "blue" ? "text-blue-600" : "text-yellow-500"),
-            t
+            !r && (t === "blue" ? "text-blue-600" : t === "orange" ? "text-orange-600" : "text-yellow-500"),
+            r
           ),
           style: { fill: "currentColor", stroke: "currentColor" }
         }

package/dist/shared/ui/mciPagination/MciPagination.js

@@ -26,6 +26,16 @@ const _ = {
     darkInactive: "bg-neutral-300 border-neutral-200 text-white hover:bg-neutral-200",
     darkDisabled: "text-neutral-100/50 border-neutral-200 bg-neutral-300/60",
     darkArrow: "text-neutral-50"
+  },
+  orange: {
+    active: "bg-orange-600 text-white border-orange-600",
+    inactive: "bg-slate-100 border-slate-200 text-black hover:bg-slate-200",
+    disabled: "text-slate-400 border-slate-300",
+    arrow: "text-black",
+    darkActive: "bg-orange-600 text-white border-orange-600",
+    darkInactive: "bg-neutral-300 border-neutral-200 text-white hover:bg-neutral-200",
+    darkDisabled: "text-neutral-100/50 border-neutral-200 bg-neutral-300/60",
+    darkArrow: "text-neutral-50"
   }
 };
 function P({
@@ -34,20 +44,20 @@ function P({
   perPage: b,
   onPageChange: u,
   onPerPageChange: h,
-  siblingCount: w = 1,
-  perPageOptions: A = [10, 30, 50, 100],
-  showPerPage: y = !0,
-  variant: k = "yellow",
-  size: x = "large",
+  siblingCount: x = 1,
+  perPageOptions: N = [10, 30, 50, 100],
+  showPerPage: k = !0,
+  variant: y = "orange",
+  size: g = "large",
   darkMode: e = !1,
-  paginationClassName: j
+  paginationClassName: I
 }) {
-  const g = Number.isFinite(c) && c > 0 ? c : 0, v = Number.isFinite(b) && b > 0 ? b : 10, l = Math.max(1, Number.isFinite(m) ? m : 1), n = Math.ceil(g / v), C = T(() => F(l, w, n), [l, w, n]), s = _[x], i = G[k ?? "yellow"], I = e ? i.darkActive : i.active, D = e ? i.darkInactive : i.inactive, f = e ? i.darkDisabled : i.disabled, p = e ? i.darkArrow : i.arrow;
-  return n <= 1 || g === 0 ? null : /* @__PURE__ */ o("div", { className: r(
+  const w = Number.isFinite(c) && c > 0 ? c : 0, v = Number.isFinite(b) && b > 0 ? b : 10, l = Math.max(1, Number.isFinite(m) ? m : 1), i = Math.ceil(w / v), j = T(() => F(l, x, i), [l, x, i]), s = _[g], n = G[y ?? "yellow"], C = e ? n.darkActive : n.active, D = e ? n.darkInactive : n.inactive, f = e ? n.darkDisabled : n.disabled, p = e ? n.darkArrow : n.arrow;
+  return i <= 1 || w === 0 ? null : /* @__PURE__ */ o("div", { className: r(
     "flex items-center justify-between gap-4 w-full",
-    j
+    I
   ), children: [
-    y && h && /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
+    k && h && /* @__PURE__ */ o("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ t(
         "span",
         {
@@ -67,10 +77,10 @@ function P({
             className: r(
               "appearance-none rounded-lg border pl-3 pr-8 text-base font-medium focus:outline-none cursor-pointer",
               e ? "border-neutral-200 bg-neutral-300 text-white" : "border-slate-200 bg-white text-black",
-              x === "large" ? "h-10" : "h-9"
+              g === "large" ? "h-10" : "h-9"
             ),
             "aria-label": "Количество строк на странице",
-            children: A.map((a) => /* @__PURE__ */ t("option", { value: a, children: a }, a))
+            children: N.map((a) => /* @__PURE__ */ t("option", { value: a, children: a }, a))
           }
         ),
         /* @__PURE__ */ t(
@@ -102,7 +112,7 @@ function P({
           children: /* @__PURE__ */ t(z, { weight: "Linear", size: 20 })
         }
       ),
-      /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: C.map((a, N) => {
+      /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: j.map((a, A) => {
         if (a === "...")
           return /* @__PURE__ */ t(
             "span",
@@ -115,7 +125,7 @@ function P({
               "aria-hidden": "true",
               children: /* @__PURE__ */ t(E, { weight: "Bold", size: 20 })
             },
-            N
+            A
           );
         const d = a === l;
         return /* @__PURE__ */ t(
@@ -127,24 +137,24 @@ function P({
             className: r(
               "flex items-center justify-center rounded-lg border font-medium transition-all hover:cursor-pointer min-w-10 px-2",
               s,
-              d ? I : D
+              d ? C : D
             ),
             children: a
           },
-          N
+          A
         );
       }) }),
       /* @__PURE__ */ t(
         "button",
         {
           onClick: () => u(l + 1),
-          disabled: l === n,
+          disabled: l === i,
           "aria-label": "Следующая страница",
           className: r(
             "flex items-center justify-center rounded-lg border transition-all min-w-10",
             e ? "bg-neutral-300 border-neutral-200" : "bg-slate-100",
             s,
-            l === n ? r("cursor-not-allowed opacity-50", f) : r("hover:cursor-pointer", p, e ? "hover:bg-neutral-200" : "border-slate-200")
+            l === i ? r("cursor-not-allowed opacity-50", f) : r("hover:cursor-pointer", p, e ? "hover:bg-neutral-200" : "border-slate-200")
           ),
           children: /* @__PURE__ */ t(S, { size: 20, weight: "Linear" })
         }