@grapadigital/shared-app-modules 0.0.182 → 0.0.183

package/dist/components.js

@@ -1,26 +1,28 @@
-import { l as x, V as v, c, $ as C, B as f, aI as z, aJ as I, aK as S, bf as M, ac as H, ad as _, ah as w, ag as A, ae as L, ai as j } from "./chuncks/switch.BF6I8Lqo.js";
-import { jsx as e, jsxs as o, Fragment as D } from "react/jsx-runtime";
-import { QueryErrorResetBoundary as R } from "@tanstack/react-query";
-import { Suspense as $, useState as B, useRef as E, useEffect as P } from "react";
-import { n as q } from "./chuncks/youtube-icon.component.CaEGEuTv.js";
-import { u as Fe, v as Me, z as He, M as _e, D as Ae, E as Le, F as je, G as De, H as Re, J as $e, K as Be, L as Ee, t as Pe, w as qe, N as Oe, O as Ke, o as Qe, p as Ve, q as Xe, r as Je, s as Ye, Q as Ge, x as We, y as Ue, R as Ze, X as et, Y as tt } from "./chuncks/youtube-icon.component.CaEGEuTv.js";
-import { S as b, c as O, T as K, a as Q, b as V } from "./chuncks/tooltip.BR6kaw4f.js";
-import { parseISO as k, differenceInCalendarDays as X, format as J } from "date-fns";
-const Y = [
+import { aZ as p, w as S, c, F as z, B as k, aq as _, ar as M, as as I, bf as H, W as L, X as D, $ as N, _ as $, Y as j, a0 as B } from "./chuncks/switch.D4GUsewk.js";
+import { jsx as e, jsxs as d, Fragment as T } from "react/jsx-runtime";
+import { QueryErrorResetBoundary as O, useQuery as P } from "@tanstack/react-query";
+import { Suspense as q, useState as F, useRef as A, useEffect as R, useMemo as K } from "react";
+import { n as U, o as X, M as Q, p as V } from "./chuncks/youtube-icon.component.Dasmq5T5.js";
+import { w as Ve, x as Ge, E as We, Q as Ye, G as Ze, H as Je, F as et, J as tt, K as nt, L as at, N as rt, O as st, v as it, y as lt, R as ot, U as dt, q as ct, r as gt, s as ut, t as xt, u as mt, V as bt, z as ht, D as pt, W as ft, X as yt, Y as wt } from "./chuncks/youtube-icon.component.Dasmq5T5.js";
+import { S as w, c as G, T as W, a as Y, b as Z, B as J } from "./chuncks/badge.Cur4Mrd7.js";
+import { parseISO as v, differenceInCalendarDays as ee, format as te } from "date-fns";
+import { a as ne, u as ae } from "./chuncks/use-shared-app-modules.hook.jCQwZaT8.js";
+import "./chuncks/shared-app-modules.provider.DRJ7n4Cj.js";
+const re = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
-], G = x("circle-alert", Y);
-const W = [
+], se = p("circle-alert", re);
+const ie = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
-], U = x("circle-question-mark", W);
-const Z = [
+], le = p("circle-question-mark", ie);
+const oe = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
-], ee = x("copy", Z);
-const te = [
+], de = p("copy", oe);
+const ce = [
   [
     "path",
     {
@@ -32,14 +34,14 @@ const te = [
   ["path", { d: "M10 9H8", key: "b1mrlr" }],
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
-], ae = x("file-text", te);
-const re = [
+], ge = p("file-text", ce);
+const ue = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
-], ne = x("refresh-cw", re);
-const le = [
+], xe = p("refresh-cw", ue);
+const me = [
   [
     "path",
     {
@@ -49,61 +51,61 @@ const le = [
   ],
   ["path", { d: "M12 9v4", key: "juzpu7" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
-], se = x("triangle-alert", le);
-function ie({
-  icon: r = se,
-  title: a = "Algo deu errado",
-  description: n = "Não foi possível concluir esta operação no momento. Tente novamente em alguns instantes. Se o problema persistir, entre em contato com o suporte.",
-  onRetry: l,
-  tip: s,
-  className: t,
-  ...i
+], be = p("triangle-alert", me);
+function he({
+  icon: a = be,
+  title: t = "Algo deu errado",
+  description: r = "Não foi possível concluir esta operação no momento. Tente novamente em alguns instantes. Se o problema persistir, entre em contato com o suporte.",
+  onRetry: s,
+  tip: i,
+  className: n,
+  ...l
 }) {
-  return /* @__PURE__ */ e(v, { className: c(t), ...i, children: /* @__PURE__ */ o(C, { className: "flex flex-col items-center justify-center px-6 py-12 text-center", children: [
-    /* @__PURE__ */ e("div", { className: "relative mb-4", children: /* @__PURE__ */ e(r, { "aria-hidden": "true", className: "text-destructive/60 size-16" }) }),
-    /* @__PURE__ */ e("h3", { className: "text-foreground mb-2 text-lg font-semibold", children: a }),
-    /* @__PURE__ */ e("p", { className: "text-muted-foreground max-w-md text-sm leading-relaxed", children: n }),
-    l && /* @__PURE__ */ o(f, { onClick: l, variant: "outline", className: "mt-6", children: [
-      /* @__PURE__ */ e(ne, {}),
+  return /* @__PURE__ */ e(S, { className: c(n), ...l, children: /* @__PURE__ */ d(z, { className: "flex flex-col items-center justify-center px-6 py-12 text-center", children: [
+    /* @__PURE__ */ e("div", { className: "relative mb-4", children: /* @__PURE__ */ e(a, { "aria-hidden": "true", className: "text-destructive/60 size-16" }) }),
+    /* @__PURE__ */ e("h3", { className: "text-foreground mb-2 text-lg font-semibold", children: t }),
+    /* @__PURE__ */ e("p", { className: "text-muted-foreground max-w-md text-sm leading-relaxed", children: r }),
+    s && /* @__PURE__ */ d(k, { onClick: s, variant: "outline", className: "mt-6", children: [
+      /* @__PURE__ */ e(xe, {}),
       "Tentar novamente"
     ] }),
-    s && /* @__PURE__ */ e("div", { className: "bg-destructive/5 border-destructive/20 mt-6 rounded-lg border border-dashed px-4 py-2", children: /* @__PURE__ */ e("p", { className: "text-muted-foreground text-xs", children: s }) })
+    i && /* @__PURE__ */ e("div", { className: "bg-destructive/5 border-destructive/20 mt-6 rounded-lg border border-dashed px-4 py-2", children: /* @__PURE__ */ e("p", { className: "text-muted-foreground text-xs", children: i }) })
   ] }) });
 }
-function pe({
-  suspenseFallback: r = oe,
-  errorFallback: a = ie,
-  children: n
+function Ee({
+  suspenseFallback: a = pe,
+  errorFallback: t = he,
+  children: r
 }) {
-  return /* @__PURE__ */ e($, { fallback: /* @__PURE__ */ e(r, {}), children: /* @__PURE__ */ e(R, { children: ({ reset: l }) => /* @__PURE__ */ e(
-    q,
+  return /* @__PURE__ */ e(q, { fallback: /* @__PURE__ */ e(a, {}), children: /* @__PURE__ */ e(O, { children: ({ reset: s }) => /* @__PURE__ */ e(
+    U,
     {
-      onReset: l,
-      fallbackRender: ({ resetErrorBoundary: s, error: t }) => /* @__PURE__ */ e(a, { error: t, onRetry: s }),
-      children: n
+      onReset: s,
+      fallbackRender: ({ resetErrorBoundary: i, error: n }) => /* @__PURE__ */ e(t, { error: n, onRetry: i }),
+      children: r
     }
   ) }) });
 }
-function oe() {
-  return /* @__PURE__ */ e(b, { className: "h-[13.75625rem]" });
+function pe() {
+  return /* @__PURE__ */ e(w, { className: "h-[13.75625rem]" });
 }
-function ye({
-  content: r,
-  align: a,
-  asChild: n,
-  className: l,
-  openDelay: s = 0,
-  closeDelay: t = 0,
-  children: i,
-  disabled: d = !1,
-  ...m
+function He({
+  content: a,
+  align: t,
+  asChild: r,
+  className: s,
+  openDelay: i = 0,
+  closeDelay: n = 0,
+  children: l,
+  disabled: o = !1,
+  ...x
 }) {
-  return /* @__PURE__ */ e(D, { children: d === !0 ? i : /* @__PURE__ */ o(z, { openDelay: s, closeDelay: t, ...m, children: [
-    /* @__PURE__ */ e(I, { asChild: n, children: i }),
-    /* @__PURE__ */ e(S, { align: a, className: l, children: r })
+  return /* @__PURE__ */ e(T, { children: o === !0 ? l : /* @__PURE__ */ d(_, { openDelay: i, closeDelay: n, ...x, children: [
+    /* @__PURE__ */ e(M, { asChild: r, children: l }),
+    /* @__PURE__ */ e(I, { align: t, className: s, children: a })
   ] }) });
 }
-const de = {
+const fe = {
   red: { bg: "bg-red-50", text: "text-red-600" },
   orange: { bg: "bg-orange-50", text: "text-orange-600" },
   amber: { bg: "bg-amber-50", text: "text-amber-600" },
@@ -126,7 +128,7 @@ const de = {
   zinc: { bg: "bg-zinc-200", text: "text-zinc-800" },
   neutral: { bg: "bg-neutral-200", text: "text-neutral-800" },
   stone: { bg: "bg-stone-200", text: "text-stone-800" }
-}, ce = {
+}, ye = {
   red: { bg: "bg-red-500", text: "text-white" },
   orange: { bg: "bg-orange-500", text: "text-white" },
   amber: { bg: "bg-amber-500", text: "text-white" },
@@ -150,266 +152,387 @@ const de = {
   neutral: { bg: "bg-neutral-500", text: "text-white" },
   stone: { bg: "bg-stone-500", text: "text-white" },
   black: { bg: "bg-black", text: "text-white" }
-}, N = {
+}, C = {
   xs: "size-3",
   sm: "size-4",
   md: "size-5",
   lg: "size-6",
   xl: "size-7"
 };
-function we({
-  size: r,
-  color: a,
-  className: n,
-  icon: l,
-  filled: s
+function Le({
+  size: a,
+  color: t,
+  className: r,
+  icon: s,
+  filled: i
 }) {
-  const t = s ? ce[a] : de[a], i = r ? N[r] : N.md;
-  return /* @__PURE__ */ e("div", { className: c("w-fit p-2 rounded-lg", t?.bg, n), children: /* @__PURE__ */ e(l, { className: c(i, t?.text) }) });
+  const n = i ? ye[t] : fe[t], l = a ? C[a] : C.md;
+  return /* @__PURE__ */ e("div", { className: c("w-fit p-2 rounded-lg", n?.bg, r), children: /* @__PURE__ */ e(s, { className: c(l, n?.text) }) });
 }
-function ke({ className: r, ...a }) {
-  return /* @__PURE__ */ e("div", { className: c("divide-y", r), ...a });
+function De({ className: a, ...t }) {
+  return /* @__PURE__ */ e("div", { className: c("divide-y", a), ...t });
 }
-function Ne({
-  label: r,
-  value: a,
-  tooltip: n,
-  highlight: l = !1,
-  negative: s = !1,
-  positive: t = !1,
-  isPercentage: i = !1,
-  isDate: d = !1,
-  isText: m = !1,
-  isInvoiced: p = !1,
-  hasCopyButton: u = !1,
-  enableHoverableContent: T = !1,
-  handleCopy: y
+function $e({
+  label: a,
+  value: t,
+  tooltip: r,
+  highlight: s = !1,
+  negative: i = !1,
+  positive: n = !1,
+  isPercentage: l = !1,
+  isDate: o = !1,
+  isText: x = !1,
+  isInvoiced: f = !1,
+  hasCopyButton: b = !1,
+  enableHoverableContent: y = !1,
+  handleCopy: h
 }) {
-  let g = "";
-  if (d && typeof a == "string" && !p && l) {
-    const F = k(a), h = X(F, /* @__PURE__ */ new Date());
-    h > 15 ? g = "bg-yellow-100 font-bold" : h > 7 ? g = "bg-yellow-300 font-bold" : h >= 0 ? g = "bg-red-300 font-bold" : g = "bg-red-500 text-white font-bold";
-  } else l && (g = "bg-[#ffe0b2] font-bold");
-  return /* @__PURE__ */ e("div", { className: c("px-2 py-1 text-sm", g), children: /* @__PURE__ */ o(z, { openDelay: 0, closeDelay: 0, children: [
-    /* @__PURE__ */ e(I, { children: /* @__PURE__ */ o("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ o(
+  let m = "";
+  if (o && typeof t == "string" && !f && s) {
+    const u = v(t), g = ee(u, /* @__PURE__ */ new Date());
+    g > 15 ? m = "bg-yellow-100 font-bold" : g > 7 ? m = "bg-yellow-300 font-bold" : g >= 0 ? m = "bg-red-300 font-bold" : m = "bg-red-500 text-white font-bold";
+  } else s && (m = "bg-[#ffe0b2] font-bold");
+  return /* @__PURE__ */ e("div", { className: c("px-2 py-1 text-sm", m), children: /* @__PURE__ */ d(_, { openDelay: 0, closeDelay: 0, children: [
+    /* @__PURE__ */ e(M, { children: /* @__PURE__ */ d("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ d(
         "span",
         {
           className: c(
             "flex flex-row gap-1",
-            s ? "text-red-600" : t ? "text-green-600" : ""
+            i ? "text-red-600" : n ? "text-green-600" : ""
           ),
           children: [
-            r,
+            a,
             " ",
-            /* @__PURE__ */ e(G, { className: "size-3.5" })
+            /* @__PURE__ */ e(se, { className: "size-3.5" })
           ]
         }
       ),
-      /* @__PURE__ */ o(
+      /* @__PURE__ */ d(
         "span",
         {
           className: c(
             "flex flex-row justify-end gap-2 text-right",
-            s ? "text-red-600" : t ? "text-green-600" : ""
+            i ? "text-red-600" : n ? "text-green-600" : ""
           ),
           children: [
-            i && typeof a == "number" ? `${a.toFixed(2)}%` : d && typeof a == "string" ? J(k(a), "dd/MM/yyyy") : m && typeof a == "string" ? a : `R$ ${a.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
-            u && y && /* @__PURE__ */ e(ee, { size: 15, onClick: () => y(a) })
+            l && typeof t == "number" ? `${t.toFixed(2)}%` : o && typeof t == "string" ? te(v(t), "dd/MM/yyyy") : x && typeof t == "string" ? t : `R$ ${t.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`,
+            b && h && /* @__PURE__ */ e(de, { size: 15, onClick: () => h(t) })
           ]
         }
       )
     ] }) }),
     /* @__PURE__ */ e(
-      S,
+      I,
       {
         align: "start",
-        className: c(!T && "pointer-events-none"),
-        children: /* @__PURE__ */ o("div", { className: "space-y-0.5", children: [
-          /* @__PURE__ */ e("div", { className: "font-medium", children: r }),
-          /* @__PURE__ */ e("div", { className: "font-normal opacity-80", children: n })
+        className: c(!y && "pointer-events-none"),
+        children: /* @__PURE__ */ d("div", { className: "space-y-0.5", children: [
+          /* @__PURE__ */ e("div", { className: "font-medium", children: a }),
+          /* @__PURE__ */ e("div", { className: "font-normal opacity-80", children: r })
         ] })
       }
     )
   ] }) });
 }
-function ve({
-  icon: r = ae,
-  title: a,
-  description: n,
-  tip: l,
-  className: s,
-  ...t
+function je({
+  icon: a = ge,
+  title: t,
+  description: r,
+  tip: s,
+  className: i,
+  ...n
 }) {
-  return /* @__PURE__ */ e(v, { className: c(s), ...t, children: /* @__PURE__ */ o(C, { className: "flex flex-col items-center justify-center px-6 py-12 text-center", children: [
+  return /* @__PURE__ */ e(S, { className: c(i), ...n, children: /* @__PURE__ */ d(z, { className: "flex flex-col items-center justify-center px-6 py-12 text-center", children: [
     /* @__PURE__ */ e("div", { className: "relative mb-4", children: /* @__PURE__ */ e(
-      r,
+      a,
       {
         "aria-hidden": "true",
         className: "size-16 text-muted-foreground/40"
       }
     ) }),
-    /* @__PURE__ */ e("h3", { className: "mb-2 text-lg font-semibold text-foreground", children: a }),
-    /* @__PURE__ */ e("p", { className: "max-w-md text-sm leading-relaxed text-muted-foreground", children: n }),
-    l && /* @__PURE__ */ e("div", { className: "mt-6 rounded-lg border border-dashed border-muted-foreground/20 bg-muted/50 px-4 py-2", children: /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: l }) })
+    /* @__PURE__ */ e("h3", { className: "mb-2 text-lg font-semibold text-foreground", children: t }),
+    /* @__PURE__ */ e("p", { className: "max-w-md text-sm leading-relaxed text-muted-foreground", children: r }),
+    s && /* @__PURE__ */ e("div", { className: "mt-6 rounded-lg border border-dashed border-muted-foreground/20 bg-muted/50 px-4 py-2", children: /* @__PURE__ */ e("p", { className: "text-xs text-muted-foreground", children: s }) })
   ] }) });
 }
-function Ce({
-  actions: r,
-  icon: a = U
+function Be({
+  actions: a,
+  icon: t = le
 }) {
-  const [n, l] = B(!1), s = E(null);
-  return P(() => {
-    if (!n) return;
-    const t = (d) => {
-      s.current?.contains(d.target) || l(!1);
-    }, i = (d) => {
-      d.key === "Escape" && l(!1);
+  const [r, s] = F(!1), i = A(null);
+  return R(() => {
+    if (!r) return;
+    const n = (o) => {
+      i.current?.contains(o.target) || s(!1);
+    }, l = (o) => {
+      o.key === "Escape" && s(!1);
     };
-    return document.addEventListener("mousedown", t), document.addEventListener("keydown", i), () => {
-      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", i);
+    return document.addEventListener("mousedown", n), document.addEventListener("keydown", l), () => {
+      document.removeEventListener("mousedown", n), document.removeEventListener("keydown", l);
     };
-  }, [n]), /* @__PURE__ */ e(O, { children: /* @__PURE__ */ o(
+  }, [r]), /* @__PURE__ */ e(G, { children: /* @__PURE__ */ d(
     "div",
     {
-      ref: s,
+      ref: i,
       className: "fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3",
       children: [
-        /* @__PURE__ */ e("div", { className: "flex flex-col items-end gap-3", children: r.map((t, i) => /* @__PURE__ */ e(
+        /* @__PURE__ */ e("div", { className: "flex flex-col items-end gap-3", children: a.map((n, l) => /* @__PURE__ */ e(
           "div",
           {
             className: c(
               "transition-all duration-200 ease-out",
-              n ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-2 opacity-0"
+              r ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-2 opacity-0"
             ),
-            style: { transitionDelay: n ? `${i * 30}ms` : "0ms" },
-            children: /* @__PURE__ */ o(K, { children: [
-              /* @__PURE__ */ e(Q, { asChild: !0, children: /* @__PURE__ */ e(
-                f,
+            style: { transitionDelay: r ? `${l * 30}ms` : "0ms" },
+            children: /* @__PURE__ */ d(W, { children: [
+              /* @__PURE__ */ e(Y, { asChild: !0, children: /* @__PURE__ */ e(
+                k,
                 {
                   size: "icon",
                   variant: "outline",
-                  disabled: t.disabled,
-                  "aria-disabled": t.disabled,
+                  disabled: n.disabled,
+                  "aria-disabled": n.disabled,
                   className: c(
                     "size-11 rounded-full shadow-md",
-                    t.disabled && "opacity-50"
+                    n.disabled && "opacity-50"
                   ),
                   onClick: () => {
-                    t.disabled || (t.onClick(), l(!1));
+                    n.disabled || (n.onClick(), s(!1));
                   },
-                  children: /* @__PURE__ */ e(t.icon, { className: "size-5" })
+                  children: /* @__PURE__ */ e(n.icon, { className: "size-5" })
                 }
               ) }),
-              /* @__PURE__ */ e(V, { side: "left", children: t.label })
+              /* @__PURE__ */ e(Z, { side: "left", children: n.label })
             ] })
           },
-          t.label
+          n.label
         )) }),
         /* @__PURE__ */ e(
-          f,
+          k,
           {
             size: "icon",
             variant: "outline",
             className: "size-11 rounded-full shadow-md",
-            "aria-label": n ? "Fechar menu de ajuda" : "Abrir menu de ajuda",
-            "aria-expanded": n,
-            onClick: () => l((t) => !t),
-            children: n ? /* @__PURE__ */ e(M, { className: "size-5" }) : /* @__PURE__ */ e(a, { className: "size-5" })
+            "aria-label": r ? "Fechar menu de ajuda" : "Abrir menu de ajuda",
+            "aria-expanded": r,
+            onClick: () => s((n) => !n),
+            children: r ? /* @__PURE__ */ e(H, { className: "size-5" }) : /* @__PURE__ */ e(t, { className: "size-5" })
           }
         )
       ]
     }
   ) });
 }
-function ze({
-  columns: r = 9,
-  rows: a = 20,
-  hasActions: n = !1,
-  actionsCount: l = 1
+function Oe({
+  columns: a = 9,
+  rows: t = 20,
+  hasActions: r = !1,
+  actionsCount: s = 1
 }) {
-  return /* @__PURE__ */ o(H, { children: [
-    /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(w, { children: Array.from({ length: r }).map((s, t) => {
-      const i = n && t === r - 1;
+  return /* @__PURE__ */ d(L, { children: [
+    /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(N, { children: Array.from({ length: a }).map((i, n) => {
+      const l = r && n === a - 1;
       return /* @__PURE__ */ e(
-        A,
+        $,
         {
-          className: i ? "w-0 text-right" : "",
+          className: l ? "w-0 text-right" : "",
           children: /* @__PURE__ */ e(
-            b,
+            w,
             {
-              className: i ? "ml-auto h-4 w-8" : "h-4 w-[60%]"
+              className: l ? "ml-auto h-4 w-8" : "h-4 w-[60%]"
             }
           )
         },
-        t
+        n
       );
     }) }) }),
-    /* @__PURE__ */ e(L, { children: Array.from({ length: a }).map((s, t) => /* @__PURE__ */ e(w, { className: "h-[3.05rem]", children: Array.from({ length: r }).map((i, d) => {
-      const m = n && d === r - 1;
-      return /* @__PURE__ */ e(j, { children: m ? /* @__PURE__ */ e("div", { className: "flex gap-2", children: Array.from({ length: l }).map((p, u) => /* @__PURE__ */ e(b, { className: "ml-auto size-8" }, u)) }) : /* @__PURE__ */ e(b, { className: "h-4 w-full" }) }, d);
-    }) }, t)) })
+    /* @__PURE__ */ e(j, { children: Array.from({ length: t }).map((i, n) => /* @__PURE__ */ e(N, { className: "h-[3.05rem]", children: Array.from({ length: a }).map((l, o) => {
+      const x = r && o === a - 1;
+      return /* @__PURE__ */ e(B, { children: x ? /* @__PURE__ */ e("div", { className: "flex gap-2", children: Array.from({ length: s }).map((f, b) => /* @__PURE__ */ e(w, { className: "ml-auto size-8" }, b)) }) : /* @__PURE__ */ e(w, { className: "h-4 w-full" }) }, o);
+    }) }, n)) })
   ] });
 }
-function Ie({
-  size: r = 24,
-  color: a = "currentColor",
-  ...n
+const we = "@[__display__](__id__)", E = /@\[([^\]]+)\]\(([^)]+)\)/g;
+function Pe(a) {
+  const t = [], r = new RegExp(E);
+  let s;
+  for (; (s = r.exec(a)) !== null; )
+    t.push({ display: s[1], id: s[2] });
+  return t;
+}
+const ke = async ({
+  organizationId: a,
+  search: t,
+  environment: r
+}) => (await X(r).get(`/organizations/${a}/users`, {
+  params: { q: t }
+})).data;
+function Ne(a, t) {
+  const { environments: r } = ne();
+  return P({
+    queryKey: ["organization-users", a, t],
+    queryFn: () => ke({
+      organizationId: a,
+      search: t,
+      environment: r.VITE_BACKEND_API_ORGANIZATION_URL ?? ""
+    }),
+    enabled: a.length > 0 && t.length > 0
+  });
+}
+const ve = {
+  control: {
+    fontSize: 14,
+    minHeight: 36
+  },
+  input: {
+    padding: "8px 12px",
+    border: "1px solid var(--border, #d4d4d8)",
+    borderRadius: 6,
+    outline: "none"
+  },
+  highlighter: {
+    padding: "8px 12px",
+    border: "1px solid transparent"
+  },
+  suggestions: {
+    list: {
+      backgroundColor: "var(--popover, #fff)",
+      border: "1px solid var(--border, #d4d4d8)",
+      borderRadius: 6,
+      fontSize: 14,
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.12)",
+      overflow: "hidden"
+    },
+    item: {
+      padding: "6px 12px",
+      "&focused": {
+        backgroundColor: "var(--accent, #f4f4f5)"
+      }
+    }
+  }
+}, Ce = {
+  backgroundColor: "var(--accent, #e4e4e7)",
+  borderRadius: 4
+};
+function qe({
+  value: a,
+  onChange: t,
+  onBlur: r,
+  organizationId: s,
+  placeholder: i,
+  disabled: n,
+  singleLine: l = !0
+}) {
+  const [o, x] = F(""), f = ae(o, 200), { data: b } = Ne(s, f), y = A(void 0), h = K(
+    () => b?.map((u) => ({ id: u._id, display: u.username })) ?? [],
+    [b]
+  );
+  return R(() => {
+    y.current?.(h);
+  }, [h]), /* @__PURE__ */ e(
+    Q,
+    {
+      value: a,
+      onChange: (u, g) => t(g),
+      onBlur: r,
+      placeholder: i,
+      disabled: n,
+      singleLine: l,
+      allowSuggestionsAboveCursor: !0,
+      style: ve,
+      children: /* @__PURE__ */ e(
+        V,
+        {
+          trigger: "@",
+          markup: we,
+          data: (u, g) => {
+            y.current = g, x(u), g(h);
+          },
+          displayTransform: (u, g) => `@${g}`,
+          appendSpaceOnAdd: !0,
+          style: Ce
+        }
+      )
+    }
+  );
+}
+function Ke({ text: a, className: t }) {
+  const r = new RegExp(E), s = [];
+  let i = 0, n, l = 0;
+  for (; (n = r.exec(a)) !== null; )
+    n.index > i && s.push(
+      /* @__PURE__ */ e("span", { children: a.slice(i, n.index) }, l++)
+    ), s.push(
+      /* @__PURE__ */ d(J, { variant: "secondary", className: t, children: [
+        "@",
+        n[1]
+      ] }, l++)
+    ), i = n.index + n[0].length;
+  return i < a.length && s.push(/* @__PURE__ */ e("span", { children: a.slice(i) }, l++)), /* @__PURE__ */ e(T, { children: s });
+}
+function Ue({
+  size: a = 24,
+  color: t = "currentColor",
+  ...r
 }) {
   return /* @__PURE__ */ e(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      width: r,
-      height: r,
+      width: a,
+      height: a,
       viewBox: "0 0 24 24",
       fill: "none",
-      stroke: a,
+      stroke: t,
       "stroke-width": "2",
       "stroke-linecap": "round",
       "stroke-linejoin": "round",
       className: "lucide lucide-twitter-icon lucide-twitter",
-      ...n,
+      ...r,
       children: /* @__PURE__ */ e("path", { d: "M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z" })
     }
   );
 }
 export {
-  pe as AsyncBoundary,
-  Fe as CampaignsSelectInput,
-  Me as ClientSelectInput,
-  ie as ErrorCard,
-  He as FieldCalendar,
-  _e as FieldCheckbox,
-  Ae as FieldClientSelectInput,
-  Le as FieldInput,
-  je as FieldLabelWithAsterisk,
-  De as FieldProfileSelectInput,
-  Re as FieldSaleSelectInput,
-  $e as FieldSelect,
-  Be as FieldSwitch,
-  Ee as FieldTextarea,
-  ye as HoverContent,
-  we as IconBadge,
-  Pe as Image,
-  qe as InfluencerSelectInput,
-  Oe as InstagramIcon,
-  Ke as LinkedInIcon,
-  ke as List,
-  Ne as ListRow,
-  ve as NotFoundCard,
-  Qe as PageHeader,
-  Ve as PageHeaderActions,
-  Xe as PageHeaderContent,
-  Je as PageHeaderDescription,
-  Ye as PageHeaderTitle,
-  Ge as PinterestIcon,
-  We as ProfileSelectInput,
-  Ue as SaleSelectInput,
-  Ce as SpeedDialButton,
-  ze as TableSkeleton,
-  Ze as TikTokIcon,
-  Ie as TwitterIcon,
-  et as XIcon,
-  tt as YoutubeIcon
+  Ee as AsyncBoundary,
+  Ve as CampaignsSelectInput,
+  Ge as ClientSelectInput,
+  he as ErrorCard,
+  We as FieldCalendar,
+  Ye as FieldCheckbox,
+  Ze as FieldClientSelectInput,
+  Je as FieldInput,
+  et as FieldLabelWithAsterisk,
+  tt as FieldProfileSelectInput,
+  nt as FieldSaleSelectInput,
+  at as FieldSelect,
+  rt as FieldSwitch,
+  st as FieldTextarea,
+  He as HoverContent,
+  Le as IconBadge,
+  it as Image,
+  lt as InfluencerSelectInput,
+  ot as InstagramIcon,
+  dt as LinkedInIcon,
+  De as List,
+  $e as ListRow,
+  qe as MentionInput,
+  Ke as MentionText,
+  je as NotFoundCard,
+  ct as PageHeader,
+  gt as PageHeaderActions,
+  ut as PageHeaderContent,
+  xt as PageHeaderDescription,
+  mt as PageHeaderTitle,
+  bt as PinterestIcon,
+  ht as ProfileSelectInput,
+  pt as SaleSelectInput,
+  Be as SpeedDialButton,
+  Oe as TableSkeleton,
+  ft as TikTokIcon,
+  Ue as TwitterIcon,
+  yt as XIcon,
+  wt as YoutubeIcon,
+  Pe as parseMentions
 };