@layers-app/shared 0.4.5 → 0.4.7

package/dist/components/ColorPicker/ColorPickerToolbar.js

@@ -1,89 +1,91 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import { forwardRef as H, useState as j, useCallback as S, useMemo as P } from "react";
-import { useTranslation as U } from "react-i18next";
-import { useMantineColorScheme as q, Box as h, Flex as B, Tooltip as E, UnstyledButton as G } from "@mantine/core";
-import { TextColorIcon as K, HighlightSwatch as T } from "./icons.js";
-import { normalizeColorItem as w, resolveColorLabel as z, isDefaultColor as J } from "./types.js";
-import { useRecentColors as O } from "./useRecentColors.js";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { forwardRef as H, useState as M, useCallback as S, useMemo as j } from "react";
+import { useTranslation as E } from "react-i18next";
+import { useComputedColorScheme as P, Box as h, Flex as A, Tooltip as U, UnstyledButton as V } from "@mantine/core";
+import { TextColorIcon as B, HighlightSwatch as K } from "./icons.js";
+import { normalizeColorItem as w, resolveColorLabel as T, isDefaultColor as q } from "./types.js";
+import { useRecentColors as G } from "./useRecentColors.js";
 import n from "./ColorPicker.module.css.js";
 function v({
-  isActive: a,
+  isActive: s,
   round: d,
   disabled: u,
   onClick: f,
   children: i,
   tooltipLabel: p
 }) {
-  const b = /* @__PURE__ */ r(
-    G,
+  const b = /* @__PURE__ */ t(
+    V,
     {
       type: "button",
-      className: `${n.inlineSwatch}${d ? ` ${n.inlineSwatchRound}` : ""}${a ? ` ${n.inlineSwatchActive}` : ""}`,
+      className: `${n.inlineSwatch}${d ? ` ${n.inlineSwatchRound}` : ""}${s ? ` ${n.inlineSwatchActive}` : ""}`,
       onMouseDown: (m) => m.preventDefault(),
       onClick: f,
       disabled: u,
       children: i
     }
   );
-  return p ? /* @__PURE__ */ r(E, { label: p, withArrow: !0, zIndex: 300, children: b }) : b;
+  return p ? /* @__PURE__ */ t(U, { label: p, withArrow: !0, zIndex: 400, children: b }) : b;
 }
 const oe = H(
   ({
-    sections: a,
+    sections: s,
     onChange: d,
     withRecentColors: u,
     maxRecentColors: f = 9,
     disabled: i,
     recentColorsLabel: p = "Recently used"
   }, b) => {
-    const { t: m } = U("ui"), { colorScheme: D } = q(), x = D === "dark", { recentColors: I, addRecent: $ } = O({
+    const { t: m } = E("ui"), x = P("light", {
+      getInitialValueInEffect: !0
+    }) === "dark", { recentColors: z, addRecent: $ } = G({
       maxItems: f
-    }), [L, M] = j(I), k = S(
+    }), [L, D] = M(z), k = S(
       (e, o, c) => {
-        u && ($(e, o, c), M((l) => {
-          const t = l.filter(
-            (s) => !(s.value === e && s.sectionKey === o)
+        u && ($(e, o, c), D((l) => {
+          const r = l.filter(
+            (a) => !(a.value === e && a.sectionKey === o)
           );
-          return [{ value: e, sectionKey: o, border: c }, ...t].slice(
+          return [{ value: e, sectionKey: o, border: c }, ...r].slice(
             0,
             f
           );
         })), d(e, o);
       },
       [d, u, $]
-    ), C = P(() => {
+    ), C = j(() => {
       const e = {};
-      for (const o of a) e[o.key] = o;
+      for (const o of s) e[o.key] = o;
       return e;
-    }, [a]), y = S(
+    }, [s]), y = S(
       (e, o) => {
         const l = (o ? C[o] : void 0)?.colors.find(
-          (s) => w(s).value === e
-        ), t = l ? w(l).label : void 0;
-        return z(m, e, t);
+          (a) => w(a).value === e
+        ), r = l ? w(l).label : void 0;
+        return T(m, e, r);
       },
       [C, m]
     ), F = S(
-      (e) => J(e) ? x ? "#FFFFFF" : "#000000" : e,
+      (e) => q(e) ? x ? "#FFFFFF" : "#000000" : e,
       [x]
     );
     return /* @__PURE__ */ g(h, { ref: b, children: [
       u && L.length > 0 && /* @__PURE__ */ g(h, { className: n.inlineSection, children: [
-        /* @__PURE__ */ r(h, { className: n.inlineSectionLabel, children: p }),
-        /* @__PURE__ */ r(B, { className: n.inlineRow, gap: 2, children: L.map((e, o) => {
-          const c = e.sectionKey ? C[e.sectionKey] : void 0, l = c?.key === "textColor" || c?.key === "color" || e.sectionKey === "color", t = y(
+        /* @__PURE__ */ t(h, { className: n.inlineSectionLabel, children: p }),
+        /* @__PURE__ */ t(A, { className: n.inlineRow, gap: 2, children: L.map((e, o) => {
+          const c = e.sectionKey ? C[e.sectionKey] : void 0, l = c?.key === "textColor" || c?.key === "color" || e.sectionKey === "color", r = y(
             e.value,
             e.sectionKey
           );
-          return l ? /* @__PURE__ */ r(
+          return l ? /* @__PURE__ */ t(
             v,
             {
               isActive: !1,
               disabled: i,
-              tooltipLabel: t,
+              tooltipLabel: r,
               onClick: () => k(e.value, e.sectionKey ?? ""),
-              children: /* @__PURE__ */ r(
-                K,
+              children: /* @__PURE__ */ t(
+                B,
                 {
                   size: 20,
                   color: F(e.value),
@@ -92,16 +94,16 @@ const oe = H(
               )
             },
             `${e.sectionKey}-${e.value}-${o}`
-          ) : /* @__PURE__ */ r(
+          ) : /* @__PURE__ */ t(
             v,
             {
               isActive: !1,
               round: !0,
               disabled: i,
-              tooltipLabel: t,
+              tooltipLabel: r,
               onClick: () => k(e.value, e.sectionKey ?? ""),
-              children: /* @__PURE__ */ r(
-                T,
+              children: /* @__PURE__ */ t(
+                K,
                 {
                   bgColor: e.value,
                   borderColor: e.border || "var(--mantine-color-default-border)"
@@ -112,37 +114,37 @@ const oe = H(
           );
         }) })
       ] }),
-      a.map((e) => {
+      s.map((e) => {
         const o = e.key === "highlight" || e.key === "background" || e.key === "textHighlight";
         return /* @__PURE__ */ g(h, { className: n.inlineSection, children: [
-          e.label && /* @__PURE__ */ r(h, { className: n.inlineSectionLabel, children: e.label }),
-          /* @__PURE__ */ r(B, { className: n.inlineRow, gap: 2, children: e.colors.map((c) => {
-            const { value: l, border: t, label: s } = w(c), N = l === e.value, R = F(l), A = z(m, l, s);
-            return o ? /* @__PURE__ */ r(
+          e.label && /* @__PURE__ */ t(h, { className: n.inlineSectionLabel, children: e.label }),
+          /* @__PURE__ */ t(A, { className: n.inlineRow, gap: 2, children: e.colors.map((c) => {
+            const { value: l, border: r, label: a } = w(c), N = l === e.value, R = F(l), I = T(m, l, a);
+            return o ? /* @__PURE__ */ t(
               v,
               {
                 isActive: N,
                 round: !0,
                 disabled: i,
-                tooltipLabel: A,
-                onClick: () => k(l, e.key, t),
-                children: /* @__PURE__ */ r(
-                  T,
+                tooltipLabel: I,
+                onClick: () => k(l, e.key, r),
+                children: /* @__PURE__ */ t(
+                  K,
                   {
                     bgColor: l,
-                    borderColor: t || R
+                    borderColor: r || R
                   }
                 )
               },
               l
-            ) : /* @__PURE__ */ r(
+            ) : /* @__PURE__ */ t(
               v,
               {
                 isActive: N,
                 disabled: i,
-                tooltipLabel: A,
+                tooltipLabel: I,
                 onClick: () => k(l, e.key),
-                children: /* @__PURE__ */ r(K, { size: 20, color: R, showBorder: !0 })
+                children: /* @__PURE__ */ t(B, { size: 20, color: R, showBorder: !0 })
               },
               l
             );

package/dist/components/CommentComposer/CommentComposer.module.css.js

@@ -1,15 +1,15 @@
-const o = "_commentComposerWrapper_jn3k1_1", e = "_commentComposerFloat_jn3k1_135", r = "_composerContainer_jn3k1_193", t = "_editorWrapper_jn3k1_225", n = "_editMode_jn3k1_383", p = {
+const o = "_commentComposerWrapper_17oei_1", e = "_commentComposerFloat_17oei_68", r = "_composerContainer_17oei_97", t = "_editorWrapper_17oei_113", p = "_editMode_17oei_192", m = {
   commentComposerWrapper: o,
   commentComposerFloat: e,
   composerContainer: r,
   editorWrapper: t,
-  editMode: n
+  editMode: p
 };
 export {
   e as commentComposerFloat,
   o as commentComposerWrapper,
   r as composerContainer,
-  p as default,
-  n as editMode,
+  m as default,
+  p as editMode,
   t as editorWrapper
 };

package/dist/components/CommunitiesDialog/styles.module.css.js

@@ -1,4 +1,4 @@
-const s = "_section_6nzxb_1", t = {
+const s = "_section_s7rqu_1", t = {
   section: s
 };
 export {

package/dist/components/Copyright/Copyright.module.css.js

@@ -1,4 +1,4 @@
-const r = "_brandingWrapper_ag0no_1", a = {
+const r = "_brandingWrapper_vvk0o_1", a = {
   brandingWrapper: r
 };
 export {

package/dist/components/CustomKBD/CustomKBD.module.css.js

@@ -1,4 +1,4 @@
-const o = "_root_122b9_1", t = {
+const o = "_root_195do_1", t = {
   root: o
 };
 export {

package/dist/components/EmojiPicker/EmojiPanel.d.ts

@@ -1,6 +1,7 @@
 import { EmojiPickerProps } from './EmojiPicker';
-export declare const EmojiPanel: ({ locales, onChange, onClose, setRandomIcon, querySearch, }: Pick<EmojiPickerProps, "locales" | "value" | "onChange" | "querySearch"> & {
+export declare const EmojiPanel: ({ locales, onChange, onClose, setRandomIcon, querySearch, showRandomButton, }: Pick<EmojiPickerProps, "locales" | "value" | "onChange" | "querySearch"> & {
     onClose: () => void;
     setRandomIcon: (icon: string) => void;
+    showRandomButton?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EmojiPanel.d.ts.map

package/dist/components/EmojiPicker/EmojiPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPanel.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAsBjD,eAAO,MAAM,UAAU,GAAI,6DAMxB,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAC5E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,4CAiTA,CAAC"}
+{"version":3,"file":"EmojiPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPanel.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAsBjD,eAAO,MAAM,UAAU,GAAI,+EAOxB,IAAI,CAAC,gBAAgB,EAAE,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG;IAC5E,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,4CAqTA,CAAC"}

package/dist/components/EmojiPicker/EmojiPanel.js

@@ -1,61 +1,62 @@
 import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import { useState as d, useRef as p, useEffect as R, useCallback as K } from "react";
-import { useTranslation as L } from "react-i18next";
-import { Search01Icon as U, ShuffleIcon as V, Clock01Icon as W, SmileIcon as X, Pizza01Icon as Z, FootballIcon as _, Airplane01Icon as ee, BulbIcon as te, Asterisk02Icon as oe, Flag02Icon as re } from "@hugeicons/core-free-icons";
+import { useState as d, useRef as p, useEffect as A, useCallback as L } from "react";
+import { useTranslation as U } from "react-i18next";
+import { Search01Icon as V, ShuffleIcon as W, Clock01Icon as X, SmileIcon as Z, Pizza01Icon as _, FootballIcon as ee, Airplane01Icon as te, BulbIcon as oe, Asterisk02Icon as re, Flag02Icon as ne } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon as c } from "@hugeicons/react";
-import { useEvent as ne } from "@layers-app/draggable-ui";
-import { Stack as v, FocusTrap as ie, Flex as z, TextInput as ce, Tooltip as se, ActionIcon as A, Paper as F, Text as q, SimpleGrid as N } from "@mantine/core";
-import ae from "fuse.js";
-import le from "../../assets/svg/dog.svg.js";
-import { pickRandomEmoji as fe } from "../../helpers/pickRandomEmoji.js";
-import { NoData as ue } from "../NoData/NoData.js";
-import { IconEntity as de } from "../ProjectIcon/ProjectIcon.js";
-import { frequentEmoji as pe } from "./constants.js";
-import { getEmojis as me } from "./utils.js";
+import { useEvent as ie } from "@layers-app/draggable-ui";
+import { Stack as v, FocusTrap as ce, Flex as z, TextInput as se, Tooltip as ae, ActionIcon as F, Paper as q, Text as N, SimpleGrid as M } from "@mantine/core";
+import le from "fuse.js";
+import fe from "../../assets/svg/dog.svg.js";
+import { pickRandomEmoji as ue } from "../../helpers/pickRandomEmoji.js";
+import { NoData as de } from "../NoData/NoData.js";
+import { IconEntity as pe } from "../ProjectIcon/ProjectIcon.js";
+import { frequentEmoji as me } from "./constants.js";
+import { getEmojis as he } from "./utils.js";
 import T from "./EmojiPicker.module.css.js";
-const he = [
-  { i: "frequent", icon: /* @__PURE__ */ t(c, { size: 20, icon: W }) },
-  { i: "people", icon: /* @__PURE__ */ t(c, { size: 20, icon: X }) },
+const ge = [
+  { i: "frequent", icon: /* @__PURE__ */ t(c, { size: 20, icon: X }) },
+  { i: "people", icon: /* @__PURE__ */ t(c, { size: 20, icon: Z }) },
   {
     i: "nature",
-    icon: /* @__PURE__ */ t(le, { width: 20, height: 20 })
+    icon: /* @__PURE__ */ t(fe, { width: 20, height: 20 })
   },
-  { i: "foods", icon: /* @__PURE__ */ t(c, { size: 20, icon: Z }) },
-  { i: "activity", icon: /* @__PURE__ */ t(c, { size: 20, icon: _ }) },
-  { i: "places", icon: /* @__PURE__ */ t(c, { size: 20, icon: ee }) },
-  { i: "objects", icon: /* @__PURE__ */ t(c, { size: 20, icon: te }) },
-  { i: "symbols", icon: /* @__PURE__ */ t(c, { size: 20, icon: oe }) },
-  { i: "flags", icon: /* @__PURE__ */ t(c, { size: 20, icon: re }) }
-], Re = ({
+  { i: "foods", icon: /* @__PURE__ */ t(c, { size: 20, icon: _ }) },
+  { i: "activity", icon: /* @__PURE__ */ t(c, { size: 20, icon: ee }) },
+  { i: "places", icon: /* @__PURE__ */ t(c, { size: 20, icon: te }) },
+  { i: "objects", icon: /* @__PURE__ */ t(c, { size: 20, icon: oe }) },
+  { i: "symbols", icon: /* @__PURE__ */ t(c, { size: 20, icon: re }) },
+  { i: "flags", icon: /* @__PURE__ */ t(c, { size: 20, icon: ne }) }
+], Ae = ({
   locales: u,
   onChange: C,
-  onClose: M,
-  setRandomIcon: P,
-  querySearch: m
+  onClose: P,
+  setRandomIcon: Q,
+  querySearch: m,
+  showRandomButton: w = !0
 }) => {
-  const [b, k] = d("frequent"), x = p("frequent"), h = p({}), I = p(null), [S, w] = d(""), [Q, O] = d([]), [a, B] = d(null), [E, j] = d([]), { t: G } = L(), g = p(!1), l = p(null);
-  R(() => {
+  const [b, k] = d("frequent"), x = p("frequent"), h = p({}), I = p(null), [S, E] = d(""), [O, G] = d([]), [a, H] = d(null), [j, D] = d([]), { t: Y } = U(), g = p(!1), l = p(null);
+  A(() => {
     if (typeof m == "string") {
       const e = m.slice(1);
-      if (w(e), a) {
+      if (E(e), a) {
         const o = a.search(e);
-        j(o.map((r) => r.item.e));
+        D(o.map((r) => r.item.e));
       }
     }
-  }, [m, a]), R(() => {
+  }, [m, a]), A(() => {
     (async () => {
-      const o = await me(), r = o.flatMap(
+      const o = await he(), r = o.flatMap(
         (i) => i.e.map((n) => ({
           e: n.e,
           n: n.n,
           k: n.k
           // категория
         }))
-      ), s = pe.map(
+      ), s = me.map(
         (i) => r.find((n) => n.e === i)
       );
-      O([{ i: "frequent", e: s }, ...o]);
-      const f = new ae(
+      G([{ i: "frequent", e: s }, ...o]);
+      const f = new le(
         o.flatMap(
           (i) => i.e.map((n) => ({
             e: n.e,
@@ -68,32 +69,32 @@ const he = [
           threshold: 0.3
         }
       );
-      B(f);
+      H(f);
     })();
   }, []);
-  const H = K(
+  const $ = L(
     (e) => {
       const o = e.currentTarget.value;
-      if (w(o), a) {
+      if (E(o), a) {
         const r = a.search(o);
-        j(r.map((s) => s.item.e));
+        D(r.map((s) => s.item.e));
       }
     },
     [a]
-  ), D = ne((e) => {
+  ), R = ie((e) => {
     const o = e.currentTarget.getAttribute("data-icon");
     o && (C?.(
-      de.stringify({
+      pe.stringify({
         emoji: o.replace("e:", "")
       })
-    ), M());
-  }), Y = (e) => {
+    ), P());
+  }), B = (e) => {
     const o = I.current, r = h.current[e.i];
     if (!o || !r) return;
     g.current = !0, l.current = e.i, k(e.i);
     const s = r.offsetTop - o.offsetTop;
     o.scrollTo({ top: s, behavior: "smooth" });
-  }, $ = () => {
+  }, J = () => {
     const e = I.current;
     if (!e) return;
     const o = e.scrollTop;
@@ -112,9 +113,9 @@ const he = [
         n < s && (s = n, r = f);
       }
     }), r !== x.current && (x.current = r, k(r));
-  }, J = typeof m == "string";
+  }, K = typeof m == "string";
   return /* @__PURE__ */ y(v, { gap: 0, h: "100%", children: [
-    /* @__PURE__ */ t(ie, { active: !0, children: /* @__PURE__ */ y(
+    /* @__PURE__ */ t(ce, { active: !0, children: /* @__PURE__ */ y(
       z,
       {
         my: "sm",
@@ -125,9 +126,9 @@ const he = [
         h: 38,
         children: [
           /* @__PURE__ */ t(
-            ce,
+            se,
             {
-              leftSection: /* @__PURE__ */ t(c, { size: 16, icon: U }),
+              leftSection: /* @__PURE__ */ t(c, { size: 16, icon: V }),
               value: S,
               placeholder: `${u?.search}...`,
               "data-autofocus": !0,
@@ -137,26 +138,26 @@ const he = [
                   borderRadius: "var(--mantine-radius-default)"
                 }
               },
-              w: 320,
-              onChange: H,
+              w: w ? 320 : "100%",
+              onChange: $,
               radius: "var(--mantine-radius-default)"
             }
           ),
-          /* @__PURE__ */ t(se, { withArrow: !0, label: u?.random || G("random"), children: /* @__PURE__ */ t(
-            A,
+          w && /* @__PURE__ */ t(ae, { withArrow: !0, label: u?.random || Y("random"), children: /* @__PURE__ */ t(
+            F,
             {
               h: 36,
               w: 36,
               variant: "outline",
               color: "var(--mantine-color-default-border)",
-              onClick: () => fe(P, C),
+              onClick: () => ue(Q, C),
               className: T.randomIcon,
               children: /* @__PURE__ */ t(
                 c,
                 {
                   color: "var(--mantine-color-default-color)",
                   size: 20,
-                  icon: V
+                  icon: W
                 }
               )
             }
@@ -174,10 +175,10 @@ const he = [
           overflowY: "auto"
         },
         ref: I,
-        onScroll: $,
-        children: S ? /* @__PURE__ */ y(v, { flex: 1, align: "stretch", children: [
-          !J && /* @__PURE__ */ t(
-            F,
+        onScroll: J,
+        children: S ? /* @__PURE__ */ y(v, { flex: 1, align: "stretch", gap: 0, children: [
+          !K && /* @__PURE__ */ t(
+            q,
             {
               py: 6,
               px: 6,
@@ -185,20 +186,20 @@ const he = [
               top: -1,
               style: { zIndex: 1 },
               bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
-              children: /* @__PURE__ */ t(q, { fz: "sm", c: "dimmed", children: u?.searchResults })
+              children: /* @__PURE__ */ t(N, { fz: "xs", fw: 500, lh: "140%", c: "dimmed", children: u?.searchResults })
             }
           ),
-          E.length ? /* @__PURE__ */ t(N, { cols: 10, spacing: 0, children: E.map((e) => /* @__PURE__ */ t(
+          j.length ? /* @__PURE__ */ t(M, { cols: 10, spacing: 0, children: j.map((e) => /* @__PURE__ */ t(
             "div",
             {
               className: T.item,
               "data-icon": e,
-              onClick: D,
+              onClick: R,
               children: e
             },
             e
           )) }) : /* @__PURE__ */ t(z, { flex: 1, justify: "center", align: "stretch", children: /* @__PURE__ */ t(
-            ue,
+            de,
             {
               size: 100,
               description: u?.searchNoResults,
@@ -207,7 +208,7 @@ const he = [
               }
             }
           ) })
-        ] }) : Q.map((e) => /* @__PURE__ */ y(
+        ] }) : O.map((e) => /* @__PURE__ */ y(
           "div",
           {
             ref: (o) => {
@@ -215,24 +216,24 @@ const he = [
             },
             children: [
               /* @__PURE__ */ t(
-                F,
+                q,
                 {
-                  bg: "transparent",
+                  bg: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
                   py: 2,
                   px: 6,
                   pos: "sticky",
                   top: -1,
                   h: 23,
                   style: { zIndex: 1 },
-                  children: /* @__PURE__ */ t(q, { fz: "xs", c: "dimmed", children: u?.emojiCategory?.[e.i] })
+                  children: /* @__PURE__ */ t(N, { fz: "xs", fw: 500, lh: "140%", c: "dimmed", children: u?.emojiCategory?.[e.i] })
                 }
               ),
-              /* @__PURE__ */ t(N, { cols: 10, spacing: 0, children: e.e.map((o) => /* @__PURE__ */ t(
+              /* @__PURE__ */ t(M, { cols: 10, spacing: 0, children: e.e.map((o) => /* @__PURE__ */ t(
                 "div",
                 {
                   className: T.item,
                   "data-icon": o.e,
-                  onClick: D,
+                  onClick: R,
                   children: o.e
                 },
                 o.e
@@ -252,14 +253,14 @@ const he = [
         justify: "space-between",
         h: "56px",
         px: 8,
-        children: he.map((e) => /* @__PURE__ */ t(
-          A,
+        children: ge.map((e) => /* @__PURE__ */ t(
+          F,
           {
             variant: b === e.i ? "light" : "subtle",
             color: b === e.i ? "var(--mantine-color-default-color)" : "var(--mantine-color-dimmed)",
             radius: "default",
             size: 32,
-            onClick: () => Y(e),
+            onClick: () => B(e),
             "data-active": b === e.i,
             children: e.icon
           },
@@ -270,5 +271,5 @@ const he = [
   ] });
 };
 export {
-  Re as EmojiPanel
+  Ae as EmojiPanel
 };

package/dist/components/EmojiPicker/EmojiPicker.d.ts

@@ -12,6 +12,14 @@ export type EmojiPickerProps = {
     showIcons?: boolean;
     showColors?: boolean;
     showEmojis?: boolean;
+    showGifs?: boolean;
+    /**
+     * Called when a GIF is picked from the GIF tab. Receives the GIF's URL.
+     * Distinct from {@link onChange} because hosts treat a GIF differently from
+     * an emoji/icon — chat composers send it as a message rather than inserting
+     * it into the text.
+     */
+    onSelectGif?: (url: string) => void;
     querySearch?: string;
     defaultActiveTab?: string | null;
     /** Controls how the popover opens. 'click' preserves current behavior; 'realtime' opens only when typing matches triggerRegex. */
@@ -22,6 +30,12 @@ export type EmojiPickerProps = {
     typingSeq?: number;
     /** If true, clicking the random icon button will not close the popover. Default: false */
     keepOpenOnRandom?: boolean;
+    /**
+     * Show the "Random" (shuffle) button next to the search field. Default: true.
+     * Connect chat composer + message reactions pass false — a random emoji is
+     * meaningless there.
+     */
+    showRandomButton?: boolean;
     /**
      * If false, picking an emoji does NOT close the popover — useful for chat
      * composers where users typically want to insert several emoji at once.
@@ -39,7 +53,8 @@ export type EmojiPickerLocales = {
     remove?: string;
     random?: string;
     icons?: string;
+    gifs?: string;
     emojiCategory?: Record<string, string>;
 };
-export declare const EmojiPicker: ({ project, value, querySearch, children, onChange, position, popoverProps, showIcons, showColors, defaultActiveTab, showEmojis, withinPortal, locales: _locales, openWhen, triggerRegex, typingSeq, showRemoveButton, keepOpenOnRandom, closeOnSelect, }: PropsWithChildren<EmojiPickerProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const EmojiPicker: ({ project, value, querySearch, children, onChange, position, popoverProps, showIcons, showColors, showGifs, onSelectGif, defaultActiveTab, showEmojis, withinPortal, locales: _locales, openWhen, triggerRegex, typingSeq, showRemoveButton, keepOpenOnRandom, showRandomButton, closeOnSelect, }: PropsWithChildren<EmojiPickerProps>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=EmojiPicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAIL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,eAAe,CAAC;AAQvB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,kIAAkI;IAClI,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gHAAgH;IAChH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,0PAoBzB,iBAAiB,CAAC,gBAAgB,CAAC,4CAiNrC,CAAC"}
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/components/EmojiPicker/EmojiPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgC,MAAM,OAAO,CAAC;AAGxE,OAAO,EAIL,gBAAgB,EAEhB,YAAY,EAEb,MAAM,eAAe,CAAC;AAWvB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,kIAAkI;IAClI,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gHAAgH;IAChH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0FAA0F;IAC1F,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,mSAuBzB,iBAAiB,CAAC,gBAAgB,CAAC,4CA2PrC,CAAC"}