@layers-app/shared 0.4.5 → 0.4.6

package/dist/components/Chat/MessageList/index.js

@@ -1,71 +1,159 @@
-import { jsxs as f, jsx as s } from "react/jsx-runtime";
-import { ScrollArea as x, ActionIcon as N } from "@mantine/core";
-import { ArrowDown01Icon as R } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as E } from "@hugeicons/react";
-import { useRef as c, useState as L, useCallback as z, useEffect as h } from "react";
-import r from "./MessageList.module.css.js";
-function A({ children: g, className: i, style: v, stickToBottom: l }) {
-  const e = c(null), n = c(!0), a = c(0), [b, w] = L(!1), H = z(() => {
-    e.current && e.current.scrollTo({ top: e.current.scrollHeight, behavior: "smooth" });
-  }, []);
-  return h(() => {
-    !l || !e.current || (e.current.scrollTop = e.current.scrollHeight);
-  }, [l]), h(() => {
-    const t = e.current;
-    if (!l || !t) return;
-    const u = new ResizeObserver(() => {
-      const o = t.scrollHeight;
-      o !== a.current && n.current && (t.scrollTop = o), a.current = o;
-    }), m = t.firstElementChild;
-    m && u.observe(m);
-    const d = () => {
-      const { scrollTop: o, scrollHeight: S, clientHeight: y } = t, p = S - o - y;
-      n.current = p < 40, w(p > 200);
-    };
-    return t.addEventListener("scroll", d, { passive: !0 }), () => {
-      u.disconnect(), t.removeEventListener("scroll", d);
-    };
-  }, [l]), /* @__PURE__ */ f("div", { className: r.container, children: [
-    /* @__PURE__ */ s(
-      x,
-      {
-        className: `${r.root}${i ? ` ${i}` : ""}`,
-        style: v,
-        type: "auto",
-        scrollbars: "y",
-        viewportRef: e,
-        "data-testid": "message-list",
-        styles: {
-          content: {
-            display: "flex",
-            flexDirection: "column",
-            minHeight: "100%"
-          }
+import { jsxs as T, jsx as l } from "react/jsx-runtime";
+import { forwardRef as D, useRef as i, useState as P, useEffect as u, useCallback as W, useImperativeHandle as k } from "react";
+import { ArrowDown01Icon as C } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as G } from "@hugeicons/react";
+import { ScrollArea as J, ActionIcon as K } from "@mantine/core";
+import s from "./MessageList.module.css.js";
+const Q = D(
+  function({
+    children: L,
+    className: y,
+    style: E,
+    stickToBottom: f,
+    unreadCount: v = 0,
+    onStickChange: h,
+    resetKey: F,
+    onReachTop: g,
+    floatingTopAction: N,
+    bottomOffset: M = 0
+  }, $) {
+    const r = i(null), B = i(null), n = i(!0), w = i(0), [A, q] = P(!1), H = i(h), b = i(g), x = i(!1);
+    u(() => {
+      H.current = h;
+    }, [h]), u(() => {
+      b.current = g;
+    }, [g]), u(() => {
+      const e = r.current, o = B.current;
+      if (!e || !o) return;
+      const t = new IntersectionObserver(
+        (m) => {
+          if (!m[0]?.isIntersecting || x.current || !b.current || n.current) return;
+          x.current = !0;
+          const p = e.scrollHeight, c = e.scrollTop;
+          Promise.resolve(b.current()).then(() => {
+            requestAnimationFrame(() => {
+              const a = r.current;
+              if (!a) return;
+              const d = a.scrollHeight - p;
+              d > 0 && (a.scrollTop = c + d);
+            });
+          }).finally(() => {
+            x.current = !1;
+          });
         },
-        children: /* @__PURE__ */ f("div", { className: r.wrapper, children: [
-          /* @__PURE__ */ s("div", { className: r.top, "data-testid": "message-list-top" }),
-          /* @__PURE__ */ s("div", { className: r.items, "data-testid": "message-list-items", children: g })
-        ] })
-      }
-    ),
-    b && /* @__PURE__ */ s(
-      N,
+        { root: e, rootMargin: "300px 0px 0px 0px" }
+      );
+      return t.observe(o), () => t.disconnect();
+    }, []);
+    const z = W(() => {
+      r.current && r.current.scrollTo({
+        top: r.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }, []);
+    k(
+      $,
+      () => ({
+        scrollToBottom: () => {
+          const e = r.current;
+          if (!e) return;
+          n.current = !0, H.current?.(!0), e.scrollTop = e.scrollHeight;
+          const o = () => {
+            const t = r.current;
+            t && (t.scrollTop = t.scrollHeight, n.current = !0);
+          };
+          requestAnimationFrame(() => {
+            o(), requestAnimationFrame(o);
+          });
+        }
+      }),
+      []
+    ), u(() => {
+      !f || !r.current || (n.current = !0, w.current = r.current.scrollHeight, r.current.scrollTop = r.current.scrollHeight);
+    }, [f, F]), u(() => {
+      const e = r.current;
+      if (!f || !e) return;
+      const o = new ResizeObserver(() => {
+        const c = e.scrollHeight;
+        c !== w.current && n.current && (e.scrollTop = c), w.current = c;
+      }), t = e.firstElementChild;
+      t && o.observe(t);
+      let m = !1;
+      const p = () => {
+        const { scrollTop: c, scrollHeight: a, clientHeight: d } = e, I = a - c - d, S = I < 40;
+        S !== n.current && (n.current = S, H.current?.(S));
+        const R = I > 200;
+        R !== m && (m = R, q(R));
+      };
+      return e.addEventListener("scroll", p, { passive: !0 }), () => {
+        o.disconnect(), e.removeEventListener("scroll", p);
+      };
+    }, [f]);
+    const O = v > 999 ? "999+" : v, j = v > 0;
+    return /* @__PURE__ */ T(
+      "div",
       {
-        className: r.scrollToBottom,
-        variant: "filled",
-        color: "gray",
-        radius: "xl",
-        size: 40,
-        onClick: H,
-        "aria-label": "Scroll to bottom",
-        "data-testid": "scroll-to-bottom",
-        style: { position: "absolute", bottom: 16, right: 24, left: "auto" },
-        children: /* @__PURE__ */ s(E, { icon: R, size: 20 })
+        className: s.container,
+        style: { "--ml-bottom-offset": `${M}px` },
+        children: [
+          /* @__PURE__ */ l(
+            J,
+            {
+              className: `${s.root}${y ? ` ${y}` : ""}`,
+              style: E,
+              type: "auto",
+              scrollbars: "y",
+              viewportRef: r,
+              "data-testid": "message-list",
+              styles: {
+                content: {
+                  display: "flex",
+                  flexDirection: "column",
+                  minHeight: "100%"
+                }
+              },
+              children: /* @__PURE__ */ T("div", { className: s.wrapper, children: [
+                /* @__PURE__ */ l(
+                  "div",
+                  {
+                    ref: B,
+                    className: s.top,
+                    "data-testid": "message-list-top"
+                  }
+                ),
+                /* @__PURE__ */ l("div", { className: s.items, "data-testid": "message-list-items", children: L })
+              ] })
+            }
+          ),
+          A && /* @__PURE__ */ T("div", { className: s.scrollToBottomWrap, children: [
+            /* @__PURE__ */ l(
+              K,
+              {
+                variant: "default",
+                radius: "xl",
+                size: 34,
+                onClick: z,
+                "aria-label": "Scroll to bottom",
+                "data-testid": "scroll-to-bottom",
+                children: /* @__PURE__ */ l(G, { icon: C, size: 18 })
+              }
+            ),
+            j && /* @__PURE__ */ l("span", { className: s.scrollToBottomBadge, children: O })
+          ] }),
+          N && /* @__PURE__ */ l(
+            "div",
+            {
+              className: s.floatingTopAction,
+              "data-raised": A || void 0,
+              children: N
+            }
+          )
+        ]
       }
-    )
-  ] });
-}
-A.displayName = "MessageList";
+    );
+  }
+);
+Q.displayName = "MessageList";
 export {
-  A as MessageList
+  Q as MessageList
 };

package/dist/components/Chat/MessageReactions/MessageReactions.module.css.js

@@ -1,15 +1,15 @@
-const o = "_row_6r23s_1", t = "_pill_6r23s_19", _ = "_count_6r23s_79", s = "_emoji_6r23s_95", c = "_meta_6r23s_119", e = {
-  row: o,
-  pill: t,
+const t = "_row_mtm4b_1", m = "_pill_mtm4b_19", o = "_emoji_mtm4b_99", _ = "_count_mtm4b_141", c = "_meta_mtm4b_185", e = {
+  row: t,
+  pill: m,
+  emoji: o,
   count: _,
-  emoji: s,
   meta: c
 };
 export {
   _ as count,
   e as default,
-  s as emoji,
+  o as emoji,
   c as meta,
-  t as pill,
-  o as row
+  m as pill,
+  t as row
 };

package/dist/components/Chat/MessageReactions/index.d.ts

@@ -1,8 +1,25 @@
 import React from 'react';
+/**
+ * Max number of *distinct* emoji a single message can carry. Once reached, the
+ * add-reaction picker is hidden (you can still join one of the existing ones by
+ * clicking its pill). Mirrors the server cap so the UI and backend agree.
+ */
+export declare const MAX_MESSAGE_REACTIONS = 5;
+export interface ReactionReactor {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+}
 export interface Reaction {
     emoji: string;
     count: number;
     active?: boolean;
+    /**
+     * Who left this reaction (resolved to name + avatar by the host). Drives the
+     * who-reacted hover popover. Optional — when absent, the pill is a plain
+     * toggle with no popover.
+     */
+    reactors?: ReactionReactor[];
 }
 export interface MessageReactionsProps {
     reactions: Reaction[];

package/dist/components/Chat/MessageReactions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageReactions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,mDA+B3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageReactions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,mDA0E3B,CAAC"}

package/dist/components/Chat/MessageReactions/index.js

@@ -1,40 +1,72 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
 import m from "react";
-import s from "./MessageReactions.module.css.js";
-const d = m.memo(function({
-  reactions: i,
-  onToggle: c,
-  meta: a,
-  className: o,
-  style: l
+import { HoverCard as n, ScrollArea as h, Stack as u, Group as f, Text as g } from "@mantine/core";
+import { UserAvatar as v } from "../../UserAvatar/index.js";
+import t from "./MessageReactions.module.css.js";
+const R = 5, w = m.memo(function({
+  reactions: s,
+  onToggle: d,
+  meta: o,
+  className: l,
+  style: p
 }) {
-  return !i.length && !a ? null : /* @__PURE__ */ n(
+  return !s.length && !o ? null : /* @__PURE__ */ r(
     "div",
     {
-      className: `${s.row}${o ? ` ${o}` : ""}`,
-      style: l,
+      className: `${t.row}${l ? ` ${l}` : ""}`,
+      style: p,
       "data-testid": "message-reactions",
       children: [
-        i.map((e) => /* @__PURE__ */ n(
-          "button",
-          {
-            className: s.pill,
-            "data-active": e.active || void 0,
-            onClick: () => c?.(e.emoji),
-            type: "button",
-            children: [
-              /* @__PURE__ */ t("span", { className: s.emoji, children: e.emoji }),
-              /* @__PURE__ */ t("span", { className: s.count, children: e.count })
-            ]
-          },
-          e.emoji
-        )),
-        a && /* @__PURE__ */ t("div", { className: s.meta, children: a })
+        s.map((e) => {
+          const c = /* @__PURE__ */ r(
+            "button",
+            {
+              className: t.pill,
+              "data-active": e.active || void 0,
+              onClick: () => d?.(e.emoji),
+              type: "button",
+              "aria-pressed": e.active ?? !1,
+              "aria-label": `${e.emoji} ${e.count}`,
+              children: [
+                /* @__PURE__ */ a("span", { className: t.emoji, children: e.emoji }, e.count),
+                /* @__PURE__ */ a("span", { className: t.count, children: e.count })
+              ]
+            }
+          );
+          return e.reactors?.length ? /* @__PURE__ */ r(
+            n,
+            {
+              withArrow: !0,
+              openDelay: 250,
+              closeDelay: 100,
+              position: "top",
+              shadow: "md",
+              withinPortal: !0,
+              children: [
+                /* @__PURE__ */ a(n.Target, { children: c }),
+                /* @__PURE__ */ a(n.Dropdown, { p: "xs", children: /* @__PURE__ */ a(h.Autosize, { mah: 220, type: "auto", children: /* @__PURE__ */ a(u, { gap: 6, pr: 6, children: e.reactors.map((i) => /* @__PURE__ */ r(f, { gap: 8, wrap: "nowrap", miw: 0, children: [
+                  /* @__PURE__ */ a(
+                    v,
+                    {
+                      user: { id: i.id, name: i.name, avatarUrl: i.avatarUrl },
+                      size: 20,
+                      radius: "xl"
+                    }
+                  ),
+                  /* @__PURE__ */ a(g, { size: "sm", lineClamp: 1, maw: 200, children: i.name })
+                ] }, i.id)) }) }) })
+              ]
+            },
+            e.emoji
+          ) : /* @__PURE__ */ a(m.Fragment, { children: c }, e.emoji);
+        }),
+        o && /* @__PURE__ */ a("div", { className: t.meta, children: o })
       ]
     }
   );
 });
-d.displayName = "MessageReactions";
+w.displayName = "MessageReactions";
 export {
-  d as MessageReactions
+  R as MAX_MESSAGE_REACTIONS,
+  w as MessageReactions
 };

package/dist/components/Chat/MessageStatus/MessageStatus.module.css.js

@@ -1,9 +1,11 @@
-const o = "_root_jikjm_1", t = "_icon_jikjm_15", c = {
+const o = "_root_ly31g_1", n = "_icon_ly31g_21", t = "_animateIn_ly31g_31", _ = {
   root: o,
-  icon: t
+  icon: n,
+  animateIn: t
 };
 export {
-  c as default,
-  t as icon,
+  t as animateIn,
+  _ as default,
+  n as icon,
   o as root
 };

package/dist/components/Chat/MessageStatus/index.d.ts

@@ -7,7 +7,7 @@ export interface MessageStatusProps {
     /** Custom style */
     style?: React.CSSProperties;
 }
-export declare function MessageStatus({ status, className, style }: MessageStatusProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MessageStatus({ status, className, style }: MessageStatusProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MessageStatus {
     var displayName: string;
 }

package/dist/components/Chat/MessageStatus/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageStatus/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAExF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,qBAAqB,CAAC;IAC9B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA+CD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,kBAAkB,kDAyB7E;yBAzBe,aAAa"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageStatus/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAIxF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,qBAAqB,CAAC;IAC9B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA+CD,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,kBAAkB,2CAsC7E;yBAtCe,aAAa"}

package/dist/components/Chat/MessageStatus/index.js

@@ -1,53 +1,68 @@
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import r from "react";
 import i from "./MessageStatus.module.css.js";
-function a(e) {
-  return /* @__PURE__ */ n("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...e, children: [
-    /* @__PURE__ */ r("circle", { cx: "8", cy: "8", r: "6" }),
-    /* @__PURE__ */ r("polyline", { points: "8,4 8,8" }),
-    /* @__PURE__ */ r("polyline", { points: "8,8 10.5,10" })
+const v = 500;
+function y(e) {
+  return /* @__PURE__ */ l("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...e, children: [
+    /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6" }),
+    /* @__PURE__ */ n("polyline", { points: "8,4 8,8" }),
+    /* @__PURE__ */ n("polyline", { points: "8,8 10.5,10" })
   ] });
 }
-function d(e) {
-  return /* @__PURE__ */ r("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...e, children: /* @__PURE__ */ r("polyline", { points: "3,8.5 6.5,12 13,4" }) });
+function x(e) {
+  return /* @__PURE__ */ n("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...e, children: /* @__PURE__ */ n("polyline", { points: "3,8.5 6.5,12 13,4" }) });
 }
-function l(e) {
-  return /* @__PURE__ */ n("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...e, children: [
-    /* @__PURE__ */ r("polyline", { points: "1.5,8.5 5,12 11.5,4" }),
-    /* @__PURE__ */ r("polyline", { points: "5.5,8.5 9,12 15.5,4" })
+function u(e) {
+  return /* @__PURE__ */ l("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...e, children: [
+    /* @__PURE__ */ n("polyline", { points: "1.5,8.5 5,12 11.5,4" }),
+    /* @__PURE__ */ n("polyline", { points: "5.5,8.5 9,12 15.5,4" })
   ] });
 }
-function u(e) {
-  return /* @__PURE__ */ n("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...e, children: [
-    /* @__PURE__ */ r("circle", { cx: "8", cy: "8", r: "6" }),
-    /* @__PURE__ */ r("line", { x1: "8", y1: "4.5", x2: "8", y2: "9" }),
-    /* @__PURE__ */ r("circle", { cx: "8", cy: "11.5", r: "0.5", fill: "currentColor", stroke: "none" })
+function S(e) {
+  return /* @__PURE__ */ l("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, ...e, children: [
+    /* @__PURE__ */ n("circle", { cx: "8", cy: "8", r: "6" }),
+    /* @__PURE__ */ n("line", { x1: "8", y1: "4.5", x2: "8", y2: "9" }),
+    /* @__PURE__ */ n("circle", { cx: "8", cy: "11.5", r: "0.5", fill: "currentColor", stroke: "none" })
   ] });
 }
-const p = {
-  sending: a,
-  sent: d,
-  delivered: l,
-  read: l,
-  error: u
+const h = {
+  sending: y,
+  sent: x,
+  delivered: u,
+  read: u,
+  error: S
 };
-function f({ status: e, className: s, style: c }) {
-  const t = p[e];
-  if (!t)
-    return null;
-  let o;
-  return e === "error" ? o = "var(--mantine-color-red-6)" : o = "currentColor", /* @__PURE__ */ r(
+function C({ status: e, className: d, style: a }) {
+  const [f, c] = r.useState(!1);
+  r.useEffect(() => {
+    if (e !== "sending") {
+      c(!1);
+      return;
+    }
+    const g = setTimeout(() => c(!0), v);
+    return () => clearTimeout(g);
+  }, [e]);
+  const o = e === "sending" && !f ? null : e, s = o ? h[o] : null, p = o === "error" ? "var(--mantine-color-red-6)" : "currentColor", t = r.useRef(null), m = t.current !== null && t.current !== e;
+  return r.useEffect(() => {
+    t.current = e;
+  }, [e]), /* @__PURE__ */ n(
     "span",
     {
-      className: `${i.root} ${s || ""}`,
-      style: { ...c, color: o },
+      className: `${i.root} ${d || ""}`,
+      style: { ...a, color: p },
       "data-testid": "message-status",
       "data-status": e,
       "aria-label": e,
-      children: /* @__PURE__ */ r(t, { className: i.icon })
+      children: s && /* @__PURE__ */ n(
+        s,
+        {
+          className: `${i.icon}${m ? ` ${i.animateIn}` : ""}`
+        }
+      )
     }
   );
 }
-f.displayName = "MessageStatus";
+C.displayName = "MessageStatus";
 export {
-  f as MessageStatus
+  C as MessageStatus
 };

package/dist/components/CircleColorPicker/CircleColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CircleColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/CircleColorPicker/CircleColorPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,gBAAgB,EAKhB,SAAS,EAOV,MAAM,eAAe,CAAC;AAevB,eAAO,MAAM,iBAAiB,GAAI,mDAK/B;IACD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,4CA+EA,CAAC"}
+{"version":3,"file":"CircleColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/CircleColorPicker/CircleColorPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAIL,gBAAgB,EAIhB,SAAS,EAOV,MAAM,eAAe,CAAC;AAevB,eAAO,MAAM,iBAAiB,GAAI,mDAK/B;IACD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,4CAiFA,CAAC"}

package/dist/components/CircleColorPicker/CircleColorPicker.js

@@ -1,20 +1,22 @@
 import { jsxs as h, jsx as o } from "react/jsx-runtime";
 import { useMemo as E, useState as u, useEffect as H } from "react";
 import { useTranslation as S } from "react-i18next";
-import { useMantineTheme as k, useMantineColorScheme as M, parseThemeColor as b, Menu as m, ActionIcon as V, ColorSwatch as j, Stack as w, ColorPicker as y, DEFAULT_THEME as D, TextInput as z, isColorValid as A, Button as F } from "@mantine/core";
+import { useMantineTheme as k, useComputedColorScheme as V, parseThemeColor as b, Menu as m, ActionIcon as I, ColorSwatch as M, Stack as j, ColorPicker as w, DEFAULT_THEME as y, TextInput as D, isColorValid as z, Button as A } from "@mantine/core";
 const d = (e, t) => !e || typeof e != "string" ? null : e === "var(--mantine-color-bright)" ? t === "dark" ? "#ffffff" : "#000000" : e, L = ({
   value: e,
   onChange: t,
   menuProps: p,
   colorPickerProps: x
 }) => {
-  const { t: s } = S("common"), f = k(), { colorScheme: n } = M(), a = E(() => {
-    const r = d(e, n);
+  const { t: s } = S("common"), f = k(), l = V("light", {
+    getInitialValueInEffect: !0
+  }), a = E(() => {
+    const r = d(e, l);
     return r ? b({ color: r, theme: f }) : { value: "", color: "", isThemeColor: !1, shade: void 0 };
-  }, [e, f, n]), [C, i] = u(a.value), [g, l] = u(null);
+  }, [e, f, l]), [C, i] = u(a.value), [g, n] = u(null);
   H(() => {
-    i(d(e, n) || "");
-  }, [n, e]);
+    i(d(e, l) || "");
+  }, [l, e]);
   const [T, v] = u(!1);
   return /* @__PURE__ */ h(
     m,
@@ -24,39 +26,39 @@ const d = (e, t) => !e || typeof e != "string" ? null : e === "var(--mantine-col
       onChange: v,
       ...p,
       children: [
-        /* @__PURE__ */ o(m.Target, { children: /* @__PURE__ */ o(V, { size: "md", variant: "subtle", radius: "xl", children: /* @__PURE__ */ o(j, { color: a.value || "transparent" }) }) }),
-        /* @__PURE__ */ o(m.Dropdown, { style: { padding: 8, minWidth: 220 }, children: /* @__PURE__ */ h(w, { gap: "sm", children: [
+        /* @__PURE__ */ o(m.Target, { children: /* @__PURE__ */ o(I, { size: "md", variant: "subtle", radius: "xl", children: /* @__PURE__ */ o(M, { color: a.value || "transparent" }) }) }),
+        /* @__PURE__ */ o(m.Dropdown, { style: { padding: 8, minWidth: 220 }, children: /* @__PURE__ */ h(j, { gap: "sm", children: [
           /* @__PURE__ */ o(
-            y,
+            w,
             {
               value: a.value,
               onChange: (r) => {
-                t(r), i(r), l(null);
+                t(r), i(r), n(null);
               },
               format: "hex",
-              swatches: Object.values(D.colors).map((r) => r[5]),
+              swatches: Object.values(y.colors).map((r) => r[5]),
               ...x
             }
           ),
           /* @__PURE__ */ o(
-            z,
+            D,
             {
               label: s("HEXValue"),
               onChange: (r) => {
                 const c = r.currentTarget.value;
-                i(c), A(c) ? (t(c), l(null)) : l(s("invalidColorFormat"));
+                i(c), z(c) ? (t(c), n(null)) : n(s("invalidColorFormat"));
               },
               error: g,
               value: C
             }
           ),
           /* @__PURE__ */ o(
-            F,
+            A,
             {
               variant: "light",
               size: "xs",
               onClick: () => {
-                t(null), l(null);
+                t(null), n(null);
               },
               mt: "xs",
               children: s("resetColor")